@kdcloudjs/table 1.1.3-canary.7 → 1.1.3-canary.8
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 +266 -47
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +6 -6
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/html-table.js +1 -1
- package/es/table/base/styles.d.ts +2 -0
- package/es/table/base/styles.js +3 -1
- package/es/table/base/table.js +4 -3
- package/es/table/pipeline/features/footerDataSource.d.ts +9 -0
- package/es/table/pipeline/features/footerDataSource.js +25 -0
- package/es/table/pipeline/features/index.d.ts +1 -0
- package/es/table/pipeline/features/index.js +2 -1
- package/es/table/pipeline/features/multiSelect.js +4 -0
- package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/es/table/pipeline/features/rangeSelection.js +156 -28
- package/es/table/pipeline/features/singleSelect.js +4 -0
- package/es/table/pipeline/pipeline.d.ts +5 -1
- package/es/table/pipeline/pipeline.js +11 -10
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +2 -0
- package/lib/table/base/styles.js +3 -1
- package/lib/table/base/table.js +4 -3
- package/lib/table/pipeline/features/footerDataSource.d.ts +9 -0
- package/lib/table/pipeline/features/footerDataSource.js +41 -0
- package/lib/table/pipeline/features/index.d.ts +1 -0
- package/lib/table/pipeline/features/index.js +15 -1
- package/lib/table/pipeline/features/multiSelect.js +4 -0
- package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/lib/table/pipeline/features/rangeSelection.js +158 -30
- package/lib/table/pipeline/features/singleSelect.js +4 -0
- package/lib/table/pipeline/pipeline.d.ts +5 -1
- package/lib/table/pipeline/pipeline.js +12 -10
- package/package.json +1 -1
|
@@ -124,7 +124,7 @@ export function HtmlTable(_ref) {
|
|
|
124
124
|
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
|
|
125
125
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
126
126
|
positionStyle.position = 'sticky';
|
|
127
|
-
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
|
|
127
|
+
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
return /*#__PURE__*/React.createElement('td', _extends(_extends(_extends(_extends({
|
|
@@ -40,6 +40,8 @@ export declare const Classes: {
|
|
|
40
40
|
readonly button: string;
|
|
41
41
|
readonly buttonPrimary: string;
|
|
42
42
|
readonly filterIcon: string;
|
|
43
|
+
readonly rangeSelection: string;
|
|
44
|
+
readonly tableCellRangeSingleCell: string;
|
|
43
45
|
readonly tableCellRangeSelected: string;
|
|
44
46
|
readonly tableCellRangeTop: string;
|
|
45
47
|
readonly tableCellRangeLeft: string;
|
package/es/table/base/styles.js
CHANGED
|
@@ -53,6 +53,8 @@ export var Classes = {
|
|
|
53
53
|
button: "".concat(prefix, "btn"),
|
|
54
54
|
buttonPrimary: "".concat(prefix, "btn-primary"),
|
|
55
55
|
filterIcon: "".concat(prefix, "filter-icon"),
|
|
56
|
+
rangeSelection: "".concat(prefix, "range-selection"),
|
|
57
|
+
tableCellRangeSingleCell: "".concat(prefix, "table-cell-range-single-cell"),
|
|
56
58
|
tableCellRangeSelected: "".concat(prefix, "table-cell-range-selected"),
|
|
57
59
|
tableCellRangeTop: "".concat(prefix, "table-cell-range-top"),
|
|
58
60
|
tableCellRangeLeft: "".concat(prefix, "table-cell-range-left"),
|
|
@@ -120,7 +122,7 @@ export var defaultCSSVariables = {
|
|
|
120
122
|
'--header-cell-border-horizontal': '1px solid #dfe3e8'
|
|
121
123
|
};
|
|
122
124
|
export var variableConst = getCssVariableText(defaultCSSVariables);
|
|
123
|
-
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
|
|
125
|
+
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: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n \n .", " {\n user-select:none;\n }\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 position:relative;\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 // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-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:1px solid transparent;\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.", " {\n border-right: none;\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\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:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\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 IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\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 border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\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: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\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\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
|
|
124
126
|
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);
|
|
125
127
|
|
|
126
128
|
function getCssVariableText(obj) {
|
package/es/table/base/table.js
CHANGED
|
@@ -509,13 +509,14 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
509
509
|
style: style
|
|
510
510
|
}, STYLED_REF_PROP, this.artTableWrapperRef);
|
|
511
511
|
|
|
512
|
+
var tableProps = getTableProps() || {};
|
|
512
513
|
return /*#__PURE__*/React.createElement(StyledArtTableWrapper, _extends({}, artTableWrapperProps), /*#__PURE__*/React.createElement(Loading, {
|
|
513
514
|
visible: isLoading,
|
|
514
515
|
LoadingIcon: components.LoadingIcon,
|
|
515
516
|
LoadingContentWrapper: components.LoadingContentWrapper
|
|
516
|
-
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
517
|
-
className: Classes.artTable
|
|
518
|
-
}
|
|
517
|
+
}, /*#__PURE__*/React.createElement("div", _extends({}, tableProps, {
|
|
518
|
+
className: cx(Classes.artTable, tableProps.className)
|
|
519
|
+
}), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
|
|
519
520
|
}
|
|
520
521
|
}, {
|
|
521
522
|
key: "componentDidMount",
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TablePipeline } from '../pipeline';
|
|
2
|
+
export interface FooterDataSourceFeatureOptions {
|
|
3
|
+
/** 指定表格页脚每一行元信息的记录字段 */
|
|
4
|
+
footerRowMetaKey?: string | symbol;
|
|
5
|
+
/** 表格页脚数据源 */
|
|
6
|
+
dataSource?: any[];
|
|
7
|
+
}
|
|
8
|
+
export declare const footerRowMetaSymbol: unique symbol;
|
|
9
|
+
export declare function footerDataSource(opts?: FooterDataSourceFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
2
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
3
|
+
import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
|
|
4
|
+
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
5
|
+
export var footerRowMetaSymbol = _Symbol('footer-row');
|
|
6
|
+
export function footerDataSource() {
|
|
7
|
+
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
8
|
+
return function footerDataSourceStep(pipeline) {
|
|
9
|
+
var _a, _b;
|
|
10
|
+
|
|
11
|
+
var footerDataSource = (_a = opts.dataSource) !== null && _a !== void 0 ? _a : pipeline.getFooterDataSource();
|
|
12
|
+
var footerRowMetaKey = (_b = opts.footerRowMetaKey) !== null && _b !== void 0 ? _b : footerRowMetaSymbol;
|
|
13
|
+
pipeline.setFeatureOptions('footerRowMetaKey', footerRowMetaKey);
|
|
14
|
+
|
|
15
|
+
if (footerDataSource) {
|
|
16
|
+
pipeline.footerDataSource(_mapInstanceProperty(footerDataSource).call(footerDataSource, function (row) {
|
|
17
|
+
return _extends(_defineProperty({}, footerRowMetaKey, true), row);
|
|
18
|
+
}));
|
|
19
|
+
} else {
|
|
20
|
+
console.warn('调用 pipeline.use(features.footerDataSource()) 前请先设置页脚数据源，设置方法有：pipeline.use(features.footerDataSource({dataSource:any[]})) 或者 pipeline.footerDataSource(any[])');
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return pipeline;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
@@ -16,3 +16,4 @@ export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
|
|
|
16
16
|
export { filter, FilterFeatureOptions } from './columnFilter';
|
|
17
17
|
export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
|
|
18
18
|
export { mergeCellHover } from './mergeCellHover';
|
|
19
|
+
export { footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol } from './footerDataSource';
|
|
@@ -15,4 +15,5 @@ export { columnResize } from './columnResizeWidth';
|
|
|
15
15
|
export { contextMenu } from './contextMenu';
|
|
16
16
|
export { filter } from './columnFilter';
|
|
17
17
|
export { rangeSelection } from './rangeSelection';
|
|
18
|
-
export { mergeCellHover } from './mergeCellHover';
|
|
18
|
+
export { mergeCellHover } from './mergeCellHover';
|
|
19
|
+
export { footerDataSource, footerRowMetaSymbol } from './footerDataSource';
|
|
@@ -111,6 +111,10 @@ export function multiSelect() {
|
|
|
111
111
|
return mergeCellProps(preCellProps, checkboxCellProps);
|
|
112
112
|
},
|
|
113
113
|
render: function render(_, row, rowIndex) {
|
|
114
|
+
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
115
|
+
return null;
|
|
116
|
+
}
|
|
117
|
+
|
|
114
118
|
var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
115
119
|
var checked = set.has(key);
|
|
116
120
|
return /*#__PURE__*/React.createElement(Checkbox, {
|
|
@@ -6,5 +6,5 @@ export interface RangeSelectionFeatureOptions {
|
|
|
6
6
|
preventkDefaultOfKeyDownEvent?: boolean;
|
|
7
7
|
}
|
|
8
8
|
export declare const rangeSelectionKey = "rangeSelection";
|
|
9
|
-
export declare const
|
|
9
|
+
export declare const lastClickCellKey = "lastClickCell";
|
|
10
10
|
export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
@@ -10,40 +10,42 @@ import { map, takeUntil } from 'rxjs/operators';
|
|
|
10
10
|
import { Classes } from '../../base/styles';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
export var rangeSelectionKey = 'rangeSelection';
|
|
13
|
-
export var
|
|
13
|
+
export var lastClickCellKey = 'lastClickCell';
|
|
14
14
|
export function rangeSelection(opts) {
|
|
15
15
|
return function step(pipeline) {
|
|
16
16
|
var SCROLL_SIZE = 30;
|
|
17
17
|
var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
|
|
18
|
+
var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
|
|
18
19
|
|
|
19
20
|
if (!tableBody) {
|
|
20
21
|
return pipeline;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
var columns = pipeline.getColumns();
|
|
25
|
+
var dataSource = pipeline.getDataSource();
|
|
24
26
|
|
|
25
27
|
var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
|
|
26
28
|
var _a;
|
|
27
29
|
|
|
28
30
|
pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
|
|
29
31
|
(_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
|
|
30
|
-
};
|
|
31
|
-
// pipeline.setFeatureOptions(rangeSelectionKey, {
|
|
32
|
-
// optionKey: rangeSelectionKey,
|
|
33
|
-
// rangeSelectedChange: rangeSelectedChange
|
|
34
|
-
// })
|
|
35
|
-
// }
|
|
36
|
-
|
|
32
|
+
};
|
|
37
33
|
|
|
38
34
|
var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
|
|
39
|
-
if (!startDragCell || !draggingCell
|
|
35
|
+
if (!startDragCell || !draggingCell) return;
|
|
40
36
|
var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
|
|
41
|
-
|
|
37
|
+
|
|
38
|
+
var _getRangeSelectionRow = getRangeSelectionRowInfo(startDragCell, draggingCell, dataSource),
|
|
39
|
+
startRow = _getRangeSelectionRow.startRow,
|
|
40
|
+
endRow = _getRangeSelectionRow.endRow,
|
|
41
|
+
footerRowRange = _getRangeSelectionRow.footerRowRange;
|
|
42
|
+
|
|
42
43
|
var rangeSelection = {
|
|
43
|
-
startRow:
|
|
44
|
-
endRow:
|
|
44
|
+
startRow: startRow,
|
|
45
|
+
endRow: endRow,
|
|
45
46
|
columns: rangeColumns,
|
|
46
|
-
startColumn: startDragCell.column
|
|
47
|
+
startColumn: startDragCell.column,
|
|
48
|
+
footerRowRange: footerRowRange
|
|
47
49
|
};
|
|
48
50
|
rangeSelectedChange(rangeSelection);
|
|
49
51
|
};
|
|
@@ -54,23 +56,23 @@ export function rangeSelection(opts) {
|
|
|
54
56
|
|
|
55
57
|
if (clickCell) {
|
|
56
58
|
if (event.shiftKey) {
|
|
57
|
-
var _lastClickCell = pipeline.getStateAtKey(
|
|
59
|
+
var _lastClickCell = pipeline.getStateAtKey(lastClickCellKey);
|
|
58
60
|
|
|
59
61
|
if (_lastClickCell) {
|
|
60
62
|
setRangeSelection(_lastClickCell, clickCell);
|
|
61
63
|
} else {
|
|
62
64
|
// 第一次进来就按住shift键，这时候要记住点击的单元格
|
|
63
|
-
pipeline.setStateAtKey(
|
|
65
|
+
pipeline.setStateAtKey(lastClickCellKey, clickCell);
|
|
64
66
|
}
|
|
65
67
|
} else {
|
|
66
|
-
pipeline.setStateAtKey(
|
|
67
|
-
|
|
68
|
+
pipeline.setStateAtKey(lastClickCellKey, clickCell);
|
|
69
|
+
setRangeSelection(clickCell, clickCell);
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
};
|
|
71
73
|
|
|
72
74
|
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
73
|
-
if (mouseDownEvent.button !== 0 || !isElementInEventPath(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
|
|
75
|
+
if (mouseDownEvent.button !== 0 || !(isElementInEventPath(tableBody, mouseDownEvent.nativeEvent) || isElementInEventPath(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
|
|
74
76
|
// shift + 点击选中
|
|
75
77
|
|
|
76
78
|
shiftKeySelect(mouseDownEvent);
|
|
@@ -126,10 +128,11 @@ export function rangeSelection(opts) {
|
|
|
126
128
|
};
|
|
127
129
|
|
|
128
130
|
var onKeyDown = function onKeyDown(e) {
|
|
129
|
-
if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
|
|
131
|
+
if (!(isElementInEventPath(tableBody, e.nativeEvent) || isElementInEventPath(tableFooter, e.nativeEvent))) return;
|
|
130
132
|
|
|
131
133
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
|
132
134
|
var rowLen = pipeline.getDataSource().length;
|
|
135
|
+
var footerDataSource = pipeline.getFooterDataSource() || [];
|
|
133
136
|
|
|
134
137
|
if (columns.length && rowLen) {
|
|
135
138
|
opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
|
|
@@ -137,7 +140,11 @@ export function rangeSelection(opts) {
|
|
|
137
140
|
startRow: 0,
|
|
138
141
|
endRow: rowLen - 1,
|
|
139
142
|
columns: columns,
|
|
140
|
-
startColumn: columns[0]
|
|
143
|
+
startColumn: columns[0],
|
|
144
|
+
footerRowRange: footerDataSource.length > 0 ? {
|
|
145
|
+
startRow: 0,
|
|
146
|
+
endRow: footerDataSource.length - 1
|
|
147
|
+
} : null
|
|
141
148
|
});
|
|
142
149
|
}
|
|
143
150
|
}
|
|
@@ -146,7 +153,8 @@ export function rangeSelection(opts) {
|
|
|
146
153
|
pipeline.addTableProps({
|
|
147
154
|
onMouseDown: onMouseDown,
|
|
148
155
|
onKeyDown: onKeyDown,
|
|
149
|
-
tabIndex: -1
|
|
156
|
+
tabIndex: -1,
|
|
157
|
+
className: cx([Classes.rangeSelection])
|
|
150
158
|
}); // todo: 后面可以把mousedown放到一个流里面
|
|
151
159
|
|
|
152
160
|
return pipeline.mapColumns(makeRecursiveMapper(function (col) {
|
|
@@ -162,15 +170,29 @@ export function rangeSelection(opts) {
|
|
|
162
170
|
var _cx;
|
|
163
171
|
|
|
164
172
|
var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
|
|
173
|
+
var isInFooter = record[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
165
174
|
var startRow = rangeSelection.startRow,
|
|
166
175
|
endRow = rangeSelection.endRow,
|
|
167
|
-
columns = rangeSelection.columns
|
|
168
|
-
|
|
169
|
-
|
|
176
|
+
columns = rangeSelection.columns,
|
|
177
|
+
footerRowRange = rangeSelection.footerRowRange;
|
|
178
|
+
|
|
179
|
+
var _getRowIndex = getRowIndex(startRow, endRow),
|
|
180
|
+
startRowIndex = _getRowIndex.startRowIndex,
|
|
181
|
+
endRowIndex = _getRowIndex.endRowIndex;
|
|
182
|
+
|
|
183
|
+
var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
|
|
184
|
+
footerStartRowIndex = _getFooterRowIndex.startRowIndex,
|
|
185
|
+
footerEndRowIndex = _getFooterRowIndex.endRowIndex;
|
|
186
|
+
|
|
170
187
|
var startCol = columns[0];
|
|
171
188
|
var endCol = columns[columns.length - 1];
|
|
172
|
-
var
|
|
173
|
-
var
|
|
189
|
+
var bodyMatch = !isInFooter && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
|
|
190
|
+
var footerMatch = isInFooter && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
|
|
191
|
+
var match = footerMatch || bodyMatch;
|
|
192
|
+
var matchSingleCell = match && isCellRangeSingleCell(rangeSelection); // 单个范围选中单元格不显示样式
|
|
193
|
+
|
|
194
|
+
var showCellRangeStyle = match && !matchSingleCell;
|
|
195
|
+
var className = cx((_cx = {}, _defineProperty(_cx, Classes.tableCellRangeSingleCell, matchSingleCell), _defineProperty(_cx, Classes.tableCellRangeSelected, showCellRangeStyle), _defineProperty(_cx, Classes.tableCellRangeTop, showCellRangeStyle && (isInFooter ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex)), _defineProperty(_cx, Classes.tableCellRangeLeft, showCellRangeStyle && col.code === startCol.code), _defineProperty(_cx, Classes.tableCellRangeBottom, showCellRangeStyle && (isInFooter ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex)), _defineProperty(_cx, Classes.tableCellRangeRight, showCellRangeStyle && col.code === endCol.code), _cx));
|
|
174
196
|
return mergeCellProps(prevCellProps, {
|
|
175
197
|
className: className
|
|
176
198
|
});
|
|
@@ -196,7 +218,8 @@ function getTargetCell(target, columns) {
|
|
|
196
218
|
rowIndex: parseInt(target.getAttribute('data-rowindex')),
|
|
197
219
|
rowSpan: parseInt(target.getAttribute('rowspan') || 1),
|
|
198
220
|
code: columnCode,
|
|
199
|
-
column: column
|
|
221
|
+
column: column,
|
|
222
|
+
isInFooter: isEleInFooter(target)
|
|
200
223
|
}
|
|
201
224
|
};
|
|
202
225
|
}();
|
|
@@ -211,7 +234,19 @@ function getTargetCell(target, columns) {
|
|
|
211
234
|
}
|
|
212
235
|
|
|
213
236
|
function isSameCell(cell1, cell2) {
|
|
214
|
-
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
|
|
237
|
+
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isInFooter === cell2.isInFooter;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
function isEleInFooter(target) {
|
|
241
|
+
while (target && !target.classList.contains(Classes.artTable)) {
|
|
242
|
+
if (target.classList.contains(Classes.tableFooter)) {
|
|
243
|
+
return true;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
target = target.parentElement;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
return false;
|
|
215
250
|
}
|
|
216
251
|
|
|
217
252
|
function getRangeColumns(startCell, endCell, columns) {
|
|
@@ -230,4 +265,97 @@ function getRangeColumns(startCell, endCell, columns) {
|
|
|
230
265
|
} else {
|
|
231
266
|
return _sliceInstanceProperty(flatColumns).call(flatColumns, endIndex, startIndex + 1);
|
|
232
267
|
}
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
|
|
271
|
+
var footerRowRange = null;
|
|
272
|
+
var startRow = -1;
|
|
273
|
+
var endRow = -1;
|
|
274
|
+
|
|
275
|
+
var _getCellRangeRow = getCellRangeRow(startCell, endCell),
|
|
276
|
+
_startRow = _getCellRangeRow.startRow,
|
|
277
|
+
_endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
if (!startCell.isInFooter && !endCell.isInFooter) {
|
|
281
|
+
startRow = _startRow;
|
|
282
|
+
endRow = _endRow;
|
|
283
|
+
} else if (startCell.isInFooter && endCell.isInFooter) {
|
|
284
|
+
// 两个单元格都在表底
|
|
285
|
+
footerRowRange = {
|
|
286
|
+
startRow: _startRow,
|
|
287
|
+
endRow: _endRow
|
|
288
|
+
};
|
|
289
|
+
} else {
|
|
290
|
+
// 一个单元格在表体，一个在表底
|
|
291
|
+
if (startCell.isInFooter) {
|
|
292
|
+
startRow = dataSource.length - 1;
|
|
293
|
+
endRow = endCell.rowIndex;
|
|
294
|
+
footerRowRange = {
|
|
295
|
+
startRow: startCell.rowIndex,
|
|
296
|
+
endRow: 0
|
|
297
|
+
};
|
|
298
|
+
} else {
|
|
299
|
+
startRow = startCell.rowIndex;
|
|
300
|
+
endRow = dataSource.length - 1;
|
|
301
|
+
footerRowRange = {
|
|
302
|
+
startRow: 0,
|
|
303
|
+
endRow: endCell.rowIndex
|
|
304
|
+
};
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
return {
|
|
309
|
+
startRow: startRow,
|
|
310
|
+
endRow: endRow,
|
|
311
|
+
footerRowRange: footerRowRange
|
|
312
|
+
};
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
function getCellRangeRow(startCell, endCell) {
|
|
316
|
+
if (isSameCell(startCell, endCell)) {
|
|
317
|
+
return {
|
|
318
|
+
startRow: startCell.rowIndex,
|
|
319
|
+
endRow: startCell.rowIndex
|
|
320
|
+
};
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
var isTopToBottom = startCell.rowIndex <= endCell.rowIndex;
|
|
324
|
+
var startRow = isTopToBottom ? startCell.rowIndex : startCell.rowIndex + startCell.rowSpan - 1;
|
|
325
|
+
var endRow = isTopToBottom ? endCell.rowIndex + endCell.rowSpan - 1 : endCell.rowIndex;
|
|
326
|
+
return {
|
|
327
|
+
startRow: startRow,
|
|
328
|
+
endRow: endRow
|
|
329
|
+
};
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
function isCellRangeSingleCell(rangeSelection) {
|
|
333
|
+
var startRow = rangeSelection.startRow,
|
|
334
|
+
endRow = rangeSelection.endRow,
|
|
335
|
+
columns = rangeSelection.columns,
|
|
336
|
+
footerRowRange = rangeSelection.footerRowRange;
|
|
337
|
+
var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
|
|
338
|
+
var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
|
|
339
|
+
return isBodySingleCell || isFooterSingleCell;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
function getRowIndex(startRow, endRow) {
|
|
343
|
+
var isReverse = startRow > endRow;
|
|
344
|
+
var startRowIndex = isReverse ? endRow : startRow;
|
|
345
|
+
var endRowIndex = isReverse ? startRow : endRow;
|
|
346
|
+
return {
|
|
347
|
+
startRowIndex: startRowIndex,
|
|
348
|
+
endRowIndex: endRowIndex
|
|
349
|
+
};
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
function getFooterRowIndex(footerRowRange) {
|
|
353
|
+
if (footerRowRange) {
|
|
354
|
+
return getRowIndex(footerRowRange.startRow, footerRowRange.endRow);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
return {
|
|
358
|
+
startRowIndex: -1,
|
|
359
|
+
endRowIndex: -1
|
|
360
|
+
};
|
|
233
361
|
}
|
|
@@ -60,6 +60,10 @@ export function singleSelect() {
|
|
|
60
60
|
return preCellProps;
|
|
61
61
|
},
|
|
62
62
|
render: function render(_, row, rowIndex) {
|
|
63
|
+
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
|
|
63
67
|
var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
64
68
|
return /*#__PURE__*/React.createElement(Radio, {
|
|
65
69
|
checked: value === rowKey,
|
|
@@ -36,7 +36,7 @@ export declare class TablePipeline {
|
|
|
36
36
|
private _tableProps;
|
|
37
37
|
private _dataSource;
|
|
38
38
|
private _columns;
|
|
39
|
-
private _footerDataSource
|
|
39
|
+
private _footerDataSource?;
|
|
40
40
|
static defaultIndents: TablePipelineIndentsConfig;
|
|
41
41
|
readonly ctx: TablePipelineCtx;
|
|
42
42
|
private readonly state;
|
|
@@ -88,6 +88,10 @@ export declare class TablePipeline {
|
|
|
88
88
|
setFeatureOptions(optionKey: string, value: any): void;
|
|
89
89
|
/** 获取 BaseTable 的 props，结果中包含 dataSource/columns/primaryKey/getRowProps 四个字段 */
|
|
90
90
|
getProps(this: TablePipeline): TableProps;
|
|
91
|
+
/**
|
|
92
|
+
* 清除范围选中内容
|
|
93
|
+
*/
|
|
94
|
+
clearRangeSelection(): void;
|
|
91
95
|
}
|
|
92
96
|
export declare function useTablePipeline(ctx?: Partial<TablePipelineCtx>): TablePipeline;
|
|
93
97
|
export {};
|
|
@@ -8,6 +8,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
|
|
|
8
8
|
import { useState, useRef } from 'react';
|
|
9
9
|
import { mergeCellProps } from '../utils';
|
|
10
10
|
import { autoFillTableWidth, tableWidthKey } from './features/autoFill';
|
|
11
|
+
import { rangeSelectionKey } from './features/rangeSelection';
|
|
11
12
|
/**
|
|
12
13
|
* 表格数据处理流水线。TablePipeline 提供了表格数据处理过程中的一些上下方与工具方法，包括……
|
|
13
14
|
*
|
|
@@ -276,19 +277,19 @@ export var TablePipeline = /*#__PURE__*/function () {
|
|
|
276
277
|
|
|
277
278
|
result.setTableDomHelper = function (domHelper) {
|
|
278
279
|
_this2.ref.current.domHelper = domHelper;
|
|
279
|
-
};
|
|
280
|
-
// result.clearRangeSelectionStatus = () => {
|
|
281
|
-
// const { rangeSelectedChange } = this.getFeatureOptions(rangeSelectionKey)
|
|
282
|
-
// const rangeSelection = this.getStateAtKey(rangeSelectionKey)
|
|
283
|
-
// if (rangeSelection) {
|
|
284
|
-
// rangeSelectedChange?.(null)
|
|
285
|
-
// }
|
|
286
|
-
// }
|
|
287
|
-
// }
|
|
288
|
-
|
|
280
|
+
};
|
|
289
281
|
|
|
290
282
|
return result;
|
|
291
283
|
}
|
|
284
|
+
/**
|
|
285
|
+
* 清除范围选中内容
|
|
286
|
+
*/
|
|
287
|
+
|
|
288
|
+
}, {
|
|
289
|
+
key: "clearRangeSelection",
|
|
290
|
+
value: function clearRangeSelection() {
|
|
291
|
+
this.setStateAtKey(rangeSelectionKey, null);
|
|
292
|
+
}
|
|
292
293
|
}]);
|
|
293
294
|
|
|
294
295
|
return TablePipeline;
|
|
@@ -141,7 +141,7 @@ function HtmlTable(_ref) {
|
|
|
141
141
|
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
|
|
142
142
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
143
143
|
positionStyle.position = 'sticky';
|
|
144
|
-
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - stickyRightOffset;
|
|
144
|
+
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) - (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
|
|
@@ -40,6 +40,8 @@ export declare const Classes: {
|
|
|
40
40
|
readonly button: string;
|
|
41
41
|
readonly buttonPrimary: string;
|
|
42
42
|
readonly filterIcon: string;
|
|
43
|
+
readonly rangeSelection: string;
|
|
44
|
+
readonly tableCellRangeSingleCell: string;
|
|
43
45
|
readonly tableCellRangeSelected: string;
|
|
44
46
|
readonly tableCellRangeTop: string;
|
|
45
47
|
readonly tableCellRangeLeft: string;
|
package/lib/table/base/styles.js
CHANGED
|
@@ -76,6 +76,8 @@ var Classes = {
|
|
|
76
76
|
button: "".concat(prefix, "btn"),
|
|
77
77
|
buttonPrimary: "".concat(prefix, "btn-primary"),
|
|
78
78
|
filterIcon: "".concat(prefix, "filter-icon"),
|
|
79
|
+
rangeSelection: "".concat(prefix, "range-selection"),
|
|
80
|
+
tableCellRangeSingleCell: "".concat(prefix, "table-cell-range-single-cell"),
|
|
79
81
|
tableCellRangeSelected: "".concat(prefix, "table-cell-range-selected"),
|
|
80
82
|
tableCellRangeTop: "".concat(prefix, "table-cell-range-top"),
|
|
81
83
|
tableCellRangeLeft: "".concat(prefix, "table-cell-range-left"),
|
|
@@ -148,7 +150,7 @@ exports.defaultCSSVariables = defaultCSSVariables;
|
|
|
148
150
|
var variableConst = getCssVariableText(defaultCSSVariables);
|
|
149
151
|
exports.variableConst = variableConst;
|
|
150
152
|
|
|
151
|
-
var StyledArtTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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
|
|
153
|
+
var StyledArtTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n \n .", " {\n user-select:none;\n }\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 position:relative;\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 // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-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:1px solid transparent;\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.", " {\n border-right: none;\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\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:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\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 IE\u517C\u5BB9\n &.ie-polyfill-wrapper {\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\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 border-top: 1px solid var(--border-color);\n background: var(--bgcolor);\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: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\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\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
|
|
152
154
|
|
|
153
155
|
exports.StyledArtTableWrapper = StyledArtTableWrapper;
|
|
154
156
|
var ButtonCSS = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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);
|
package/lib/table/base/table.js
CHANGED
|
@@ -556,13 +556,14 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
|
|
|
556
556
|
className: artTableWrapperClassName,
|
|
557
557
|
style: style
|
|
558
558
|
}, _utils.STYLED_REF_PROP, this.artTableWrapperRef);
|
|
559
|
+
var tableProps = getTableProps() || {};
|
|
559
560
|
return /*#__PURE__*/_react.default.createElement(_styles.StyledArtTableWrapper, (0, _extends2.default)({}, artTableWrapperProps), /*#__PURE__*/_react.default.createElement(_loading.default, {
|
|
560
561
|
visible: isLoading,
|
|
561
562
|
LoadingIcon: components.LoadingIcon,
|
|
562
563
|
LoadingContentWrapper: components.LoadingContentWrapper
|
|
563
|
-
}, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
|
564
|
-
className: _styles.Classes.artTable
|
|
565
|
-
}
|
|
564
|
+
}, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, tableProps, {
|
|
565
|
+
className: (0, _classnames.default)(_styles.Classes.artTable, tableProps.className)
|
|
566
|
+
}), this.renderTableHeader(info), this.renderTableBody(info), this.renderTableFooter(info), this.renderLockShadows(info)), this.renderStickyScroll(info)));
|
|
566
567
|
}
|
|
567
568
|
}, {
|
|
568
569
|
key: "componentDidMount",
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TablePipeline } from '../pipeline';
|
|
2
|
+
export interface FooterDataSourceFeatureOptions {
|
|
3
|
+
/** 指定表格页脚每一行元信息的记录字段 */
|
|
4
|
+
footerRowMetaKey?: string | symbol;
|
|
5
|
+
/** 表格页脚数据源 */
|
|
6
|
+
dataSource?: any[];
|
|
7
|
+
}
|
|
8
|
+
export declare const footerRowMetaSymbol: unique symbol;
|
|
9
|
+
export declare function footerDataSource(opts?: FooterDataSourceFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|