@kdcloudjs/table 1.0.0

package/es/table/base/calculations.js

@@ -0,0 +1,364 @@
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+import _getIterator from "@babel/runtime-corejs3/core-js/get-iterator";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _typeof from "@babel/runtime-corejs3/helpers/typeof";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof _Symbol === "undefined" || _getIteratorMethod(o) == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = _getIterator(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { var _context10; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context10 = Object.prototype.toString.call(o)).call(_context10, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import { collectNodes, isLeafNode, console } from '../utils';
+import { AUTO_VIRTUAL_THRESHOLD, OVERSCAN_SIZE, sum } from './utils';
+
+function resolveVirtualEnabled(virtualEnum, defaultValue) {
+  if (virtualEnum == null || virtualEnum === 'auto') {
+    return defaultValue;
+  }
+
+  return virtualEnum;
+}
+
+var lockColumnNeedSpecifiedWidthWarned = false;
+
+function warnLockColumnNeedSpecifiedWidth(column) {
+  if (!lockColumnNeedSpecifiedWidthWarned) {
+    lockColumnNeedSpecifiedWidthWarned = true;
+    console.warn('lock=true 的列需要指定宽度', column);
+  }
+}
+
+var columnHiddenDeprecatedWarned = false;
+
+function warnColumnHiddenDeprecated(column) {
+  if (!columnHiddenDeprecatedWarned) {
+    columnHiddenDeprecatedWarned = true;
+    console.warn('column.hidden 已经过时，如果需要隐藏该列，请将其从 columns 数组中移除', column);
+  }
+}
+/** 检查列配置 & 设置默认宽度 & 剔除隐藏的列 */
+
+
+function processColumns(columns, defaultColumnWidth) {
+  if (columns == null || !Array.isArray(columns)) {
+    console.warn('<BaseTable /> props.columns 需要传入一个数组', columns);
+    columns = [];
+  }
+
+  function dfs(columns) {
+    var result = [];
+
+    var _iterator = _createForOfIteratorHelper(columns),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var column = _step.value;
+
+        if (column.width == null) {
+          if (defaultColumnWidth != null) {
+            column = _extends(_extends({}, column), {
+              width: defaultColumnWidth
+            });
+          } else if (process.env.NODE_ENV !== 'production' && isLeafNode(column) && column.lock) {
+            warnLockColumnNeedSpecifiedWidth(column);
+          }
+        }
+
+        if (isLeafNode(column)) {
+          if (column.hidden) {
+            // 被隐藏的列 会在这里被剔除
+            warnColumnHiddenDeprecated(column);
+          } else {
+            result.push(column);
+          }
+        } else {
+          var nextChildren = dfs(column.children); // 如果 nextChildren 为空，说明所有的子节点均被隐藏了，在这里隐藏父节点
+
+          if (nextChildren.length > 0) {
+            result.push(_extends(_extends({}, column), {
+              children: nextChildren
+            }));
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return result;
+  }
+
+  return dfs(columns);
+}
+
+export function getLeftNestedLockCount(columns) {
+  var nestedCount = 0;
+
+  var _iterator2 = _createForOfIteratorHelper(columns),
+      _step2;
+
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var col = _step2.value;
+
+      if (isLock(col)) {
+        nestedCount += 1;
+      } else {
+        break;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  return nestedCount;
+
+  function isLock(col) {
+    if (isLeafNode(col)) {
+      return col.lock;
+    } else {
+      return col.lock || col.children.some(isLock);
+    }
+  }
+}
+
+function getHorizontalRenderRange(_ref) {
+  var _context, _context2;
+
+  var offsetX = _ref.offsetX,
+      maxRenderWidth = _ref.maxRenderWidth,
+      flat = _flatInstanceProperty(_ref),
+      useVirtual = _ref.useVirtual;
+
+  if (!useVirtual.horizontal) {
+    return {
+      leftIndex: 0,
+      leftBlank: 0,
+      rightIndex: flat.full.length,
+      rightBlank: 0
+    };
+  }
+
+  var leftIndex = 0;
+  var centerCount = 0;
+  var leftBlank = 0;
+  var centerRenderWidth = 0;
+  var overscannedOffsetX = Math.max(0, offsetX - OVERSCAN_SIZE);
+
+  while (leftIndex < flat.center.length) {
+    var col = flat.center[leftIndex];
+
+    if (col.width + leftBlank < overscannedOffsetX) {
+      leftIndex += 1;
+      leftBlank += col.width;
+    } else {
+      break;
+    }
+  } // 考虑 over scan 之后，中间部分的列至少需要渲染的宽度
+
+
+  var minCenterRenderWidth = maxRenderWidth + (overscannedOffsetX - leftBlank) + 2 * OVERSCAN_SIZE;
+
+  while (leftIndex + centerCount < flat.center.length) {
+    var _col = flat.center[leftIndex + centerCount];
+
+    if (_col.width + centerRenderWidth < minCenterRenderWidth) {
+      centerRenderWidth += _col.width;
+      centerCount += 1;
+    } else {
+      break;
+    }
+  }
+
+  var rightBlankCount = flat.center.length - leftIndex - centerCount;
+  var rightBlank = sum(_mapInstanceProperty(_context = _sliceInstanceProperty(_context2 = flat.center).call(_context2, flat.center.length - rightBlankCount)).call(_context, function (col) {
+    return col.width;
+  }));
+  return {
+    leftIndex: leftIndex,
+    leftBlank: leftBlank,
+    rightIndex: leftIndex + centerCount + flat.right.length,
+    rightBlank: rightBlank
+  };
+} // 一顿计算，将表格本次渲染所需要的数据都给算出来（代码写得有点乱，有较大优化空间）
+// todo 可以考虑下将 header 部分的计算逻辑也放到这个文件中，目前应该有一些重复的计算逻辑
+
+
+export function calculateRenderInfo(table) {
+  var _context3, _context4, _context5, _context6, _context7, _context8, _context9;
+
+  var _table$state = table.state,
+      offsetX = _table$state.offsetX,
+      maxRenderWidth = _table$state.maxRenderWidth;
+  var _table$props = table.props,
+      useVirtualProp = _table$props.useVirtual,
+      columnsProp = _table$props.columns,
+      dataSourceProp = _table$props.dataSource,
+      defaultColumnWidth = _table$props.defaultColumnWidth;
+  var columns = processColumns(columnsProp, defaultColumnWidth);
+  var leftNestedLockCount = getLeftNestedLockCount(columns);
+  var fullFlat = collectNodes(columns, 'leaf-only');
+  var flat;
+  var nested;
+  var useVirtual;
+
+  if (leftNestedLockCount === columns.length) {
+    flat = {
+      left: [],
+      right: [],
+      full: fullFlat,
+      center: fullFlat
+    };
+    nested = {
+      left: [],
+      right: [],
+      full: columns,
+      center: columns
+    };
+    useVirtual = {
+      horizontal: false,
+      vertical: false,
+      header: false
+    };
+  } else {
+    var leftNested = _sliceInstanceProperty(columns).call(columns, 0, leftNestedLockCount);
+
+    var rightNestedLockCount = getLeftNestedLockCount(_sliceInstanceProperty(columns).call(columns).reverse());
+
+    var centerNested = _sliceInstanceProperty(columns).call(columns, leftNestedLockCount, columns.length - rightNestedLockCount);
+
+    var rightNested = _sliceInstanceProperty(columns).call(columns, columns.length - rightNestedLockCount);
+
+    var shouldEnableHozVirtual = fullFlat.length >= AUTO_VIRTUAL_THRESHOLD && fullFlat.every(function (col) {
+      return col.width != null;
+    });
+    var shouldEnableVerVirtual = dataSourceProp.length >= AUTO_VIRTUAL_THRESHOLD;
+    useVirtual = {
+      horizontal: resolveVirtualEnabled(_typeof(useVirtualProp) === 'object' ? useVirtualProp.horizontal : useVirtualProp, shouldEnableHozVirtual),
+      vertical: resolveVirtualEnabled(_typeof(useVirtualProp) === 'object' ? useVirtualProp.vertical : useVirtualProp, shouldEnableVerVirtual),
+      header: resolveVirtualEnabled(_typeof(useVirtualProp) === 'object' ? useVirtualProp.header : useVirtualProp, false)
+    };
+    flat = {
+      left: collectNodes(leftNested, 'leaf-only'),
+      full: fullFlat,
+      right: collectNodes(rightNested, 'leaf-only'),
+      center: collectNodes(centerNested, 'leaf-only')
+    };
+    nested = {
+      left: leftNested,
+      full: columns,
+      right: rightNested,
+      center: centerNested
+    };
+  }
+
+  var horizontalRenderRange = getHorizontalRenderRange({
+    maxRenderWidth: maxRenderWidth,
+    offsetX: offsetX,
+    useVirtual: useVirtual,
+    flat: flat
+  });
+  var verticalRenderRange = table.getVerticalRenderRange(useVirtual);
+  var leftBlank = horizontalRenderRange.leftBlank,
+      leftIndex = horizontalRenderRange.leftIndex,
+      rightBlank = horizontalRenderRange.rightBlank,
+      rightIndex = horizontalRenderRange.rightIndex;
+
+  var unfilteredVisibleColumnDescriptors = _concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(_mapInstanceProperty(_context4 = flat.left).call(_context4, function (col, i) {
+    return {
+      type: 'normal',
+      col: col,
+      colIndex: i
+    };
+  })), [leftBlank > 0 && {
+    type: 'blank',
+    blankSide: 'left',
+    width: leftBlank
+  }], _toConsumableArray(_mapInstanceProperty(_context5 = _sliceInstanceProperty(_context6 = flat.center).call(_context6, leftIndex, rightIndex)).call(_context5, function (col, i) {
+    return {
+      type: 'normal',
+      col: col,
+      colIndex: flat.left.length + leftIndex + i
+    };
+  })), [rightBlank > 0 && {
+    type: 'blank',
+    blankSide: 'right',
+    width: rightBlank
+  }], _toConsumableArray(_mapInstanceProperty(_context7 = flat.right).call(_context7, function (col, i) {
+    return {
+      type: 'normal',
+      col: col,
+      colIndex: flat.full.length - flat.right.length + i
+    };
+  })));
+
+  var visibleColumnDescriptors = _filterInstanceProperty(unfilteredVisibleColumnDescriptors).call(unfilteredVisibleColumnDescriptors, Boolean); // const totalWidth = visibleColumnDescriptors.reduce((pre, cur) => {
+  //   if (cur.type === 'blank') {
+  //     return cur.width + pre
+  //   } else {
+  //     return cur.col.width + pre
+  //   }
+  // }, 0)
+  // if (totalWidth < maxRenderWidth) {
+  //   visibleColumnDescriptors.push({
+  //     type: 'blank',
+  //     blankSide: 'left',
+  //     width: `width: calc(100% - ${totalWidth}px)`
+  //   } as VisibleColumnDescriptor)
+  // }
+
+
+  var fullFlatCount = flat.full.length;
+  var leftFlatCount = flat.left.length;
+  var rightFlatCount = flat.right.length;
+  var stickyLeftMap = new _Map();
+  var stickyLeft = 0;
+
+  for (var i = 0; i < leftFlatCount; i++) {
+    stickyLeftMap.set(i, stickyLeft);
+    stickyLeft += flat.full[i].width;
+  }
+
+  var stickyRightMap = new _Map();
+  var stickyRight = 0;
+
+  for (var _i = 0; _i < rightFlatCount; _i++) {
+    stickyRightMap.set(fullFlatCount - 1 - _i, stickyRight);
+    stickyRight += flat.full[fullFlatCount - 1 - _i].width;
+  }
+
+  var leftLockTotalWidth = sum(_mapInstanceProperty(_context8 = flat.left).call(_context8, function (col) {
+    return col.width;
+  }));
+  var rightLockTotalWidth = sum(_mapInstanceProperty(_context9 = flat.right).call(_context9, function (col) {
+    return col.width;
+  }));
+  return {
+    horizontalRenderRange: horizontalRenderRange,
+    verticalRenderRange: verticalRenderRange,
+    visible: visibleColumnDescriptors,
+    flat: flat,
+    nested: nested,
+    useVirtual: useVirtual,
+    stickyLeftMap: stickyLeftMap,
+    stickyRightMap: stickyRightMap,
+    leftLockTotalWidth: leftLockTotalWidth,
+    rightLockTotalWidth: rightLockTotalWidth,
+    hasLockColumn: nested.left.length > 0 || nested.right.length > 0
+  };
+}

package/es/table/base/colgroup.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { VisibleColumnDescriptor } from './interfaces';
+export declare function Colgroup({ descriptors }: {
+    descriptors: VisibleColumnDescriptor[];
+}): JSX.Element;

package/es/table/base/colgroup.js

@@ -0,0 +1,22 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+export function Colgroup(_ref) {
+  var descriptors = _ref.descriptors;
+  return /*#__PURE__*/React.createElement("colgroup", null, _mapInstanceProperty(descriptors).call(descriptors, function (descriptor) {
+    if (descriptor.type === 'blank') {
+      return /*#__PURE__*/React.createElement("col", {
+        key: descriptor.blankSide,
+        style: {
+          width: descriptor.width
+        }
+      });
+    }
+
+    return /*#__PURE__*/React.createElement("col", {
+      key: descriptor.colIndex,
+      style: {
+        width: descriptor.col.width
+      }
+    });
+  }));
+}

package/es/table/base/empty.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { VisibleColumnDescriptor } from './interfaces';
+export interface EmptyTableProps {
+    descriptors: VisibleColumnDescriptor[];
+    isLoading: boolean;
+    emptyCellHeight?: number;
+    EmptyContent?: React.ComponentType;
+}
+export declare function EmptyHtmlTable({ descriptors, isLoading, emptyCellHeight, EmptyContent }: EmptyTableProps): JSX.Element;

package/es/table/base/empty.js

@@ -0,0 +1,38 @@
+import cx from 'classnames';
+import React, { Fragment } from 'react';
+import { Colgroup } from './colgroup';
+import { Classes } from './styles';
+var DefaultEmptyContent = /*#__PURE__*/React.memo(function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    alt: "empty-image",
+    className: "empty-image",
+    src: "//img.alicdn.com/tfs/TB1l1LcM3HqK1RjSZJnXXbNLpXa-50-50.svg"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "empty-tips"
+  }, "\u6CA1\u6709\u7B26\u5408\u67E5\u8BE2\u6761\u4EF6\u7684\u6570\u636E", /*#__PURE__*/React.createElement("br", null), "\u8BF7\u4FEE\u6539\u6761\u4EF6\u540E\u91CD\u65B0\u67E5\u8BE2"));
+});
+export function EmptyHtmlTable(_ref) {
+  var descriptors = _ref.descriptors,
+      isLoading = _ref.isLoading,
+      emptyCellHeight = _ref.emptyCellHeight,
+      _ref$EmptyContent = _ref.EmptyContent,
+      EmptyContent = _ref$EmptyContent === void 0 ? DefaultEmptyContent : _ref$EmptyContent;
+  var show = !isLoading;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("table", {
+    key: "table"
+  }, /*#__PURE__*/React.createElement(Colgroup, {
+    descriptors: descriptors
+  }), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
+    className: cx(Classes.tableRow, 'first', 'last', 'no-hover'),
+    "data-rowindex": 0
+  }, /*#__PURE__*/React.createElement("td", {
+    className: cx(Classes.tableCell, 'first', 'last'),
+    colSpan: descriptors.length,
+    style: {
+      height: emptyCellHeight !== null && emptyCellHeight !== void 0 ? emptyCellHeight : 200
+    }
+  })))), show && /*#__PURE__*/React.createElement("div", {
+    className: Classes.emptyWrapper,
+    key: "empty"
+  }, /*#__PURE__*/React.createElement(EmptyContent, null)));
+}

package/es/table/base/header.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { RenderInfo } from './interfaces';
+export default function TableHeader({ info }: {
+    info: RenderInfo;
+}): JSX.Element;