fix(table, pagination): 替换新组件及样式 (#1463)

Co-authored-by: maxin <maxin@growingio.com>
growingio · Nov 15, 2021 · 4681bdc · 4681bdc · vercel · Nov 15, 2021
1 parent f591968
commit 4681bdc
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 68 deletions.
diff --git a/src/pagination/style/index.ts b/src/pagination/style/index.ts
@@ -2,4 +2,4 @@ import './index.less';
 
 import '../../button/style';
 import '../../input/style';
-import '../../legacy/select/style';
+import '../../select/style';
diff --git a/src/table/FilterList.tsx b/src/table/FilterList.tsx
@@ -1,31 +1,29 @@
 import React from 'react';
-import { without, concat } from 'lodash';
-import List from '../legacy/list';
-import Checkbox from '../checkbox';
+import List from '../list';
 import { Key } from './interface';
 
 interface FilterListProps {
   prefixCls: string;
   value: Key[];
   onChange: (value: Key[]) => void;
   dataSource: {
-    key: string;
     value: string;
+    label: string;
   }[];
 }
 
 const FilterList = ({ prefixCls, value, onChange, dataSource }: FilterListProps) => (
-  <List className={`${prefixCls}-filter-list`}>
+  <List
+    className={`${prefixCls}-filter-list`}
+    value={value}
+    isMultiple
+    onChange={(changedKeys) => {
+      onChange(Array.isArray(changedKeys) ? changedKeys : [changedKeys]);
+    }}
+  >
     {dataSource.map((item) => (
-      <List.Item
-        key={item.key}
-        className={`${prefixCls}-filter-list-item`}
-        onClick={() => {
-          onChange(value.includes(item.key) ? without(value, item.key) : concat(value, item.key));
-        }}
-      >
-        <Checkbox checked={value.includes(item.key)} />
-        {item.value}
+      <List.Item key={`${item.label}-${item.value}`} value={item.value}>
+        {item.label}
       </List.Item>
     ))}
   </List>

diff --git a/src/table/FilterPopover.tsx b/src/table/FilterPopover.tsx
@@ -12,7 +12,7 @@ import defaultLocale from './locales/zh-CN';
 interface FilterPopoverProps {
   prefixCls: string;
   children: React.ReactElement;
-  onClick: (newFilterState: string[]) => void;
+  onClick: (newFilterState: Key[]) => void;
   filters?: FilterType[];
   values: Key[];
   /**
@@ -30,13 +30,13 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
 
   const { children, onClick, filters = [], values, prefixCls, placeholder = searchText } = props;
   const [searchValue, setSearchValue] = useState<string>('');
-  const [selectFilterKeys, setSelectFilterKeys] = useState<string[]>(values.map((value) => `${value}`));
+  const [selectFilterKeys, setSelectFilterKeys] = useState<Key[]>(values);
   const [visible, setVisible] = useState<boolean>(false);
   const { tableRef } = useContext(TableContext);
 
   useEffect(() => {
     if (visible) {
-      setSelectFilterKeys(values.map((value) => `${value}`));
+      setSelectFilterKeys(values);
     }
   }, [values, visible]);
 
@@ -50,7 +50,7 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
         setVisible(_visible);
         if (_visible === false) {
           setSearchValue('');
-          setSelectFilterKeys(values.map((value) => `${value}`));
+          setSelectFilterKeys(values);
         }
       }}
       placement="bottomLeft"
@@ -69,7 +69,7 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
             prefixCls={prefixCls}
             value={selectFilterKeys}
             onChange={(keys) => {
-              setSelectFilterKeys(keys.map((key) => `${key}`));
+              setSelectFilterKeys(keys);
             }}
             dataSource={filters
               .filter((item) => {
@@ -80,9 +80,9 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
               })
               .map((item) => {
                 if (isObject(item)) {
-                  return { key: item.value, value: item.label };
+                  return { value: item.value, label: item.label };
                 }
-                return { key: item.toString(), value: item.toString() };
+                return { value: item.toString(), label: item.toString() };
               })}
           />
           <div className={`${prefixCls}-filter-popover-footer`}>

diff --git a/src/table/Table.tsx b/src/table/Table.tsx
@@ -197,7 +197,7 @@ function Table<RecordType>(props: TableProps<RecordType>, ref: React.ForwardedRe
 
   const emptyElement = (
     <div className={`${prefixCls}-empty`}>
-      <Page description={emptyText} size="small" {...empty} />
+      <Page description={emptyText} size="normal" type="noData" {...empty} />
     </div>
   );
 

diff --git a/src/table/Title.tsx b/src/table/Title.tsx
@@ -5,7 +5,7 @@ import { isEmpty, isUndefined } from 'lodash';
 import Button from '../button';
 import Tooltip from '../tooltip';
 import FilterPopover from './FilterPopover';
-import { SortOrder, TitleProps } from './interface';
+import { Key, SortOrder, TitleProps } from './interface';
 
 export const getNextSortDirection = (sortDirections: SortOrder[], current: SortOrder): SortOrder =>
   current === null ? sortDirections[0] : sortDirections[sortDirections.indexOf(current) + 1];
@@ -52,7 +52,7 @@ const Title = <RecordType,>(props: TitleProps<RecordType>): React.ReactElement =
       return null;
     }
     const { filteredKeys, filters } = filterState;
-    const handleFilterPopoverClick = (newFilteredKeys: string[]): void => {
+    const handleFilterPopoverClick = (newFilteredKeys: Key[]): void => {
       onTriggerStateUpdate({ filterStates: updateFilterStates({ ...filterState, filteredKeys: newFilteredKeys }) });
     };
 

diff --git a/src/table/demos/Table.stories.tsx b/src/table/demos/Table.stories.tsx
@@ -669,13 +669,13 @@ export const Empty = () => {
 
   return (
     <Table.ResizableTable<DataSourceType>
-      title="无数据，参考 Empty 组件"
+      title="表格无数据时的展示页面，请参考 Page 组件"
       columns={columns}
       rowKey="id"
       pagination={false}
       empty={{
-        image: 'no-data',
-        description: 'description',
+        description: '无数据',
+        type: 'noData',
       }}
     />
   );

diff --git a/src/table/hook/useSelection.tsx b/src/table/hook/useSelection.tsx
@@ -4,9 +4,8 @@
 import React, { useMemo, useCallback } from 'react';
 import { get, intersection, isUndefined, difference, union, isFunction, isString, flatten, flattenDeep } from 'lodash';
 import { ColumnsType, RowSelection, ColumnType, TableProps, Key } from '../interface';
-
 import Checkbox from '../../checkbox';
-import Tooltip from '../../legacy/tooltip';
+import Tooltip from '../../tooltip';
 import useControlledState from '../../utils/hooks/useControlledState';
 
 // 拿到row及其children 所有的key
@@ -156,35 +155,40 @@ const useSelection = <RecordType,>(
       const key = getRowKey(rest[1], rowKey);
       const thisCheckboxProps = getCheckboxProps?.(rest[1]) || {};
       const { tooltipProps, disabled, ...restCheckboxProps } = thisCheckboxProps;
-      return (
-        <Tooltip placement="topLeft" arrowPointAtCenter disabled={!disabled} {...tooltipProps}>
-          <div>
-            <Checkbox
-              {...restCheckboxProps}
-              disabled={disabled || isParentDisabled(key) || isChildDisabled(key)}
-              indeterminate={!isRowAllSelected(key) && isRowPartSelected(key)}
-              checked={
-                Array.isArray(key)
-                  ? key.some((keyItem) => localSelectedRowKeys.includes(keyItem))
-                  : localSelectedRowKeys.includes(key)
-              }
-              onClick={(e) => e.stopPropagation()}
-              onChange={(e) => {
-                getAllDisabledKey(data);
-                const latestLocalSelectedRowKeys = e.target.checked
-                  ? flattenDeep(difference(union(localSelectedRowKeys, flattenDeep([key])), allDisabledKey))
-                  : flattenDeep(difference(localSelectedRowKeys, flattenDeep([key]), allDisabledKey));
-                setLocalSelectedRowKeys(latestLocalSelectedRowKeys);
-
-                const updatedSelectedRowKeys = updateParentCheck(latestLocalSelectedRowKeys, key);
-                setLocalSelectedRowKeys(updatedSelectedRowKeys);
-
-                onChange?.(updatedSelectedRowKeys, getSelectRows(updatedSelectedRowKeys));
-              }}
-            >
-              {disabled ? null : undefined}
-            </Checkbox>
-          </div>
+      const contentNode = (
+        <div>
+          <Checkbox
+            {...restCheckboxProps}
+            disabled={disabled || isParentDisabled(key) || isChildDisabled(key)}
+            indeterminate={!isRowAllSelected(key) && isRowPartSelected(key)}
+            checked={
+              Array.isArray(key)
+                ? key.some((keyItem) => localSelectedRowKeys.includes(keyItem))
+                : localSelectedRowKeys.includes(key)
+            }
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => {
+              getAllDisabledKey(data);
+              const latestLocalSelectedRowKeys = e.target.checked
+                ? flattenDeep(difference(union(localSelectedRowKeys, flattenDeep([key])), allDisabledKey))
+                : flattenDeep(difference(localSelectedRowKeys, flattenDeep([key]), allDisabledKey));
+              setLocalSelectedRowKeys(latestLocalSelectedRowKeys);
+
+              const updatedSelectedRowKeys = updateParentCheck(latestLocalSelectedRowKeys, key);
+              setLocalSelectedRowKeys(updatedSelectedRowKeys);
+
+              onChange?.(updatedSelectedRowKeys, getSelectRows(updatedSelectedRowKeys));
+            }}
+          >
+            {disabled ? null : undefined}
+          </Checkbox>
+        </div>
+      );
+      return disabled ? (
+        contentNode
+      ) : (
+        <Tooltip placement="topLeft" arrowPointAtCenter {...tooltipProps}>
+          {contentNode}
         </Tooltip>
       );
     },

diff --git a/src/table/interface.ts b/src/table/interface.ts
@@ -172,6 +172,10 @@ interface TableProps<RecordType> extends Omit<GioTableProps<RecordType>, 'title'
    * 表格数据为空时的占位内容
    */
   emptyText?: React.ReactNode;
+
+  /**
+   * 自定义表格数据为空时的页面，请参考 Page 组件
+   */
   empty?: PageProps;
   /**
    * 分页/排序/筛选变化时触发

diff --git a/src/table/style/index.less b/src/table/style/index.less
@@ -1,7 +1,4 @@
 @import '../../stylesheet/variables/index.less';
-@import (reference) '../../checkbox/style/index.less';
-@import (reference) '../../popover/style/index.less';
-@import (reference) '../../legacy/empty/style/index.less';
 
 @table-prefix-cls: ~'@{component-prefix}-table-new';
 
@@ -47,9 +44,6 @@
         display: none;
       }
     }
-    .@{checkbox-wrapper-cls} + .@{table-prefix-cls}-resizable-handle {
-      display: none;
-    }
 
     &:hover {
       .@{table-prefix-cls}-resizable-handle {
@@ -354,6 +348,7 @@
 
   &-filter-list {
     height: 160px;
+    margin-top: 4px;
   }
 
   &-search-bar {

diff --git a/src/table/style/index.ts b/src/table/style/index.ts
@@ -1,7 +1,8 @@
 import './index.less';
-import '../../legacy/list/style';
-import '../../legacy/empty/style';
-import '../../checkbox/style';
+import '../../list/style';
+import '../../page/style';
+import '../../tooltip/style';
 import '../../button/style';
 import '../../popover/style';
 import '../../search-bar/style';
+import '../../pagination/style';