@@ -70,16 +70,17 @@ See more options at https://github.com/RubaXa/Sortable#options
70
70
71
71
``` js
72
72
import React from ' react' ;
73
- import SortableMixin from ' react-sortablejs' ;
73
+ import Sortable from ' react-sortablejs' ;
74
74
75
- const sortableOptions = {
76
- ref: ' list' ,
77
- model: ' items'
78
- };
79
-
80
- class MySortableComponent extends React .Component {
75
+ class MySortableList extends React .Component {
76
+ static propTypes = {
77
+ items: React .PropTypes .array
78
+ };
79
+ static defaultProps = {
80
+ items: []
81
+ };
81
82
state = {
82
- items: [ 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ]
83
+ items: this . props . items
83
84
};
84
85
85
86
handleStart (evt ) { // Dragging started
@@ -99,61 +100,61 @@ class MySortableComponent extends React.Component {
99
100
handleMove (evt ) { // Event when you move an item in the list or between lists
100
101
}
101
102
render () {
102
- const items = this .state .items .map ((text , index ) => (
103
- < li key= {index}> {text}< / li>
104
- ));
105
-
106
103
return (
107
- < div>
108
- < ul ref= " list" > {items}< / ul>
109
- < / div>
104
+ < ul ref= " list" > {items}< / ul>
110
105
);
111
106
}
112
107
}
113
108
114
- export default SortableMixin (sortableOptions)(MySortableComponent);
109
+ const sortableOptions = {
110
+ ref: ' list' ,
111
+ model: ' items'
112
+ };
113
+ export default Sortable (sortableOptions)(MySortableList);
115
114
```
116
115
117
116
## Examples
118
117
119
- Using the ` group ` option to drag elements from one list into another.
118
+ ### Simple List
120
119
121
120
File: index.jsx
122
121
``` js
123
122
import React from ' react' ;
124
123
import ReactDOM from ' react-dom' ;
125
- import Sortable1 from ' ./sortable1' ;
126
- import Sortable2 from ' ./sortable2' ;
127
-
128
- const SortableList = (props ) => {
129
- return (
130
- < div>
131
- < Sortable1 / >
132
- < hr / >
133
- < Sortable2 / >
134
- < / div>
135
- );
136
- };
124
+ import SimpleList from ' ./simple-list' ;
137
125
138
- ReactDOM .render (< SortableList / > , document .body );
126
+ ReactDOM .render (
127
+ < SimpleList items= {[1 , 2 , 3 , 4 , 5 , 6 ]} / > ,
128
+ document .getElementById (' container' )
129
+ );
139
130
```
140
131
141
- File: sortable1.jsx
142
-
132
+ File: simple-list.jsx
143
133
``` js
144
134
import React from ' react' ;
145
- import SortableMixin from ' react-sortablejs' ;
135
+ import Sortable from ' react-sortablejs' ;
136
+
137
+ const sortableOptions = {
138
+ ref: ' list' ,
139
+ model: ' items'
140
+ };
146
141
147
- class Sortable1 extends React .Component {
142
+ class SimpleList extends React .Component {
143
+ static propTypes = {
144
+ items: React .PropTypes .array
145
+ };
146
+ static defaultProps = {
147
+ items: []
148
+ };
148
149
state = {
149
- items: [ 0 , 1 , 2 , 3 , 4 ]
150
+ items: this . props . items
150
151
};
151
-
152
+
152
153
render () {
153
- let items = this .state .items .map ((text , index ) => {
154
- return < li key= {index}> {text }< / li> ;
155
- } );
156
-
154
+ const items = this .state .items .map ((val , index ) => (
155
+ < li key= {index}> {val }< / li>
156
+ ) );
157
+
157
158
return (
158
159
< div>
159
160
< ul ref= " list" > {items}< / ul>
@@ -162,24 +163,60 @@ class Sortable1 extends React.Component {
162
163
}
163
164
}
164
165
165
- export default SortableMixin ({ group : ' shared ' })(Sortable1 );
166
+ export default Sortable (sortableOptions)(SimpleList );
166
167
```
167
168
168
- File: sortable2.jsx
169
+ ### Shared Group
170
+ Using the ` group ` option to drag elements from one list into another.
171
+
172
+ File: index.jsx
173
+ ``` js
174
+ import React from ' react' ;
175
+ import ReactDOM from ' react-dom' ;
176
+ import SharedGroup from ' ./shared-group' ;
177
+
178
+ const SortableList = (props ) => {
179
+ return (
180
+ < div>
181
+ < SharedGroup
182
+ items= {[' Apple' , ' Banaba' , ' Cherry' , ' Grape' ]}
183
+ / >
184
+ < SharedGroup
185
+ items= {[' Lemon' , ' Orange' , ' Pear' , ' Peach' ]}
186
+ / >
187
+ < / div>
188
+ );
189
+ };
190
+
191
+ ReactDOM .render (< SortableList / > , document .getElementById (' container' ));
192
+ ```
169
193
194
+ File: shared-group.jsx
170
195
``` js
171
196
import React from ' react' ;
172
- import SortableMixin from ' react-sortablejs' ;
197
+ import Sortable from ' react-sortablejs' ;
198
+
199
+ const sortableOptions = {
200
+ ref: ' list' ,
201
+ model: ' items' ,
202
+ group: ' shared'
203
+ };
173
204
174
- class Sortable2 extends React .Component {
205
+ class SharedGroup extends React .Component {
206
+ static propTypes = {
207
+ items: React .PropTypes .array
208
+ };
209
+ static defaultProps = {
210
+ items: []
211
+ };
175
212
state = {
176
- items: [ 5 , 6 , 7 , 8 , 9 ]
213
+ items: this . props . items
177
214
};
178
215
179
216
render () {
180
- let items = this .state .items .map ((text , index ) => {
181
- return < li key= {index}> {text}< / li> ;
182
- } );
217
+ const items = this .state .items .map ((text , index ) => (
218
+ < li key= {index}> {text}< / li>
219
+ ) );
183
220
184
221
return (
185
222
< div>
@@ -189,5 +226,5 @@ class Sortable2 extends React.Component {
189
226
}
190
227
}
191
228
192
- export default SortableMixin ({ group : ' shared ' })(Sortable2 );
229
+ export default Sortable (sortableOptions)(SharedGroup );
193
230
```
0 commit comments