fix(table): table empty node can not keep same width as table (#1420)

* fix(table): width of table empty node can not keep with table width * fix(table): empty node width * fix(table): multiple select, missing selectedRowData on select all * fix(table): return value of editableCellState isn't expected * fix(table): avoid ResizeObserver is not defined * docs(table): tree loading expand icon * feat(table): add getTreeExpandedRow * test(table): update snapshots * feat: update common * feat(table): placement = top
Tencent · Sep 5, 2022 · 56b0510 · 56b0510
1 parent 7b89895
commit 56b0510
Show file tree

Hide file tree

Showing 21 changed files with 212 additions and 113 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
@@ -64,6 +64,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
     getThWidthList,
     updateThWidthList,
     setRecalculateColWidthFuncRef,
+    addTableResizeObserver,
   } = useFixed(props, finalColumns);
 
   // 1. 表头吸顶；2. 表尾吸底；3. 底部滚动条吸底；4. 分页器吸底
@@ -181,6 +182,12 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableContentRef]);
 
+  useEffect(
+    () => addTableResizeObserver(tableRef.current),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tableRef],
+  );
+
   useEffect(getTFootHeight, [tableElmRef]);
 
   const newData = isPaginateData ? dataSource : data;

diff --git a/src/table/EditableCell.tsx b/src/table/EditableCell.tsx
@@ -10,6 +10,7 @@ import {
   PrimaryTableRowEditContext,
   PrimaryTableRowValidateContext,
   TdBaseTableProps,
+  PrimaryTableCellParams,
 } from './type';
 import useGlobalIcon from '../hooks/useGlobalIcon';
 import { TableClassName } from './hooks/useClassName';
@@ -88,25 +89,29 @@ const EditableCell = (props: EditableCellProps) => {
 
   const validateEdit = (trigger: 'self' | 'parent') =>
     new Promise((resolve) => {
+      const cellParams: PrimaryTableCellParams<TableRowData> = {
+        col: props.col,
+        row: props.row,
+        colIndex: props.colIndex,
+        rowIndex: props.rowIndex,
+      };
       const params: PrimaryTableRowValidateContext<TableRowData> = {
         result: [
           {
-            col: props.col,
-            row: props.row,
-            colIndex: props.colIndex,
-            rowIndex: props.rowIndex,
+            ...cellParams,
             errorList: [],
             value: editValue,
           },
         ],
         trigger,
       };
-      if (!col.edit?.rules) {
+      const rules = isFunction(col.edit.rules) ? col.edit.rules(cellParams) : col.edit.rules;
+      if (!col.edit || !rules || !rules.length) {
         props.onValidate?.(params);
         resolve(true);
         return;
       }
-      validate(editValue, col.edit?.rules).then((result) => {
+      validate(editValue, rules).then((result) => {
         const list = result?.filter((t) => !t.result);
         params.result[0].errorList = list;
         props.onValidate?.(params);

diff --git a/src/table/Ellipsis.tsx b/src/table/Ellipsis.tsx
@@ -4,16 +4,16 @@ import debounce from 'lodash/debounce';
 
 import { TNode } from '../common';
 import { isNodeOverflow } from '../_util/dom';
-import TPopup, { PopupProps } from '../popup';
+import Tooltip, { TooltipProps } from '../tooltip';
 import useConfig from '../hooks/useConfig';
 
 export interface EllipsisProps {
   content?: string | TNode;
   children?: string | TNode;
   popupContent?: string | number | TNode;
-  placement?: PopupProps['placement'];
+  placement?: TooltipProps['placement'];
   attach?: () => HTMLElement;
-  popupProps?: PopupProps;
+  tooltipProps?: TooltipProps;
   zIndex?: number;
 }
 
@@ -54,9 +54,9 @@ export default function Ellipsis(props: EllipsisProps) {
       zIndex: props.zIndex,
       attach: props.attach,
       placement: props.placement,
-      ...(props.popupProps || {}),
+      ...(props.tooltipProps || {}),
     };
-    content = <TPopup {...rProps}>{ellipsisContent}</TPopup>;
+    content = <Tooltip {...rProps}>{ellipsisContent}</Tooltip>;
   } else {
     content = ellipsisContent;
   }

diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx
@@ -124,7 +124,7 @@ const PrimaryTable = forwardRef((props: TPrimaryTableProps, ref) => {
             errorList && (cellProps.errors = errorList);
           }
           if (props.editableCellState) {
-            cellProps.readonly = props.editableCellState(p);
+            cellProps.readonly = !props.editableCellState(p);
           }
           return <EditableCell {...cellProps} />;
         };

diff --git a/src/table/THead.tsx b/src/table/THead.tsx
@@ -116,7 +116,7 @@ export default function THead(props: TheadProps) {
                   placement="bottom"
                   attach={theadRef.current ? () => theadRef.current.parentNode.parentNode as HTMLElement : undefined}
                   popupContent={content}
-                  popupProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}
+                  tooltipProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}
                 >
                   {innerTh}
                 </TEllipsis>

diff --git a/src/table/TR.tsx b/src/table/TR.tsx
@@ -137,17 +137,15 @@ export default function TR(props: TrProps) {
 
   function renderEllipsisCell(cellParams: BaseTableCellParams<TableRowData>, params: RenderEllipsisCellParams) {
     const { cellNode } = params;
-    const { col, colIndex } = cellParams;
-    // 前两列左对齐显示
-    const placement = colIndex < 2 ? 'top-left' : 'top-right';
+    const { col } = cellParams;
     const content = isFunction(col.ellipsis) ? col.ellipsis(cellParams) : undefined;
     const tableElement = props.tableElm;
     return (
       <TEllipsis
-        placement={placement}
+        placement={'top'}
         attach={tableElement ? () => tableElement : undefined}
         popupContent={content}
-        popupProps={typeof col.ellipsis === 'object' ? col.ellipsis : undefined}
+        tooltipProps={typeof col.ellipsis === 'object' ? col.ellipsis : undefined}
       >
         {cellNode}
       </TEllipsis>

diff --git a/src/table/__tests__/__snapshots__/table.test.tsx.snap b/src/table/__tests__/__snapshots__/table.test.tsx.snap
@@ -23541,47 +23541,70 @@ exports[`tree-select.jsx 1`] = `
       class="t-space-item"
     >
       <div
-        class="t-radio-group t-size-m t-radio-group--filled"
+        class="t-space t-space-horizontal"
+        style="gap: 16px;"
       >
-        <label
-          class="t-radio-button t-is-checked"
+        <div
+          class="t-space-item"
         >
-          <input
-            checked=""
-            class="t-radio-button__former"
-            type="radio"
-            value="1"
-          />
-          <span
-            class="t-radio-button__input"
-          />
-          <span
-            class="t-radio-button__label"
+          <div
+            class="t-radio-group t-size-m t-radio-group--filled"
           >
-            父子行选中独立
-          </span>
-        </label>
-        <label
-          class="t-radio-button"
+            <label
+              class="t-radio-button t-is-checked"
+            >
+              <input
+                checked=""
+                class="t-radio-button__former"
+                type="radio"
+                value="1"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                父子行选中独立
+              </span>
+            </label>
+            <label
+              class="t-radio-button"
+            >
+              <input
+                class="t-radio-button__former"
+                type="radio"
+                value="0"
+              />
+              <span
+                class="t-radio-button__input"
+              />
+              <span
+                class="t-radio-button__label"
+              >
+                父子行选中关联
+              </span>
+            </label>
+            <div
+              class="t-radio-group__bg-block"
+              style="width: 0px; left: 0px;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-space-item"
         >
-          <input
-            class="t-radio-button__former"
-            type="radio"
-            value="0"
-          />
-          <span
-            class="t-radio-button__input"
-          />
-          <span
-            class="t-radio-button__label"
+          <button
+            class="t-button t-button--theme-primary t-button--variant-base"
+            type="button"
           >
-            父子行选中关联
-          </span>
-        </label>
-        <div
-          class="t-radio-group__bg-block"
-          style="width: 0px; left: 0px;"
-        />
+            <span
+              class="t-button__text"
+            >
+              获取树形结构展开的节点
+            </span>
+          </button>
+        </div>
       </div>
     </div>
     <div

diff --git a/src/table/_example/editable-cell.jsx b/src/table/_example/editable-cell.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { Table, Input, Select, DatePicker, MessagePlugin } from 'tdesign-react';
+import dayjs from 'dayjs';
 
 const FRAMEWORK_OPTIONS = [
   { label: 'Vue Framework', value: 'Vue' },
@@ -29,7 +30,7 @@ export default function EditableCellTable() {
 
   const editableCellState = (cellParams) => {
     // 第一行不允许编辑
-    return cellParams.rowIndex === 0;
+    return cellParams.rowIndex !== 0;
   };
 
   const columns = useMemo(
@@ -142,6 +143,13 @@ export default function EditableCellTable() {
             console.log('Edit Date:', context);
             MessagePlugin.success('Success');
           },
+          // 校验规则，此处同 Form 表单
+          rules: () => [
+            {
+              validator: (val) => dayjs(val).isAfter(dayjs()),
+              message: '只能选择今天以后日期',
+            },
+          ],
         },
       },
     ],

diff --git a/src/table/_example/tree-select.jsx b/src/table/_example/tree-select.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { EnhancedTable, Radio, Space } from 'tdesign-react';
+import { EnhancedTable, Radio, Space, Button, MessagePlugin } from 'tdesign-react';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 
@@ -65,11 +65,11 @@ const columns = [
 ];
 
 export default function TableSingleSort() {
-  const [data] = useState([...initData]);
+  const [data, setData] = useState([...initData]);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [checkStrictly, setCheckStrictly] = useState(true);
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
-  const treeTableRef = useRef();
+  const treeTableRef = useRef(null);
 
   useEffect(() => {
     // 包含 treeDataMap 及各类树形操作方法
@@ -78,11 +78,11 @@ export default function TableSingleSort() {
 
   useEffect(
     () => {
-      selectedRowKeys.value = [];
-      data.value = cloneDeep(data.value);
+      setSelectedRowKeys([]);
+      setData(cloneDeep(data));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [checkStrictly.value],
+    [checkStrictly],
   );
 
   // 可使用 treeTableRef.current.treeDataMap 判断是否为叶子结点，或任意结点的层级
@@ -95,12 +95,28 @@ export default function TableSingleSort() {
     setExpandedRowKeys(val);
   };
 
+  const getTreeExpandedRow = () => {
+    const treeExpandedRowKeys = treeTableRef.current.getTreeExpandedRow('unique');
+    console.log('行唯一标识值：', treeExpandedRowKeys);
+
+    const treeExpandedRow = treeTableRef.current.getTreeExpandedRow('data');
+    console.log('行数据：', treeExpandedRow);
+
+    const treeExpandedRowState = treeTableRef.current.getTreeExpandedRow('all');
+    console.log('全部行信息：', treeExpandedRowState);
+
+    MessagePlugin.success('获取成功，请打开控制台查看');
+  }
+
   return (
     <Space direction="vertical">
-      <Radio.Group value={checkStrictly} onChange={setCheckStrictly} variant="default-filled">
-        <Radio.Button value={true}>父子行选中独立</Radio.Button>
-        <Radio.Button value={false}>父子行选中关联</Radio.Button>
-      </Radio.Group>
+      <Space>
+        <Radio.Group value={checkStrictly} onChange={setCheckStrictly} variant="default-filled">
+          <Radio.Button value={true}>父子行选中独立</Radio.Button>
+          <Radio.Button value={false}>父子行选中关联</Radio.Button>
+        </Radio.Group>
+        <Button onClick={getTreeExpandedRow}>获取树形结构展开的节点</Button>
+      </Space>
 
       <EnhancedTable
         ref={treeTableRef}

diff --git a/src/table/_example/tree.jsx b/src/table/_example/tree.jsx
@@ -274,7 +274,12 @@ export default function TableTree() {
     MessagePlugin.success('树形结构获取成功，请打开控制台查看');
   };
 
-  const renderTreeExpandAndFoldIcon = ({ type }) => (type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />);
+  const renderTreeExpandAndFoldIcon = ({ type, row }) => {
+    if (lazyLoadingData?.id === row?.id) {
+      return <Loading size="14px" />;
+    }
+    return (type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />);
+  };
 
   const onPageChange = (pageInfo) => {
     setPagination({ ...pagination, ...pageInfo });
@@ -291,11 +296,11 @@ export default function TableTree() {
   }
 
   const treeExpandIconRender = useMemo(() => {
-    // 懒加载图标渲染
-    if (lazyLoadingData) return lazyLoadingTreeIconRender;
     // 自定义展开图标
-    if (customTreeExpandAndFoldIcon) return renderTreeExpandAndFoldIcon;
-    return undefined;
+    if (customTreeExpandAndFoldIcon) {
+      return renderTreeExpandAndFoldIcon;
+    }
+    return lazyLoadingTreeIconRender;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lazyLoadingData, customTreeExpandAndFoldIcon]);
 

diff --git a/src/table/hooks/useEditableRow.ts b/src/table/hooks/useEditableRow.ts
@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react';
 import get from 'lodash/get';
+import isFunction from 'lodash/isFunction';
 import { PrimaryTableProps } from '../interface';
 import { validate } from '../../form/formModel';
 import { AllValidateResult } from '../../form';
@@ -46,11 +47,12 @@ export function useEditableRow(props: PrimaryTableProps) {
       (item) =>
         new Promise<ErrorListObjectType>((resolve) => {
           const { editedRow, col } = item;
-          if (!col.edit || !col.edit.rules || !col.edit.rules.length) {
+          const rules = isFunction(col.edit.rules) ? col.edit.rules(item) : col.edit.rules;
+          if (!col.edit || !rules || !rules) {
             resolve({ ...item, errorList: [] });
             return;
           }
-          validate(editedRow[col.colKey], col.edit.rules).then((r) => {
+          validate(editedRow[col.colKey], rules).then((r) => {
             resolve({ ...item, errorList: r.filter((t) => !t.result) });
           });
         }),