@aloudata/aloudata-design 2.5.0 → 2.5.2

package/dist/Table/index.js

@@ -1,4 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -12,15 +14,15 @@ 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, useRef, useState } from 'react';
-import { Empty, ScrollArea, Spin } from '..';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { Empty, Spin } from '..';
 import Pagination from "./components/Pagination";
 import { getTableColumns, prefixCls } from "./helper";
-import useScrollX from "./hooks/useScroll";
-// 32 行高 + 1 底线高度
+import useFixed from "./hooks/useFixed";
+import useScroll from "./hooks/useScroll";
 var HEADER_HEIGHT = 41;
 function Table(props, ref) {
-  var _classnames;
+  var _classnames, _classnames5;
   var columns = props.columns,
     data = props.data,
     rowKey = props.rowKey,
@@ -41,21 +43,24 @@ function Table(props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     totalSize = _useState2[0],
     setTotalSize = _useState2[1];
-  var tableBodyRef = useRef(null);
   var y = scroll.y;
-  var _useScrollX = useScrollX({
+  var _useScroll = useScroll({
       totalSize: totalSize,
       scroll: scroll
     }),
-    realWidth = _useScrollX.realWidth,
-    onBodyScroll = _useScrollX.onBodyScroll,
-    headerRef = _useScrollX.headerRef;
+    realWidth = _useScroll.realWidth,
+    onBodyScroll = _useScroll.onBodyScroll,
+    headerRef = _useScroll.headerRef,
+    bodyRef = _useScroll.bodyRef,
+    isPingLeft = _useScroll.isPingLeft,
+    isPingRight = _useScroll.isPingRight,
+    scrollbarWidth = _useScroll.scrollbarWidth;
   var scrollToFirstRow = useCallback(function () {
-    if (!tableBodyRef.current) {
+    if (!bodyRef.current) {
       return;
     }
-    tableBodyRef.current.scrollTop = 0;
-  }, []);
+    bodyRef.current.scrollTop = 0;
+  }, [bodyRef]);
   useImperativeHandle(ref, function () {
     return {
       scrollToFirstRow: scrollToFirstRow
@@ -67,11 +72,15 @@ function Table(props, ref) {
     }
     return getTableColumns({
       columns: columns,
-      columnSizing: !!columnSizing,
       totalWidth: realWidth,
       onError: onError
     });
-  }, [columns, totalSize, columnSizing, realWidth, onError]);
+  }, [columns, totalSize, realWidth, onError]);
+  var getColumnFixedInfo = useFixed({
+    tableColumns: tableColumns,
+    y: y,
+    scrollbarWidth: scrollbarWidth
+  });
   var tableInstance = useReactTable({
     columns: tableColumns,
     data: data,
@@ -98,26 +107,37 @@ function Table(props, ref) {
     headerStyle.top = _.get(sticky, 'offsetHeader', 0);
   }
   var headerContent = /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _defineProperty(_classnames, prefixCls('overflow-x'), true), _classnames)),
+    className: classnames(prefixCls('header'), (_classnames = {}, _defineProperty(_classnames, prefixCls('overflow-x'), true), _defineProperty(_classnames, prefixCls('sticky'), isStickyWork), _classnames)),
     ref: headerRef,
     style: headerStyle
   }, _.map(headerGroups, function (headerGroup) {
     return /*#__PURE__*/React.createElement("div", {
       className: prefixCls('tr'),
-      key: headerGroup.id
-    }, _.map(headerGroup.headers, function (header) {
+      key: headerGroup.id,
+      style: {
+        width: realWidth
+      }
+    }, _.map(headerGroup.headers, function (header, index) {
       var _classnames2;
+      var _getColumnFixedInfo = getColumnFixedInfo(index, true),
+        fixedClassName = _getColumnFixedInfo.className,
+        fixedStyle = _getColumnFixedInfo.style;
       return /*#__PURE__*/React.createElement("div", {
-        className: prefixCls('th'),
-        style: {
+        className: classnames(prefixCls('th'), fixedClassName),
+        style: _objectSpread({
           width: header.getSize()
-        },
+        }, fixedStyle),
         key: header.id
       }, flexRender(header.column.columnDef.header, header.getContext()), columnSizing && /*#__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))
       }));
+    }), y !== undefined && /*#__PURE__*/React.createElement("div", {
+      className: prefixCls('header-scroll-placeholder'),
+      style: {
+        flexBasis: scrollbarWidth
+      }
     }));
   }));
   var onClickRow = useCallback(function (rowData, rowIndex) {
@@ -138,7 +158,7 @@ function Table(props, ref) {
   var bodyContent = /*#__PURE__*/React.createElement("div", {
     className: prefixCls('body'),
     style: {
-      width: tableInstance.getTotalSize()
+      width: realWidth
     }
   }, rows.length === 0 && !loading ? emptyComponent || /*#__PURE__*/React.createElement("div", {
     className: prefixCls('empty')
@@ -149,45 +169,30 @@ function Table(props, ref) {
       key: row.id,
       className: classnames(prefixCls('tr'), _defineProperty({}, prefixCls('row-hover'), typeof onRowClick === 'function'), rowClassName(row.original, rowIndex)),
       onClick: onClickRow(row.original, rowIndex)
-    }, _.map(row.getVisibleCells(), function (cell) {
+    }, _.map(row.getVisibleCells(), function (cell, colIndex) {
+      var _getColumnFixedInfo2 = getColumnFixedInfo(colIndex),
+        fixedClassName = _getColumnFixedInfo2.className,
+        fixedStyle = _getColumnFixedInfo2.style;
       return /*#__PURE__*/React.createElement("div", {
-        className: prefixCls('td'),
+        className: classnames(prefixCls('td'), fixedClassName),
         key: cell.id,
-        style: {
+        style: _objectSpread({
           width: cell.column.getSize()
-        }
+        }, fixedStyle)
       }, flexRender(cell.column.columnDef.cell, cell.getContext()));
     }));
   }));
-  var tableContent = y && totalSize ? /*#__PURE__*/React.createElement(Spin, {
+  var tableContent = /*#__PURE__*/React.createElement(Spin, {
     spinning: !!loading
   }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls('content')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('header'),
+  }, headerContent, /*#__PURE__*/React.createElement("div", {
     style: {
-      height: HEADER_HEIGHT
-    }
-  }, headerContent), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: totalSize.height - HEADER_HEIGHT
+      height: y && totalSize ? totalSize.height - HEADER_HEIGHT : 'auto'
     },
-    className: prefixCls('body-scroll')
-  }, /*#__PURE__*/React.createElement(ScrollArea, {
-    onViewportScroll: onBodyScroll,
-    ref: tableBodyRef
-  }, bodyContent)))) : /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('content')
-  }, !!loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('spin-mask')
-  }), /*#__PURE__*/React.createElement(Spin, null, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('spin'),
-    style: {
-      position: 'absolute'
-    }
-  }))), headerContent, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ScrollArea, {
-    onViewportScroll: onBodyScroll,
-    ref: tableBodyRef
+    className: classnames(prefixCls('body-scroll'), _defineProperty({}, prefixCls('scroll-y'), y !== undefined)),
+    ref: bodyRef,
+    onScroll: onBodyScroll
   }, bodyContent)));
   var tableStyle = {};
   if (y) {
@@ -206,7 +211,7 @@ function Table(props, ref) {
       });
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('main'), _defineProperty({}, prefixCls('overflow-hidden'), !!y))
+    className: classnames(prefixCls('main'), (_classnames5 = {}, _defineProperty(_classnames5, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames5, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames5, prefixCls('ping-right'), isPingRight), _classnames5))
   }, tableContent)), /*#__PURE__*/React.createElement(Pagination, {
     pagination: pagination,
     scroll: scroll,

package/dist/Table/style/index.less

@@ -4,8 +4,9 @@
 @import '../../ScrollArea/style/index.less';
 @import '../../Empty/style/index.less';
 
+@header-height: 40px;
+
 .ald-table-container {
-  position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -22,7 +23,6 @@
     display: flex;
     flex-direction: column;
     border-spacing: 0;
-    position: relative;
 
     .ald-table-spin {
       position: absolute;
@@ -86,6 +86,55 @@
     position: relative;
     border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
     flex: 0 0 auto;
+
+    &.ald-table-fixed-left,
+    &.ald-table-fixed-right {
+      position: sticky;
+      background-color: #fff;
+      z-index: 2;
+    }
+  }
+
+  .fixed-left-shadow {
+    &::after {
+      position: absolute;
+      right: 0;
+      transform: translateX(100%);
+      top: 0;
+      bottom: 0;
+      width: 30px;
+      transition: box-shadow 0.2s;
+      content: '';
+      pointer-events: none;
+      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06);
+    }
+  }
+
+  .fixed-right-shadow {
+    &::after {
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%);
+      top: 0;
+      bottom: 0;
+      width: 30px;
+      transition: box-shadow 0.2s;
+      content: '';
+      pointer-events: none;
+      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06);
+    }
+  }
+
+  &.ald-table-ping-left {
+    .ald-table-fixed-left {
+      .fixed-left-shadow();
+    }
+  }
+
+  &.ald-table-ping-right {
+    .ald-table-fixed-right {
+      .fixed-right-shadow();
+    }
   }
 
   .ald-table-th {
@@ -99,7 +148,7 @@
     padding-left: var(--alias-spacing-200, 16px);
     font-size: 12px;
     overflow: hidden;
-    height: 40px;
+    height: @header-height;
     display: flex;
     align-items: center;
   }
@@ -130,7 +179,6 @@
 
   .ald-table-body {
     min-height: 96px;
-    overflow: auto;
 
     .ald-table-tr {
       &.ald-table-row-hover:hover {
@@ -186,8 +234,26 @@
   height: 100%;
 }
 
+.ald-table-header {
+  background-color: #fff;
+}
+
+.ald-table-header-scroll-placeholder {
+  height: @header-height;
+  position: sticky;
+  right: 0;
+  background-color: #fff;
+  z-index: 2;
+  flex: 0 0 auto;
+}
+
 .ald-table-body-scroll {
   overflow: auto;
+  height: 100%;
+
+  &.ald-table-scroll-y {
+    overflow-y: scroll;
+  }
 }
 
 .ald-table-empty {

package/dist/Table/types.d.ts

@@ -39,4 +39,8 @@ export interface ITableColumn<TDataItem = unknown> {
     ellipsis?: boolean;
     noPadding?: boolean;
     align?: 'left' | 'center' | 'right';
+    fixed?: 'left' | 'right';
+}
+export interface IInnerTableColumn<TDataItem = unknown> extends ITableColumn<TDataItem> {
+    columnWidths: number[];
 }