@kdcloudjs/table 1.0.0

package/es/table/base/styles.js

@@ -0,0 +1,112 @@
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import styled, { css } from 'styled-components';
+export var LOCK_SHADOW_PADDING = 20;
+var prefix = 'kd-';
+export var Classes = {
+  /** BaseTable 表格组件的外层包裹 div */
+  artTableWrapper: "".concat(prefix, "table-wrapper"),
+  artTable: "".concat(prefix, "table"),
+  tableHeader: "".concat(prefix, "table-header"),
+  tableBody: "".concat(prefix, "table-body"),
+  virtual: "".concat(prefix, "virtual"),
+  tableFooter: "".concat(prefix, "table-footer"),
+
+  /** 表格行 */
+  tableRow: "".concat(prefix, "table-row"),
+
+  /** 表头行 */
+  tableHeaderRow: "".concat(prefix, "table-header-row"),
+
+  /** 单元格 */
+  tableCell: "".concat(prefix, "table-cell"),
+
+  /** 表头的单元格 */
+  tableHeaderCell: "".concat(prefix, "table-header-cell"),
+  tableHeaderCellContent: "".concat(prefix, "table-header-cell-content"),
+  tableHeaderCellResize: "".concat(prefix, "table-header-cell-resize"),
+  virtualBlank: "".concat(prefix, "virtual-blank"),
+  stickyScroll: "".concat(prefix, "sticky-scroll"),
+  stickyScrollItem: "".concat(prefix, "sticky-scroll-item"),
+  horizontalScrollContainer: "".concat(prefix, "horizontal-scroll-container"),
+  lockShadowMask: "".concat(prefix, "lock-shadow-mask"),
+  lockShadow: "".concat(prefix, "lock-shadow"),
+  leftLockShadow: "".concat(prefix, "left-lock-shadow"),
+  rightLockShadow: "".concat(prefix, "right-lock-shadow"),
+
+  /** 数据为空时表格内容的外层 div */
+  emptyWrapper: "".concat(prefix, "empty-wrapper"),
+  loadingWrapper: "".concat(prefix, "loading-wrapper"),
+  loadingContentWrapper: "".concat(prefix, "loading-content-wrapper"),
+  loadingIndicatorWrapper: "".concat(prefix, "loading-indicator-wrapper"),
+  loadingIndicator: "".concat(prefix, "loading-indicator"),
+  tableHeaderCellLine: "".concat(prefix, "table-header-cell-line"),
+  tableFilterTrigger: "".concat(prefix, "filter-trigger"),
+  tableSortIcon: "".concat(prefix, "sort-icon"),
+  button: "".concat(prefix, "btn"),
+  buttonPrimary: "".concat(prefix, "btn-primary"),
+  filterIcon: "".concat(prefix, "filter-icon")
+};
+export var MenuClasses = {
+  menu: "".concat(prefix, "table-menu"),
+  menuList: "".concat(prefix, "table-menu-list"),
+  menuOption: "".concat(prefix, "table-menu-option"),
+  menuOptionActive: "".concat(prefix, "table-menu-option-active"),
+  menuOptionText: "".concat(prefix, "table-menu-option-text")
+};
+var Z = {
+  lock: 5,
+  header: 15,
+  footer: 10,
+  lockShadow: 20,
+  scrollItem: 30,
+  loadingIndicator: 40
+};
+var outerBorderStyleMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.first,\n  th.first {\n    border-left: none;\n  }\n  td.last,\n  th.last {\n    --border-right: none;\n  }\n\n  thead tr.first th,\n  tbody tr.first td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.last td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.last td {\n    border-bottom: none;\n  }\n  td.row-span:not(.first){\n    border-left: var(---cell-border-vertical);\n  }\n  td.row-span:not(.last){\n    border-right: var(---cell-border-vertical);\n  }\n"])));
+export var defaultCSSVariables = {
+  '--row-height': '48px',
+  '--color': '#333',
+  '--bgcolor': 'white',
+  '--hover-bgcolor': 'var(--hover-color, #F2F6FF)',
+  '--highlight-bgcolor': '#eee',
+  '--primary-color': '#5582F3',
+  '--primary-color-level1': 'rgb(242, 248, 255)',
+  '--primary-color-level2': 'rgb(135, 173, 255)',
+  '--icon-color': '#bfbfbf',
+  '--strong-border-color': '#d9d9d9',
+  '--header-row-height': '32px',
+  '--header-color': '#333',
+  '--header-bgcolor': '#f4f4f4',
+  '--header-hover-bgcolor': '#ddd',
+  '--header-highlight-bgcolor': '#e4e8ed',
+  '--cell-padding': '8px 12px',
+  '--font-size': '12px',
+  '--line-height': '1.28571',
+  '--lock-shadow': 'rgba(152, 152, 152, 0.5) 0 0 6px 2px',
+  '--border-color': '#dfe3e8',
+  '--cell-border': '1px solid #dfe3e8',
+  '--cell-border-horizontal': '1px solid #dfe3e8',
+  '---cell-border-vertical': '1px solid #dfe3e8',
+  '--header-cell-border': '1px solid #dfe3e8',
+  '--header-cell-border-horizontal': '1px solid #dfe3e8',
+  '--header-cell-border-vertical': '1px solid #dfe3e8'
+};
+export var variableConst = getCssVariableText(defaultCSSVariables);
+export var StyledArtTableWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n    overflow: hidden;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .", " {\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n    transform: translate(0px);\n  }\n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border: none;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right:none\n  }\n\n  th.leaf {\n    border-right: none;\n    border-bottom: none;\n  }\n\n  tr.first th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.first {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border: none;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.first {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.first td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.first td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.last td {\n    border-bottom: none;\n  }\n\n  .lock-left,\n  .lock-right {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n  \n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon);
+export var ButtonCSS = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  //#region \u6309\u94AE\n  .", "{\n    color: var(--color);\n    background:#ffffff;\n    border:1px solid var(--strong-border-color);\n    border-radius: 2px;\n    cursor: pointer;\n    &:hover{\n      color: var(--primary-color);\n      border:1px solid var(--primary-color);\n    }\n  }\n  .", " {\n    color:#ffffff;\n    background-color: var(--primary-color);\n    border:none;\n    &:hover{\n      color:#ffffff;\n      background-color: var(--primary-color-level2);\n      border:none;\n    }\n  }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
+
+function getCssVariableText(obj) {
+  var _context;
+
+  return _reduceInstanceProperty(_context = _Object$keys(obj)).call(_context, function (acc, key) {
+    var _context2;
+
+    acc += _concatInstanceProperty(_context2 = "".concat(key, ":")).call(_context2, obj[key], ";");
+    return acc;
+  }, '');
+}

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

@@ -0,0 +1,150 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { noop } from 'rxjs';
+import { ArtColumn } from '../interfaces';
+import { TableDOMHelper } from './helpers/TableDOMUtils';
+import { ResolvedUseVirtual, VerticalRenderRange, VirtualEnum } from './interfaces';
+import { LoadingContentWrapperProps } from './loading';
+import { BaseTableCSSVariables } from './styles';
+export declare type PrimaryKey = string | ((record: any) => string);
+export interface BaseTableProps {
+    /** 主键 */
+    primaryKey?: PrimaryKey;
+    /** 表格展示的数据源 */
+    dataSource: any[];
+    /** 表格页脚数据源 */
+    footerDataSource?: any[];
+    /** 表格的列配置 */
+    columns: ArtColumn[];
+    /** 是否开启虚拟滚动 */
+    useVirtual?: VirtualEnum | {
+        horizontal?: VirtualEnum;
+        vertical?: VirtualEnum;
+        header?: VirtualEnum;
+    };
+    /** 虚拟滚动开启情况下，表格中每一行的预估高度 */
+    estimatedRowHeight?: number;
+    /** @deprecated 表格头部是否置顶，默认为 true。请使用 isStickyHeader 代替 */
+    isStickyHead?: boolean;
+    /** 表格头部是否置顶，默认为 true */
+    isStickyHeader?: boolean;
+    /** 表格置顶后，距离顶部的距离 */
+    stickyTop?: number;
+    /** 表格页脚是否置底，默认为 true */
+    isStickyFooter?: boolean;
+    /** 表格页脚置底后，距离底部的距离 */
+    stickyBottom?: number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义内联样式 */
+    style?: CSSProperties & BaseTableCSSVariables;
+    /** 表格是否具有头部 */
+    hasHeader?: boolean;
+    /** 表格是否具有横向的粘性滚动条 */
+    hasStickyScroll?: boolean;
+    /** 横向粘性滚动条高度 */
+    stickyScrollHeight?: 'auto' | number;
+    /** 使用来自外层 div 的边框代替单元格的外边框 */
+    useOuterBorder?: boolean;
+    /** 表格是否在加载中 */
+    isLoading?: boolean;
+    /** 数据为空时，单元格的高度 */
+    emptyCellHeight?: number;
+    /** @deprecated 数据为空时，表格的展示内容。请使用 components.EmptyContent 代替 */
+    emptyContent?: ReactNode;
+    /** 覆盖表格内部用到的组件 */
+    components?: {
+        /** 表格加载时，表格内容的父组件 */
+        LoadingContentWrapper?: React.ComponentType<LoadingContentWrapperProps>;
+        /** 表格加载时的加载图标 */
+        LoadingIcon?: React.ComponentType;
+        /** 数据为空时，表格的展示内容。 */
+        EmptyContent?: React.ComponentType;
+    };
+    /** 列的默认宽度 */
+    defaultColumnWidth?: number;
+    /** 表格所处于的块格式化上下文(BFC)
+     * https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context */
+    flowRoot?: 'auto' | 'self' | (() => HTMLElement | typeof window) | HTMLElement | typeof window;
+    getRowProps?(record: any, rowIndex: number): React.HTMLAttributes<HTMLTableRowElement>;
+    getTableProps?(): React.HTMLAttributes<HTMLTableElement>;
+    setTableWidth?(tableWidth: number): void;
+    cssVariables?: {
+        [key: string]: any;
+    };
+    enableCSSVariables?: boolean;
+}
+export interface BaseTableState {
+    /** 是否要展示自定义滚动条(stickyScroll) */
+    hasScroll: boolean;
+    /** 是否存在纵向滚动条 */
+    hasScrollY: boolean;
+    /** 是否需要渲染 lock sections
+     * 当表格较宽时，所有的列都能被完整的渲染，此时不需要渲染 lock sections
+     * 只有当「整个表格的宽度」小于「每一列渲染宽度之和」时，lock sections 才需要被渲染 */
+    needRenderLock: boolean;
+    /** 纵向虚拟滚动偏移量 */
+    offsetY: number;
+    /** 纵向虚拟滚动 最大渲染尺寸 */
+    maxRenderHeight: number;
+    /** 横向虚拟滚动偏移量 */
+    offsetX: number;
+    /** 横向虚拟滚动 最大渲染尺寸 */
+    maxRenderWidth: number;
+}
+export declare class BaseTable extends React.Component<BaseTableProps, BaseTableState> {
+    static defaultProps: {
+        hasHeader: boolean;
+        isStickyHeader: boolean;
+        stickyTop: number;
+        footerDataSource: any[];
+        isStickyFooter: boolean;
+        stickyBottom: number;
+        hasStickyScroll: boolean;
+        stickyScrollHeight: string;
+        useVirtual: string;
+        estimatedRowHeight: number;
+        isLoading: boolean;
+        components: {};
+        getTableProps: typeof noop;
+        getRowProps: typeof noop;
+        flowRoot: string;
+        dataSource: any[];
+        useOuterBorder: boolean;
+    };
+    private rowHeightManager;
+    private artTableWrapperRef;
+    private domHelper;
+    private rootSubscription;
+    private lastInfo;
+    private props$;
+    private hasScrollY;
+    private resizeObserver?;
+    private resizeSubject;
+    /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
+    getDoms(): TableDOMHelper;
+    constructor(props: Readonly<BaseTableProps>);
+    /** 自定义滚动条宽度为table宽度，使滚动条滑块宽度相同 */
+    private updateStickyScroll;
+    private renderTableHeader;
+    private updateOffsetX;
+    private syncHorizontalScrollFromTableBody;
+    /** 同步横向滚动偏移量 */
+    private syncHorizontalScroll;
+    getVerticalRenderRange(useVirtual: ResolvedUseVirtual): VerticalRenderRange;
+    private renderTableBody;
+    private renderTableFooter;
+    private renderLockShadows;
+    private renderStickyScroll;
+    render(): JSX.Element;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;
+    private didMountOrUpdate;
+    private updateScrollLeftWhenLayoutChanged;
+    private initSubscriptions;
+    componentWillUnmount(): void;
+    /** 更新 DOM 节点的引用，方便其他方法直接操作 DOM */
+    private updateDOMHelper;
+    private updateRowHeightManager;
+    /** 计算表格所有列的渲染宽度之和，判断表格是否需要渲染锁列 */
+    private adjustNeedRenderLock;
+}