@@ -6,31 +6,11 @@ We're now on version 2.0! A major API overhaul with typescript types.
6
6
7
7
Consider trying it out if you had any troubles earlier.
8
8
9
- ## Things still to do.
10
-
11
- We've released version 2.0 but there are still some things to do. We needed public feedback and a major release was the easiest way to get it.
12
-
13
- - [x] Create examples from [ SortableJS Examples] ( https://sortablejs.github.io/Sortable/ )
14
- - [ ] Examples with code underneath.
15
- - [ ] List Props in readme.
16
- - [ ] Allow React to manage class names. Halfway there.
17
- - [x] Write docs for plugins
18
- - [ ] Create all tests for examples (for 'ron). Started
19
- - [ ] Test the following UI component libraries:
20
- - [x] Styled Components
21
- - [ ] AntD
22
- - [ ] MaterialUI
23
- - [ ] React Bootstrap
24
- - [ ] React Grommet
25
- - [ ] React Toolbox
26
- - [ ] Your suggestion? :)
27
-
28
-
29
9
## Table of Contents
10
+
30
11
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
31
12
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
32
13
33
-
34
14
- [ Features] ( #features )
35
15
- [ SortableJS] ( #sortablejs )
36
16
- [ Component Specific] ( #component-specific )
@@ -111,15 +91,15 @@ interface ItemType {
111
91
name: string ;
112
92
}
113
93
114
- export const BasicFunction: FC = props => {
94
+ export const BasicFunction: FC = ( props ) => {
115
95
const [state, setState] = useState <ItemType []>([
116
96
{ id: 1 , name: " shrek" },
117
- { id: 2 , name: " fiona" }
97
+ { id: 2 , name: " fiona" },
118
98
]);
119
99
120
100
return (
121
101
<ReactSortable list = { state } setList = { setState } >
122
- { state .map (item => (
102
+ { state .map (( item ) => (
123
103
<div key = { item .id } >{ item .name } </div >
124
104
))}
125
105
</ReactSortable >
@@ -139,15 +119,15 @@ interface BasicClassState {
139
119
140
120
export class BasicClass extends Component <{}, BasicClassState > {
141
121
state: BasicClassState = {
142
- list: [{ id: " 1" , name: " shrek" }]
122
+ list: [{ id: " 1" , name: " shrek" }],
143
123
};
144
124
render() {
145
125
return (
146
126
<ReactSortable
147
127
list = { this .state .list }
148
- setList = { newState => this .setState ({ list: newState })}
128
+ setList = { ( newState ) => this .setState ({ list: newState })}
149
129
>
150
- { this .state .list .map (item => (
130
+ { this .state .list .map (( item ) => (
151
131
<div key = { item .id } >{ item .name } </div >
152
132
))}
153
133
</ReactSortable >
@@ -178,7 +158,7 @@ Sortable.mount(new MultiDrag(), new Swap());
178
158
const App = () => {
179
159
const [state, setState] = useState ([
180
160
{ id: 1 , name: " shrek" },
181
- { id: 2 , name: " fiona" }
161
+ { id: 2 , name: " fiona" },
182
162
]);
183
163
184
164
return (
@@ -187,7 +167,7 @@ const App = () => {
187
167
// OR
188
168
swap // enables swap
189
169
>
190
- { state .map (item => (
170
+ { state .map (( item ) => (
191
171
<div key = { item .id } >{ item .name } </div >
192
172
))}
193
173
</ReactSortable >
@@ -206,7 +186,7 @@ Sortable.create(element, {
206
186
group: " groupName" ,
207
187
animation: 200 ,
208
188
delayOnTouchStart: true ,
209
- delay: 2
189
+ delay: 2 ,
210
190
});
211
191
212
192
// --------------------------
@@ -219,7 +199,7 @@ import { ReactSortable } from "react-sortablejs";
219
199
const App = () => {
220
200
const [state, setState] = useState ([
221
201
{ id: 1 , name: " shrek" },
222
- { id: 2 , name: " fiona" }
202
+ { id: 2 , name: " fiona" },
223
203
]);
224
204
225
205
return (
@@ -230,7 +210,7 @@ const App = () => {
230
210
delayOnTouchStart = { true }
231
211
delay = { 2 }
232
212
>
233
- { state .map (item => (
213
+ { state .map (( item ) => (
234
214
<div key = { item .id } >{ item .name } </div >
235
215
))}
236
216
</ReactSortable >
@@ -290,12 +270,12 @@ Just add the string and ReactSortable will use a `li` instead of a `div`.
290
270
import React , { FC , useState } from " react" ;
291
271
import { ReactSortable } from " react-sortablejs" ;
292
272
293
- export const BasicFunction: FC = props => {
273
+ export const BasicFunction: FC = ( props ) => {
294
274
const [state, setState] = useState ([{ id: " 1" , name: " shrek" }]);
295
275
296
276
return (
297
277
<ReactSortable tag = " ul" list = { state } setList = { setState } >
298
- { state .map (item => (
278
+ { state .map (( item ) => (
299
279
<li key = { item .id } >{ item .name } </li >
300
280
))}
301
281
</ReactSortable >
@@ -322,15 +302,15 @@ const CustomComponent = forwardRef<HTMLDivElement, any>((props, ref) => {
322
302
return <div ref = { ref } >{ props .children } </div >;
323
303
});
324
304
325
- export const BasicFunction: FC = props => {
305
+ export const BasicFunction: FC = ( props ) => {
326
306
const [state, setState] = useState ([
327
307
{ id: 1 , name: " shrek" },
328
- { id: 2 , name: " fiona" }
308
+ { id: 2 , name: " fiona" },
329
309
]);
330
310
331
311
return (
332
312
<ReactSortable tag = { CustomComponent } list = { state } setList = { setState } >
333
- { state .map (item => (
313
+ { state .map (( item ) => (
334
314
<div key = { item .id } >{ item .name } </div >
335
315
))}
336
316
</ReactSortable >
0 commit comments