Skip to content

Commit 8f87362

Browse files
mikepbmikepb
committed
Update Webpack and CSS handling in preparation for upgrading to React 0.14.
1 parent ff37e48 commit 8f87362

File tree

5 files changed

+85
-72
lines changed

5 files changed

+85
-72
lines changed

‎example/index.html

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@
5454
</style>
5555
</head>
5656
<body>
57-
<script src="https://fb.me/react-with-addons-0.12.2.js"></script>
58-
<script src="https://fb.me/JSXTransformer-0.12.2.js"></script>
57+
<div id="root"></div>
58+
<script src="../node_modules/react/dist/react-with-addons.js"></script>
59+
<script src="../node_modules/react/dist/react-dom.js"></script>
5960
<script src="../dist/react-draggable.js"></script>
60-
<script type="text/jsx">
61-
/** @jsx React.DOM */
61+
<script>
6262
var Draggable = ReactDraggable;
6363
var App = React.createClass({
6464
getInitialState: function () {
@@ -77,57 +77,59 @@
7777

7878
render: function () {
7979
return (
80-
<div className="bounding-box">
81-
<h1>React Draggable</h1>
82-
<p>
83-
<a href="https://github.com/mzabriskie/react-draggable/blob/master/example/index.html">Demo Source</a>
84-
</p>
85-
<Draggable zIndex={100}>
86-
<div className="box">I can be dragged anywhere</div>
87-
</Draggable>
88-
<Draggable axis="x" zIndex={100}>
89-
<div className="box cursor-x">I can only be dragged horizonally</div>
90-
</Draggable>
91-
<Draggable axis="y" zIndex={100}>
92-
<div className="box cursor-y">I can only be dragged vertically</div>
93-
</Draggable>
94-
<Draggable onDrag={this.handleDrag} zIndex={100}>
95-
<div className="box">
96-
<div>I track my position</div>
97-
<div>top: {this.state.position.top}, left: {this.state.position.left}</div>
98-
</div>
99-
</Draggable>
100-
<Draggable handle="strong" zIndex={100}>
101-
<div className="box no-cursor">
102-
<strong className="cursor">Drag here</strong>
103-
<div>You must click my handle to drag me</div>
104-
</div>
105-
</Draggable>
106-
<Draggable cancel="strong" zIndex={100}>
107-
<div className="box">
108-
<strong className="no-cursor">Can&apos;t drag here</strong>
109-
<div>Dragging here works</div>
110-
</div>
111-
</Draggable>
112-
<Draggable constrain={constrain(25)}>
113-
<div className="box">I snap to a 25 x 25 grid</div>
114-
</Draggable>
115-
<Draggable constrain={constrain(50)}>
116-
<div className="box">I snap to a 50 x 50 grid</div>
117-
</Draggable>
118-
<Draggable grid={[25,25]}>
119-
<div className="box">I snap to a 25 x 25 grid (using deprecated grid API)</div>
120-
</Draggable>
121-
<Draggable grid={[50,50]}>
122-
<div className="box">I snap to a 50 x 50 grid (using deprecated grid API)</div>
123-
</Draggable>
124-
<Draggable bound="true">
125-
<div className="box">I am bound to this box</div>
126-
</Draggable>
127-
<Draggable bound="all point">
128-
<div className="box">I am bound to this box by my top left corner</div>
129-
</Draggable>
130-
</div>
80+
React.DOM.div({className: "bounding-box"},
81+
React.DOM.h1({}, "React Draggable"),
82+
React.DOM.p({},
83+
React.DOM.a(
84+
{href: "https://github.com/mikepb/react-draggable/blob/master/example/index.html"},
85+
"Demo Source")
86+
),
87+
React.createElement(Draggable, {zIndex: 100},
88+
React.DOM.div({className: "box"}, "I can be dragged anywhere")
89+
),
90+
React.createElement(Draggable, {axis: "x", zIndex: 100},
91+
React.DOM.div({className: "box cursor-x"}, "I can only be dragged horizonally")
92+
),
93+
React.createElement(Draggable, {axis: "y", zIndex: 100},
94+
React.DOM.div({className: "box cursor-y"}, "I can only be dragged vertically")
95+
),
96+
React.createElement(Draggable, {onDrag: this.handleDrag, zIndex: 100},
97+
React.DOM.div({className: "box"},
98+
React.DOM.div({}, "I track my position"),
99+
React.DOM.div({}, "top: {this.state.position.top}, left: {this.state.position.left}")
100+
)
101+
),
102+
React.createElement(Draggable, {handle: "strong", zIndex: 100},
103+
React.DOM.div({className: "box no-cursor"},
104+
React.DOM.strong({className: "cursor"}, "Drag here"),
105+
React.DOM.div({}, "You must click my handle to drag me")
106+
)
107+
),
108+
React.createElement(Draggable, {cancel: "strong", zIndex: 100},
109+
React.DOM.div({className: "box"},
110+
React.DOM.strong({className: "no-cursor"}, "Can't drag here"),
111+
React.DOM.div({}, "Dragging here works")
112+
)
113+
),
114+
React.createElement(Draggable, {constrain: constrain(25)},
115+
React.DOM.div({className: "box"}, "I snap to a 25 x 25 grid")
116+
),
117+
React.createElement(Draggable, {constrain: constrain(50)},
118+
React.DOM.div({className: "box"}, "I snap to a 50 x 50 grid")
119+
),
120+
React.createElement(Draggable, {grid: [25, 25]},
121+
React.DOM.div({className: "box"}, "I snap to a 25 x 25 grid (using deprecated grid API)")
122+
),
123+
React.createElement(Draggable, {grid: [50, 50]},
124+
React.DOM.div({className: "box"}, "I snap to a 50 x 50 grid (using deprecated grid API)")
125+
),
126+
React.createElement(Draggable, {bound: "true"},
127+
React.DOM.div({className: "box"}, "I am bound to this box")
128+
),
129+
React.createElement(Draggable, {bound: "all point"},
130+
React.DOM.div({className: "box"}, "I am bound to this box by my top left corner")
131+
)
132+
)
131133
);
132134
}
133135
});
@@ -148,7 +150,7 @@ <h1>React Draggable</h1>
148150
};
149151
}
150152

151-
React.renderComponent(<App/>, document.body);
153+
ReactDOM.render(React.createElement(App), document.getElementById("root"));
152154
</script>
153155
</body>
154156
</html>

‎lib/draggable.js

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ var React = require('react');
44
var ReactDOM = require('react-dom');
55
var PureRenderMixin = require('react-addons-pure-render-mixin');
66

7+
var assign = require('object-assign');
8+
var cx = require('classnames')
9+
710
var emptyFunction = function () {};
811

912
function updateBoundState (state, bound) {
@@ -527,7 +530,10 @@ module.exports = React.createClass({
527530
addEvent(bodyElement, dragEventsFor[device].end, this._dragHandlers[device].end);
528531

529532
// Add dragging class to body element
530-
if (bodyElement) bodyElement.className += ' react-draggable-dragging';
533+
if (bodyElement) {
534+
bodyElement.className =
535+
cx(bodyElement.className, 'react-draggable-dragging');
536+
}
531537
},
532538

533539
handleDragEnd: function (e, device) {
@@ -556,9 +562,9 @@ module.exports = React.createClass({
556562

557563
// Remove dragging class from body element
558564
if (bodyElement) {
559-
var className = bodyElement.className;
560-
bodyElement.className =
561-
className.replace(/(?:^|\s+)react-draggable-dragging\b/, ' ');
565+
bodyElement.className = cx(bodyElement.className, {
566+
'react-draggable-dragging': false
567+
});
562568
}
563569
},
564570

@@ -698,8 +704,15 @@ module.exports = React.createClass({
698704

699705
// Reuse the child provided
700706
// This makes it flexible to use whatever element is wanted (div, ul, etc)
707+
var child;
701708
if (this.props.useChild) {
702-
return React.cloneElement(React.Children.only(this.props.children), props);
709+
child = React.Children.only(this.props.children);
710+
711+
// Manually merge class names and styles for React 0.13+
712+
props.className = cx(child.props.className, props.className);
713+
assign(props.style, child.props.style);
714+
715+
return React.cloneElement(child, props);
703716
}
704717

705718
return React.DOM.div(props, this.props.children);

‎lib/styles.css

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
.react-draggable strong, .react-draggable-dragging strong {
1+
.react-draggable strong,
2+
.react-draggable-dragging,
3+
.react-draggable-dragging strong {
24
-webkit-user-select: none;
35
-moz-user-select: none;
46
-ms-user-select: none;
@@ -9,11 +11,3 @@
911
.react-draggable {
1012
position: relative;
1113
}
12-
13-
.react-draggable-dragging {
14-
-webkit-user-select: none;
15-
-moz-user-select: none;
16-
-ms-user-select: none;
17-
-o-user-select: none;
18-
user-select: none;
19-
}

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-draggable2",
3-
"version": "0.6.0",
3+
"version": "0.7.0-alpha1",
44
"description": "React draggable component",
55
"main": "lib/draggable.js",
66
"scripts": {
@@ -30,6 +30,7 @@
3030
"homepage": "https://github.com/mikepb/react-draggable",
3131
"devDependencies": {
3232
"jasmine": "^2.3.2",
33+
"jasmine-core": "^2.3.4",
3334
"jsx-loader": "*",
3435
"karma": "^0.13.3",
3536
"karma-chrome-launcher": "^0.2.0",
@@ -43,6 +44,8 @@
4344
"webpack": "^1.12.2"
4445
},
4546
"dependencies": {
47+
"classnames": "^2.1.5",
48+
"object-assign": "^4.0.1",
4649
"react-addons-pure-render-mixin": "^0.14.0-rc1",
4750
"react-addons-test-utils": "^0.14.0-rc1"
4851
}

‎webpack.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ module.exports = {
1010
libraryTarget: "umd"
1111
},
1212
externals: {
13-
"react/addons": "React"
13+
"react": "React",
14+
"react-dom": "ReactDOM"
1415
},
1516
devtool: "source-map"
1617
};

0 commit comments

Comments
 (0)