Skip to content

Commit 2709b1c

Browse files
mfuumfuu
committed
feat: buffer as prop
1 parent 1395368 commit 2709b1c

5 files changed

Lines changed: 39 additions & 26 deletions

File tree

‎README.md‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -86,29 +86,30 @@ function Virtual() {
8686

8787
**Uncommonly used**
8888

89-
| **Prop** | **Type** | **Default** | **Description** |
90-
| -------------------- | --------- | ------------------ | --------------------------------------------------------------------------- |
91-
| `draggable` | `String` | `[role="item"]` | Specifies which items inside the element should be draggable |
92-
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
93-
| `lockAxis` | `x \| y` | `-` | Axis on which dragging will be locked |
94-
| `keepOffset` | `Boolean` | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
95-
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
96-
| `animation` | `Number` | `150` | Drag-and-drop's animation delay |
97-
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
98-
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
99-
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
100-
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
101-
| `delayOnTouchOnly` | `Boolean` | `false` | Only delay on press if user is using touch |
102-
| `appendToBody` | `Boolean` | `false` | Appends the ghost element into the document's body |
103-
| `dropOnAnimationEnd` | `Boolean` | `true` | Drop item on animation end |
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 |
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 |
112113

113114
## Methods
114115
Use the methods exposed in the component by setting `ref`

‎dumi/docs/guide/props.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,16 @@ The number of lines rendered by the virtual scroll
3030

3131
The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated
3232

33+
## `buffer`
34+
35+
| **Type** | **Default** |
36+
| -------- | ----------------------- |
37+
| `Number` | `Math.round(keeps / 3)` |
38+
39+
Buffer size to detect range change
40+
41+
> If a rendering anomaly occurs, for example: [this issue](https://github.com/mfuu/vue3-virtual-sortable/issues/29), you can reduce the value or set it to 0.
42+
3343
## `handle`
3444

3545
| **Type** | **Default** |

‎src/core‎

‎src/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ function VirtualList<T>(props: VirtualProps<T>, ref: React.ForwardedRef<VirtualC
3232

3333
size = undefined,
3434
keeps = 30,
35+
buffer = undefined,
3536
scroller = undefined,
3637
direction = 'vertical',
3738
debounceTime = 0,
@@ -216,6 +217,7 @@ function VirtualList<T>(props: VirtualProps<T>, ref: React.ForwardedRef<VirtualC
216217
// virtual attrs
217218
size,
218219
keeps,
220+
buffer,
219221
scroller,
220222
direction,
221223
debounceTime,
@@ -244,7 +246,6 @@ function VirtualList<T>(props: VirtualProps<T>, ref: React.ForwardedRef<VirtualC
244246
const initVirtualSortable = () => {
245247
VS.current = new VirtualSortable<KeyValueType>(rootElRef.current as HTMLElement, {
246248
...combinedAttrs,
247-
buffer: Math.round(keeps / 3),
248249
wrapper: wrapElRef.current!,
249250
scroller: scroller || rootElRef.current!,
250251
uniqueKeys: uniqueKeys.current,

‎src/interface.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ export interface VirtualProps<T> {
3232
children: React.ReactElement | RenderFunc<T>;
3333
tableMode?: boolean;
3434

35-
keeps?: number;
3635
size?: number;
36+
keeps?: number;
37+
buffer?: number;
3738
group?: Group | string;
3839
handle?: string;
3940
lockAxis?: 'x' | 'y';

0 commit comments

Comments
 (0)