refactor: table

Author: tangjinzhou

components/_util/extendsObject.ts

@@ -0,0 +1,21 @@
+type RecordType = Record<string, any>;
+
+function extendsObject<T extends RecordType>(...list: T[]) {
+  const result: RecordType = { ...list[0] };
+
+  for (let i = 1; i < list.length; i++) {
+    const obj = list[i];
+    if (obj) {
+      Object.keys(obj).forEach(key => {
+        const val = obj[key];
+        if (val !== undefined) {
+          result[key] = val;
+        }
+      });
+    }
+  }
+
+  return result;
+}
+
+export default extendsObject;

components/table/ExpandIcon.tsx

@@ -32,6 +32,7 @@ function renderExpandIcon(locale: TableLocale) {
           [`${iconPrefix}-collapsed`]: expandable && !expanded,
         })}
         aria-label={expanded ? locale.collapse : locale.expand}
+        aria-expanded={expanded}
       />
     );
   };

components/table/Table.tsx

@@ -383,9 +383,19 @@ const InteralTable = defineComponent<
 
     const [transformBasicColumns] = useColumns(toRef(props, 'contextSlots'));
 
-    const columnTitleProps = computed(() => ({
-      ...sorterTitleProps.value,
-    }));
+    const columnTitleProps = computed(() => {
+      const mergedFilters: Record<string, FilterValue> = {};
+      const filtersValue = filters.value;
+      Object.keys(filtersValue).forEach(filterKey => {
+        if (filtersValue[filterKey] !== null) {
+          mergedFilters[filterKey] = filtersValue[filterKey]!;
+        }
+      });
+      return {
+        ...sorterTitleProps.value,
+        filters: mergedFilters,
+      };
+    });
     const [transformTitleColumns] = useTitleColumns(columnTitleProps);
 
     // ========================== Pagination ==========================
@@ -413,7 +423,7 @@ const InteralTable = defineComponent<
       changeEventInfo.pagination =
         props.pagination === false
           ? {}
-          : getPaginationParam(props.pagination, mergedPagination.value);
+          : getPaginationParam(mergedPagination.value, props.pagination);
 
       changeEventInfo.resetPagination = resetPagination;
     });
@@ -556,8 +566,8 @@ const InteralTable = defineComponent<
         const defaultPosition = direction.value === 'rtl' ? 'left' : 'right';
         const { position } = mergedPagination.value;
         if (position !== null && Array.isArray(position)) {
-          const topPos = position.find(p => p.indexOf('top') !== -1);
-          const bottomPos = position.find(p => p.indexOf('bottom') !== -1);
+          const topPos = position.find(p => p.includes('top'));
+          const bottomPos = position.find(p => p.includes('bottom'));
           const isDisable = position.every(p => `${p}` === 'none');
           if (!topPos && !bottomPos && !isDisable) {
             bottomPaginationNode = renderPagination(defaultPosition);

components/table/__tests__/Table.filter.test.js

@@ -140,14 +140,14 @@ describe('Table.filter', () => {
     });
   });
   // TODO
-  xit('can be controlled by filterDropdownVisible', done => {
+  xit('can be controlled by filterDropdownOpen', done => {
     const wrapper = mount(
       Table,
       getTableOptions({
         columns: [
           {
             ...column,
-            filterDropdownVisible: true,
+            filterDropdownOpen: true,
           },
         ],
       }),
@@ -160,7 +160,7 @@ describe('Table.filter', () => {
       columns: [
         {
           ...column,
-          filterDropdownVisible: false,
+          filterDropdownOpen: false,
         },
       ],
     });
@@ -179,7 +179,7 @@ describe('Table.filter', () => {
         columns: [
           {
             ...column,
-            onFilterDropdownVisibleChange: handleChange,
+            onFilterDropdownOpenChange: handleChange,
           },
         ],
       }),

components/table/__tests__/Table.rowSelection.test.js

@@ -525,7 +525,7 @@ describe('Table.rowSelection', () => {
             value: 'Lucy',
           },
         ],
-        filterDropdownVisible: true,
+        filterDropdownOpen: true,
         onFilter: (value, record) => record.name.indexOf(value) === 0,
       },
     ];

components/table/demo/custom-filter-panel.vue

@@ -123,7 +123,7 @@ export default defineComponent({
         customFilterDropdown: true,
         onFilter: (value, record) =>
           record.name.toString().toLowerCase().includes(value.toLowerCase()),
-        onFilterDropdownVisibleChange: visible => {
+        onFilterDropdownOpenChange: visible => {
           if (visible) {
             setTimeout(() => {
               searchInput.value.focus();
@@ -143,7 +143,7 @@ export default defineComponent({
         customFilterDropdown: true,
         onFilter: (value, record) =>
           record.address.toString().toLowerCase().includes(value.toLowerCase()),
-        onFilterDropdownVisibleChange: visible => {
+        onFilterDropdownOpenChange: visible => {
           if (visible) {
             setTimeout(() => {
               searchInput.value.focus();

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -1,4 +1,3 @@
-import isEqual from 'lodash-es/isEqual';
 import FilterFilled from '@ant-design/icons-vue/FilterFilled';
 import Button from '../../../button';
 import Menu from '../../../menu';
@@ -26,6 +25,8 @@ import type { EventHandler } from '../../../_util/EventInterface';
 import FilterSearch from './FilterSearch';
 import Tree from '../../../tree';
 import type { CheckboxChangeEvent } from '../../../checkbox/interface';
+import devWarning from '../../../vc-util/devWarning';
+import isEqual from '../../../vc-util/isEqual';
 
 interface FilterRestProps {
   confirm?: Boolean;
@@ -99,7 +100,7 @@ function renderFilterItems({
     return item;
   });
 }
-
+export type TreeColumnFilterItem = ColumnFilterItem;
 export interface FilterDropdownProps<RecordType> {
   tablePrefixCls: string;
   prefixCls: string;
@@ -108,7 +109,7 @@ export interface FilterDropdownProps<RecordType> {
   filterState?: FilterState<RecordType>;
   filterMultiple: boolean;
   filterMode?: 'menu' | 'tree';
-  filterSearch?: FilterSearchType;
+  filterSearch?: FilterSearchType<ColumnFilterItem | TreeColumnFilterItem>;
   columnKey: Key;
   triggerFilter: (filterState: FilterState<RecordType>) => void;
   locale: TableLocale;
@@ -136,7 +137,29 @@ export default defineComponent<FilterDropdownProps<any>>({
     const contextSlots = useInjectSlots();
     const filterMode = computed(() => props.filterMode ?? 'menu');
     const filterSearch = computed(() => props.filterSearch ?? false);
-    const filterDropdownVisible = computed(() => props.column.filterDropdownVisible);
+    const filterDropdownOpen = computed(
+      () => props.column.filterDropdownOpen || props.column.filterDropdownVisible,
+    );
+    const onFilterDropdownOpenChange = computed(
+      () => props.column.onFilterDropdownOpenChange || props.column.onFilterDropdownVisibleChange,
+    );
+
+    if (process.env.NODE_ENV !== 'production') {
+      [
+        ['filterDropdownVisible', 'filterDropdownOpen', props.column.filterDropdownVisible],
+        [
+          'onFilterDropdownVisibleChange',
+          'onFilterDropdownOpenChange',
+          props.column.onFilterDropdownVisibleChange,
+        ],
+      ].forEach(([deprecatedName, newName, prop]) => {
+        devWarning(
+          prop === undefined || prop === null,
+          'Table',
+          `\`${deprecatedName}\` is deprecated. Please use \`${newName}\` instead.`,
+        );
+      });
+    }
     const visible = ref(false);
     const filtered = computed(
       () =>
@@ -166,13 +189,11 @@ export default defineComponent<FilterDropdownProps<any>>({
 
     const triggerVisible = (newVisible: boolean) => {
       visible.value = newVisible;
-      props.column.onFilterDropdownVisibleChange?.(newVisible);
+      onFilterDropdownOpenChange.value?.(newVisible);
     };
 
     const mergedVisible = computed(() =>
-      typeof filterDropdownVisible.value === 'boolean'
-        ? filterDropdownVisible.value
-        : visible.value,
+      typeof filterDropdownOpen.value === 'boolean' ? filterDropdownOpen.value : visible.value,
     );
 
     const propFilteredKeys = computed(() => props.filterState?.filteredKeys);
@@ -234,14 +255,14 @@ export default defineComponent<FilterDropdownProps<any>>({
     });
 
     // ======================= Submit ========================
-    const internalTriggerFilter = (keys: Key[] | undefined | null) => {
+    const internalTriggerFilter = (keys?: Key[]) => {
       const { column, columnKey, filterState } = props;
       const mergedKeys = keys && keys.length ? keys : null;
       if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) {
         return null;
       }
 
-      if (isEqual(mergedKeys, filterState?.filteredKeys)) {
+      if (isEqual(mergedKeys, filterState?.filteredKeys, true)) {
         return null;
       }
 
@@ -318,6 +339,13 @@ export default defineComponent<FilterDropdownProps<any>>({
         return item;
       });
 
+    const getFilterData = (node: any): TreeColumnFilterItem => ({
+      ...node,
+      text: node.title,
+      value: node.key,
+      children: node.children?.map(item => getFilterData(item)) || [],
+    });
+
     const treeData = computed(() => getTreeData({ filters: props.column.filters }));
     // ======================== Style ========================
     const dropdownMenuClass = computed(() =>
@@ -394,7 +422,12 @@ export default defineComponent<FilterDropdownProps<any>>({
                 // onExpand={onExpandChange}
                 filterTreeNode={
                   searchValue.value.trim()
-                    ? node => searchValueMatched(searchValue.value, node.title)
+                    ? node => {
+                        if (typeof filterSearch.value === 'function') {
+                          return filterSearch.value(searchValue.value, getFilterData(node));
+                        }
+                        return searchValueMatched(searchValue.value, node.title);
+                      }
                     : undefined
                 }
               />
@@ -443,6 +476,7 @@ export default defineComponent<FilterDropdownProps<any>>({
         return isEqual(
           (props.column.defaultFilteredValue || []).map(key => String(key)),
           selectedKeys,
+          true,
         );
       }
 
@@ -464,6 +498,9 @@ export default defineComponent<FilterDropdownProps<any>>({
           filters: column.filters,
           visible: mergedVisible.value,
           column: column.__originColumn__,
+          close: () => {
+            triggerVisible(false);
+          },
         });
       } else if (filterDropdownRef.value) {
         dropdownContent = filterDropdownRef.value;
@@ -512,8 +549,8 @@ export default defineComponent<FilterDropdownProps<any>>({
           <Dropdown
             overlay={menu}
             trigger={['click']}
-            visible={mergedVisible.value}
-            onVisibleChange={onVisibleChange}
+            open={mergedVisible.value}
+            onOpenChange={onVisibleChange}
             getPopupContainer={getPopupContainer}
             placement={direction.value === 'rtl' ? 'bottomLeft' : 'bottomRight'}
           >

components/table/hooks/useFilter/FilterWrapper.tsx

@@ -1,5 +1,16 @@
+import KeyCode from '../../../_util/KeyCode';
+import type { KeyboardEventHandler } from '../../../_util/EventInterface';
+
+const onKeyDown: KeyboardEventHandler = event => {
+  const { keyCode } = event;
+  if (keyCode === KeyCode.ENTER) {
+    event.stopPropagation();
+  }
+};
 const FilterDropdownMenuWrapper = (_props, { slots }) => (
-  <div onClick={e => e.stopPropagation()}>{slots.default?.()}</div>
+  <div onClick={e => e.stopPropagation()} onKeydown={onKeyDown}>
+    {slots.default?.()}
+  </div>
 );
 
 export default FilterDropdownMenuWrapper;

components/table/hooks/useFilter/index.tsx

@@ -74,9 +74,9 @@ function injectFilter<RecordType>(
   dropdownPrefixCls: string,
   columns: ColumnsType<RecordType>,
   filterStates: FilterState<RecordType>[],
-  triggerFilter: (filterState: FilterState<RecordType>) => void,
-  getPopupContainer: GetPopupContainer | undefined,
   locale: TableLocale,
+  triggerFilter: (filterState: FilterState<RecordType>) => void,
+  getPopupContainer?: GetPopupContainer | undefined,
   pos?: string,
 ): ColumnsType<RecordType> {
   return columns.map((column, index) => {
@@ -121,9 +121,9 @@ function injectFilter<RecordType>(
           dropdownPrefixCls,
           newColumn.children,
           filterStates,
+          locale,
           triggerFilter,
           getPopupContainer,
-          locale,
           columnPos,
         ),
       };
@@ -217,7 +217,9 @@ function useFilter<RecordType>({
 
   const mergedFilterStates = computed(() => {
     const collectedStates = collectFilterStates(mergedColumns.value, false);
-
+    if (collectedStates.length === 0) {
+      return collectedStates;
+    }
     let filteredKeysIsAllNotControlled = true;
     let filteredKeysIsAllControlled = true;
     collectedStates.forEach(({ filteredKeys }) => {
@@ -230,7 +232,23 @@ function useFilter<RecordType>({
 
     // Return if not controlled
     if (filteredKeysIsAllNotControlled) {
-      return filterStates.value;
+      // Filter column may have been removed
+      const keyList = (mergedColumns.value || []).map((column, index) =>
+        getColumnKey(column, getColumnPos(index)),
+      );
+      return filterStates.value
+        .filter(({ key }) => keyList.includes(key))
+        .map(item => {
+          const col = mergedColumns.value[keyList.findIndex(key => key === item.key)];
+          return {
+            ...item,
+            column: {
+              ...item.column,
+              ...col,
+            },
+            forceFiltered: col.filtered,
+          };
+        });
     }
 
     devWarning(
@@ -257,9 +275,9 @@ function useFilter<RecordType>({
       dropdownPrefixCls.value,
       innerColumns,
       mergedFilterStates.value,
+      locale.value,
       triggerFilter,
       getPopupContainer.value,
-      locale.value,
     );
   };
   return [transformColumns, mergedFilterStates, filters];