react-virtual-sortable 1.0.0
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/LICENSE +21 -0
- package/README.md +147 -0
- package/dist/virtual-list.js +2029 -0
- package/dist/virtual-list.min.js +11 -0
- package/package.json +66 -0
- package/types/index.d.ts +87 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 mfuu
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# react-virtual-sortable
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/react-virtual-sortable) [](https://www.npmjs.com/package/react-virtual-sortable) [](LICENSE)
|
|
4
|
+
|
|
5
|
+
A virtual scrolling list component that can be sorted by dragging
|
|
6
|
+
|
|
7
|
+
### [Live Demo](https://mfuu.github.io/react-virtual-sortable/)
|
|
8
|
+
|
|
9
|
+
## Simple Usage
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm i react-virtual-sortable
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Root component:
|
|
16
|
+
```jsx
|
|
17
|
+
import VirtualList from 'react-virtual-sortable';
|
|
18
|
+
|
|
19
|
+
function Virtual() {
|
|
20
|
+
|
|
21
|
+
const [list, setList] = useState([{id: '1', text: 'a'}, {id: '2', text: 'b'}, ...]);
|
|
22
|
+
|
|
23
|
+
const onDrop = (event) => {
|
|
24
|
+
// dnd complete
|
|
25
|
+
setList(() => event.list);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// use style and className as jsx used
|
|
29
|
+
return (
|
|
30
|
+
<VirtualList
|
|
31
|
+
className="virtual-list"
|
|
32
|
+
style={{ height: '500px' }}
|
|
33
|
+
dataKey="id"
|
|
34
|
+
dataSource={ list }
|
|
35
|
+
handle=".handle"
|
|
36
|
+
header={ <div className="loading">top loading...</div> }
|
|
37
|
+
footer={ <div className="loading">bottom loading...</div> }
|
|
38
|
+
onDrop={ onDrop }
|
|
39
|
+
>
|
|
40
|
+
{
|
|
41
|
+
(record, index, dataKey) => {
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
<span className=".handle">{ index }</span>
|
|
45
|
+
{ record.text }
|
|
46
|
+
</div>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
</VirtualList>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Props
|
|
56
|
+
|
|
57
|
+
**Callback**
|
|
58
|
+
|
|
59
|
+
| **Emit** | **Type** | **Default** | **Description** |
|
|
60
|
+
| ---------- | ---------- | ----------- | --------------------------------------- |
|
|
61
|
+
| `onTop` | `Function` | - | Scrolling to the top of the scroller |
|
|
62
|
+
| `onBottom` | `Function` | - | Scrolling to the bottom of the scroller |
|
|
63
|
+
| `onDrag` | `Function` | - | Drag is started |
|
|
64
|
+
| `onDrop` | `Function` | - | Drag is complete |
|
|
65
|
+
|
|
66
|
+
**Required props**
|
|
67
|
+
| **Prop** | **Type** | **Default** | **Description** |
|
|
68
|
+
| ------------ | -------- | ----------- | --------------------------------------------------------------------- |
|
|
69
|
+
| `dataKey` | `String` | - | The unique identifier of each piece of data, in the form of `'a.b.c'` |
|
|
70
|
+
| `dataSource` | `Array` | `[]` | The data that needs to be rendered |
|
|
71
|
+
|
|
72
|
+
**Common used**
|
|
73
|
+
|
|
74
|
+
| **Prop** | **Type** | **Default** | **Description** |
|
|
75
|
+
| -------------- | ------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
76
|
+
| `header` | `JSX.Element` | - | Top of list |
|
|
77
|
+
| `footer` | `JSX.Element` | - | Bottom of list |
|
|
78
|
+
| `size` | `Number` | - | Estimated height of each row. You can choose to pass it or not, it will be automatically calculated |
|
|
79
|
+
| `keeps` | `Number` | `30` | The number of lines rendered by the virtual scroll |
|
|
80
|
+
| `handle` | `String` | - | Drag handle selector within list items |
|
|
81
|
+
| `group` | `Object/String` | - | string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }` |
|
|
82
|
+
| `scroller` | `Document \| HTMLElement` | - | Virtual list scrolling element |
|
|
83
|
+
| `direction` | `vertical \| horizontal` | `vertical` | Scroll direction |
|
|
84
|
+
| `debounceTime` | `Number` | `0` | debounce time on scroll |
|
|
85
|
+
| `throttleTime` | `Number` | `0` | debounce time on scroll |
|
|
86
|
+
| `tableMode` | `Boolean` | `false` | display with table and tbody |
|
|
87
|
+
|
|
88
|
+
**Uncommonly used**
|
|
89
|
+
|
|
90
|
+
| **Prop** | **Type** | **Default** | **Description** |
|
|
91
|
+
| ------------------ | --------- | ------------------------- | --------------------------------------------------------------------------- |
|
|
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
|
+
| `fallbackOnBody` | `Boolean` | `false` | Appends the ghost element into the document's body |
|
|
104
|
+
| `rootTag` | `String` | `div` | Label type for root element |
|
|
105
|
+
| `wrapTag` | `String` | `div` | Label type for list wrap element |
|
|
106
|
+
| `wrapStyle` | `Object` | `{}` | List wrapper element style |
|
|
107
|
+
| `wrapClass` | `String` | `''` | List wrapper element class |
|
|
108
|
+
| `ghostStyle` | `Object` | `{}` | The style of the mask element when dragging |
|
|
109
|
+
| `ghostClass` | `String` | `''` | The class of the mask element when dragging |
|
|
110
|
+
| `chosenClass` | `String` | `''` | Class name for the chosen item |
|
|
111
|
+
| `placeholderClass` | `String` | `''` | Class name for the drop placeholder |
|
|
112
|
+
|
|
113
|
+
## Methods
|
|
114
|
+
Use the methods exposed in the component by setting `ref`
|
|
115
|
+
```jsx
|
|
116
|
+
...
|
|
117
|
+
|
|
118
|
+
const virtualRef = useRef();
|
|
119
|
+
|
|
120
|
+
const scrollToBottom = () => {
|
|
121
|
+
virtualRef.current.scrollToBottom();
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
return (
|
|
125
|
+
<button onClick={ scrollToBottom }></button>
|
|
126
|
+
<virtualList
|
|
127
|
+
ref={ virtualRef }
|
|
128
|
+
...
|
|
129
|
+
>
|
|
130
|
+
{
|
|
131
|
+
(record) => <div>{ record.text }</div>
|
|
132
|
+
}
|
|
133
|
+
</virtualList>
|
|
134
|
+
)
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
| **Prop** | **Description** |
|
|
138
|
+
| ------------------------ | ---------------------------------------------------------- |
|
|
139
|
+
| `getSize(key)` | get the height of the specified item by key value |
|
|
140
|
+
| `getOffset()` | get the current scroll top/left |
|
|
141
|
+
| `getClientSize()` | Get wrapper element client viewport size (width or height) |
|
|
142
|
+
| `getScrollSize()` | Get all scroll size (scrollHeight or scrollWidth) |
|
|
143
|
+
| `scrollToTop()` | scroll to the top of the list |
|
|
144
|
+
| `scrollToBottom()` | scroll to the bottom of the list |
|
|
145
|
+
| `scrollToKey(key)` | scroll to the specified data-key |
|
|
146
|
+
| `scrollToIndex(index)` | scroll to the specified index value |
|
|
147
|
+
| `scrollToOffset(offset)` | scroll to the specified height |
|