react-virtual-sortable 1.0.3 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -44
- package/dist/virtual-list.js +817 -839
- package/dist/virtual-list.min.js +4 -4
- package/package.json +2 -2
- package/types/index.d.ts +27 -19
package/README.md
CHANGED
|
@@ -28,14 +28,12 @@ function Virtual() {
|
|
|
28
28
|
// use style and className as jsx used
|
|
29
29
|
return (
|
|
30
30
|
<VirtualList
|
|
31
|
-
className="virtual-list"
|
|
32
|
-
style={{ height: '500px' }}
|
|
33
31
|
dataKey="id"
|
|
34
32
|
dataSource={ list }
|
|
35
33
|
handle=".handle"
|
|
36
|
-
header={ <div className="loading">top loading...</div> }
|
|
37
|
-
footer={ <div className="loading">bottom loading...</div> }
|
|
38
34
|
onDrop={ onDrop }
|
|
35
|
+
className="virtual-list"
|
|
36
|
+
style={{ height: '500px' }}
|
|
39
37
|
>
|
|
40
38
|
{
|
|
41
39
|
(record, index, dataKey) => {
|
|
@@ -56,12 +54,13 @@ function Virtual() {
|
|
|
56
54
|
|
|
57
55
|
**Callback**
|
|
58
56
|
|
|
59
|
-
| **Emit**
|
|
60
|
-
|
|
|
61
|
-
| `onTop`
|
|
62
|
-
| `onBottom`
|
|
63
|
-
| `onDrag`
|
|
64
|
-
| `onDrop`
|
|
57
|
+
| **Emit** | **Type** | **Description** |
|
|
58
|
+
| --------------- | ---------- | --------------------------------------- |
|
|
59
|
+
| `onTop` | `Function` | Scrolling to the top of the scroller |
|
|
60
|
+
| `onBottom` | `Function` | Scrolling to the bottom of the scroller |
|
|
61
|
+
| `onDrag` | `Function` | Drag is started |
|
|
62
|
+
| `onDrop` | `Function` | Drag is complete |
|
|
63
|
+
| `onRangeChange` | `Function` | Range of visible items has changed |
|
|
65
64
|
|
|
66
65
|
**Required props**
|
|
67
66
|
| **Prop** | **Type** | **Default** | **Description** |
|
|
@@ -75,7 +74,7 @@ function Virtual() {
|
|
|
75
74
|
| -------------- | ------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
76
75
|
| `header` | `JSX.Element` | - | Top of list |
|
|
77
76
|
| `footer` | `JSX.Element` | - | Bottom of list |
|
|
78
|
-
| `size` | `Number` | - | Estimated height of each row.
|
|
77
|
+
| `size` | `Number` | - | Estimated height of each row. it will be automatically calculated |
|
|
79
78
|
| `keeps` | `Number` | `30` | The number of lines rendered by the virtual scroll |
|
|
80
79
|
| `handle` | `String` | - | Drag handle selector within list items |
|
|
81
80
|
| `group` | `Object/String` | - | string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }` |
|
|
@@ -87,28 +86,30 @@ function Virtual() {
|
|
|
87
86
|
|
|
88
87
|
**Uncommonly used**
|
|
89
88
|
|
|
90
|
-
| **Prop**
|
|
91
|
-
|
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `
|
|
97
|
-
| `
|
|
98
|
-
| `
|
|
99
|
-
| `
|
|
100
|
-
| `
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `
|
|
110
|
-
| `
|
|
111
|
-
| `
|
|
89
|
+
| **Prop** | **Type** | **Default** | **Description** |
|
|
90
|
+
| -------------------- | --------- | ----------------------- | --------------------------------------------------------------------------- |
|
|
91
|
+
| `buffer` | `Number` | `Math.round(keeps / 3)` | Buffer size to detect range change |
|
|
92
|
+
| `draggable` | `String` | `[role="item"]` | Specifies which items inside the element should be draggable |
|
|
93
|
+
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
|
|
94
|
+
| `lockAxis` | `x \| y` | `-` | Axis on which dragging will be locked |
|
|
95
|
+
| `keepOffset` | `Boolean` | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
|
|
96
|
+
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
|
|
97
|
+
| `animation` | `Number` | `150` | Drag-and-drop's animation delay |
|
|
98
|
+
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
|
|
99
|
+
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
|
|
100
|
+
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
|
|
101
|
+
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
|
|
102
|
+
| `delayOnTouchOnly` | `Boolean` | `false` | Only delay on press if user is using touch |
|
|
103
|
+
| `appendToBody` | `Boolean` | `false` | Appends the ghost element into the document's body |
|
|
104
|
+
| `dropOnAnimationEnd` | `Boolean` | `true` | Drop item on animation end |
|
|
105
|
+
| `rootTag` | `String` | `div` | Label type for root element |
|
|
106
|
+
| `wrapTag` | `String` | `div` | Label type for list wrap element |
|
|
107
|
+
| `wrapStyle` | `Object` | `{}` | List wrapper element style |
|
|
108
|
+
| `wrapClass` | `String` | `''` | List wrapper element class |
|
|
109
|
+
| `ghostStyle` | `Object` | `{}` | The style of the mask element when dragging |
|
|
110
|
+
| `ghostClass` | `String` | `''` | The class of the mask element when dragging |
|
|
111
|
+
| `chosenClass` | `String` | `''` | Class name for the chosen item |
|
|
112
|
+
| `placeholderClass` | `String` | `''` | Class name for the drop placeholder |
|
|
112
113
|
|
|
113
114
|
## Methods
|
|
114
115
|
Use the methods exposed in the component by setting `ref`
|
|
@@ -134,14 +135,14 @@ return (
|
|
|
134
135
|
)
|
|
135
136
|
```
|
|
136
137
|
|
|
137
|
-
| **
|
|
138
|
-
|
|
|
139
|
-
| `getSize(key)`
|
|
140
|
-
| `getOffset()`
|
|
141
|
-
| `getClientSize()`
|
|
142
|
-
| `getScrollSize()`
|
|
143
|
-
| `scrollToTop()`
|
|
144
|
-
| `scrollToBottom()`
|
|
145
|
-
| `scrollToKey(key)`
|
|
146
|
-
| `scrollToIndex(index)`
|
|
147
|
-
| `scrollToOffset(offset)`
|
|
138
|
+
| **Method** | **Description** |
|
|
139
|
+
| ----------------------------- | ---------------------------------------------------------- |
|
|
140
|
+
| `getSize(key)` | get the height of the specified item by key value |
|
|
141
|
+
| `getOffset()` | get the current scroll top/left |
|
|
142
|
+
| `getClientSize()` | Get wrapper element client viewport size (width or height) |
|
|
143
|
+
| `getScrollSize()` | Get all scroll size (scrollHeight or scrollWidth) |
|
|
144
|
+
| `scrollToTop()` | scroll to the top of the list |
|
|
145
|
+
| `scrollToBottom()` | scroll to the bottom of the list |
|
|
146
|
+
| `scrollToKey(key, align)` | scroll to the specified data-key |
|
|
147
|
+
| `scrollToIndex(index, align)` | scroll to the specified index value |
|
|
148
|
+
| `scrollToOffset(offset)` | scroll to the specified height |
|