@kdcloudjs/table 1.0.0

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

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
+import { OVERSCAN_SIZE, sum } from '../utils';
+export function getFullRenderRange(rowCount) {
+  return {
+    topIndex: 0,
+    topBlank: 0,
+    bottomIndex: rowCount,
+    bottomBlank: 0
+  };
+}
+export function makeRowHeightManager(initRowCount, estimatedRowHeight) {
+  var _context;
+
+  var cache = _fillInstanceProperty(_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 _extends(_extends({}, start), end);
+    }
+
+    function getRenderRangeWhenAboveView() {
+      var totalSize = getEstimatedTotalSize(rowCount);
+      var start = getStart(totalSize);
+      var end = getEnd(totalSize, start);
+      return _extends(_extends({}, start), end);
+    }
+
+    function getRenderRangeWhenInView() {
+      var start = getStart(offset);
+      var end = getEnd(offset + maxRenderHeight, start);
+      return _extends(_extends({}, 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 < 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 < OVERSCAN_SIZE) {
+        overscanSize += cache[bottomIndex + overscanCount];
+        overscanCount += 1;
+      }
+
+      return {
+        bottomIndex: bottomIndex + overscanCount,
+        bottomBlank: bottomBlank - overscanSize
+      };
+    }
+
+    function getEstimatedTotalSize(rowCount) {
+      return 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;
+
+        _fillInstanceProperty(cache).call(cache, estimatedRowHeight, prevSize);
+      }
+    }
+  }
+
+  function updateRow(index, offset, size) {
+    cache[index] = size;
+  }
+
+  return {
+    getRenderRange: getRenderRange,
+    updateRow: updateRow,
+    // 导出 cache，方便调试；上层在实际使用时 并不需要使用 cache 字段
+    cache: cache
+  };
+}

package/es/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/es/table/base/helpers/visible-part.js

@@ -0,0 +1,58 @@
+import ResizeObserver from 'resize-observer-polyfill';
+import { fromEvent, merge, Observable } from 'rxjs';
+import * as op from 'rxjs/operators';
+
+function getRect(ele) {
+  if (ele === window) {
+    return {
+      left: 0,
+      top: 0,
+      bottom: window.innerHeight,
+      right: window.innerWidth
+    };
+  } else {
+    return ele.getBoundingClientRect();
+  }
+}
+
+export 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 fromEvent(element, 'resize');
+  }
+
+  return new Observable(function (subscriber) {
+    var resizeObserver = new ResizeObserver(function () {
+      subscriber.next();
+    });
+    resizeObserver.observe(element);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  });
+}
+/** 基于 ResizeObserver 和 scroll event 封装的 RxJS observable；
+ * 用于监听一个元素的在页面中的「可见范围」的不断变化 */
+
+
+export function getVisiblePartObservable(target, flowRoot) {
+  return merge(fromEvent(flowRoot, 'scroll', {
+    passive: true
+  }), fromResizeEvent(flowRoot), fromResizeEvent(target)).pipe(op.map(function () {
+    return getVisiblePart(target, flowRoot);
+  }));
+}

package/es/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/es/table/base/html-table.js

@@ -0,0 +1,132 @@
+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 cx from 'classnames';
+import React from 'react';
+import { internals } from '../internals';
+import { Colgroup } from './colgroup';
+import SpanManager from './helpers/SpanManager';
+import { Classes } from './styles';
+export function HtmlTable(_ref) {
+  var tbodyHtmlTag = _ref.tbodyHtmlTag,
+      getRowProps = _ref.getRowProps,
+      primaryKey = _ref.primaryKey,
+      data = _ref.data,
+      verInfo = _ref.verticalRenderInfo,
+      hozInfo = _ref.horizontalRenderInfo;
+
+  var flat = _flatInstanceProperty(hozInfo),
+      hoz = hozInfo.horizontalRenderRange;
+
+  var spanManager = new SpanManager();
+  var fullFlatCount = flat.full.length;
+  var leftFlatCount = flat.left.length;
+  var rightFlatCount = flat.right.length;
+  return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(Colgroup, {
+    descriptors: hozInfo.visible
+  }), /*#__PURE__*/React.createElement(tbodyHtmlTag, null, _mapInstanceProperty(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 = cx(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.createElement("tr", _extends({}, rowProps, {
+      className: rowClass,
+      key: internals.safeGetRowKey(primaryKey, record, rowIndex),
+      "data-rowindex": rowIndex,
+      "data-role": 'table-row'
+    }), _mapInstanceProperty(_context = hozInfo.visible).call(_context, function (descriptor) {
+      if (descriptor.type === 'blank') {
+        return /*#__PURE__*/React.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.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.createElement('td', _extends(_extends(_extends(_extends({
+      key: colIndex
+    }, cellProps), {
+      className: cx(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: _extends(_extends({
+        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/es/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/es/table/base/index.js

@@ -0,0 +1,2 @@
+export { BaseTable as Table } from './table';
+export { Classes } from './styles';

package/es/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/es/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/es/table/base/loading.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Classes } from './styles';
+var DefaultLoadingIcon = /*#__PURE__*/React.memo(function () {
+  return /*#__PURE__*/React.createElement("svg", {
+    style: {
+      margin: 'auto',
+      display: 'block',
+      width: 40,
+      height: 40
+    },
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40",
+    fill: "none",
+    stroke: "#23a7fa",
+    strokeDasharray: "188 64",
+    strokeLinecap: "round",
+    strokeWidth: "10"
+  }, /*#__PURE__*/React.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.createElement("div", {
+    className: Classes.loadingContentWrapper,
+    style: {
+      filter: visible ? 'blur(1px)' : 'none'
+    }
+  }, children);
+}
+
+export default 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.createElement("div", {
+    className: Classes.loadingWrapper
+  }, visible && /*#__PURE__*/React.createElement("div", {
+    className: Classes.loadingIndicatorWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: Classes.loadingIndicator
+  }, /*#__PURE__*/React.createElement(LoadingIcon, null))), /*#__PURE__*/React.createElement(LoadingContentWrapper, {
+    visible: visible,
+    children: children
+  }));
+}

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

@@ -0,0 +1,132 @@
+export declare const LOCK_SHADOW_PADDING = 20;
+export declare const Classes: {
+    /** BaseTable 表格组件的外层包裹 div */
+    readonly artTableWrapper: string;
+    readonly artTable: string;
+    readonly tableHeader: string;
+    readonly tableBody: string;
+    readonly virtual: string;
+    readonly tableFooter: string;
+    /** 表格行 */
+    readonly tableRow: string;
+    /** 表头行 */
+    readonly tableHeaderRow: string;
+    /** 单元格 */
+    readonly tableCell: string;
+    /** 表头的单元格 */
+    readonly tableHeaderCell: string;
+    readonly tableHeaderCellContent: string;
+    readonly tableHeaderCellResize: string;
+    readonly virtualBlank: string;
+    readonly stickyScroll: string;
+    readonly stickyScrollItem: string;
+    readonly horizontalScrollContainer: string;
+    readonly lockShadowMask: string;
+    readonly lockShadow: string;
+    readonly leftLockShadow: string;
+    readonly rightLockShadow: string;
+    /** 数据为空时表格内容的外层 div */
+    readonly emptyWrapper: string;
+    readonly loadingWrapper: string;
+    readonly loadingContentWrapper: string;
+    readonly loadingIndicatorWrapper: string;
+    readonly loadingIndicator: string;
+    readonly tableHeaderCellLine: string;
+    readonly tableFilterTrigger: string;
+    readonly tableSortIcon: string;
+    readonly button: string;
+    readonly buttonPrimary: string;
+    readonly filterIcon: string;
+};
+export declare const MenuClasses: {
+    menu: string;
+    menuList: string;
+    menuOption: string;
+    menuOptionActive: string;
+    menuOptionText: string;
+};
+export declare type BaseTableCSSVariables = Partial<{
+    /** 表格一行的高度，注意该属性将被作为 CSS variable，不能使用数字作为简写 */
+    '--row-height': string;
+    /** 表格的字体颜色 */
+    '--color': string;
+    /** 表格背景颜色 */
+    '--bgcolor': string;
+    /** 鼠标悬停时的背景色 */
+    '--hover-bgcolor': string;
+    /** 单元格高亮时的背景色 */
+    '--highlight-bgcolor': string;
+    /** 主题色 */
+    '--primary-color': string;
+    /** 主题色浅色1，浅色选中、悬浮 */
+    '--primary-color-level1': string;
+    /** 主题色浅色2，深色选中、悬浮 */
+    '--primary-color-level2': string;
+    /**图标默认颜色 */
+    '--icon-color': string;
+    /**边框颜色 */
+    '--strong-border-color': string;
+    /** 表头中一行的高度，注意该属性将被作为 CSS variable，不能使用数字作为简写 */
+    '--header-row-height': string;
+    /** 表头中的字体颜色 */
+    '--header-color': string;
+    /** 表头的背景色 */
+    '--header-bgcolor': string;
+    /** 表头上鼠标悬停时的背景色 */
+    '--header-hover-bgcolor': string;
+    /** 表头上单元格高亮时的背景色 */
+    '--header-highlight-bgcolor': string;
+    /** 单元格 padding */
+    '--cell-padding': string;
+    /** 字体大小 */
+    '--font-size': string;
+    /** 表格内字体的行高 */
+    '--line-height': string;
+    /** 锁列阴影，默认为 rgba(152, 152, 152, 0.5) 0 0 6px 2px */
+    '--lock-shadow': string;
+    /** 单元格的边框颜色 */
+    '--border-color': string;
+    /** 单元格边框，默认为 1px solid #dfe3e8 */
+    '--cell-border': string;
+    /** 单元格上下边框，默认为 #dfe3e8 */
+    '--cell-border-horizontal': string;
+    /** 单元格左右边框，默认为 #dfe3e8 */
+    '--cell-border-vertical': string;
+    /** 表头单元格边框，默认为 1px solid #dfe3e8 */
+    '--header-cell-border': string;
+    /** 表头单元格上下边框，默认为 1px solid #dfe3e8 */
+    '--header-cell-border-horizontal': string;
+    /** 表头单元格左右边框，默认为 1px solid #dfe3e8 */
+    '--header-cell-border-vertical': string;
+}>;
+export declare const defaultCSSVariables: {
+    '--row-height': string;
+    '--color': string;
+    '--bgcolor': string;
+    '--hover-bgcolor': string;
+    '--highlight-bgcolor': string;
+    '--primary-color': string;
+    '--primary-color-level1': string;
+    '--primary-color-level2': string;
+    '--icon-color': string;
+    '--strong-border-color': string;
+    '--header-row-height': string;
+    '--header-color': string;
+    '--header-bgcolor': string;
+    '--header-hover-bgcolor': string;
+    '--header-highlight-bgcolor': string;
+    '--cell-padding': string;
+    '--font-size': string;
+    '--line-height': string;
+    '--lock-shadow': string;
+    '--border-color': string;
+    '--cell-border': string;
+    '--cell-border-horizontal': string;
+    '---cell-border-vertical': string;
+    '--header-cell-border': string;
+    '--header-cell-border-horizontal': string;
+    '--header-cell-border-vertical': string;
+};
+export declare const variableConst: string;
+export declare const StyledArtTableWrapper: any;
+export declare const ButtonCSS: any;