fix: 修复 inputSubForm 拖拽排序值位置与视图位置不一致问题 (baidu#9508)

lhtuling · Jan 25, 2024 · 3bd878c · 3bd878c
1 parent 51e02cd
commit 3bd878c
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 98 deletions.
diff --git a/packages/amis-editor/src/renderer/DateShortCutControl.tsx b/packages/amis-editor/src/renderer/DateShortCutControl.tsx
@@ -227,23 +227,24 @@ export class DateShortCutControl extends React.PureComponent<
           }
           // 换回来
           const parent = e.to as HTMLElement;
-          if (
-            e.newIndex < e.oldIndex &&
-            e.oldIndex < parent.childNodes.length - 1
-          ) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-          } else if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          if (e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }
 
           const options = this.state.options.concat();
-          options[e.oldIndex] = options.splice(
-            e.newIndex,
-            1,
-            options[e.oldIndex]
-          )[0];
+          // options[e.oldIndex] = options.splice(
+          //   e.newIndex,
+          //   1,
+          //   options[e.oldIndex]
+          // )[0];
+          options.splice(e.newIndex, 0, options.splice(e.oldIndex, 1)[0]);
           this.setState({options}, () => this.onChangeOptions());
         }
       }

diff --git a/packages/amis-editor/src/renderer/FeatureControl.tsx b/packages/amis-editor/src/renderer/FeatureControl.tsx
@@ -174,13 +174,13 @@ export default class FeatureControl extends React.Component<
           }
           // 换回来
           const parent = e.to as HTMLElement;
-          if (
-            e.newIndex < e.oldIndex &&
-            e.oldIndex < parent.childNodes.length - 1
-          ) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-          } else if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          if (e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis-editor/src/renderer/ListItemControl.tsx b/packages/amis-editor/src/renderer/ListItemControl.tsx
@@ -141,13 +141,13 @@ export default class ListItemControl extends React.Component<
 
           // 换回来
           const parent = e.to as HTMLElement;
-          if (
-            e.newIndex < e.oldIndex &&
-            e.oldIndex < parent.childNodes.length - 1
-          ) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-          } else if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          if (e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis-editor/src/renderer/OptionControl.tsx b/packages/amis-editor/src/renderer/OptionControl.tsx
@@ -250,24 +250,19 @@ export default class OptionControl extends React.Component<
 
           // 换回来
           const parent = e.to as HTMLElement;
-          if (
-            e.newIndex < e.oldIndex &&
-            e.oldIndex < parent.childNodes.length - 1
-          ) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-          } else if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          if (e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }
 
           const options = this.state.options.concat();
-
-          options[e.oldIndex] = options.splice(
-            e.newIndex,
-            1,
-            options[e.oldIndex]
-          )[0];
+          options.splice(e.newIndex, 0, options.splice(e.oldIndex, 1)[0]);
 
           this.setState({options}, () => this.onChange());
         }

diff --git a/packages/amis-editor/src/renderer/TimelineItemControl.tsx b/packages/amis-editor/src/renderer/TimelineItemControl.tsx
@@ -304,13 +304,13 @@ export default class TimelineItemControl extends React.Component<
 
           // 换回来
           const parent = e.to as HTMLElement;
-          if (
-            e.newIndex < e.oldIndex &&
-            e.oldIndex < parent.childNodes.length - 1
-          ) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-          } else if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          if (e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis-editor/src/renderer/crud2-control/CRUDColumnControl.tsx b/packages/amis-editor/src/renderer/crud2-control/CRUDColumnControl.tsx
@@ -177,18 +177,24 @@ export class CRUDColumnControl extends React.Component<
           const parent = e.to as HTMLElement;
 
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }
 
           const options = this.state.options.concat();
 
-          options[e.oldIndex] = options.splice(
-            e.newIndex,
-            1,
-            options[e.oldIndex]
-          )[0];
+          // options[e.oldIndex] = options.splice(
+          //   e.newIndex,
+          //   1,
+          //   options[e.oldIndex]
+          // )[0];
+          options.splice(e.newIndex, 0, options.splice(e.oldIndex, 1)[0]);
 
           this.setState({options}, () => this.handleSort());
         }

diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx
@@ -543,36 +543,21 @@ export class EventControl extends React.Component<
         }
         // 换回来
         const parent = e.to as HTMLElement;
-        if (
-          e.newIndex < e.oldIndex &&
-          e.oldIndex < parent.childNodes.length - 1
-        ) {
-          parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-        } else if (e.oldIndex < parent.childNodes.length - 1) {
-          parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+        if (e.oldIndex < parent.childNodes.length - 1) {
+          parent.insertBefore(
+            e.item,
+            parent.childNodes[
+              e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+            ]
+          );
         } else {
           parent.appendChild(e.item);
         }
         let onEventConfig = cloneDeep(this.state.onEvent);
         const newEvent = onEventConfig[eventKey];
         let options = newEvent?.actions.concat();
         // 从后往前移
-        if (e.oldIndex > e.newIndex) {
-          options = [
-            ...options.slice(0, e.newIndex),
-            options[e.oldIndex],
-            ...options.slice(e.newIndex, e.oldIndex),
-            ...options.slice(e.oldIndex + 1, options.length)
-          ];
-        } else if (e.oldIndex < e.newIndex) {
-          // 从前往后
-          options = [
-            ...(e.oldIndex === 0 ? [] : options.slice(0, e.oldIndex)),
-            ...options.slice(e.oldIndex + 1, e.newIndex),
-            options[e.oldIndex],
-            ...options.slice(e.newIndex, options.length)
-          ];
-        }
+        options.splice(e.newIndex, 0, options.splice(e.oldIndex, 1)[0]);
         onEventConfig[eventKey] = {
           ...onEventConfig[eventKey],
           actions: options

diff --git a/packages/amis-ui/src/components/ArrayInput.tsx b/packages/amis-ui/src/components/ArrayInput.tsx
@@ -105,13 +105,13 @@ export class ArrayInput extends React.Component<ArrayInputProps> {
 
           // 换回来
           const parent = e.to as HTMLElement;
-          if (
-            e.newIndex < e.oldIndex &&
-            e.oldIndex < parent.childNodes.length - 1
-          ) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-          } else if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          if (e.oldIndex < parent.childNodes.length - 1) {
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis-ui/src/components/ResultList.tsx b/packages/amis-ui/src/components/ResultList.tsx
@@ -143,13 +143,13 @@ export class ResultList extends React.Component<
 
         // 换回来
         const parent = e.to as HTMLElement;
-        if (
-          e.newIndex < e.oldIndex &&
-          e.oldIndex < parent.childNodes.length - 1
-        ) {
-          parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-        } else if (e.oldIndex < parent.childNodes.length - 1) {
-          parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+        if (e.oldIndex < parent.childNodes.length - 1) {
+          parent.insertBefore(
+            e.item,
+            parent.childNodes[
+              e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+            ]
+          );
         } else {
           parent.appendChild(e.item);
         }

diff --git a/packages/amis-ui/src/components/UserSelect.tsx b/packages/amis-ui/src/components/UserSelect.tsx
@@ -257,7 +257,12 @@ export class UserSelect extends React.Component<
           }
           const parent = e.to as HTMLElement;
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis/src/renderers/Cards.tsx b/packages/amis/src/renderers/Cards.tsx
@@ -561,7 +561,12 @@ export default class Cards extends React.Component<GridProps, object> {
 
           const parent = e.to as HTMLElement;
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis/src/renderers/Form/Combo.tsx b/packages/amis/src/renderers/Form/Combo.tsx
@@ -1026,7 +1026,12 @@ export default class ComboControl extends React.Component<ComboProps> {
           // 换回来
           const parent = e.to as HTMLElement;
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis/src/renderers/Form/InputImage.tsx b/packages/amis/src/renderers/Form/InputImage.tsx
@@ -1545,7 +1545,12 @@ export default class ImageControl extends React.Component<
         // 换回来
         const parent = e.to as HTMLElement;
         if (e.oldIndex < parent.childNodes.length - 1) {
-          parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+          parent.insertBefore(
+            e.item,
+            parent.childNodes[
+              e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+            ]
+          );
         } else {
           parent.appendChild(e.item);
         }

diff --git a/packages/amis/src/renderers/Form/InputSubForm.tsx b/packages/amis/src/renderers/Form/InputSubForm.tsx
@@ -316,11 +316,15 @@ export default class SubFormControl extends React.PureComponent<
           if (e.newIndex === e.oldIndex) {
             return;
           }
-
           // 换回来
           const parent = e.to as HTMLElement;
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis/src/renderers/List.tsx b/packages/amis/src/renderers/List.tsx
@@ -623,7 +623,12 @@ export default class List extends React.Component<ListProps, object> {
 
           const parent = e.to as HTMLElement;
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis/src/renderers/Table/ColumnToggler.tsx b/packages/amis/src/renderers/Table/ColumnToggler.tsx
@@ -273,7 +273,12 @@ export default class ColumnToggler extends React.Component<
 
           const parent = e.to as HTMLElement;
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }

diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx
@@ -1374,7 +1374,12 @@ export default class Table extends React.Component<TableProps, object> {
 
           const parent = e.to as HTMLElement;
           if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+            parent.insertBefore(
+              e.item,
+              parent.childNodes[
+                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
+              ]
+            );
           } else {
             parent.appendChild(e.item);
           }