@kdcloudjs/table 1.0.0

package/lib/table/base/helpers/__test__/visible-part.test.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _visiblePart = require("../visible-part");
+
+var NAME = 'visible-part';
+describe("".concat(NAME), function () {
+  it('getVisiblePartObservable', function () {
+    var container = document.createElement('div');
+    container.setAttribute('id', 't1');
+    container.style.cssText = 'width:100px;height:100px;overflow:auto;';
+    var content = document.createElement('div');
+    content.style.cssText = 'width:200px;height:200px;';
+    container.appendChild(content);
+    document.body.appendChild(container); // todo: rxjs test
+
+    (0, _visiblePart.getVisiblePartObservable)(content, container);
+    var event = new window.Event('scroll', {
+      cancelable: false
+    });
+    container.dispatchEvent(event);
+    document.body.removeChild(container);
+    container = content = null;
+  });
+  it('getVisiblePart', function () {
+    var container = document.createElement('div');
+    document.body.appendChild(container);
+    expect((0, _visiblePart.getVisiblePart)(container, window).offsetX).toBe(0);
+    document.body.removeChild(container);
+    container = null;
+  });
+});

package/lib/table/base/helpers/rowHeightManager.d.ts

@@ -0,0 +1,7 @@
+import { VerticalRenderRange } from '../interfaces';
+export declare function getFullRenderRange(rowCount: number): VerticalRenderRange;
+export declare function makeRowHeightManager(initRowCount: number, estimatedRowHeight: number): {
+    getRenderRange: (offset: number, maxRenderHeight: number, rowCount: number) => VerticalRenderRange;
+    updateRow: (index: number, offset: number, size: number) => void;
+    cache: number[];
+};

package/lib/table/base/helpers/rowHeightManager.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFullRenderRange = getFullRenderRange;
+exports.makeRowHeightManager = makeRowHeightManager;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+
+var _utils = require("../utils");
+
+function getFullRenderRange(rowCount) {
+  return {
+    topIndex: 0,
+    topBlank: 0,
+    bottomIndex: rowCount,
+    bottomBlank: 0
+  };
+}
+
+function makeRowHeightManager(initRowCount, estimatedRowHeight) {
+  var _context;
+
+  var cache = (0, _fill.default)(_context = new Array(initRowCount)).call(_context, estimatedRowHeight);
+
+  function getRenderRange(offset, maxRenderHeight, rowCount) {
+    if (cache.length !== rowCount) {
+      setRowCount(rowCount);
+    }
+
+    if (maxRenderHeight <= 0) {
+      // maxRenderHeight <= 0 说明表格目前在 viewport 之外
+      if (offset <= 0) {
+        // 表格在 viewport 下方
+        return getRenderRangeWhenBelowView();
+      } else {
+        // 表格在 viewport 上方
+        return getRenderRangeWhenAboveView();
+      }
+    } else {
+      // 表格与 viewport 相交
+      return getRenderRangeWhenInView();
+    }
+
+    function getRenderRangeWhenBelowView() {
+      var start = {
+        topIndex: 0,
+        topBlank: 0
+      };
+      var end = getEnd(0, start);
+      return (0, _extends2.default)((0, _extends2.default)({}, start), end);
+    }
+
+    function getRenderRangeWhenAboveView() {
+      var totalSize = getEstimatedTotalSize(rowCount);
+      var start = getStart(totalSize);
+      var end = getEnd(totalSize, start);
+      return (0, _extends2.default)((0, _extends2.default)({}, start), end);
+    }
+
+    function getRenderRangeWhenInView() {
+      var start = getStart(offset);
+      var end = getEnd(offset + maxRenderHeight, start);
+      return (0, _extends2.default)((0, _extends2.default)({}, start), end);
+    }
+    /** 获取虚拟滚动在 开始位置上的信息 */
+
+
+    function getStart(offset) {
+      if (cache.length === 0) {
+        return {
+          topIndex: 0,
+          topBlank: 0
+        };
+      }
+
+      var topIndex = 0;
+      var topBlank = 0;
+
+      while (topIndex < cache.length) {
+        var h = cache[topIndex];
+
+        if (topBlank + h >= offset) {
+          break;
+        }
+
+        topBlank += h;
+        topIndex += 1;
+      }
+
+      return overscanUpwards(topIndex, topBlank);
+    }
+
+    function overscanUpwards(topIndex, topBlank) {
+      var overscanSize = 0;
+      var overscanCount = 0;
+
+      while (overscanCount < topIndex && overscanSize < _utils.OVERSCAN_SIZE) {
+        overscanCount += 1;
+        overscanSize += cache[topIndex - overscanCount];
+      }
+
+      return {
+        topIndex: topIndex - overscanCount,
+        topBlank: topBlank - overscanSize
+      };
+    }
+    /** 获取虚拟滚动 在结束位置上的信息 */
+
+
+    function getEnd(endOffset, startInfo) {
+      var bottomIndex = startInfo.topIndex;
+      var offset = startInfo.topBlank;
+
+      while (bottomIndex < rowCount && offset < endOffset) {
+        offset += cache[bottomIndex];
+        bottomIndex += 1;
+      }
+
+      var bottomBlank = getEstimatedTotalSize(rowCount) - offset;
+      return overscanDownwards(bottomIndex, bottomBlank);
+    }
+
+    function overscanDownwards(bottomIndex, bottomBlank) {
+      var overscanSize = 0;
+      var overscanCount = 0;
+
+      while (overscanCount < rowCount - bottomIndex && overscanSize < _utils.OVERSCAN_SIZE) {
+        overscanSize += cache[bottomIndex + overscanCount];
+        overscanCount += 1;
+      }
+
+      return {
+        bottomIndex: bottomIndex + overscanCount,
+        bottomBlank: bottomBlank - overscanSize
+      };
+    }
+
+    function getEstimatedTotalSize(rowCount) {
+      return (0, _utils.sum)(cache) + (rowCount - cache.length) * estimatedRowHeight;
+    }
+
+    function setRowCount(count) {
+      // 将 cache 的长度设置为 count
+      if (count < cache.length) {
+        cache.length = count;
+      } else {
+        var prevSize = cache.length;
+        cache.length = count;
+        (0, _fill.default)(cache).call(cache, estimatedRowHeight, prevSize);
+      }
+    }
+  }
+
+  function updateRow(index, offset, size) {
+    cache[index] = size;
+  }
+
+  return {
+    getRenderRange: getRenderRange,
+    updateRow: updateRow,
+    // 导出 cache，方便调试；上层在实际使用时 并不需要使用 cache 字段
+    cache: cache
+  };
+}

package/lib/table/base/helpers/visible-part.d.ts

@@ -0,0 +1,23 @@
+import { Observable } from 'rxjs';
+export declare function getVisiblePart(target: HTMLElement | typeof window, flowRoot: HTMLElement | typeof window): {
+    offsetY: number;
+    offsetX: number;
+    clipRect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+};
+/** 基于 ResizeObserver 和 scroll event 封装的 RxJS observable；
+ * 用于监听一个元素的在页面中的「可见范围」的不断变化 */
+export declare function getVisiblePartObservable(target: HTMLElement, flowRoot: HTMLElement | typeof window): Observable<{
+    offsetY: number;
+    offsetX: number;
+    clipRect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+}>;

package/lib/table/base/helpers/visible-part.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVisiblePart = getVisiblePart;
+exports.getVisiblePartObservable = getVisiblePartObservable;
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+var _rxjs = require("rxjs");
+
+var op = _interopRequireWildcard(require("rxjs/operators"));
+
+function getRect(ele) {
+  if (ele === window) {
+    return {
+      left: 0,
+      top: 0,
+      bottom: window.innerHeight,
+      right: window.innerWidth
+    };
+  } else {
+    return ele.getBoundingClientRect();
+  }
+}
+
+function getVisiblePart(target, flowRoot) {
+  var targetRect = getRect(target);
+  var rootRect = getRect(flowRoot);
+  return {
+    offsetY: Math.max(0, rootRect.top - targetRect.top),
+    offsetX: Math.max(0, rootRect.left - targetRect.left),
+    clipRect: {
+      left: Math.max(targetRect.left, rootRect.left),
+      top: Math.max(targetRect.top, rootRect.top),
+      right: Math.min(targetRect.right, rootRect.right),
+      bottom: Math.min(targetRect.bottom, rootRect.bottom)
+    }
+  };
+}
+
+function fromResizeEvent(element) {
+  if (element === window) {
+    return (0, _rxjs.fromEvent)(element, 'resize');
+  }
+
+  return new _rxjs.Observable(function (subscriber) {
+    var resizeObserver = new _resizeObserverPolyfill.default(function () {
+      subscriber.next();
+    });
+    resizeObserver.observe(element);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  });
+}
+/** 基于 ResizeObserver 和 scroll event 封装的 RxJS observable；
+ * 用于监听一个元素的在页面中的「可见范围」的不断变化 */
+
+
+function getVisiblePartObservable(target, flowRoot) {
+  return (0, _rxjs.merge)((0, _rxjs.fromEvent)(flowRoot, 'scroll', {
+    passive: true
+  }), fromResizeEvent(flowRoot), fromResizeEvent(target)).pipe(op.map(function () {
+    return getVisiblePart(target, flowRoot);
+  }));
+}

package/lib/table/base/html-table.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { RenderInfo } from './interfaces';
+import { BaseTableProps } from './table';
+export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey'>> {
+    tbodyHtmlTag: 'tbody' | 'tfoot';
+    data: any[];
+    horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
+    verticalRenderInfo: {
+        offset: number;
+        first: number;
+        last: number;
+        limit: number;
+    };
+}
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo }: HtmlTableProps): JSX.Element;

package/lib/table/base/html-table.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HtmlTable = HtmlTable;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _flat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/flat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _internals = require("../internals");
+
+var _colgroup = require("./colgroup");
+
+var _SpanManager = _interopRequireDefault(require("./helpers/SpanManager"));
+
+var _styles = require("./styles");
+
+function HtmlTable(_ref) {
+  var tbodyHtmlTag = _ref.tbodyHtmlTag,
+      getRowProps = _ref.getRowProps,
+      primaryKey = _ref.primaryKey,
+      data = _ref.data,
+      verInfo = _ref.verticalRenderInfo,
+      hozInfo = _ref.horizontalRenderInfo;
+  var flat = (0, _flat.default)(hozInfo),
+      hoz = hozInfo.horizontalRenderRange;
+  var spanManager = new _SpanManager.default();
+  var fullFlatCount = flat.full.length;
+  var leftFlatCount = flat.left.length;
+  var rightFlatCount = flat.right.length;
+  return /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {
+    descriptors: hozInfo.visible
+  }), /*#__PURE__*/_react.default.createElement(tbodyHtmlTag, null, (0, _map.default)(data).call(data, renderRow)));
+
+  function renderRow(record, i) {
+    var _context;
+
+    var rowIndex = verInfo.offset + i;
+    spanManager.stripUpwards(rowIndex);
+    var rowProps = getRowProps(record, rowIndex);
+    var rowClass = (0, _classnames.default)(_styles.Classes.tableRow, {
+      first: rowIndex === verInfo.first,
+      last: rowIndex === verInfo.last,
+      even: rowIndex % 2 === 0,
+      odd: rowIndex % 2 === 1
+    }, rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
+    return /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({}, rowProps, {
+      className: rowClass,
+      key: _internals.internals.safeGetRowKey(primaryKey, record, rowIndex),
+      "data-rowindex": rowIndex,
+      "data-role": 'table-row'
+    }), (0, _map.default)(_context = hozInfo.visible).call(_context, function (descriptor) {
+      if (descriptor.type === 'blank') {
+        return /*#__PURE__*/_react.default.createElement("td", {
+          key: descriptor.blankSide
+        });
+      }
+
+      return renderBodyCell(record, rowIndex, descriptor.col, descriptor.colIndex);
+    }));
+  }
+
+  function renderBodyCell(record, rowIndex, column, colIndex) {
+    var _a, _b, _c;
+
+    if (spanManager.testSkip(rowIndex, colIndex)) {
+      return null;
+    }
+
+    var value = _internals.internals.safeGetValue(column, record, rowIndex);
+
+    var cellProps = (_b = (_a = column.getCellProps) === null || _a === void 0 ? void 0 : _a.call(column, value, record, rowIndex)) !== null && _b !== void 0 ? _b : {};
+    var cellContent = value;
+
+    if (column.render) {
+      cellContent = column.render(value, record, rowIndex);
+    }
+
+    var colSpan = 1;
+    var rowSpan = 1;
+
+    if (column.getSpanRect) {
+      var spanRect = column.getSpanRect(value, record, rowIndex);
+      colSpan = spanRect == null ? 1 : spanRect.right - colIndex;
+      rowSpan = spanRect == null ? 1 : spanRect.bottom - rowIndex;
+    } else {
+      if (cellProps.colSpan != null) {
+        colSpan = cellProps.colSpan;
+      }
+
+      if (cellProps.rowSpan != null) {
+        rowSpan = cellProps.rowSpan;
+      }
+    } // rowSpan/colSpan 不能过大，避免 rowSpan/colSpan 影响因虚拟滚动而未渲染的单元格
+
+
+    rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
+    colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex - colIndex);
+    var hasSpan = colSpan > 1 || rowSpan > 1;
+
+    if (hasSpan) {
+      spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
+    }
+
+    var positionStyle = {};
+
+    if (colIndex < leftFlatCount) {
+      positionStyle.position = 'sticky';
+      positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
+    } else if (colIndex >= fullFlatCount - rightFlatCount) {
+      positionStyle.position = 'sticky';
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex);
+    }
+
+    return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
+      key: colIndex
+    }, cellProps), {
+      className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, {
+        // class
+        first: colIndex === 0,
+        last: colIndex + colSpan === fullFlatCount,
+        'lock-left': colIndex < leftFlatCount,
+        'lock-right': colIndex >= fullFlatCount - rightFlatCount,
+        'row-span': rowSpan > 1
+      })
+    }), hasSpan ? {
+      colSpan: colSpan,
+      rowSpan: rowSpan
+    } : null), {
+      style: (0, _extends2.default)((0, _extends2.default)({
+        textAlign: column.align,
+        verticalAlign: (_c = column.verticalAlign) !== null && _c !== void 0 ? _c : 'middle'
+      }, cellProps.style), positionStyle),
+      'data-role': 'table-cell',
+      'data-rowindex': rowIndex,
+      'data-code': column.code
+    }), cellContent);
+  }
+}

package/lib/table/base/index.d.ts

@@ -0,0 +1,3 @@
+export { BaseTable as Table, BaseTableProps as TableProps, PrimaryKey } from './table';
+export { LoadingContentWrapperProps } from './loading';
+export { Classes, BaseTableCSSVariables as TableCSSVariables } from './styles';

package/lib/table/base/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _table.BaseTable;
+  }
+});
+Object.defineProperty(exports, "Classes", {
+  enumerable: true,
+  get: function get() {
+    return _styles.Classes;
+  }
+});
+
+var _table = require("./table");
+
+var _styles = require("./styles");

package/lib/table/base/interfaces.d.ts

@@ -0,0 +1,54 @@
+import { ArtColumn } from '../interfaces';
+export declare type VirtualEnum = false | true | 'auto';
+export interface VerticalRenderRange {
+    topIndex: number;
+    topBlank: number;
+    bottomIndex: number;
+    bottomBlank: number;
+}
+export interface HorizontalRenderRange {
+    leftIndex: number;
+    leftBlank: number;
+    rightIndex: number;
+    rightBlank: number;
+}
+export declare type VisibleColumnDescriptor = {
+    type: 'blank';
+    blankSide: 'left' | 'right';
+    width: number;
+} | {
+    type: 'normal';
+    colIndex: number;
+    col: ArtColumn;
+};
+export interface ResolvedUseVirtual {
+    horizontal: boolean;
+    vertical: boolean;
+    header: boolean;
+}
+export interface RenderInfo {
+    verticalRenderRange: VerticalRenderRange;
+    horizontalRenderRange: HorizontalRenderRange;
+    visible: VisibleColumnDescriptor[];
+    flat: {
+        full: ArtColumn[];
+        left: ArtColumn[];
+        center: ArtColumn[];
+        right: ArtColumn[];
+    };
+    nested: {
+        full: ArtColumn[];
+        left: ArtColumn[];
+        center: ArtColumn[];
+        right: ArtColumn[];
+    };
+    stickyLeftMap: Map<number, number>;
+    stickyRightMap: Map<number, number>;
+    useVirtual: ResolvedUseVirtual;
+    /** props.columns 是否包含有效的锁列 */
+    hasLockColumn: boolean;
+    /** 左侧锁定列的总宽度 */
+    leftLockTotalWidth: number;
+    /** 右侧锁定列的总宽度 */
+    rightLockTotalWidth: number;
+}

package/lib/table/base/loading.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+export interface LoadingContentWrapperProps {
+    visible: boolean;
+    children: ReactNode;
+}
+interface LoadingProps {
+    visible: boolean;
+    children: ReactNode;
+    LoadingContentWrapper?: React.ComponentType<LoadingContentWrapperProps>;
+    LoadingIcon?: React.ComponentType;
+}
+export default function Loading({ visible, children, LoadingContentWrapper, LoadingIcon }: LoadingProps): JSX.Element;
+export {};

package/lib/table/base/loading.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Loading;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("./styles");
+
+var DefaultLoadingIcon = /*#__PURE__*/_react.default.memo(function () {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    style: {
+      margin: 'auto',
+      display: 'block',
+      width: 40,
+      height: 40
+    },
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40",
+    fill: "none",
+    stroke: "#23a7fa",
+    strokeDasharray: "188 64",
+    strokeLinecap: "round",
+    strokeWidth: "10"
+  }, /*#__PURE__*/_react.default.createElement("animateTransform", {
+    attributeName: "transform",
+    dur: "1.5s",
+    keyTimes: "0;1",
+    repeatCount: "indefinite",
+    type: "rotate",
+    values: "0 50 50;360 50 50"
+  })));
+});
+
+function DefaultLoadingContentWrapper(_ref) {
+  var children = _ref.children,
+      visible = _ref.visible;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.Classes.loadingContentWrapper,
+    style: {
+      filter: visible ? 'blur(1px)' : 'none'
+    }
+  }, children);
+}
+
+function Loading(_ref2) {
+  var visible = _ref2.visible,
+      children = _ref2.children,
+      _ref2$LoadingContentW = _ref2.LoadingContentWrapper,
+      LoadingContentWrapper = _ref2$LoadingContentW === void 0 ? DefaultLoadingContentWrapper : _ref2$LoadingContentW,
+      _ref2$LoadingIcon = _ref2.LoadingIcon,
+      LoadingIcon = _ref2$LoadingIcon === void 0 ? DefaultLoadingIcon : _ref2$LoadingIcon;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.Classes.loadingWrapper
+  }, visible && /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.Classes.loadingIndicatorWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.Classes.loadingIndicator
+  }, /*#__PURE__*/_react.default.createElement(LoadingIcon, null))), /*#__PURE__*/_react.default.createElement(LoadingContentWrapper, {
+    visible: visible,
+    children: children
+  }));
+}