@aloudata/aloudata-design 2.12.4 → 2.12.5

package/dist/Table/index.js

@@ -14,7 +14,7 @@ import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-tabl
 import classnames from 'classnames';
 import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { Empty, Spin } from '..';
 import ExpandCell from "./components/ExpandCell";
 import Footer from "./components/Footer";
@@ -54,13 +54,14 @@ function Table(props, ref) {
       totalSize: totalSize,
       scroll: scroll
     }),
-    realWidth = _useScroll.realWidth,
+    containerWidth = _useScroll.containerWidth,
     onBodyScroll = _useScroll.onBodyScroll,
     headerRef = _useScroll.headerRef,
     bodyRef = _useScroll.bodyRef,
     isPingLeft = _useScroll.isPingLeft,
     isPingRight = _useScroll.isPingRight,
-    scrollbarWidth = _useScroll.scrollbarWidth;
+    scrollbarWidth = _useScroll.scrollbarWidth,
+    changeIsPing = _useScroll.changeIsPing;
   var scrollToFirstRow = useCallback(function () {
     if (!bodyRef.current) {
       return;
@@ -80,21 +81,13 @@ function Table(props, ref) {
   var expandableConfig = getExpandableConfig(expandable);
   var rowSelectionInfo = useRowSelection(props);
   var tableColumns = useMemo(function () {
-    if (!totalSize || !realWidth) {
-      return [];
-    }
     return getTableColumns({
       columns: rowSelectionInfo.columns,
-      totalWidth: realWidth,
+      containerWidth: containerWidth || 0,
       onError: onError,
       onSort: onSort
     });
-  }, [totalSize, realWidth, onError, onSort, rowSelectionInfo.columns]);
-  var getColumnFixedInfo = useFixed({
-    tableColumns: tableColumns,
-    y: y,
-    scrollbarWidth: scrollbarWidth
-  });
+  }, [containerWidth, onError, onSort, rowSelectionInfo.columns]);
   var tableInstance = useReactTable({
     columns: tableColumns,
     // 排除掉被折叠的行
@@ -105,9 +98,18 @@ function Table(props, ref) {
     },
     columnResizeMode: 'onChange'
   });
+  var headerGroups = tableInstance.getHeaderGroups();
+  var columnWidths = headerGroups[0].headers.map(function (header) {
+    return header.getSize();
+  });
+  var getColumnFixedInfo = useFixed({
+    columnWidths: columnWidths,
+    tableColumns: tableColumns,
+    y: y,
+    scrollbarWidth: scrollbarWidth
+  });
 
   // 渲染 header
-  var headerGroups = tableInstance.getHeaderGroups();
   var _tableInstance$getRow = tableInstance.getRowModel(),
     rows = _tableInstance$getRow.rows;
   var isStickyWork = !!sticky && y === undefined;
@@ -115,8 +117,13 @@ function Table(props, ref) {
   if (isStickyWork && _.get(sticky, 'offsetHeader')) {
     headerStyle.top = _.get(sticky, 'offsetHeader', 0);
   }
+  var totalColumnsWidth = _.sum(columnWidths);
+  useEffect(function () {
+    // 总列宽改变时，重新计算是否需要显示固定列的阴影
+    changeIsPing();
+  }, [changeIsPing, totalColumnsWidth]);
   var headerContent = /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('overflow-x'), true), _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _classnames)),
+    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('overflow-x'), true), _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _defineProperty(_classnames, prefixCls('resizing'), tableInstance.getState().columnSizingInfo.isResizingColumn), _classnames)),
     ref: headerRef,
     style: headerStyle
   }, _.map(headerGroups, function (headerGroup) {
@@ -124,10 +131,9 @@ function Table(props, ref) {
       className: prefixCls('tr'),
       key: headerGroup.id,
       style: {
-        width: realWidth
+        width: totalColumnsWidth
       }
     }, _.map(headerGroup.headers, function (header, index) {
-      var _classnames2;
       // 选择行的列不能拖动宽度
       var showResizer = columnSizing && !(!!rowSelectionInfo.isRowSelectionEnabled && index === 0);
       var _getColumnFixedInfo = getColumnFixedInfo(index, true),
@@ -142,7 +148,7 @@ function Table(props, ref) {
       }, flexRender(header.column.columnDef.header, header.getContext()), showResizer && /*#__PURE__*/React.createElement("div", {
         onMouseDown: header.getResizeHandler(),
         onTouchStart: header.getResizeHandler(),
-        className: classnames(prefixCls('resizer'), (_classnames2 = {}, _defineProperty(_classnames2, prefixCls('self-resizing'), header.column.getIsResizing()), _defineProperty(_classnames2, prefixCls('resizing'), tableInstance.getState().columnSizingInfo.isResizingColumn), _classnames2))
+        className: classnames(prefixCls('resizer'), _defineProperty({}, prefixCls('self-resizing'), header.column.getIsResizing()))
       }));
     }), y !== undefined && /*#__PURE__*/React.createElement("div", {
       className: prefixCls('header-scroll-placeholder'),
@@ -177,7 +183,7 @@ function Table(props, ref) {
   var bodyContent = /*#__PURE__*/React.createElement("div", {
     className: prefixCls('body'),
     style: {
-      width: realWidth
+      width: totalColumnsWidth
     }
   }, isEmpty ? /*#__PURE__*/React.createElement("div", {
     style: {

package/dist/Table/style/index.less

@@ -7,6 +7,7 @@
 @import '../../TextLink/style/index.less';
 
 @header-height: 40px;
+@fixed-z-index: 2;
 
 .ald-table-container {
   display: flex;
@@ -38,29 +39,8 @@
     flex-direction: column;
     border-spacing: 0;
 
-    .ald-table-spin {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 300px;
-      max-height: 100%;
-      z-index: 2;
-
-      .spinner-mask {
-        opacity: 0;
-      }
-    }
-
-    .ald-table-spin-mask {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      opacity: 0.4;
-      z-index: 1;
+    .spinner-mask {
+      z-index: @fixed-z-index + 1;
     }
   }
 
@@ -73,18 +53,27 @@
     cursor: col-resize;
     user-select: none;
     touch-action: none;
+    background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
 
     &::after {
+      position: absolute;
       content: '';
       display: block;
-      height: 100%;
+      height: 16px;
       width: 1px;
-      position: absolute;
-      top: 50%;
-      right: -1px;
       z-index: 1;
-      transform: translateY(-50%);
-      background-color: var(--alias-colors-border-default, #e5e7eb);
+      top: 50%;
+      transform: translate(4px, -50%);
+      background: var(--alias-colors-border-strong, #d1d5db);
+    }
+
+    &.ald-table-self-resizing {
+      width: 2px;
+      background-color: #126fdd;
+
+      &::after {
+        display: none;
+      }
     }
   }
 
@@ -105,7 +94,7 @@
     &.ald-table-fixed-left,
     &.ald-table-fixed-right {
       position: sticky;
-      z-index: 2;
+      z-index: @fixed-z-index;
     }
   }
 
@@ -174,6 +163,7 @@
     padding: @td-padding-size;
     font-size: 12px;
     overflow: hidden;
+    white-space: nowrap;
     height: @header-height;
     display: flex;
     align-items: center;
@@ -320,7 +310,11 @@
 }
 
 .ald-table-header {
-  background-color: #fff;
+  background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
+
+  &.ald-table-resizing {
+    cursor: col-resize;
+  }
 }
 
 .ald-table-header-scroll-placeholder {
@@ -362,7 +356,13 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  justify-content: center;
+}
+
+.ald-table-row-selection-all-header-wrap {
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  height: 100%;
 }
 
 /** Footer **/

package/dist/Table/tests/helper.d.ts

@@ -0,0 +1,14 @@
+export declare function getTableProps(): {
+    columns: import("../types").ITableColumn<object>[];
+    data: {
+        id: string;
+        firstName: string;
+        lastName: string;
+        date: string;
+        description: string;
+    }[];
+    scroll: {
+        x: string;
+        y: string;
+    };
+};

package/dist/Table/tests/helper.js

@@ -0,0 +1,41 @@
+import _ from 'lodash';
+export function getTableProps() {
+  var columns = [{
+    title: 'First Name',
+    dataIndex: 'firstName',
+    width: '20%'
+  }, {
+    title: 'Last Name',
+    dataIndex: 'lastName',
+    width: '20%'
+  }, {
+    title: 'Date',
+    dataIndex: 'date',
+    width: '20%'
+  }, {
+    title: 'description',
+    dataIndex: 'description',
+    width: '30%'
+  }, {
+    title: 'Action',
+    dataIndex: '',
+    width: 60
+  }];
+  var data = _.map(_.range(10), function (i) {
+    return {
+      id: i.toString(),
+      firstName: "firstName_".concat(i),
+      lastName: "lastName_".concat(i),
+      date: "date_".concat(i),
+      description: "description_".concat(i)
+    };
+  });
+  return {
+    columns: columns,
+    data: data,
+    scroll: {
+      x: '100%',
+      y: '100%'
+    }
+  };
+}

package/dist/Table/types.d.ts

@@ -41,6 +41,7 @@ export interface ITableColumn<TDataItem = unknown> {
     title: string | React.ReactNode;
     dataIndex?: string;
     width?: number | string;
+    minWidth?: number;
     render?: (text: any, record: TDataItem, rowIndex: number) => React.ReactNode;
     ellipsis?: boolean;
     noPadding?: boolean;