fix(table): fix both use ellipsis and onFilter error (#770)

Co-authored-by: zhaoting zhou <zhouzhaoting@growingio.com>
growingio · Feb 5, 2021 · 4722d54 · 4722d54 · vercel · Feb 5, 2021
1 parent 53f4eef
commit 4722d54
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 44 deletions.
diff --git a/src/components/avatar/__tests__/Avatar.test.js b/src/components/avatar/__tests__/Avatar.test.js
@@ -67,7 +67,7 @@ describe('Testing Avatar', () => {
     const wrapper = mount(<Avatar displayTooltip>这是一个很长的文字</Avatar>);
     wrapper.setProps({ placement: 'top' });
     wrapper.find('.gio-avatar').at(0).simulate('mouseenter');
-    await waitForComponentToPaint(wrapper);
+    await waitForComponentToPaint(wrapper, 3000);
     expect(wrapper.exists('.gio-tooltip-placement-top')).toBe(true);
   });
 

diff --git a/src/components/table/FilterPopover.tsx b/src/components/table/FilterPopover.tsx
@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+/* eslint-disable react/jsx-wrap-multilines */
+import React, { useState, useContext } from 'react';
 import Button from '../button';
 import Popover from '../popover';
 import List from '../list';
 import SearchBar from '../search-bar';
+import { TableContext } from './Table';
 
 interface FilterPopoverProps {
   prefixCls: string;
@@ -17,36 +19,36 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
   const [seachValue, setSearchValue] = useState<string>('');
   const [selectFilterKeys, setSelectFilterKeys] = useState<string[]>(values);
   const [visible, setVisible] = useState<boolean>(false);
+  const { tableRef } = useContext(TableContext);
   return (
     <Popover
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      getTooltipContainer={(triggerNode) => triggerNode.parentElement!}
+      getTooltipContainer={(triggerNode) => tableRef?.current || triggerNode.parentElement!}
       arrowContent={null}
       visible={visible}
       onVisibleChange={setVisible}
       placement="bottomLeft"
       trigger="click"
-      contentArea={(
+      contentArea={
         <>
-          <SearchBar placeholder='搜索过滤条件' size='small' value={seachValue} onChange={setSearchValue} />
+          <SearchBar placeholder="搜索过滤条件" size="small" value={seachValue} onChange={setSearchValue} />
           <List
+            wrapStyle={{ padding: 0 }}
             isMultiple
             value={selectFilterKeys}
             onChange={setSelectFilterKeys}
             width={220}
             height={160}
-            dataSource={
-              filters
+            dataSource={filters
               .filter((item: string | number) => item.toString().includes(seachValue))
-              .map((item: string | number) => ({ label: item.toString(), value: item.toString()}))
-            }
+              .map((item: string | number) => ({ label: item.toString(), value: item.toString() }))}
           />
-          <div className='filter-popover-footer'>
+          <div className="filter-popover-footer">
             <Button
-              style={{ color: '#c7cbd8'}}
-              type='text'
+              style={{ color: '#c7cbd8' }}
+              type="text"
               ghost
-              size='small'
+              size="small"
               onClick={() => {
                 setSearchValue('');
                 setSelectFilterKeys([]);
@@ -55,8 +57,8 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
               清除
             </Button>
             <Button
-              style={{ float: 'right'}}
-              size='small'
+              style={{ float: 'right' }}
+              size="small"
               onClick={() => {
                 onClick(selectFilterKeys);
                 setVisible(false);
@@ -66,7 +68,7 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
             </Button>
           </div>
         </>
-      )}
+      }
     >
       {children}
     </Popover>

diff --git a/src/components/table/Table.mdx b/src/components/table/Table.mdx
@@ -0,0 +1,16 @@
+import { Subtitle, ArgsTable } from '@storybook/addon-docs/blocks';
+import Table from './index';
+
+# Table 列表
+
+<Subtitle>通用列表。</Subtitle>
+
+## 参数说明
+
+<ArgsTable of={Table} />
+
+## 代码演示
+
+### 所有Demo
+
+[Example](/?path=/story/functional-components-table--default)
diff --git a/src/components/table/Table.stories.tsx b/src/components/table/Table.stories.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-
+import Docs from './Table.mdx';
 import Table from './index';
 import { TableProps } from './interface';
 import './style';
 
 export default {
-  title: 'Components/Functional/Table',
+  title: 'Functional Components/Table',
   component: Table,
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
 } as Meta;
 
 const Template: Story<TableProps<ExampleData>> = (args) => <Table {...args} />;
@@ -28,7 +33,7 @@ const dataSource: ExampleData[] = [
   },
   {
     key: '2',
-    name: '列表文本',
+    name: '列表文本2',
     age: '列表文本',
     address: '列表文本',
   },
@@ -50,6 +55,17 @@ const columns = [
     title: '列标题2',
     dataIndex: 'age',
     key: 'age',
+    filters: ['名字四个字', '名字不是四个字'],
+    ellipsis: true,
+    onFilter: (value: string, record: ExampleData) => {
+      if (value === '名字四个字') {
+        return record.name.length === 4;
+      }
+      if (value === '名字不是四个字') {
+        return record.name.length !== 4;
+      }
+      return false;
+    },
   },
   {
     title: '列标题3',

diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, forwardRef, createContext } from 'react';
 import RcTable from 'rc-table';
 import classNames from 'classnames';
 import { cloneDeep, isUndefined, get, has, set } from 'lodash';
 import { compose } from 'lodash/fp';
 import usePrefixCls from '../../utils/hooks/use-prefix-cls';
+import useMergeRef from '../../utils/hooks/useMergeRef';
 import useSorter from './hook/useSorter';
 import useFilter from './hook/useFilter';
 import usePagination from './hook/usePagination';
@@ -17,7 +18,15 @@ import Loading from '../loading';
 import useDebounceLoading from '../../utils/hooks/useDebounceLoading';
 import useHackOnRow from './hook/useHackOnRow';
 
-const Table = <RecordType,>(props: TableProps<RecordType>): React.ReactElement => {
+interface TableContextType {
+  tableRef: null | React.MutableRefObject<HTMLDivElement>;
+}
+export const TableContext = createContext({ tableRef: null } as TableContextType);
+
+const Table = <RecordType,>(
+  props: TableProps<RecordType>,
+  ref: React.MutableRefObject<HTMLDivElement>
+): React.ReactElement => {
   const {
     prefixCls: customizePrefixCls,
     title,
@@ -37,7 +46,7 @@ const Table = <RecordType,>(props: TableProps<RecordType>): React.ReactElement =
     style,
     ...rest
   } = props;
-
+  const mergedRef = useMergeRef(ref);
   const prefixCls = usePrefixCls('table', customizePrefixCls);
   const debounceLoading = useDebounceLoading(loading, 1000);
   const onHackRow = useHackOnRow(onRow, hackRowEvent);
@@ -113,27 +122,30 @@ const Table = <RecordType,>(props: TableProps<RecordType>): React.ReactElement =
   );
 
   return (
-    <div
-      className={classNames(`${prefixCls}-wrapper`, className, {
-        [`${prefixCls}-showHover`]: showHover,
-      })}
-      style={style}
-    >
-      <Loading loading={debounceLoading}>
-        <RcTable
-          title={title ? () => title : undefined}
-          prefixCls={prefixCls}
-          columns={composedColumns}
-          data={paginationedData}
-          emptyText={emptyElement}
-          rowKey={rowKey}
-          onRow={onHackRow}
-          {...rest}
-        />
-        <PaginationComponent onTriggerStateUpdate={onTriggerStateUpdate} />
-      </Loading>
-    </div>
+    <TableContext.Provider value={{ tableRef: mergedRef }}>
+      <div
+        className={classNames(`${prefixCls}-wrapper`, className, {
+          [`${prefixCls}-showHover`]: showHover,
+        })}
+        style={style}
+        ref={mergedRef}
+      >
+        <Loading loading={debounceLoading}>
+          <RcTable
+            title={title ? () => title : undefined}
+            prefixCls={prefixCls}
+            columns={composedColumns}
+            data={paginationedData}
+            emptyText={emptyElement}
+            rowKey={rowKey}
+            onRow={onHackRow}
+            {...rest}
+          />
+          <PaginationComponent onTriggerStateUpdate={onTriggerStateUpdate} />
+        </Loading>
+      </div>
+    </TableContext.Provider>
   );
 };
 
-export default Table;
+export default forwardRef(Table);
diff --git a/src/components/table/style/index.less b/src/components/table/style/index.less
@@ -6,6 +6,7 @@
 
 .@{table-prefix-cls} {
   font-size: @size-font-14;
+  text-align: left;
   &-title {
     margin-bottom: 20px;
     color: @color-text-table-head;

diff --git a/src/utils/composeRef.ts b/src/utils/composeRef.ts
@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 
-const composeRef = <T>(...refs: React.Ref<T>[]): React.RefCallback<T> => (node: T) => {
+const composeRef = <T>(...refs: React.Ref<T>[]): React.Ref<T> => (node: T) => {
   refs.forEach((ref) => {
     if (typeof ref === 'function') {
       ref(node);

diff --git a/website/src/components/functional/table/demo/headerStyle/multihelper.tsx b/website/src/components/functional/table/demo/headerStyle/multihelper.tsx
@@ -74,6 +74,7 @@ const columns2 = [
     title: '年龄',
     dataIndex: 'age',
     key: 'age',
+    ellipsis: true,
     info: '这里是用户的年龄',
     filters: ['小孩子', '大人'],
     onFilter: (value, record) => {