@hi-ui/table 4.2.0 → 4.3.1

package/lib/esm/TbodyContent.js

@@ -0,0 +1,105 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React__default, { forwardRef } from 'react';
+import { getPrefixCls } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+import { EmptyState } from '@hi-ui/empty-state';
+import { TableRow } from './TableRow.js';
+import { useTableContext } from './context.js';
+
+var _prefix = getPrefixCls('table-body');
+
+var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
+      emptyContent = _ref.emptyContent;
+
+  var _useTableContext = useTableContext(),
+      columns = _useTableContext.columns,
+      isExpandTreeRows = _useTableContext.isExpandTreeRows,
+      transitionData = _useTableContext.transitionData,
+      scrollBodyElementRef = _useTableContext.scrollBodyElementRef,
+      hasAvgColumn = _useTableContext.hasAvgColumn,
+      avgRow = _useTableContext.avgRow,
+      hasSumColumn = _useTableContext.hasSumColumn,
+      sumRow = _useTableContext.sumRow,
+      measureRowElementRef = _useTableContext.measureRowElementRef;
+
+  var getRequiredProps = useLatestCallback(function (id) {
+    return {
+      // @ts-ignore
+      expandedTree: isExpandTreeRows(id) // checked: isCheckedId(id),
+      // semiChecked: isSemiCheckedId(id),
+      // selected: selectedId === id,
+      // loading: isLoadingId(id),
+      // focused: focusedId === id,
+
+    };
+  }); // 外层增加 div 作为滚动容器
+
+  return /*#__PURE__*/React__default.createElement("tbody", null, isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, transitionData.map(function (row, index) {
+    return /*#__PURE__*/React__default.createElement(TableRow, Object.assign({
+      ref: index === 0 ? measureRowElementRef : null,
+      // key={depth + index}
+      key: row.id,
+      // @ts-ignore
+      rowIndex: index,
+      rowData: row
+    }, getRequiredProps(row.id)));
+  }), hasSumColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
+    key: sumRow.id,
+    rowIndex: transitionData.length,
+    rowData: sumRow,
+    isSumRow: true
+  }) : null, hasAvgColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
+    key: avgRow.id,
+    rowIndex: transitionData.length + 1,
+    rowData: avgRow,
+    isAvgRow: true
+  }) : null) : // 空状态，colSpan 占满表格整行
+  renderEmptyContent(Object.assign({
+    className: prefixCls + "-empty-content",
+    colSpan: columns.length,
+    emptyContent: emptyContent
+  }, scrollBodyElementRef.current ? {
+    scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
+  } : {})));
+});
+
+if (__DEV__) {
+  TbodyContent.displayName = 'TbodyContent';
+}
+/**
+ * 负责空状态渲染
+ */
+
+
+var renderEmptyContent = function renderEmptyContent(_ref2) {
+  var className = _ref2.className,
+      colSpan = _ref2.colSpan,
+      emptyContent = _ref2.emptyContent,
+      scrollBodyWidth = _ref2.scrollBodyWidth;
+  return /*#__PURE__*/React__default.createElement("tr", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: colSpan
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'sticky',
+      left: 0,
+      width: scrollBodyWidth !== null && scrollBodyWidth !== void 0 ? scrollBodyWidth : '100%',
+      overflow: 'hidden'
+    }
+  }, emptyContent || /*#__PURE__*/React__default.createElement(EmptyState, null))));
+};
+
+export { TbodyContent, renderEmptyContent };

package/lib/esm/TheadContent.js

@@ -0,0 +1,96 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __rest } from 'tslib';
+import React__default, { forwardRef } from 'react';
+import { Resizable } from 'react-resizable';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { isFunction } from '@hi-ui/type-assertion';
+import { useCheckState } from '@hi-ui/use-check-state';
+import { useTableContext } from './context.js';
+import { renderFilter } from './TableAdvancedFilter.js';
+
+var _prefix = getPrefixCls('table-header');
+
+var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+      rest = __rest(_a, ["prefixCls"]);
+
+  var _useTableContext = useTableContext(),
+      groupedColumns = _useTableContext.groupedColumns,
+      resizable = _useTableContext.resizable,
+      colWidths = _useTableContext.colWidths,
+      isHoveredHighlightCol = _useTableContext.isHoveredHighlightCol,
+      isHighlightedCol = _useTableContext.isHighlightedCol,
+      onColumnResizable = _useTableContext.onColumnResizable,
+      getStickyColProps = _useTableContext.getStickyColProps,
+      showColMenu = _useTableContext.showColMenu,
+      setHeaderTableElement = _useTableContext.setHeaderTableElement;
+
+  var activeColumnKeysAction = useCheckState();
+  return /*#__PURE__*/React__default.createElement("thead", Object.assign({}, rest), groupedColumns.map(function (cols, colsIndex) {
+    return /*#__PURE__*/React__default.createElement("tr", {
+      key: colsIndex,
+      ref: setHeaderTableElement
+    }, cols.map(function (col, colIndex) {
+      var _ref = col || {},
+          dataKey = _ref.dataKey,
+          title = _ref.title,
+          raw = _ref.raw;
+
+      var titleContent = isFunction(title) ? title(col) : title;
+      titleContent = resizable ? /*#__PURE__*/React__default.createElement("span", {
+        className: prefixCls + "-header__title"
+      }, titleContent) : titleContent;
+      var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
+        key: dataKey
+      }, getStickyColProps(col), {
+        className: cx(prefixCls + "-cell", raw.className, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active"),
+        // @ts-ignore
+        colSpan: col.colSpan,
+        // @ts-ignore
+        rowSpan: col.rowSpan
+      }), titleContent, renderFilter({
+        prefixCls: prefixCls + "-filter",
+        columnKey: dataKey,
+        showColMenu: showColMenu,
+        column: col,
+        onOpen: function onOpen() {
+          return activeColumnKeysAction.add(dataKey);
+        },
+        onClose: function onClose() {
+          return activeColumnKeysAction.remove(dataKey);
+        }
+      }));
+      return resizable && colIndex !== colWidths.length - 1 ? /*#__PURE__*/React__default.createElement(Resizable, {
+        key: colIndex,
+        className: prefixCls + "__resizable",
+        draggableOpts: {
+          enableUserSelectHack: false
+        },
+        handle: /*#__PURE__*/React__default.createElement("span", {
+          className: prefixCls + "__resizable-handle"
+        }),
+        height: 0,
+        width: colWidths[colIndex],
+        onResize: function onResize(evt, options) {
+          onColumnResizable(evt, options, colIndex);
+        }
+      }, cell) : cell;
+    }));
+  }));
+});
+
+if (__DEV__) {
+  TheadContent.displayName = 'TheadContent';
+}
+
+export { TheadContent };

package/lib/esm/hooks/use-col-width.js

@@ -12,7 +12,8 @@ import { getGroupItemWidth } from '../utils/index.js';
 import { useUpdateEffect } from '@hi-ui/use-update-effect';
 
 var useColWidth = function useColWidth(_ref) {
-  var columns = _ref.columns,
+  var resizable = _ref.resizable,
+      columns = _ref.columns,
       virtual = _ref.virtual;
   var measureRowElementRef = React__default.useRef(null);
 
@@ -72,19 +73,17 @@ var useColWidth = function useColWidth(_ref) {
       var _resizeObserver = new ResizeObserver(function () {
         if (virtual) {
           setColWidths(getVirtualWidths());
-        } else {
-          if (measureRowElement.childNodes) {
-            var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node) {
-              return node.getBoundingClientRect().width || 0;
-            });
-
-            if (_realColumnsWidth.some(function (width) {
-              return width && width > 0;
-            })) {
-              setColWidths(_realColumnsWidth);
-            }
-          }
-        }
+        } // else {
+        //   if (measureRowElement.childNodes) {
+        //     const _realColumnsWidth = Array.from(measureRowElement.childNodes).map((node) => {
+        //       return (node as HTMLElement).getBoundingClientRect().width || 0
+        //     })
+        //     if (_realColumnsWidth.some((width) => width && width > 0)) {
+        //       setColWidths(_realColumnsWidth)
+        //     }
+        //   }
+        // }
+
       });
 
       _resizeObserver.observe(measureRowElement);
@@ -102,26 +101,32 @@ var useColWidth = function useColWidth(_ref) {
 
 
   var minColWidth = React__default.useMemo(function () {
-    if (headerTableElement && headerTableElement.childNodes && headerTableElement.childNodes[1].childNodes[0]) {
-      var _minColWidth = Array.from(headerTableElement.childNodes[1].childNodes[0].childNodes).map(function (th) {
-        // @ts-ignore
-        return th.childNodes[0].className === 'hi-table__header__title' ? // @ts-ignore
-        th.childNodes[0].offsetWidth : 0;
+    if (resizable && headerTableElement) {
+      var resizableHandlerWidth = 4;
+
+      var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
+        var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
+        var childNodes = Array.from(th.childNodes);
+        return childNodes.map(function (child) {
+          return child.offsetWidth;
+        }).reduce(function (prev, next) {
+          return prev + next;
+        }) + thPaddingLeft * 2 + resizableHandlerWidth;
       });
 
       return _minColWidth;
     }
 
     return Array(columns.length).fill(0);
-  }, [columns, headerTableElement]);
+  }, [columns.length, headerTableElement, resizable]);
   /**
    * 列宽拖拽 resize，只处理拖拽线两边的列宽度
    */
 
   var onColumnResizable = React__default.useCallback(function (_, _ref2, index) {
     var size = _ref2.size;
-    var minWidth = minColWidth[index] + 31;
-    var anotherMinWidth = minColWidth[index + 1] + 31;
+    var minWidth = minColWidth[index];
+    var anotherMinWidth = minColWidth[index + 1];
     var nextWidth = size.width > minWidth ? size.width : minWidth;
     setColWidths(function (prev) {
       var nextColWidths = [].concat(prev);