fix: 修复 picker 第一页没有选中时清空按钮无效的问题 (baidu#9474)

lhtuling · Jan 25, 2024 · 8398e58 · 8398e58
1 parent 23fdeb0
commit 8398e58
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 49 deletions.
diff --git a/packages/amis-core/src/utils/helper.ts b/packages/amis-core/src/utils/helper.ts
@@ -347,14 +347,8 @@ export function isArrayChildrenModified(
 
   for (let i: number = prev.length - 1; i >= 0; i--) {
     if (
-      strictMode
-        ? prev[i] !== next[i]
-        : prev[i] != next[i] ||
-          isArrayChildrenModified(
-            prev[i].children,
-            next[i].children,
-            strictMode
-          )
+      (strictMode ? prev[i] !== next[i] : prev[i] != next[i]) ||
+      isArrayChildrenModified(prev[i].children, next[i].children, strictMode)
     ) {
       return true;
     }

diff --git a/packages/amis/src/renderers/CRUD.tsx b/packages/amis/src/renderers/CRUD.tsx
@@ -1819,10 +1819,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   clearSelection() {
     const {store} = this.props;
     const selected = store.selectedItems.concat();
-    const unSelected = store.unSelectedItems.concat();
+    const unSelected = store.unSelectedItems.concat(selected);
 
     store.setSelectedItems([]);
-    store.setUnSelectedItems(unSelected.concat(selected));
+    store.setUnSelectedItems(unSelected);
   }
 
   hasBulkActionsToolbar() {

diff --git a/packages/amis/src/renderers/Form/Picker.tsx b/packages/amis/src/renderers/Form/Picker.tsx
@@ -451,6 +451,44 @@ export default class PickerControl extends React.PureComponent<
     return merge(PickerControl.defaultProps.overflowConfig, overflowConfig);
   }
 
+  @autobind
+  handleSelect(selectedItems: Array<any>, unSelectedItems: Array<any>) {
+    const {selectedOptions, valueField} = this.props;
+    // 选择行后，crud 会给出连续多次事件，且selectedItems会变化，会导致初始化和点击无效
+    // 过滤掉一些无用事件，否则会导致 value 错误
+    if (
+      !Array.isArray(selectedItems) ||
+      !Array.isArray(unSelectedItems) ||
+      (!selectedItems.length && !unSelectedItems.length)
+    ) {
+      return;
+    }
+
+    // 取交集，判断是否是无效事件，需要考虑顺序问题
+    const intersections = intersectionWith(
+      selectedItems,
+      selectedOptions,
+      (a: any, b: any) => {
+        // 需要考虑没有配置 valueField，而且值里面又没有 value 字段的情况
+        const aValue = a[valueField || 'value'];
+        const bValue = b[valueField || 'value'];
+        return aValue || bValue
+          ? aValue === bValue
+          : // selectedOptions 中有 Options 自动添加的 value 字段，所以去掉后才能比较
+            isEqual(omit(a, 'value'), omit(b, 'value'));
+      }
+    );
+    if (
+      // 前后数量都一样说明是重复事件
+      intersections.length === selectedItems.length &&
+      intersections.length === selectedOptions.length
+    ) {
+      return;
+    }
+
+    this.handleChange(selectedItems);
+  }
+
   renderTag(item: Option, index: number) {
     const {
       classPrefix: ns,
@@ -641,43 +679,7 @@ export default class PickerControl extends React.PureComponent<
       options: source ? [] : options,
       multiple,
       strictMode,
-      onSelect: embed
-        ? (selectedItems: Array<any>, unSelectedItems: Array<any>) => {
-            // 选择行后，crud 会给出连续多次事件，且selectedItems会变化，会导致初始化和点击无效
-            // 过滤掉一些无用事件，否则会导致 value 错误
-            if (
-              !Array.isArray(selectedItems) ||
-              !Array.isArray(unSelectedItems) ||
-              (!selectedItems.length && !unSelectedItems.length)
-            ) {
-              return;
-            }
-
-            // 取交集，判断是否是无效事件，需要考虑顺序问题
-            const intersections = intersectionWith(
-              selectedItems,
-              selectedOptions,
-              (a: any, b: any) => {
-                // 需要考虑没有配置 valueField，而且值里面又没有 value 字段的情况
-                const aValue = a[valueField || 'value'];
-                const bValue = b[valueField || 'value'];
-                return aValue || bValue
-                  ? aValue === bValue
-                  : // selectedOptions 中有 Options 自动添加的 value 字段，所以去掉后才能比较
-                    isEqual(omit(a, 'value'), omit(b, 'value'));
-              }
-            );
-            if (
-              // 前后数量都一样说明是重复事件
-              intersections.length === selectedItems.length &&
-              intersections.length === selectedOptions.length
-            ) {
-              return;
-            }
-
-            this.handleChange(selectedItems);
-          }
-        : undefined,
+      onSelect: embed ? this.handleSelect : undefined,
       ref: this.crudRef,
       popOverContainer,
       ...(embed ||

diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx
@@ -940,8 +940,18 @@ export default class Table extends React.Component<TableProps, object> {
         .join(',');
 
       store.updateSelected(props.selected || [], props.valueField);
-      const selectedRows = store.selectedRows.map(item => item.id).join(',');
-      prevSelectedRows !== selectedRows && this.syncSelected();
+
+      if (
+        Array.isArray(props.selected) &&
+        Array.isArray(prevProps.selected) &&
+        props.selected.length === prevProps.selected.length
+      ) {
+        // 只有长度一样才检测具体的值是否变了
+        const selectedRows = store.selectedRows.map(item => item.id).join(',');
+        prevSelectedRows !== selectedRows && this.syncSelected();
+      } else {
+        this.syncSelected();
+      }
     }
   }