@kdcloudjs/table 1.1.1 → 1.1.2-canary.1

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

@@ -4,7 +4,7 @@ import { BaseTableProps } from './table';
 export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey'>> {
     tbodyHtmlTag: 'tbody' | 'tfoot';
     data: any[];
-    hasScrollY?: boolean;
+    stickyRightOffset?: number;
     horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
     verticalRenderInfo: {
         offset: number;
@@ -14,4 +14,4 @@ export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowPro
     };
     tbodyPosition?: 'left' | 'center' | 'right';
 }
-export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, hasScrollY, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, tbodyPosition }: HtmlTableProps): JSX.Element;
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, stickyRightOffset, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, tbodyPosition }: HtmlTableProps): JSX.Element;

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

@@ -9,12 +9,11 @@ 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,
+      stickyRightOffset = _ref.stickyRightOffset,
       data = _ref.data,
       verInfo = _ref.verticalRenderInfo,
       hozInfo = _ref.horizontalRenderInfo,
@@ -119,14 +118,13 @@ export function HtmlTable(_ref) {
     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) - scrollbarWidth;
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
     }
 
     return /*#__PURE__*/React.createElement('td', _extends(_extends(_extends(_extends({

package/es/table/base/renderTemplates.js

@@ -14,7 +14,7 @@ import ReactDom from 'react-dom';
 import cx from 'classnames';
 import { HtmlTable } from './html-table';
 import { Classes } from './styles';
-import { composeRowPropsGetter, getScrollbarSize } from './utils';
+import { composeRowPropsGetter } from './utils';
 import { getTreeDepth, browserType } from '../utils';
 import TableHeader from './header';
 var TEMPLATES = new _Map();
@@ -127,14 +127,14 @@ function renderTableBodyInIE(info, props, extra) {
     primaryKey: primaryKey,
     data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex)
   };
-  var scrollbarWidth = extra.hasScrollY ? getScrollbarSize().width : 0;
   var fixedRightTableStyle = {
-    right: -scrollbarWidth
+    right: -extra.stickyRightOffset
   };
   return /*#__PURE__*/React.createElement("div", {
     className: cx(Classes.tableBody, Classes.horizontalScrollContainer)
   }, /*#__PURE__*/React.createElement("div", {
-    className: Classes.virtual
+    className: Classes.virtual,
+    tabIndex: -1
   }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
     key: "top-blank",
     className: cx(Classes.virtualBlank, 'top'),
@@ -194,7 +194,7 @@ function renderTableBodyInIE(info, props, extra) {
     tbodyHtmlTag: "tbody"
   }, commonProps, {
     tbodyPosition: "right",
-    hasScrollY: extra.hasScrollY,
+    stickyRightOffset: extra.stickyRightOffset,
     horizontalRenderInfo: _extends(_extends({}, info), {
       flat: {
         center: right,

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

@@ -43,6 +43,8 @@ export interface BaseTableProps {
     hasStickyScroll?: boolean;
     /** 横向粘性滚动条高度 */
     stickyScrollHeight?: 'auto' | number;
+    /** 表格滚动条的宽度 */
+    scrollbarWidth?: number;
     /** 使用来自外层 div 的边框代替单元格的外边框 */
     useOuterBorder?: boolean;
     /** 表格是否在加载中 */
@@ -143,6 +145,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private renderTableFooter;
     private renderLockShadows;
     private renderStickyScroll;
+    private getScrollBarWidth;
     render(): JSX.Element;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;

package/es/table/base/table.js

@@ -158,6 +158,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           className: cx(tableBodyClassName, 'empty')
         }, /*#__PURE__*/React.createElement("div", {
           className: Classes.virtual,
+          tabIndex: -1,
           style: virtualStyle
         }, /*#__PURE__*/React.createElement(EmptyHtmlTable, {
           descriptors: info.visible,
@@ -172,6 +173,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           bottomBlank = _info$verticalRenderR.bottomBlank,
           topBlank = _info$verticalRenderR.topBlank,
           bottomIndex = _info$verticalRenderR.bottomIndex;
+      var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
       var renderBody = getTableRenderTemplate('body');
 
       if (typeof renderBody === 'function') {
@@ -180,7 +182,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
             onMouseEnter: _this.handleRowMouseEnter,
             onMouseLeave: _this.handleRowMouseLeave
           },
-          hasScrollY: _this.hasScrollY
+          stickyRightOffset: stickyRightOffset
         });
       }
 
@@ -188,6 +190,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: tableBodyClassName
       }, /*#__PURE__*/React.createElement("div", {
         className: Classes.virtual,
+        tabIndex: -1,
         style: virtualStyle
       }, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
         key: "top-blank",
@@ -200,7 +203,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         getRowProps: getRowProps,
         primaryKey: primaryKey,
         data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex),
-        hasScrollY: _this.hasScrollY,
+        stickyRightOffset: stickyRightOffset,
         horizontalRenderInfo: info,
         verticalRenderInfo: {
           first: 0,
@@ -261,7 +264,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       var innerTableWidth = tableBodyHtmlTable.offsetWidth;
       var artTableWidth = artTable.offsetWidth;
       var stickyScrollHeightProp = this.props.stickyScrollHeight;
-      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? getScrollbarSize().height : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
+      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
       // 设置滚动条高度
 
       stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
@@ -326,7 +329,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: getScrollbarSize().width
+          width: this.getScrollBarWidth()
         } : undefined
       }));
     }
@@ -435,7 +438,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: getScrollbarSize().width,
+          width: this.getScrollBarWidth(),
           visibility: 'initial'
         } : undefined
       }));
@@ -480,6 +483,11 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: Classes.stickyScrollItem
       }));
     }
+  }, {
+    key: "getScrollBarWidth",
+    value: function getScrollBarWidth() {
+      return this.props.scrollbarWidth || getScrollbarSize().width;
+    }
   }, {
     key: "render",
     value: function render() {

package/es/table/pipeline/features/rangeSelection.js

@@ -126,6 +126,8 @@ export function rangeSelection(opts) {
     };
 
     var onKeyDown = function onKeyDown(e) {
+      if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
+
       if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
         var rowLen = pipeline.getDataSource().length;
 

package/es/table/utils/element.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 /** elementUtil html元素用的工具函数 */
-export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent>): any;
+export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent> | KeyboardEvent): any;
 /**
  * 获取点击事件是否发生在元素内部
  * @param ele
  * @param event
  */
-export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent): boolean;
+export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent | KeyboardEvent): boolean;
 /**
  * 根据点击路径获取对应元素
  * @param path

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

@@ -4,7 +4,7 @@ import { BaseTableProps } from './table';
 export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey'>> {
     tbodyHtmlTag: 'tbody' | 'tfoot';
     data: any[];
-    hasScrollY?: boolean;
+    stickyRightOffset?: number;
     horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
     verticalRenderInfo: {
         offset: number;
@@ -14,4 +14,4 @@ export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowPro
     };
     tbodyPosition?: 'left' | 'center' | 'right';
 }
-export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, hasScrollY, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, tbodyPosition }: HtmlTableProps): JSX.Element;
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, stickyRightOffset, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, tbodyPosition }: HtmlTableProps): JSX.Element;

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

@@ -29,13 +29,11 @@ var _SpanManager = _interopRequireDefault(require("./helpers/SpanManager"));
 
 var _styles = require("./styles");
 
-var _utils = require("./utils");
-
 function HtmlTable(_ref) {
   var tbodyHtmlTag = _ref.tbodyHtmlTag,
       getRowProps = _ref.getRowProps,
       primaryKey = _ref.primaryKey,
-      hasScrollY = _ref.hasScrollY,
+      stickyRightOffset = _ref.stickyRightOffset,
       data = _ref.data,
       verInfo = _ref.verticalRenderInfo,
       hozInfo = _ref.horizontalRenderInfo,
@@ -137,14 +135,13 @@ function HtmlTable(_ref) {
     rowSpan = Math.max(rowSpan, 1);
     colSpan = Math.max(colSpan, 1);
     var positionStyle = {};
-    var scrollbarWidth = hasScrollY ? (0, _utils.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) - scrollbarWidth;
+      positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
     }
 
     return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({

package/lib/table/base/renderTemplates.js

@@ -154,14 +154,14 @@ function renderTableBodyInIE(info, props, extra) {
     primaryKey: primaryKey,
     data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex)
   };
-  var scrollbarWidth = extra.hasScrollY ? (0, _utils.getScrollbarSize)().width : 0;
   var fixedRightTableStyle = {
-    right: -scrollbarWidth
+    right: -extra.stickyRightOffset
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_styles.Classes.tableBody, _styles.Classes.horizontalScrollContainer)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _styles.Classes.virtual
+    className: _styles.Classes.virtual,
+    tabIndex: -1
   }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
     key: "top-blank",
     className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'top'),
@@ -221,7 +221,7 @@ function renderTableBodyInIE(info, props, extra) {
     tbodyHtmlTag: "tbody"
   }, commonProps, {
     tbodyPosition: "right",
-    hasScrollY: extra.hasScrollY,
+    stickyRightOffset: extra.stickyRightOffset,
     horizontalRenderInfo: (0, _extends2.default)((0, _extends2.default)({}, info), {
       flat: {
         center: right,

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

@@ -43,6 +43,8 @@ export interface BaseTableProps {
     hasStickyScroll?: boolean;
     /** 横向粘性滚动条高度 */
     stickyScrollHeight?: 'auto' | number;
+    /** 表格滚动条的宽度 */
+    scrollbarWidth?: number;
     /** 使用来自外层 div 的边框代替单元格的外边框 */
     useOuterBorder?: boolean;
     /** 表格是否在加载中 */
@@ -143,6 +145,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private renderTableFooter;
     private renderLockShadows;
     private renderStickyScroll;
+    private getScrollBarWidth;
     render(): JSX.Element;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;

package/lib/table/base/table.js

@@ -208,6 +208,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           className: (0, _classnames.default)(tableBodyClassName, 'empty')
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: _styles.Classes.virtual,
+          tabIndex: -1,
           style: virtualStyle
         }, /*#__PURE__*/_react.default.createElement(_empty.EmptyHtmlTable, {
           descriptors: info.visible,
@@ -222,6 +223,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           bottomBlank = _info$verticalRenderR.bottomBlank,
           topBlank = _info$verticalRenderR.topBlank,
           bottomIndex = _info$verticalRenderR.bottomIndex;
+      var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
       var renderBody = (0, _renderTemplates.default)('body');
 
       if (typeof renderBody === 'function') {
@@ -230,7 +232,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
             onMouseEnter: _this.handleRowMouseEnter,
             onMouseLeave: _this.handleRowMouseLeave
           },
-          hasScrollY: _this.hasScrollY
+          stickyRightOffset: stickyRightOffset
         });
       }
 
@@ -238,6 +240,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: tableBodyClassName
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.virtual,
+        tabIndex: -1,
         style: virtualStyle
       }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
         key: "top-blank",
@@ -250,7 +253,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         getRowProps: getRowProps,
         primaryKey: primaryKey,
         data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex),
-        hasScrollY: _this.hasScrollY,
+        stickyRightOffset: stickyRightOffset,
         horizontalRenderInfo: info,
         verticalRenderInfo: {
           first: 0,
@@ -312,7 +315,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var innerTableWidth = tableBodyHtmlTable.offsetWidth;
       var artTableWidth = artTable.offsetWidth;
       var stickyScrollHeightProp = this.props.stickyScrollHeight;
-      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? (0, _utils.getScrollbarSize)().height : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
+      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
       // 设置滚动条高度
 
       stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
@@ -377,7 +380,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: (0, _utils.getScrollbarSize)().width
+          width: this.getScrollBarWidth()
         } : undefined
       }));
     }
@@ -484,7 +487,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: (0, _utils.getScrollbarSize)().width,
+          width: this.getScrollBarWidth(),
           visibility: 'initial'
         } : undefined
       }));
@@ -529,6 +532,11 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: _styles.Classes.stickyScrollItem
       }));
     }
+  }, {
+    key: "getScrollBarWidth",
+    value: function getScrollBarWidth() {
+      return this.props.scrollbarWidth || (0, _utils.getScrollbarSize)().width;
+    }
   }, {
     key: "render",
     value: function render() {

package/lib/table/pipeline/features/rangeSelection.js

@@ -153,6 +153,8 @@ function rangeSelection(opts) {
     };
 
     var onKeyDown = function onKeyDown(e) {
+      if (!(0, _utils.isElementInEventPath)(tableBody, e.nativeEvent)) return;
+
       if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
         var rowLen = pipeline.getDataSource().length;
 

package/lib/table/utils/element.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 /** elementUtil html元素用的工具函数 */
-export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent>): any;
+export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent> | KeyboardEvent): any;
 /**
  * 获取点击事件是否发生在元素内部
  * @param ele
  * @param event
  */
-export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent): boolean;
+export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent | KeyboardEvent): boolean;
 /**
  * 根据点击路径获取对应元素
  * @param path

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/table",
-  "version": "1.1.1",
+  "version": "1.1.2-canary.1",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [
@@ -55,7 +55,7 @@
     "test:ci": "jest --config .jest.js  --coverage --ci --update-snapshot",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --skip-unstable",
     "pub": "npm run test:all && npm run build && cross-env PUB_ENV=pub np --no-cleanup --no-tests",
-    "pub:beta": "npm run test:all && npm run build && cross-env PUB_ENV=pub np --no-cleanup --anyBranch --no-tests --tag=beta",
+    "pub:canary": "npm run build && cross-env PUB_ENV=pub np --no-cleanup --anyBranch --no-tests --tag=canary",
     "new": "node scripts/create-component.js",
     "kd-ui": "npm install @kingdee-ui/kui --registry http://npm.kingdee.com/"
   },