Skip to content

Commit cd5f209

Browse files
STRMLSTRML
committed
Refactor a bit with static props
1 parent 974a896 commit cd5f209

File tree

4 files changed

+272
-278
lines changed

4 files changed

+272
-278
lines changed

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
stage: 0
3+
}

‎lib/Draggable.es6‎

Lines changed: 137 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,143 @@ import log from './utils/log';
1313

1414
export default class Draggable extends DraggableCore {
1515

16+
static propTypes = assign({}, DraggableCore.propTypes, {
17+
/**
18+
* `axis` determines which axis the draggable can move.
19+
*
20+
* 'both' allows movement horizontally and vertically.
21+
* 'x' limits movement to horizontal axis.
22+
* 'y' limits movement to vertical axis.
23+
*
24+
* Defaults to 'both'.
25+
*/
26+
axis: React.PropTypes.oneOf(['both', 'x', 'y']),
27+
28+
/**
29+
* `bounds` determines the range of movement available to the element.
30+
* Available values are:
31+
*
32+
* 'parent' restricts movement within the Draggable's parent node.
33+
*
34+
* Alternatively, pass an object with the following properties, all of which are optional:
35+
*
36+
* {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
37+
*
38+
* All values are in px.
39+
*
40+
* Example:
41+
*
42+
* ```jsx
43+
* let App = React.createClass({
44+
* render: function () {
45+
* return (
46+
* <Draggable bounds={{right: 300, bottom: 300}}>
47+
* <div>Content</div>
48+
* </Draggable>
49+
* );
50+
* }
51+
* });
52+
* ```
53+
*/
54+
bounds: React.PropTypes.oneOfType([
55+
React.PropTypes.shape({
56+
left: React.PropTypes.Number,
57+
right: React.PropTypes.Number,
58+
top: React.PropTypes.Number,
59+
bottom: React.PropTypes.Number
60+
}),
61+
React.PropTypes.oneOf(['parent', false])
62+
]),
63+
64+
/**
65+
* `disabled`, if true, stops the <Draggable> from dragging. It will stay where it is.
66+
*
67+
* Example:
68+
*
69+
* ```jsx
70+
* let App = React.createClass({
71+
* render: function () {
72+
* return (
73+
* <Draggable disabled={true}>
74+
* <div>I can't be dragged</div>
75+
* </Draggable>
76+
* );
77+
* }
78+
* });
79+
* ```
80+
*/
81+
disabled: React.PropTypes.bool,
82+
83+
/**
84+
* `grid` specifies the x and y that dragging should snap to.
85+
*
86+
* Example:
87+
*
88+
* ```jsx
89+
* let App = React.createClass({
90+
* render: function () {
91+
* return (
92+
* <Draggable grid={[25, 25]}>
93+
* <div>I snap to a 25 x 25 grid</div>
94+
* </Draggable>
95+
* );
96+
* }
97+
* });
98+
* ```
99+
*/
100+
grid: React.PropTypes.arrayOf(React.PropTypes.number),
101+
102+
/**
103+
* `start` specifies the x and y that the dragged item should start at
104+
*
105+
* Example:
106+
*
107+
* ```jsx
108+
* let App = React.createClass({
109+
* render: function () {
110+
* return (
111+
* <Draggable start={{x: 25, y: 25}}>
112+
* <div>I start with transformX: 25px and transformY: 25px;</div>
113+
* </Draggable>
114+
* );
115+
* }
116+
* });
117+
* ```
118+
*/
119+
start: React.PropTypes.shape({
120+
x: React.PropTypes.number,
121+
y: React.PropTypes.number
122+
}),
123+
124+
/**
125+
* `zIndex` specifies the zIndex to use while dragging.
126+
*
127+
* Example:
128+
*
129+
* ```jsx
130+
* let App = React.createClass({
131+
* render: function () {
132+
* return (
133+
* <Draggable zIndex={100}>
134+
* <div>I have a zIndex</div>
135+
* </Draggable>
136+
* );
137+
* }
138+
* });
139+
* ```
140+
*/
141+
zIndex: React.PropTypes.number
142+
})
143+
144+
static defaultProps = assign({}, DraggableCore.defaultProps, {
145+
axis: 'both',
146+
bounds: false,
147+
disabled: false,
148+
grid: null,
149+
start: {x: 0, y: 0},
150+
zIndex: NaN
151+
})
152+
16153
constructor(props) {
17154
super(props);
18155
this.state = {
@@ -122,149 +259,3 @@ export default class Draggable extends DraggableCore {
122259
);
123260
}
124261
}
125-
126-
Draggable.propTypes = assign({}, DraggableCore.propTypes, {
127-
/**
128-
* `axis` determines which axis the draggable can move.
129-
*
130-
* 'both' allows movement horizontally and vertically.
131-
* 'x' limits movement to horizontal axis.
132-
* 'y' limits movement to vertical axis.
133-
*
134-
* Defaults to 'both'.
135-
*/
136-
axis: React.PropTypes.oneOf(['both', 'x', 'y']),
137-
138-
/**
139-
* `bounds` determines the range of movement available to the element.
140-
* Available values are:
141-
*
142-
* 'parent' restricts movement within the Draggable's parent node.
143-
*
144-
* Alternatively, pass an object with the following properties, all of which are optional:
145-
*
146-
* {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
147-
*
148-
* All values are in px.
149-
*
150-
* Example:
151-
*
152-
* ```jsx
153-
* let App = React.createClass({
154-
* render: function () {
155-
* return (
156-
* <Draggable bounds={{right: 300, bottom: 300}}>
157-
* <div>Content</div>
158-
* </Draggable>
159-
* );
160-
* }
161-
* });
162-
* ```
163-
*/
164-
bounds: React.PropTypes.oneOfType([
165-
React.PropTypes.shape({
166-
left: React.PropTypes.Number,
167-
right: React.PropTypes.Number,
168-
top: React.PropTypes.Number,
169-
bottom: React.PropTypes.Number
170-
}),
171-
React.PropTypes.oneOf(['parent', false])
172-
]),
173-
174-
/**
175-
* `disabled`, if true, stops the <Draggable> from dragging. It will stay where it is.
176-
*
177-
* Example:
178-
*
179-
* ```jsx
180-
* let App = React.createClass({
181-
* render: function () {
182-
* return (
183-
* <Draggable disabled={true}>
184-
* <div>I can't be dragged</div>
185-
* </Draggable>
186-
* );
187-
* }
188-
* });
189-
* ```
190-
*/
191-
disabled: React.PropTypes.bool,
192-
193-
/**
194-
* `grid` specifies the x and y that dragging should snap to.
195-
*
196-
* Example:
197-
*
198-
* ```jsx
199-
* let App = React.createClass({
200-
* render: function () {
201-
* return (
202-
* <Draggable grid={[25, 25]}>
203-
* <div>I snap to a 25 x 25 grid</div>
204-
* </Draggable>
205-
* );
206-
* }
207-
* });
208-
* ```
209-
*/
210-
grid: React.PropTypes.arrayOf(React.PropTypes.number),
211-
212-
/**
213-
* `start` specifies the x and y that the dragged item should start at
214-
*
215-
* Example:
216-
*
217-
* ```jsx
218-
* let App = React.createClass({
219-
* render: function () {
220-
* return (
221-
* <Draggable start={{x: 25, y: 25}}>
222-
* <div>I start with transformX: 25px and transformY: 25px;</div>
223-
* </Draggable>
224-
* );
225-
* }
226-
* });
227-
* ```
228-
*/
229-
start: React.PropTypes.shape({
230-
x: React.PropTypes.number,
231-
y: React.PropTypes.number
232-
}),
233-
234-
/**
235-
* `zIndex` specifies the zIndex to use while dragging.
236-
*
237-
* Example:
238-
*
239-
* ```jsx
240-
* let App = React.createClass({
241-
* render: function () {
242-
* return (
243-
* <Draggable zIndex={100}>
244-
* <div>I have a zIndex</div>
245-
* </Draggable>
246-
* );
247-
* }
248-
* });
249-
* ```
250-
*/
251-
zIndex: React.PropTypes.number
252-
});
253-
254-
Draggable.defaultProps = assign({}, DraggableCore.defaultProps, {
255-
axis: 'both',
256-
bounds: false,
257-
disabled: false,
258-
grid: null,
259-
start: {x: 0, y: 0},
260-
zIndex: NaN
261-
});
262-
263-
//
264-
// Helpers.
265-
//
266-
267-
268-
//
269-
// End Helpers.
270-
//

0 commit comments

Comments
 (0)