* sortable: fix sortable not work on first time.

easysoft · May 27, 2024 · 7b188d2 · 7b188d2
1 parent 9dc0b8a
commit 7b188d2
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 58 deletions.
diff --git a/lib/sortable/src/components/sortable-list.ts b/lib/sortable/src/components/sortable-list.ts
@@ -2,13 +2,13 @@ import {List} from '@zui/list/src/component';
 import {Sortable} from '../vanilla/sortable';
 
 import type {RenderableProps} from 'preact';
-import type {SortableEvent} from 'sortablejs';
+import type {MoveEvent, SortableEvent} from 'sortablejs';
 import type {ClassNameLike} from '@zui/core';
 import type {SortableListProps, SortableListState, SortableOptions} from '../types';
-import {Item} from '@zui/common-list/src/types';
 
 export class SortableList<P extends SortableListProps = SortableListProps, S extends SortableListState = SortableListState> extends List<P, S> {
-    static defaultProps: Partial<SortableListProps> = {
+    static defaultProps = {
+        ...List.defaultProps,
         sortable: true,
     };
 
@@ -26,30 +26,6 @@ export class SortableList<P extends SortableListProps = SortableListProps, S ext
         return this._sortable?.toArray() || [];
     }
 
-    protected _getItems(props: RenderableProps<P>): Item[] {
-        const items = super._getItems(props);
-        const {orders} = this.state;
-        if (orders) {
-            const newItems: Item[] = [...items];
-            const orderMap = orders.reduce<Map<string, number>>((map, order, index) => {
-                map.set(order, index);
-                return map;
-            }, new Map());
-            return newItems.sort((a, b) => {
-                const aOrder = orderMap.get(a.key!);
-                const bOrder = orderMap.get(b.key!);
-                if (aOrder === undefined) {
-                    return bOrder === undefined ? 0 : 1;
-                }
-                if (bOrder === undefined) {
-                    return -1;
-                }
-                return aOrder - bOrder;
-            });
-        }
-        return items;
-    }
-
     protected _getClassName(props: RenderableProps<P>): ClassNameLike {
         return [super._getClassName(props), 'sortable-list'];
     }
@@ -67,7 +43,6 @@ export class SortableList<P extends SortableListProps = SortableListProps, S ext
             ...userOptions,
             onSort: (event: SortableEvent) => {
                 const orders = this.getOrders();
-                this.setState({orders});
                 this.props.onSort?.call(this, event, orders);
                 userOptions.onSort?.call(this, event);
             },

diff --git a/lib/sortable/src/components/sortable-tree.ts b/lib/sortable/src/components/sortable-tree.ts
@@ -4,7 +4,6 @@ import {Sortable} from '../vanilla/sortable';
 import type {RenderableProps} from 'preact';
 import type {MoveEvent, SortableEvent} from 'sortablejs';
 import type {ClassNameLike} from '@zui/core';
-import type {Item} from '@zui/common-list';
 import type {SortableTreeProps, SortableTreeState, SortableOptions} from '../types';
 
 export class SortableTree<P extends SortableTreeProps = SortableTreeProps, S extends SortableTreeState = SortableTreeState> extends Tree<P, S> {
@@ -29,30 +28,6 @@ export class SortableTree<P extends SortableTreeProps = SortableTreeProps, S ext
         return this._sortable?.toArray() || [];
     }
 
-    protected _getItems(props: RenderableProps<P>): Item[] {
-        const items = super._getItems(props);
-        const {orders} = this.state;
-        if (orders) {
-            const newItems: Item[] = [...items];
-            const orderMap = orders.reduce<Map<string, number>>((map, order, index) => {
-                map.set(order, index);
-                return map;
-            }, new Map());
-            return newItems.sort((a, b) => {
-                const aOrder = orderMap.get(a.key!);
-                const bOrder = orderMap.get(b.key!);
-                if (aOrder === undefined) {
-                    return bOrder === undefined ? 0 : 1;
-                }
-                if (bOrder === undefined) {
-                    return -1;
-                }
-                return aOrder - bOrder;
-            });
-        }
-        return items;
-    }
-
     protected _getClassName(props: RenderableProps<P>): ClassNameLike {
         return [super._getClassName(props), 'sortable-tree'];
     }
@@ -68,10 +43,10 @@ export class SortableTree<P extends SortableTreeProps = SortableTreeProps, S ext
             group: `SortableTree.${this.gid}`,
             dataIdAttr: 'z-key',
             draggable: '.tree-item',
+            delay: 50,
             ...userOptions,
             onSort: (event: SortableEvent) => {
                 const orders = this.getOrders();
-                this.setState({orders});
                 onSort?.call(this, event, orders, parentKey);
                 userOptions.onSort?.call(this, event);
             },

diff --git a/lib/sortable/src/types/sortable-list-state.ts b/lib/sortable/src/types/sortable-list-state.ts
@@ -1,6 +1,4 @@
-import type {ItemKey} from '@zui/common-list';
 import type {ListState} from '@zui/list';
 
 export interface SortableListState extends ListState {
-    orders: ItemKey[]
 }
diff --git a/lib/sortable/src/types/sortable-tree-state.ts b/lib/sortable/src/types/sortable-tree-state.ts
@@ -1,6 +1,4 @@
-import type {ItemKey} from '@zui/common-list';
 import type {ListState} from '@zui/list';
 
 export interface SortableTreeState extends ListState {
-    orders: ItemKey[]
 }