Fix table 20220504 (#722)

* fix(table): can not use loading and drag sort at the same time * fix(table): classPrefix * feat(table): support ellipsisTitle * test(table): update snapshots * fix(table): ellipsis path * feat: update common Co-authored-by: sheepluo <sheepluo@tencent.com>
Tencent · May 5, 2022 · ccd69ef · ccd69ef
1 parent cdc45f5
commit ccd69ef
Show file tree

Hide file tree

Showing 15 changed files with 454 additions and 333 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
@@ -189,12 +189,14 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
 
   const { loading, loadingProps } = props;
   const customLoadingText = loading;
-  const loadingContent = loading ? (
-    <Loading loading={!!(loading || customLoadingText)} text={customLoadingText} showOverlay {...loadingProps}>
-      {tableContent}
-    </Loading>
-  ) : (
-    tableContent
+  const loadingContent = loading !== undefined && (
+    <Loading
+      loading={!!loading}
+      text={customLoadingText}
+      attach={() => tableRef.current}
+      showOverlay
+      {...loadingProps}
+    ></Loading>
   );
 
   const { topContent, bottomContent } = props;
@@ -209,6 +211,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
         ) : (
           isFixedHeader && affixedHeader
         ))}
+      {tableContent}
       {loadingContent}
       {showRightDivider && (
         <div

diff --git a/src/table/Ellipsis.tsx b/src/table/Ellipsis.tsx
@@ -22,19 +22,17 @@ export default function Ellipsis(props: EllipsisProps) {
   const { classPrefix } = useConfig();
   const root = useRef<HTMLDivElement>();
   const [isOverflow, setIsOverflow] = useState(false);
-  const [visible, setVisible] = useState(false);
 
   const ellipsisClasses = classNames([`${classPrefix}-table__ellipsis`, `${classPrefix}-text-ellipsis`]);
 
   // 当表格数据量大时，不希望默认渲染全量的 Popup，期望在用户 mouseenter 的时候再显示
   const onTriggerMouseenter = () => {
     if (!root.current) return;
-    setVisible(true);
     setIsOverflow(isNodeOverflow(root.current));
   };
 
   const onTriggerMouseleave = () => {
-    setVisible(false);
+    setIsOverflow(isNodeOverflow(root.current));
   };
 
   // 使用 debounce 有两个原因：1. 避免 safari/firefox 等浏览器不显示省略浮层；2. 避免省略列快速滚动时，出现一堆的省略浮层
@@ -50,19 +48,15 @@ export default function Ellipsis(props: EllipsisProps) {
   );
   let content = null;
   if (isOverflow) {
-    content = (
-      <TPopup
-        content={props.popupContent || cellNode}
-        visible={visible}
-        destroyOnClose={true}
-        zIndex={props.zIndex || 80}
-        attach={props.attach}
-        placement={props.placement}
-        {...props.popupProps}
-      >
-        {ellipsisContent}
-      </TPopup>
-    );
+    const rProps = {
+      content: props.popupContent || cellNode,
+      destroyOnClose: true,
+      zIndex: props.zIndex,
+      attach: props.attach,
+      placement: props.placement,
+      ...(props.popupProps || {}),
+    };
+    content = <TPopup {...rProps}>{ellipsisContent}</TPopup>;
   } else {
     content = ellipsisContent;
   }

diff --git a/src/table/PrimaryTable.tsx b/src/table/PrimaryTable.tsx
@@ -77,11 +77,15 @@ export default function PrimaryTable(props: TPrimaryTableProps) {
       // 添加排序图标和过滤图标
       if (item.sorter || item.filter) {
         const titleContent = renderTitle(item, i);
+        const { ellipsisTitle } = item;
         item.title = (p) => {
           const sortIcon = item.sorter ? renderSortIcon(p) : null;
           const filterIcon = item.filter ? renderFilterIcon(p) : null;
-          return renderTitleWidthIcon([titleContent, sortIcon, filterIcon]);
+          const attach = primaryTableRef.current?.tableContentRef;
+          console.log(primaryTableRef.current?.tableContentRef);
+          return renderTitleWidthIcon([titleContent, sortIcon, filterIcon], p.col, p.colIndex, ellipsisTitle, attach);
         };
+        item.ellipsisTitle = false;
       }
       if (item.children?.length) {
         item.children = getColumns(item.children);

diff --git a/src/table/TBody.tsx b/src/table/TBody.tsx
@@ -152,7 +152,9 @@ export default function TBody(props: TableBodyProps) {
       trProps.onCellClick = props.onCellClick;
     }
 
-    const trNode = <TR key={get(row, props.rowKey || 'id')} {...trProps} onRowMounted={props.handleRowMounted}></TR>;
+    const trNode = (
+      <TR key={get(row, props.rowKey || 'id') || rowIndex} {...trProps} onRowMounted={props.handleRowMounted}></TR>
+    );
     trNodeList.push(trNode);
 
     // 执行展开行渲染

diff --git a/src/table/THead.tsx b/src/table/THead.tsx
@@ -74,6 +74,7 @@ export default function THead(props: TheadProps) {
         const styles = { ...(thStyles.style || {}), width };
         const innerTh = renderTitle(col, index);
         if (!col.colKey) return null;
+        const content = isFunction(col.ellipsisTitle) ? col.ellipsisTitle({ col, colIndex: index }) : undefined;
         return (
           <th
             key={col.colKey}
@@ -83,7 +84,18 @@ export default function THead(props: TheadProps) {
             {...{ rowSpan: rowspanAndColspan.rowspan, colSpan: rowspanAndColspan.colspan }}
           >
             <div className={tableBaseClass.thCellInner}>
-              {col.ellipsis ? <TEllipsis>{innerTh}</TEllipsis> : innerTh}
+              {col.ellipsis && col.ellipsisTitle !== false && col.ellipsisTitle !== null ? (
+                <TEllipsis
+                  placement="bottom"
+                  attach={theadRef.current ? () => theadRef.current.parentNode.parentNode as HTMLElement : undefined}
+                  popupContent={content}
+                  popupProps={typeof col.ellipsisTitle === 'object' ? col.ellipsisTitle : undefined}
+                >
+                  {innerTh}
+                </TEllipsis>
+              ) : (
+                innerTh
+              )}
             </div>
           </th>
         );