6
6
createElement ,
7
7
createRef ,
8
8
ReactElement ,
9
- RefObject
9
+ RefObject ,
10
10
} from "react" ;
11
11
import Sortable , { MoveEvent , Options , SortableEvent } from "sortablejs" ;
12
12
import invariant from "tiny-invariant" ;
@@ -16,7 +16,7 @@ import {
16
16
ItemInterface ,
17
17
ReactSortableProps ,
18
18
Store ,
19
- UnHandledMethodNames
19
+ UnHandledMethodNames ,
20
20
} from "./types" ;
21
21
import {
22
22
createCustoms ,
@@ -27,8 +27,9 @@ import {
27
27
handleStateRemove ,
28
28
insertNodes ,
29
29
removeNode ,
30
- removeNodes
30
+ removeNodes ,
31
31
} from "./util" ;
32
+
32
33
/** Holds a global reference for which react element is being dragged */
33
34
// @todo - use context to manage this. How does one use 2 different providers?
34
35
const store : Store = { dragging : null } ;
@@ -37,7 +38,7 @@ export class ReactSortable<T extends ItemInterface> extends Component<
37
38
ReactSortableProps < T >
38
39
> {
39
40
static defaultProps : Partial < ReactSortableProps < any > > = {
40
- clone : item => item
41
+ clone : ( item ) => item ,
41
42
} ;
42
43
43
44
private ref : RefObject < HTMLElement > ;
@@ -47,10 +48,10 @@ export class ReactSortable<T extends ItemInterface> extends Component<
47
48
this . ref = createRef < HTMLElement > ( ) ;
48
49
49
50
// make all state false because we can't change sortable unless a mouse gesture is made.
50
- const newList = props . list . map ( item => ( {
51
+ const newList = props . list . map ( ( item ) => ( {
51
52
...item ,
52
53
chosen : false ,
53
- selected : false
54
+ selected : false ,
54
55
} ) ) ;
55
56
56
57
props . setList ( newList , this . sortable , store ) ;
@@ -81,7 +82,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
81
82
{
82
83
// @todo - find a way (perhaps with the callback) to allow AntD components to work
83
84
ref : this . ref ,
84
- ...classicProps
85
+ ...classicProps ,
85
86
} ,
86
87
this . getChildren ( )
87
88
) ;
@@ -98,27 +99,25 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
98
99
ghostClass = "sortable-ghost" ,
99
100
swapClass = "sortable-swap-highlight" ,
100
101
filter = "sortable-filter" ,
101
- list
102
+ list,
102
103
} = this . props ;
103
104
104
105
// if no children, don't do anything.
105
106
if ( ! children || children == null ) return null ;
106
107
const dataid = dataIdAttr || "data-id" ;
107
108
return Children . map ( children as ReactElement < any > [ ] , ( child , index ) => {
108
109
const item = list [ index ] ;
109
- const {
110
- className : prevClassName ,
111
- } = child . props ;
110
+ const { className : prevClassName } = child . props ;
112
111
113
112
// @todo - handle the function if avalable. I don't think anyone will be doing this soon.
114
113
const filtered = typeof filter === "string" && {
115
- [ filter . replace ( "." , "" ) ] : ! ! item . filtered
114
+ [ filter . replace ( "." , "" ) ] : ! ! item . filtered ,
116
115
} ;
117
116
118
117
const className = classNames ( prevClassName , {
119
118
[ selectedClass ] : item . selected ,
120
119
[ chosenClass ] : item . chosen ,
121
- ...filtered
120
+ ...filtered ,
122
121
// [dragClass]: true,
123
122
// [fallbackClass]: true,
124
123
// [ghostClass]: true,
@@ -127,7 +126,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
127
126
128
127
return cloneElement ( child , {
129
128
[ dataid ] : child . key ,
130
- className
129
+ className,
131
130
} ) ;
132
131
} ) ;
133
132
}
@@ -136,7 +135,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
136
135
private get sortable ( ) : Sortable | null {
137
136
const el = this . ref . current ;
138
137
if ( el === null ) return null ;
139
- const key = Object . keys ( el ) . find ( k => k . includes ( "Sortable" ) ) ;
138
+ const key = Object . keys ( el ) . find ( ( k ) => k . includes ( "Sortable" ) ) ;
140
139
if ( ! key ) return null ;
141
140
//@ts -ignore - I know what I'm doing.
142
141
return el [ key ] as Sortable ;
@@ -154,35 +153,35 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
154
153
"onSpill" ,
155
154
"onStart" ,
156
155
"onUnchoose" ,
157
- "onUpdate"
156
+ "onUpdate" ,
158
157
] ;
159
158
const NonDOMHandlers : UnHandledMethodNames [ ] = [
160
159
"onChange" ,
161
160
"onClone" ,
162
161
"onFilter" ,
163
- "onSort"
162
+ "onSort" ,
164
163
] ;
165
164
const newOptions : Options = destructurePropsForOptions ( this . props ) ;
166
165
DOMHandlers . forEach (
167
- name => ( newOptions [ name ] = this . prepareOnHandlerPropAndDOM ( name ) )
166
+ ( name ) => ( newOptions [ name ] = this . prepareOnHandlerPropAndDOM ( name ) )
168
167
) ;
169
168
NonDOMHandlers . forEach (
170
- name => ( newOptions [ name ] = this . prepareOnHandlerProp ( name ) )
169
+ ( name ) => ( newOptions [ name ] = this . prepareOnHandlerProp ( name ) )
171
170
) ;
172
171
173
172
/** onMove has 2 arguments and needs to be handled seperately. */
174
173
const onMove = ( evt : MoveEvent , originalEvt : Event ) => {
175
174
const { onMove } = this . props ;
176
175
const defaultValue = evt . willInsertAfter || - 1 ;
177
176
if ( ! onMove ) return defaultValue ;
178
- const result = onMove ( evt , originalEvt , this . sortable , store ) ;
179
- if ( typeof result === ' undefined' ) return false
180
- return result
177
+ const result = onMove ( evt , originalEvt , this . sortable , store ) ;
178
+ if ( typeof result === " undefined" ) return false ;
179
+ return result ;
181
180
} ;
182
181
183
182
return {
184
183
...newOptions ,
185
- onMove
184
+ onMove,
186
185
} ;
187
186
}
188
187
@@ -220,7 +219,10 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
220
219
const otherList = [ ...store . dragging ! . props . list ] ;
221
220
const customs = createCustoms ( evt , otherList ) ;
222
221
removeNodes ( customs ) ;
223
- const newList = handleStateAdd ( customs , list , evt , clone ) . map ( item => ( { ...item , selected : false } ) ) ;
222
+ const newList = handleStateAdd ( customs , list , evt , clone ) . map ( ( item ) => ( {
223
+ ...item ,
224
+ selected : false ,
225
+ } ) ) ;
224
226
setList ( newList , this . sortable , store ) ;
225
227
}
226
228
@@ -242,13 +244,13 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
242
244
case "multidrag" :
243
245
customClones = customs . map ( ( item , index ) => ( {
244
246
...item ,
245
- element : evt . clones [ index ]
247
+ element : evt . clones [ index ] ,
246
248
} ) ) ;
247
249
break ;
248
250
case "normal" :
249
251
customClones = customs . map ( ( item , index ) => ( {
250
252
...item ,
251
- element : evt . clone
253
+ element : evt . clone ,
252
254
} ) ) ;
253
255
break ;
254
256
case "swap" :
@@ -262,15 +264,15 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
262
264
removeNodes ( customClones ) ;
263
265
264
266
// replace selected items with cloned items
265
- customs . forEach ( curr => {
267
+ customs . forEach ( ( curr ) => {
266
268
const index = curr . oldIndex ;
267
269
const newItem = this . props . clone ! ( curr . item , evt ) ;
268
270
newList . splice ( index , 1 , newItem ) ;
269
271
} ) ;
270
272
}
271
273
272
274
// remove item.selected from list
273
- newList = newList . map ( item => ( { ...item , selected : false } ) ) ;
275
+ newList = newList . map ( ( item ) => ( { ...item , selected : false } ) ) ;
274
276
setList ( newList , this . sortable , store ) ;
275
277
}
276
278
@@ -298,7 +300,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
298
300
return {
299
301
...item ,
300
302
chosen : true ,
301
- }
303
+ } ;
302
304
}
303
305
return item ;
304
306
} ) ;
@@ -312,7 +314,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
312
314
return {
313
315
...item ,
314
316
chosen : false ,
315
- }
317
+ } ;
316
318
}
317
319
return item ;
318
320
} ) ;
@@ -326,15 +328,15 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
326
328
327
329
onSelect ( evt : MultiDragEvent ) {
328
330
const { list, setList } = this . props ;
329
- const newList = list . map ( item => ( { ...item , selected : false } ) ) ;
330
- evt . newIndicies . forEach ( curr => {
331
+ const newList = list . map ( ( item ) => ( { ...item , selected : false } ) ) ;
332
+ evt . newIndicies . forEach ( ( curr ) => {
331
333
const index = curr . index ;
332
334
if ( index === - 1 ) {
333
335
console . log (
334
336
`"${ evt . type } " had indice of "${ curr . index } ", which is probably -1 and doesn't usually happen here.`
335
337
) ;
336
- console . log ( evt )
337
- return
338
+ console . log ( evt ) ;
339
+ return ;
338
340
}
339
341
newList [ index ] . selected = true ;
340
342
} ) ;
@@ -343,8 +345,8 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
343
345
344
346
onDeselect ( evt : MultiDragEvent ) {
345
347
const { list, setList } = this . props ;
346
- const newList = list . map ( item => ( { ...item , selected : false } ) ) ;
347
- evt . newIndicies . forEach ( curr => {
348
+ const newList = list . map ( ( item ) => ( { ...item , selected : false } ) ) ;
349
+ evt . newIndicies . forEach ( ( curr ) => {
348
350
const index = curr . index ;
349
351
if ( index === - 1 ) return ;
350
352
newList [ index ] . selected = true ;
0 commit comments