@kdcloudjs/table 1.0.0 → 1.0.3

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

@@ -1,19 +1,24 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 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';
+import { getScrollbarSize } from './utils';
 export function HtmlTable(_ref) {
   var tbodyHtmlTag = _ref.tbodyHtmlTag,
       getRowProps = _ref.getRowProps,
       primaryKey = _ref.primaryKey,
+      hasScrollY = _ref.hasScrollY,
       data = _ref.data,
       verInfo = _ref.verticalRenderInfo,
-      hozInfo = _ref.horizontalRenderInfo;
+      hozInfo = _ref.horizontalRenderInfo,
+      tbodyPosition = _ref.tbodyPosition;
 
   var flat = _flatInstanceProperty(hozInfo),
       hoz = hozInfo.horizontalRenderRange;
@@ -27,26 +32,39 @@ export function HtmlTable(_ref) {
   }), /*#__PURE__*/React.createElement(tbodyHtmlTag, null, _mapInstanceProperty(data).call(data, renderRow)));
 
   function renderRow(record, i) {
-    var _context;
+    var _cx, _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);
+    var rowClass = cx(Classes.tableRow, (_cx = {}, _defineProperty(_cx, Classes.first, rowIndex === verInfo.first), _defineProperty(_cx, Classes.last, rowIndex === verInfo.last), _defineProperty(_cx, Classes.even, rowIndex % 2 === 0), _defineProperty(_cx, Classes.odd, rowIndex % 2 === 1), _cx), rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
+
+    var visibleColumnDescriptor = _concatInstanceProperty(_context = hozInfo.visible).call(_context); // 左中右区域渲染，存在融合单元格时需要适配rowspan属性
+    // 如果固定的列均存在融合单元格，需空白一列做占位,否则融合的单元格不会渲染，导致显示异常
+    // 这里无法区分是否存在融合列，默认左右固定区域均添加占位空白列
+
+
+    if (['left', 'right'].indexOf(tbodyPosition) > -1) {
+      visibleColumnDescriptor.push({
+        type: 'blank',
+        blankSide: 'left',
+        width: 0,
+        isPlacehoder: true
+      });
+    }
+
     return /*#__PURE__*/React.createElement("tr", _extends({}, rowProps, {
       className: rowClass,
-      key: internals.safeGetRowKey(primaryKey, record, rowIndex),
+      key: (rowProps === null || rowProps === void 0 ? void 0 : rowProps['data-row-detail-key']) ? rowProps['data-row-detail-key'] : internals.safeGetRowKey(primaryKey, record, rowIndex),
       "data-rowindex": rowIndex,
       "data-role": 'table-row'
-    }), _mapInstanceProperty(_context = hozInfo.visible).call(_context, function (descriptor) {
+    }), _mapInstanceProperty(visibleColumnDescriptor).call(visibleColumnDescriptor, function (descriptor) {
       if (descriptor.type === 'blank') {
         return /*#__PURE__*/React.createElement("td", {
-          key: descriptor.blankSide
+          key: descriptor.blankSide,
+          style: {
+            visibility: descriptor.isPlacehoder ? 'hidden' : undefined
+          }
         });
       }
 
@@ -55,6 +73,8 @@ export function HtmlTable(_ref) {
   }
 
   function renderBodyCell(record, rowIndex, column, colIndex) {
+    var _cx2;
+
     var _a, _b, _c;
 
     if (spanManager.testSkip(rowIndex, colIndex)) {
@@ -84,38 +104,35 @@ export function HtmlTable(_ref) {
       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);
-    }
+    } // rowSpan/colSpan 不能过大，避免 rowSpan/colSpan 影响因虚拟滚动而未渲染的单元格
+
+
+    rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
+    colSpan = Math.min(colSpan, hozInfo.visible.length - colIndex); // todo: 右侧有列固定的情况下colSpan计算不对，这里先限制一下
 
+    rowSpan = Math.max(rowSpan, 1);
+    colSpan = Math.max(colSpan, 1);
     var positionStyle = {};
+    var scrollbarWidth = hasScrollY ? getScrollbarSize().width : 0;
 
     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);
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - scrollbarWidth;
     }
 
     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
-      })
+      className: cx(Classes.tableCell, cellProps.className, (_cx2 = {}, _defineProperty(_cx2, Classes.first, colIndex === 0), _defineProperty(_cx2, Classes.last, colIndex + colSpan === fullFlatCount), _defineProperty(_cx2, Classes.lockLeft, colIndex < leftFlatCount || tbodyPosition === 'left'), _defineProperty(_cx2, Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount), _defineProperty(_cx2, Classes.rowSpan, rowSpan > 1), _cx2))
     }), hasSpan ? {
       colSpan: colSpan,
       rowSpan: rowSpan
@@ -127,6 +144,6 @@ export function HtmlTable(_ref) {
       'data-role': 'table-cell',
       'data-rowindex': rowIndex,
       'data-code': column.code
-    }), cellContent);
+    }), tbodyPosition === 'center' && positionStyle.position === 'sticky' ? null : cellContent);
   }
 }

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

@@ -16,6 +16,7 @@ export declare type VisibleColumnDescriptor = {
     type: 'blank';
     blankSide: 'left' | 'right';
     width: number;
+    isPlacehoder?: boolean;
 } | {
     type: 'normal';
     colIndex: number;

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

@@ -0,0 +1 @@
+export default function getTableHeaderRenderTemplate(type: string): any;

package/es/table/base/renderTemplates.js

@@ -0,0 +1,344 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+/*
+ * @Author: wqhui
+ * @Date: 2022-03-14 11:21:12
+ * @Description: 不同情况的渲染模板，比如IE下的
+ */
+import React, { useEffect, useRef } from 'react';
+import ReactDom from 'react-dom';
+import cx from 'classnames';
+import { HtmlTable } from './html-table';
+import { Classes } from './styles';
+import { composeRowPropsGetter, getScrollbarSize } from './utils';
+import { getTreeDepth, browserType } from '../utils';
+import TableHeader from './header';
+var TEMPLATES = new _Map();
+
+function renderTableHeaderInIE(info, props) {
+  var stickyTop = props.stickyTop,
+      hasHeader = props.hasHeader;
+
+  var flat = _flatInstanceProperty(info),
+      nested = info.nested,
+      visible = info.visible,
+      hasLockColumn = info.hasLockColumn;
+
+  var left = flat.left,
+      right = flat.right;
+  var leftNested = nested.left,
+      rightNested = nested.right,
+      full = nested.full;
+  var rowCount = getTreeDepth(full) + 1;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(Classes.tableHeader)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(Classes.tableHeaderMain, 'no-scrollbar'),
+    style: {
+      top: stickyTop === 0 ? undefined : stickyTop,
+      display: hasHeader ? undefined : 'none'
+    }
+  }, /*#__PURE__*/React.createElement(TableHeader, {
+    info: info,
+    theaderPosition: hasLockColumn ? 'center' : undefined
+  })), left.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: Classes.fixedLeft
+  }, /*#__PURE__*/React.createElement(TableHeader, {
+    info: _extends(_extends({}, info), {
+      flat: {
+        center: left,
+        full: left,
+        left: [],
+        right: []
+      },
+      nested: {
+        center: leftNested,
+        full: leftNested,
+        left: [],
+        right: []
+      },
+      visible: _sliceInstanceProperty(visible).call(visible, 0, left.length),
+      horizontalRenderRange: {
+        leftIndex: 0,
+        leftBlank: 0,
+        rightIndex: left.length,
+        rightBlank: 0
+      }
+    }),
+    theaderPosition: "left",
+    rowCount: rowCount
+  })) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: Classes.fixedRight
+  }, /*#__PURE__*/React.createElement(TableHeader, {
+    info: _extends(_extends({}, info), {
+      flat: {
+        center: right,
+        full: right,
+        left: [],
+        right: []
+      },
+      nested: {
+        center: rightNested,
+        full: rightNested,
+        left: [],
+        right: []
+      },
+      visible: _sliceInstanceProperty(visible).call(visible, visible.length - right.length),
+      horizontalRenderRange: {
+        leftIndex: 0,
+        leftBlank: 0,
+        rightIndex: right.length,
+        rightBlank: 0
+      }
+    }),
+    theaderPosition: 'right',
+    rowCount: rowCount
+  })) : null);
+}
+
+function renderTableBodyInIE(info, props, extra) {
+  var dataSource = props.dataSource,
+      getRowProps = props.getRowProps,
+      primaryKey = props.primaryKey;
+  var _info$verticalRenderR = info.verticalRenderRange,
+      topIndex = _info$verticalRenderR.topIndex,
+      bottomBlank = _info$verticalRenderR.bottomBlank,
+      topBlank = _info$verticalRenderR.topBlank,
+      bottomIndex = _info$verticalRenderR.bottomIndex;
+
+  var flat = _flatInstanceProperty(info),
+      visible = info.visible,
+      hasLockColumn = info.hasLockColumn;
+
+  var left = flat.left,
+      right = flat.right;
+  var verticalRenderInfo = {
+    first: 0,
+    offset: topIndex,
+    limit: bottomIndex,
+    last: dataSource.length - 1
+  };
+  var commonProps = {
+    getRowProps: composeRowPropsGetter(getRowProps, extra.rowProps),
+    primaryKey: primaryKey,
+    data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex)
+  };
+  var scrollbarWidth = extra.hasScrollY ? getScrollbarSize().width : 0;
+  var fixedRightTableStyle = {
+    right: -scrollbarWidth
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(Classes.tableBody, Classes.horizontalScrollContainer)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: Classes.virtual
+  }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
+    key: "top-blank",
+    className: cx(Classes.virtualBlank, 'top'),
+    style: {
+      height: topBlank
+    }
+  }), /*#__PURE__*/React.createElement(HtmlTable, _extends({
+    tbodyHtmlTag: "tbody"
+  }, commonProps, {
+    tbodyPosition: hasLockColumn ? 'center' : undefined,
+    horizontalRenderInfo: info,
+    verticalRenderInfo: verticalRenderInfo
+  })), bottomBlank > 0 && /*#__PURE__*/React.createElement("div", {
+    key: "bottom-blank",
+    className: cx(Classes.virtualBlank, 'bottom'),
+    style: {
+      height: bottomBlank
+    }
+  })), left.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: Classes.fixedLeft
+  }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
+    key: "top-blank",
+    className: cx(Classes.virtualBlank, 'top'),
+    style: {
+      height: topBlank
+    }
+  }), /*#__PURE__*/React.createElement(HtmlTable, _extends({
+    tbodyHtmlTag: "tbody"
+  }, commonProps, {
+    tbodyPosition: "left",
+    horizontalRenderInfo: _extends(_extends({}, info), {
+      flat: {
+        center: left,
+        full: left,
+        left: [],
+        right: []
+      },
+      visible: _sliceInstanceProperty(visible).call(visible, 0, left.length)
+    }),
+    verticalRenderInfo: verticalRenderInfo
+  })), bottomBlank > 0 && /*#__PURE__*/React.createElement("div", {
+    key: "bottom-blank",
+    className: cx(Classes.virtualBlank, 'bottom'),
+    style: {
+      height: bottomBlank
+    }
+  })) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: Classes.fixedRight,
+    style: fixedRightTableStyle
+  }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
+    key: "top-blank",
+    className: cx(Classes.virtualBlank, 'top'),
+    style: {
+      height: topBlank
+    }
+  }), /*#__PURE__*/React.createElement(HtmlTable, _extends({
+    tbodyHtmlTag: "tbody"
+  }, commonProps, {
+    tbodyPosition: "right",
+    hasScrollY: extra.hasScrollY,
+    horizontalRenderInfo: _extends(_extends({}, info), {
+      flat: {
+        center: right,
+        full: right,
+        left: [],
+        right: []
+      },
+      visible: _sliceInstanceProperty(visible).call(visible, visible.length - right.length)
+    }),
+    verticalRenderInfo: verticalRenderInfo
+  })), bottomBlank > 0 && /*#__PURE__*/React.createElement("div", {
+    key: "bottom-blank",
+    className: cx(Classes.virtualBlank, 'bottom'),
+    style: {
+      height: bottomBlank
+    }
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: Classes.rowDetailContainer
+  }));
+}
+
+function renderTableFooterInIE(info, props, extra) {
+  var _props$footerDataSour = props.footerDataSource,
+      footerDataSource = _props$footerDataSour === void 0 ? [] : _props$footerDataSour,
+      getRowProps = props.getRowProps,
+      primaryKey = props.primaryKey,
+      stickyBottom = props.stickyBottom;
+
+  var _getRowProps = composeRowPropsGetter(getRowProps, extra.rowProps);
+
+  var flat = _flatInstanceProperty(info),
+      visible = info.visible,
+      hasLockColumn = info.hasLockColumn;
+
+  var left = flat.left,
+      right = flat.right;
+  var verticalRenderInfo = {
+    offset: 0,
+    first: 0,
+    last: footerDataSource.length - 1,
+    limit: Infinity
+  };
+  var commonProps = {
+    data: footerDataSource,
+    getRowProps: _getRowProps,
+    primaryKey: primaryKey,
+    verticalRenderInfo: verticalRenderInfo
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(Classes.tableFooter),
+    style: {
+      bottom: stickyBottom === 0 ? undefined : stickyBottom
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx(Classes.tableFooterMain, Classes.horizontalScrollContainer)
+  }, /*#__PURE__*/React.createElement(HtmlTable, _extends({
+    tbodyHtmlTag: "tfoot"
+  }, commonProps, {
+    tbodyPosition: hasLockColumn ? 'center' : undefined,
+    horizontalRenderInfo: info
+  }))), left.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: Classes.fixedLeft
+  }, /*#__PURE__*/React.createElement(HtmlTable, _extends({
+    tbodyHtmlTag: "tfoot"
+  }, commonProps, {
+    tbodyPosition: "left",
+    horizontalRenderInfo: _extends(_extends({}, info), {
+      flat: {
+        center: left,
+        full: left,
+        left: [],
+        right: []
+      },
+      visible: _sliceInstanceProperty(visible).call(visible, 0, left.length)
+    })
+  }))) : null, right.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: Classes.fixedRight
+  }, /*#__PURE__*/React.createElement(HtmlTable, _extends({
+    tbodyHtmlTag: "tfoot"
+  }, commonProps, {
+    tbodyPosition: "right",
+    horizontalRenderInfo: _extends(_extends({}, info), {
+      flat: {
+        center: right,
+        full: right,
+        left: [],
+        right: []
+      },
+      visible: _sliceInstanceProperty(visible).call(visible, visible.length - right.length)
+    })
+  }))) : null);
+}
+
+function renderRowDetailInIE(params) {
+  var domHelper = params.domHelper;
+  if (!domHelper) return;
+  var artTable = domHelper.artTable;
+  var rowDetailContainer = artTable && artTable.querySelector(".".concat(Classes.rowDetailContainer));
+  return /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/React.createElement(RowDetail, _extends({}, params)), rowDetailContainer);
+}
+
+function RowDetail(props) {
+  var detailRef = useRef(null);
+  var row = props.row,
+      rowIndex = props.rowIndex,
+      domHelper = props.domHelper,
+      renderDetail = props.renderDetail;
+  var artTable = domHelper.artTable;
+  useEffect(function () {
+    var selector = function selector(position) {
+      var _context, _context2;
+
+      return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = ".".concat(position, " .")).call(_context2, Classes.tableRow, "[data-rowindex=\"")).call(_context, rowIndex, "\"]");
+    };
+
+    var itemRect = detailRef.current && detailRef.current.getBoundingClientRect();
+    var targetRow = artTable.querySelector(selector(Classes.tableBody));
+    var targetRowLeft = artTable.querySelector(selector(Classes.fixedLeft));
+    var targetRowRight = artTable.querySelector(selector(Classes.fixedRight));
+
+    if (itemRect.height) {
+      targetRow && (targetRow.style.height = itemRect.height + 'px');
+      targetRowLeft && (targetRowLeft.style.height = itemRect.height + 'px');
+      targetRowRight && (targetRowRight.style.height = itemRect.height + 'px');
+    }
+  }, []);
+  useEffect(function () {
+    // 这时候行才渲染完，只能在这里设置偏移量
+    var offsetTop = domHelper.getRowTop(rowIndex) || 0;
+    detailRef.current.style.transform = "translateY(".concat(offsetTop + 'px', ")");
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: detailRef,
+    className: Classes.rowDetailItem
+  }, renderDetail(row, rowIndex));
+}
+
+if (browserType.isIE) {
+  TEMPLATES.set('header', renderTableHeaderInIE);
+  TEMPLATES.set('body', renderTableBodyInIE);
+  TEMPLATES.set('footer', renderTableFooterInIE);
+  TEMPLATES.set('rowDetail', renderRowDetailInIE);
+}
+
+export default function getTableHeaderRenderTemplate(type) {
+  return TEMPLATES.get(type);
+}

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

@@ -3,10 +3,12 @@ export declare const Classes: {
     /** BaseTable 表格组件的外层包裹 div */
     readonly artTableWrapper: string;
     readonly artTable: string;
+    readonly tableHeaderMain: string;
     readonly tableHeader: string;
     readonly tableBody: string;
     readonly virtual: string;
     readonly tableFooter: string;
+    readonly tableFooterMain: string;
     /** 表格行 */
     readonly tableRow: string;
     /** 表头行 */
@@ -21,6 +23,7 @@ export declare const Classes: {
     readonly stickyScroll: string;
     readonly stickyScrollItem: string;
     readonly horizontalScrollContainer: string;
+    readonly verticalScrollPlaceholder: string;
     readonly lockShadowMask: string;
     readonly lockShadow: string;
     readonly leftLockShadow: string;
@@ -37,12 +40,33 @@ export declare const Classes: {
     readonly button: string;
     readonly buttonPrimary: string;
     readonly filterIcon: string;
+    readonly tableCellRangeSelected: string;
+    readonly tableCellRangeTop: string;
+    readonly tableCellRangeLeft: string;
+    readonly tableCellRangeBottom: string;
+    readonly tableCellRangeRight: string;
+    readonly fixedLeft: string;
+    readonly fixedRight: string;
+    readonly rowDetailContainer: string;
+    readonly rowDetailItem: string;
+    readonly emptyColCell: string;
+    readonly first: string;
+    readonly last: string;
+    readonly even: string;
+    readonly odd: string;
+    readonly lockLeft: string;
+    readonly lockRight: string;
+    readonly rowSpan: string;
+    readonly leaf: string;
+    readonly expanded: string;
+    readonly collapsed: string;
 };
 export declare const MenuClasses: {
     menu: string;
     menuList: string;
     menuOption: string;
     menuOptionActive: string;
+    menuOptionDisable: string;
     menuOptionText: string;
 };
 export declare type BaseTableCSSVariables = Partial<{