@steedos-widgets/sortable 1.3.4-beta.8 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steedos-widgets/sortable",
-  "version": "1.3.4-beta.8",
+  "version": "1.3.5",
   "main": "dist/sortable.cjs.js",
   "module": "dist/sortable.esm.js",
   "unpkg": "dist/sortable.umd.js",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
-    "@steedos-widgets/amis-lib": "1.3.4-beta.8"
+    "@steedos-widgets/amis-lib": "1.3.5"
   },
-  "gitHead": "5a2f9de4ec64c0673b8c796367bd642d14d45aaf"
+  "gitHead": "696396061c57decfde1f9d8f14c36fff7f4316b9"
 }

package/src/components/MultipleContainers.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal, unstable_batchedUpdates } from 'react-dom';
-import { map, keyBy, cloneDeep } from 'lodash';
+import { map, keyBy, cloneDeep, keys } from 'lodash';
 
 import { createObject } from '@steedos-widgets/amis-lib'
 
@@ -33,6 +33,7 @@ import {
   arrayMove,
   defaultAnimateLayoutChanges,
   verticalListSortingStrategy,
+  rectSortingStrategy,
   SortingStrategy,
   horizontalListSortingStrategy,
 } from '@dnd-kit/sortable';
@@ -153,7 +154,7 @@ interface Props {
   vertical?: boolean;
   boardSource: [{id:string, label:string}?],
   cardSource: [{id:string, label:string, color: string, columnSpan: number, body: [any]}?],
-  defaultValue: any,
+  value: any,
   onChange: Function,
   data: any,
   dispatchEvent: Function,
@@ -171,7 +172,6 @@ const PLACEHOLDER_ID = 'placeholder';
 const empty: UniqueIdentifier[] = [];
 
 export function MultipleContainers(props) {
-
   let {
     adjustScale = false,
     itemCount = 3,
@@ -185,14 +185,15 @@ export function MultipleContainers(props) {
     minimal = false,
     modifiers,
     renderItem,
-    strategy = verticalListSortingStrategy,
+    // strategy = verticalListSortingStrategy,
+    strategy = rectSortingStrategy,//这里默认值不用rectSortingStrategy的话，会出现字段在左右两边拖动变更顺序时拖动过程中dragOverlay丢失问题
     addable = false,
     trashable = false,
     vertical = false,
     scrollable,
     boardSource = [],
     cardSource = [],
-    defaultValue,
+    value,
     onChange: amisOnChange,
     data: amisData,
     dispatchEvent: amisDispatchEvent,
@@ -212,11 +213,11 @@ export function MultipleContainers(props) {
     cardClassName = "",
   }: Props = props
 
-  defaultValue && delete(defaultValue.$$id);
+  value && delete(value.$$id);
 
   const [items, setItems] = useState<Items>(
     () => {
-      return (defaultValue as Items) ?? {
+      return (value as Items) ?? {
         A: ['A1', 'A2'],
         B: ['B1', 'B2'],
         C: ['C1', 'C2'],
@@ -228,10 +229,15 @@ export function MultipleContainers(props) {
     Object.keys(items) as UniqueIdentifier[]
   );
 
-  const handleChange = async () => {
+  useEffect(() => {
+    setItems(value as Items);
+    setContainers(Object.keys(value) as UniqueIdentifier[]);
+  }, [value]);
+
+  const handleChange = async (newItems? : any) => {
     if (!amisDispatchEvent || !amisOnChange)
       return 
-    const value = items;
+    const value = newItems || items;
 
     // 支持 amis OnEvent.change
     const rendererEvent = await amisDispatchEvent(
@@ -244,7 +250,7 @@ export function MultipleContainers(props) {
       return;
     }
 
-    setTimeout(()=> amisOnChange(value), 1000);
+    setTimeout(()=> amisOnChange(value), 500);
   }
   
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
@@ -385,6 +391,7 @@ export function MultipleContainers(props) {
         const overId = over?.id;
 
         if (overId == null || overId === TRASH_ID || active.id in items) {
+          // 拖动的是分组则跳过后面的逻辑
           return;
         }
 
@@ -494,26 +501,55 @@ export function MultipleContainers(props) {
 
         const overContainer = findContainer(overId);
 
-        if (overContainer) {
-          const activeIndex = items[activeContainer].indexOf(active.id);
-          const overIndex = items[overContainer].indexOf(overId);
+        let newItems = items;
 
-          if (activeIndex !== overIndex) {
-            setItems((items) => ({
-              ...items,
-              [overContainer]: arrayMove(
-                items[overContainer],
-                activeIndex,
-                overIndex
-              ),
-            }));
+        if (overContainer) {
+          if(activeContainer !== overContainer){
+            // 拖动变更分组之间的顺序时，activeContainer 与 overContainer 值不相等
+            setTimeout(function(){
+              const sortedGroups = over.data.current.sortable.items; //不加setTimeout的话，这里拿到的会是变更前的数据
+              newItems = {};
+              sortedGroups.forEach((groupKey: string) => {
+                newItems[groupKey] = items[groupKey];
+              });
+              delete newItems[TRASH_ID];
+              delete newItems[PLACEHOLDER_ID];
+              if(keys(items).join(",") !== keys(newItems).join(",")){
+              // 只有顺序发生变化时才触发change事件
+                setItems(newItems);
+                // console.log('拖动结束2，更新form value')
+                handleChange(newItems)
+              }
+
+              setActiveId(null);
+            },500);
+            return;
+          }
+          else {
+            // 同一个分组中字段顺序变更以及把一个字段从某个分组拖动到另一个分组内时，activeContainer 与 overContainer 值相等
+            const activeIndex = items[activeContainer].indexOf(active.id);
+            const overIndex = items[overContainer].indexOf(overId);
+  
+            if (activeIndex !== overIndex) {
+              setItems((items) => {
+                newItems = {
+                  ...items,
+                  [overContainer]: arrayMove(
+                    items[overContainer],
+                    activeIndex,
+                    overIndex
+                  ),
+                }
+                return newItems;
+              });
+            }
           }
         }
 
         setActiveId(null);
 
         // console.log('拖动结束2，更新form value')
-        handleChange()
+        handleChange(newItems)
       }}
       cancelDrop={cancelDrop}
       onDragCancel={onDragCancel}