@kdcloudjs/table 1.0.4 → 1.1.2-canary.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +28 -21
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +7 -7
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/html-table.d.ts +2 -2
- package/es/table/base/html-table.js +2 -4
- package/es/table/base/renderTemplates.js +5 -5
- package/es/table/base/table.d.ts +3 -0
- package/es/table/base/table.js +13 -5
- package/es/table/pipeline/features/filter/FilterPanel.js +6 -6
- package/es/table/pipeline/features/rangeSelection.js +2 -0
- package/es/table/utils/element.d.ts +2 -2
- package/lib/table/base/html-table.d.ts +2 -2
- package/lib/table/base/html-table.js +2 -5
- package/lib/table/base/renderTemplates.js +4 -4
- package/lib/table/base/table.d.ts +3 -0
- package/lib/table/base/table.js +13 -5
- package/lib/table/pipeline/features/filter/FilterPanel.js +6 -6
- package/lib/table/pipeline/features/rangeSelection.js +2 -0
- package/lib/table/utils/element.d.ts +2 -2
- package/package.json +2 -2
|
@@ -4,7 +4,7 @@ import { BaseTableProps } from './table';
|
|
|
4
4
|
export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey'>> {
|
|
5
5
|
tbodyHtmlTag: 'tbody' | 'tfoot';
|
|
6
6
|
data: any[];
|
|
7
|
-
|
|
7
|
+
stickyRightOffset?: number;
|
|
8
8
|
horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
|
|
9
9
|
verticalRenderInfo: {
|
|
10
10
|
offset: number;
|
|
@@ -14,4 +14,4 @@ export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowPro
|
|
|
14
14
|
};
|
|
15
15
|
tbodyPosition?: 'left' | 'center' | 'right';
|
|
16
16
|
}
|
|
17
|
-
export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey,
|
|
17
|
+
export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, stickyRightOffset, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, tbodyPosition }: HtmlTableProps): JSX.Element;
|
|
@@ -9,12 +9,11 @@ import { internals } from '../internals';
|
|
|
9
9
|
import { Colgroup } from './colgroup';
|
|
10
10
|
import SpanManager from './helpers/SpanManager';
|
|
11
11
|
import { Classes } from './styles';
|
|
12
|
-
import { getScrollbarSize } from './utils';
|
|
13
12
|
export function HtmlTable(_ref) {
|
|
14
13
|
var tbodyHtmlTag = _ref.tbodyHtmlTag,
|
|
15
14
|
getRowProps = _ref.getRowProps,
|
|
16
15
|
primaryKey = _ref.primaryKey,
|
|
17
|
-
|
|
16
|
+
stickyRightOffset = _ref.stickyRightOffset,
|
|
18
17
|
data = _ref.data,
|
|
19
18
|
verInfo = _ref.verticalRenderInfo,
|
|
20
19
|
hozInfo = _ref.horizontalRenderInfo,
|
|
@@ -119,14 +118,13 @@ export function HtmlTable(_ref) {
|
|
|
119
118
|
rowSpan = Math.max(rowSpan, 1);
|
|
120
119
|
colSpan = Math.max(colSpan, 1);
|
|
121
120
|
var positionStyle = {};
|
|
122
|
-
var scrollbarWidth = hasScrollY ? getScrollbarSize().width : 0;
|
|
123
121
|
|
|
124
122
|
if (colIndex < leftFlatCount) {
|
|
125
123
|
positionStyle.position = 'sticky';
|
|
126
124
|
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
|
|
127
125
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
128
126
|
positionStyle.position = 'sticky';
|
|
129
|
-
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) -
|
|
127
|
+
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
|
|
130
128
|
}
|
|
131
129
|
|
|
132
130
|
return /*#__PURE__*/React.createElement('td', _extends(_extends(_extends(_extends({
|
|
@@ -14,7 +14,7 @@ import ReactDom from 'react-dom';
|
|
|
14
14
|
import cx from 'classnames';
|
|
15
15
|
import { HtmlTable } from './html-table';
|
|
16
16
|
import { Classes } from './styles';
|
|
17
|
-
import { composeRowPropsGetter
|
|
17
|
+
import { composeRowPropsGetter } from './utils';
|
|
18
18
|
import { getTreeDepth, browserType } from '../utils';
|
|
19
19
|
import TableHeader from './header';
|
|
20
20
|
var TEMPLATES = new _Map();
|
|
@@ -127,14 +127,14 @@ function renderTableBodyInIE(info, props, extra) {
|
|
|
127
127
|
primaryKey: primaryKey,
|
|
128
128
|
data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex)
|
|
129
129
|
};
|
|
130
|
-
var scrollbarWidth = extra.hasScrollY ? getScrollbarSize().width : 0;
|
|
131
130
|
var fixedRightTableStyle = {
|
|
132
|
-
right: -
|
|
131
|
+
right: -extra.stickyRightOffset
|
|
133
132
|
};
|
|
134
133
|
return /*#__PURE__*/React.createElement("div", {
|
|
135
134
|
className: cx(Classes.tableBody, Classes.horizontalScrollContainer)
|
|
136
135
|
}, /*#__PURE__*/React.createElement("div", {
|
|
137
|
-
className: Classes.virtual
|
|
136
|
+
className: Classes.virtual,
|
|
137
|
+
tabIndex: -1
|
|
138
138
|
}, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
|
|
139
139
|
key: "top-blank",
|
|
140
140
|
className: cx(Classes.virtualBlank, 'top'),
|
|
@@ -194,7 +194,7 @@ function renderTableBodyInIE(info, props, extra) {
|
|
|
194
194
|
tbodyHtmlTag: "tbody"
|
|
195
195
|
}, commonProps, {
|
|
196
196
|
tbodyPosition: "right",
|
|
197
|
-
|
|
197
|
+
stickyRightOffset: extra.stickyRightOffset,
|
|
198
198
|
horizontalRenderInfo: _extends(_extends({}, info), {
|
|
199
199
|
flat: {
|
|
200
200
|
center: right,
|
package/es/table/base/table.d.ts
CHANGED
|
@@ -43,6 +43,8 @@ export interface BaseTableProps {
|
|
|
43
43
|
hasStickyScroll?: boolean;
|
|
44
44
|
/** 横向粘性滚动条高度 */
|
|
45
45
|
stickyScrollHeight?: 'auto' | number;
|
|
46
|
+
/** 表格滚动条的宽度 */
|
|
47
|
+
scrollbarWidth?: number;
|
|
46
48
|
/** 使用来自外层 div 的边框代替单元格的外边框 */
|
|
47
49
|
useOuterBorder?: boolean;
|
|
48
50
|
/** 表格是否在加载中 */
|
|
@@ -143,6 +145,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
|
|
|
143
145
|
private renderTableFooter;
|
|
144
146
|
private renderLockShadows;
|
|
145
147
|
private renderStickyScroll;
|
|
148
|
+
private getScrollBarWidth;
|
|
146
149
|
render(): JSX.Element;
|
|
147
150
|
componentDidMount(): void;
|
|
148
151
|
componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;
|
package/es/table/base/table.js
CHANGED
|
@@ -158,6 +158,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
158
158
|
className: cx(tableBodyClassName, 'empty')
|
|
159
159
|
}, /*#__PURE__*/React.createElement("div", {
|
|
160
160
|
className: Classes.virtual,
|
|
161
|
+
tabIndex: -1,
|
|
161
162
|
style: virtualStyle
|
|
162
163
|
}, /*#__PURE__*/React.createElement(EmptyHtmlTable, {
|
|
163
164
|
descriptors: info.visible,
|
|
@@ -172,6 +173,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
172
173
|
bottomBlank = _info$verticalRenderR.bottomBlank,
|
|
173
174
|
topBlank = _info$verticalRenderR.topBlank,
|
|
174
175
|
bottomIndex = _info$verticalRenderR.bottomIndex;
|
|
176
|
+
var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
|
|
175
177
|
var renderBody = getTableRenderTemplate('body');
|
|
176
178
|
|
|
177
179
|
if (typeof renderBody === 'function') {
|
|
@@ -180,7 +182,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
180
182
|
onMouseEnter: _this.handleRowMouseEnter,
|
|
181
183
|
onMouseLeave: _this.handleRowMouseLeave
|
|
182
184
|
},
|
|
183
|
-
|
|
185
|
+
stickyRightOffset: stickyRightOffset
|
|
184
186
|
});
|
|
185
187
|
}
|
|
186
188
|
|
|
@@ -188,6 +190,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
188
190
|
className: tableBodyClassName
|
|
189
191
|
}, /*#__PURE__*/React.createElement("div", {
|
|
190
192
|
className: Classes.virtual,
|
|
193
|
+
tabIndex: -1,
|
|
191
194
|
style: virtualStyle
|
|
192
195
|
}, topBlank > 0 && /*#__PURE__*/React.createElement("div", {
|
|
193
196
|
key: "top-blank",
|
|
@@ -200,7 +203,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
200
203
|
getRowProps: getRowProps,
|
|
201
204
|
primaryKey: primaryKey,
|
|
202
205
|
data: _sliceInstanceProperty(dataSource).call(dataSource, topIndex, bottomIndex),
|
|
203
|
-
|
|
206
|
+
stickyRightOffset: stickyRightOffset,
|
|
204
207
|
horizontalRenderInfo: info,
|
|
205
208
|
verticalRenderInfo: {
|
|
206
209
|
first: 0,
|
|
@@ -261,7 +264,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
261
264
|
var innerTableWidth = tableBodyHtmlTable.offsetWidth;
|
|
262
265
|
var artTableWidth = artTable.offsetWidth;
|
|
263
266
|
var stickyScrollHeightProp = this.props.stickyScrollHeight;
|
|
264
|
-
var stickyScrollHeight = stickyScrollHeightProp === 'auto' ?
|
|
267
|
+
var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
|
|
265
268
|
// 设置滚动条高度
|
|
266
269
|
|
|
267
270
|
stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
|
|
@@ -326,7 +329,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
326
329
|
}), /*#__PURE__*/React.createElement("div", {
|
|
327
330
|
className: Classes.verticalScrollPlaceholder,
|
|
328
331
|
style: this.hasScrollY ? {
|
|
329
|
-
width:
|
|
332
|
+
width: this.getScrollBarWidth()
|
|
330
333
|
} : undefined
|
|
331
334
|
}));
|
|
332
335
|
}
|
|
@@ -435,7 +438,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
435
438
|
}), /*#__PURE__*/React.createElement("div", {
|
|
436
439
|
className: Classes.verticalScrollPlaceholder,
|
|
437
440
|
style: this.hasScrollY ? {
|
|
438
|
-
width:
|
|
441
|
+
width: this.getScrollBarWidth(),
|
|
439
442
|
visibility: 'initial'
|
|
440
443
|
} : undefined
|
|
441
444
|
}));
|
|
@@ -480,6 +483,11 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
480
483
|
className: Classes.stickyScrollItem
|
|
481
484
|
}));
|
|
482
485
|
}
|
|
486
|
+
}, {
|
|
487
|
+
key: "getScrollBarWidth",
|
|
488
|
+
value: function getScrollBarWidth() {
|
|
489
|
+
return this.props.scrollbarWidth || getScrollbarSize().width;
|
|
490
|
+
}
|
|
483
491
|
}, {
|
|
484
492
|
key: "render",
|
|
485
493
|
value: function render() {
|
|
@@ -36,8 +36,8 @@ function FilterPanel(_ref) {
|
|
|
36
36
|
|
|
37
37
|
var _useState3 = useState(false),
|
|
38
38
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
visible = _useState4[0],
|
|
40
|
+
setVisible = _useState4[1];
|
|
41
41
|
|
|
42
42
|
var ref = React.useRef(null);
|
|
43
43
|
|
|
@@ -47,16 +47,16 @@ function FilterPanel(_ref) {
|
|
|
47
47
|
|
|
48
48
|
useEffect(function () {
|
|
49
49
|
setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
|
|
50
|
-
|
|
50
|
+
setVisible(true);
|
|
51
51
|
}, [position]);
|
|
52
52
|
useWindowEvents(function (e) {
|
|
53
53
|
return !isContainPanel(e) && onClose();
|
|
54
54
|
}, ['mousedown']);
|
|
55
55
|
return /*#__PURE__*/React.createElement(FilterPanelStyle, {
|
|
56
56
|
style: _extends(_extends({}, style), {
|
|
57
|
-
left: perfectPosition.x,
|
|
58
|
-
top: perfectPosition.y,
|
|
59
|
-
opacity:
|
|
57
|
+
left: visible ? perfectPosition.x : 0,
|
|
58
|
+
top: visible ? perfectPosition.y : 0,
|
|
59
|
+
opacity: visible ? 1 : 0
|
|
60
60
|
}),
|
|
61
61
|
ref: ref
|
|
62
62
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -126,6 +126,8 @@ export function rangeSelection(opts) {
|
|
|
126
126
|
};
|
|
127
127
|
|
|
128
128
|
var onKeyDown = function onKeyDown(e) {
|
|
129
|
+
if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
|
|
130
|
+
|
|
129
131
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
|
130
132
|
var rowLen = pipeline.getDataSource().length;
|
|
131
133
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
/** elementUtil html元素用的工具函数 */
|
|
3
|
-
export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent>): any;
|
|
3
|
+
export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent> | KeyboardEvent): any;
|
|
4
4
|
/**
|
|
5
5
|
* 获取点击事件是否发生在元素内部
|
|
6
6
|
* @param ele
|
|
7
7
|
* @param event
|
|
8
8
|
*/
|
|
9
|
-
export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent): boolean;
|
|
9
|
+
export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent | KeyboardEvent): boolean;
|
|
10
10
|
/**
|
|
11
11
|
* 根据点击路径获取对应元素
|
|
12
12
|
* @param path
|
|
@@ -4,7 +4,7 @@ import { BaseTableProps } from './table';
|
|
|
4
4
|
export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey'>> {
|
|
5
5
|
tbodyHtmlTag: 'tbody' | 'tfoot';
|
|
6
6
|
data: any[];
|
|
7
|
-
|
|
7
|
+
stickyRightOffset?: number;
|
|
8
8
|
horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
|
|
9
9
|
verticalRenderInfo: {
|
|
10
10
|
offset: number;
|
|
@@ -14,4 +14,4 @@ export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowPro
|
|
|
14
14
|
};
|
|
15
15
|
tbodyPosition?: 'left' | 'center' | 'right';
|
|
16
16
|
}
|
|
17
|
-
export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey,
|
|
17
|
+
export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, stickyRightOffset, data, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, tbodyPosition }: HtmlTableProps): JSX.Element;
|
|
@@ -29,13 +29,11 @@ var _SpanManager = _interopRequireDefault(require("./helpers/SpanManager"));
|
|
|
29
29
|
|
|
30
30
|
var _styles = require("./styles");
|
|
31
31
|
|
|
32
|
-
var _utils = require("./utils");
|
|
33
|
-
|
|
34
32
|
function HtmlTable(_ref) {
|
|
35
33
|
var tbodyHtmlTag = _ref.tbodyHtmlTag,
|
|
36
34
|
getRowProps = _ref.getRowProps,
|
|
37
35
|
primaryKey = _ref.primaryKey,
|
|
38
|
-
|
|
36
|
+
stickyRightOffset = _ref.stickyRightOffset,
|
|
39
37
|
data = _ref.data,
|
|
40
38
|
verInfo = _ref.verticalRenderInfo,
|
|
41
39
|
hozInfo = _ref.horizontalRenderInfo,
|
|
@@ -137,14 +135,13 @@ function HtmlTable(_ref) {
|
|
|
137
135
|
rowSpan = Math.max(rowSpan, 1);
|
|
138
136
|
colSpan = Math.max(colSpan, 1);
|
|
139
137
|
var positionStyle = {};
|
|
140
|
-
var scrollbarWidth = hasScrollY ? (0, _utils.getScrollbarSize)().width : 0;
|
|
141
138
|
|
|
142
139
|
if (colIndex < leftFlatCount) {
|
|
143
140
|
positionStyle.position = 'sticky';
|
|
144
141
|
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
|
|
145
142
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
146
143
|
positionStyle.position = 'sticky';
|
|
147
|
-
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) -
|
|
144
|
+
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
|
|
148
145
|
}
|
|
149
146
|
|
|
150
147
|
return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
|
|
@@ -154,14 +154,14 @@ function renderTableBodyInIE(info, props, extra) {
|
|
|
154
154
|
primaryKey: primaryKey,
|
|
155
155
|
data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex)
|
|
156
156
|
};
|
|
157
|
-
var scrollbarWidth = extra.hasScrollY ? (0, _utils.getScrollbarSize)().width : 0;
|
|
158
157
|
var fixedRightTableStyle = {
|
|
159
|
-
right: -
|
|
158
|
+
right: -extra.stickyRightOffset
|
|
160
159
|
};
|
|
161
160
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
162
161
|
className: (0, _classnames.default)(_styles.Classes.tableBody, _styles.Classes.horizontalScrollContainer)
|
|
163
162
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
164
|
-
className: _styles.Classes.virtual
|
|
163
|
+
className: _styles.Classes.virtual,
|
|
164
|
+
tabIndex: -1
|
|
165
165
|
}, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
166
166
|
key: "top-blank",
|
|
167
167
|
className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'top'),
|
|
@@ -221,7 +221,7 @@ function renderTableBodyInIE(info, props, extra) {
|
|
|
221
221
|
tbodyHtmlTag: "tbody"
|
|
222
222
|
}, commonProps, {
|
|
223
223
|
tbodyPosition: "right",
|
|
224
|
-
|
|
224
|
+
stickyRightOffset: extra.stickyRightOffset,
|
|
225
225
|
horizontalRenderInfo: (0, _extends2.default)((0, _extends2.default)({}, info), {
|
|
226
226
|
flat: {
|
|
227
227
|
center: right,
|
|
@@ -43,6 +43,8 @@ export interface BaseTableProps {
|
|
|
43
43
|
hasStickyScroll?: boolean;
|
|
44
44
|
/** 横向粘性滚动条高度 */
|
|
45
45
|
stickyScrollHeight?: 'auto' | number;
|
|
46
|
+
/** 表格滚动条的宽度 */
|
|
47
|
+
scrollbarWidth?: number;
|
|
46
48
|
/** 使用来自外层 div 的边框代替单元格的外边框 */
|
|
47
49
|
useOuterBorder?: boolean;
|
|
48
50
|
/** 表格是否在加载中 */
|
|
@@ -143,6 +145,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
|
|
|
143
145
|
private renderTableFooter;
|
|
144
146
|
private renderLockShadows;
|
|
145
147
|
private renderStickyScroll;
|
|
148
|
+
private getScrollBarWidth;
|
|
146
149
|
render(): JSX.Element;
|
|
147
150
|
componentDidMount(): void;
|
|
148
151
|
componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;
|
package/lib/table/base/table.js
CHANGED
|
@@ -208,6 +208,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
208
208
|
className: (0, _classnames.default)(tableBodyClassName, 'empty')
|
|
209
209
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
210
210
|
className: _styles.Classes.virtual,
|
|
211
|
+
tabIndex: -1,
|
|
211
212
|
style: virtualStyle
|
|
212
213
|
}, /*#__PURE__*/_react.default.createElement(_empty.EmptyHtmlTable, {
|
|
213
214
|
descriptors: info.visible,
|
|
@@ -222,6 +223,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
222
223
|
bottomBlank = _info$verticalRenderR.bottomBlank,
|
|
223
224
|
topBlank = _info$verticalRenderR.topBlank,
|
|
224
225
|
bottomIndex = _info$verticalRenderR.bottomIndex;
|
|
226
|
+
var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
|
|
225
227
|
var renderBody = (0, _renderTemplates.default)('body');
|
|
226
228
|
|
|
227
229
|
if (typeof renderBody === 'function') {
|
|
@@ -230,7 +232,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
230
232
|
onMouseEnter: _this.handleRowMouseEnter,
|
|
231
233
|
onMouseLeave: _this.handleRowMouseLeave
|
|
232
234
|
},
|
|
233
|
-
|
|
235
|
+
stickyRightOffset: stickyRightOffset
|
|
234
236
|
});
|
|
235
237
|
}
|
|
236
238
|
|
|
@@ -238,6 +240,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
238
240
|
className: tableBodyClassName
|
|
239
241
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
240
242
|
className: _styles.Classes.virtual,
|
|
243
|
+
tabIndex: -1,
|
|
241
244
|
style: virtualStyle
|
|
242
245
|
}, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
243
246
|
key: "top-blank",
|
|
@@ -250,7 +253,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
250
253
|
getRowProps: getRowProps,
|
|
251
254
|
primaryKey: primaryKey,
|
|
252
255
|
data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex),
|
|
253
|
-
|
|
256
|
+
stickyRightOffset: stickyRightOffset,
|
|
254
257
|
horizontalRenderInfo: info,
|
|
255
258
|
verticalRenderInfo: {
|
|
256
259
|
first: 0,
|
|
@@ -312,7 +315,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
312
315
|
var innerTableWidth = tableBodyHtmlTable.offsetWidth;
|
|
313
316
|
var artTableWidth = artTable.offsetWidth;
|
|
314
317
|
var stickyScrollHeightProp = this.props.stickyScrollHeight;
|
|
315
|
-
var stickyScrollHeight = stickyScrollHeightProp === 'auto' ?
|
|
318
|
+
var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
|
|
316
319
|
// 设置滚动条高度
|
|
317
320
|
|
|
318
321
|
stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
|
|
@@ -377,7 +380,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
377
380
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
378
381
|
className: _styles.Classes.verticalScrollPlaceholder,
|
|
379
382
|
style: this.hasScrollY ? {
|
|
380
|
-
width:
|
|
383
|
+
width: this.getScrollBarWidth()
|
|
381
384
|
} : undefined
|
|
382
385
|
}));
|
|
383
386
|
}
|
|
@@ -484,7 +487,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
484
487
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
485
488
|
className: _styles.Classes.verticalScrollPlaceholder,
|
|
486
489
|
style: this.hasScrollY ? {
|
|
487
|
-
width:
|
|
490
|
+
width: this.getScrollBarWidth(),
|
|
488
491
|
visibility: 'initial'
|
|
489
492
|
} : undefined
|
|
490
493
|
}));
|
|
@@ -529,6 +532,11 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
529
532
|
className: _styles.Classes.stickyScrollItem
|
|
530
533
|
}));
|
|
531
534
|
}
|
|
535
|
+
}, {
|
|
536
|
+
key: "getScrollBarWidth",
|
|
537
|
+
value: function getScrollBarWidth() {
|
|
538
|
+
return this.props.scrollbarWidth || (0, _utils.getScrollbarSize)().width;
|
|
539
|
+
}
|
|
532
540
|
}, {
|
|
533
541
|
key: "render",
|
|
534
542
|
value: function render() {
|
|
@@ -60,8 +60,8 @@ function FilterPanel(_ref) {
|
|
|
60
60
|
|
|
61
61
|
var _useState3 = (0, _react.useState)(false),
|
|
62
62
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
visible = _useState4[0],
|
|
64
|
+
setVisible = _useState4[1];
|
|
65
65
|
|
|
66
66
|
var ref = _react.default.useRef(null);
|
|
67
67
|
|
|
@@ -71,16 +71,16 @@ function FilterPanel(_ref) {
|
|
|
71
71
|
|
|
72
72
|
(0, _react.useEffect)(function () {
|
|
73
73
|
setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
|
|
74
|
-
|
|
74
|
+
setVisible(true);
|
|
75
75
|
}, [position]);
|
|
76
76
|
useWindowEvents(function (e) {
|
|
77
77
|
return !isContainPanel(e) && onClose();
|
|
78
78
|
}, ['mousedown']);
|
|
79
79
|
return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
|
|
80
80
|
style: (0, _extends2.default)((0, _extends2.default)({}, style), {
|
|
81
|
-
left: perfectPosition.x,
|
|
82
|
-
top: perfectPosition.y,
|
|
83
|
-
opacity:
|
|
81
|
+
left: visible ? perfectPosition.x : 0,
|
|
82
|
+
top: visible ? perfectPosition.y : 0,
|
|
83
|
+
opacity: visible ? 1 : 0
|
|
84
84
|
}),
|
|
85
85
|
ref: ref
|
|
86
86
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -153,6 +153,8 @@ function rangeSelection(opts) {
|
|
|
153
153
|
};
|
|
154
154
|
|
|
155
155
|
var onKeyDown = function onKeyDown(e) {
|
|
156
|
+
if (!(0, _utils.isElementInEventPath)(tableBody, e.nativeEvent)) return;
|
|
157
|
+
|
|
156
158
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
|
157
159
|
var rowLen = pipeline.getDataSource().length;
|
|
158
160
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
/** elementUtil html元素用的工具函数 */
|
|
3
|
-
export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent>): any;
|
|
3
|
+
export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent> | KeyboardEvent): any;
|
|
4
4
|
/**
|
|
5
5
|
* 获取点击事件是否发生在元素内部
|
|
6
6
|
* @param ele
|
|
7
7
|
* @param event
|
|
8
8
|
*/
|
|
9
|
-
export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent): boolean;
|
|
9
|
+
export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent | KeyboardEvent): boolean;
|
|
10
10
|
/**
|
|
11
11
|
* 根据点击路径获取对应元素
|
|
12
12
|
* @param path
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kdcloudjs/table",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.2-canary.1",
|
|
4
4
|
"description": "金蝶 react table 组件",
|
|
5
5
|
"title": "table",
|
|
6
6
|
"keywords": [
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"test:ci": "jest --config .jest.js --coverage --ci --update-snapshot",
|
|
56
56
|
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --skip-unstable",
|
|
57
57
|
"pub": "npm run test:all && npm run build && cross-env PUB_ENV=pub np --no-cleanup --no-tests",
|
|
58
|
-
"pub:
|
|
58
|
+
"pub:canary": "npm run build && cross-env PUB_ENV=pub np --no-cleanup --anyBranch --no-tests --tag=canary",
|
|
59
59
|
"new": "node scripts/create-component.js",
|
|
60
60
|
"kd-ui": "npm install @kingdee-ui/kui --registry http://npm.kingdee.com/"
|
|
61
61
|
},
|