@kdcloudjs/table 1.1.3 → 1.1.4-canary.2
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 +642 -288
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +10 -9
- 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 +10 -2
- package/es/table/base/styles.js +17 -7
- package/es/table/base/table.d.ts +2 -0
- package/es/table/base/table.js +31 -53
- package/es/table/base/utils.d.ts +7 -0
- package/es/table/base/utils.js +29 -1
- package/es/table/pipeline/features/columnDrag.js +21 -11
- package/es/table/pipeline/features/columnFilter.d.ts +4 -2
- package/es/table/pipeline/features/columnFilter.js +39 -17
- package/es/table/pipeline/features/columnResizeWidth.js +1 -1
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +22 -2
- package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
- package/es/table/pipeline/features/filter/DefaultFilterIcon.js +20 -0
- package/es/table/pipeline/features/filter/Filter.d.ts +3 -2
- package/es/table/pipeline/features/filter/Filter.js +44 -34
- package/es/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/es/table/pipeline/features/filter/FilterPanel.js +29 -20
- package/es/table/pipeline/features/filter/util.js +4 -4
- 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 +7 -2
- 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/features/treeMode.d.ts +2 -0
- package/es/table/pipeline/features/treeMode.js +18 -20
- package/es/table/pipeline/pipeline.d.ts +5 -1
- package/es/table/pipeline/pipeline.js +12 -11
- package/es/table/utils/keyCode.d.ts +4 -0
- package/es/table/utils/keyCode.js +4 -0
- package/es/table/utils/mergeCellProps.js +2 -6
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +10 -2
- package/lib/table/base/styles.js +17 -7
- package/lib/table/base/table.d.ts +2 -0
- package/lib/table/base/table.js +31 -53
- package/lib/table/base/utils.d.ts +7 -0
- package/lib/table/base/utils.js +35 -1
- package/lib/table/pipeline/features/columnDrag.js +21 -11
- package/lib/table/pipeline/features/columnFilter.d.ts +4 -2
- package/lib/table/pipeline/features/columnFilter.js +37 -17
- package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +23 -1
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +30 -0
- package/lib/table/pipeline/features/filter/Filter.d.ts +3 -2
- package/lib/table/pipeline/features/filter/Filter.js +46 -34
- package/lib/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/lib/table/pipeline/features/filter/FilterPanel.js +30 -19
- package/lib/table/pipeline/features/filter/util.js +4 -4
- 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 +6 -1
- 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/features/treeMode.d.ts +2 -0
- package/lib/table/pipeline/features/treeMode.js +19 -22
- package/lib/table/pipeline/pipeline.d.ts +5 -1
- package/lib/table/pipeline/pipeline.js +13 -11
- package/lib/table/utils/keyCode.d.ts +4 -0
- package/lib/table/utils/keyCode.js +11 -0
- package/lib/table/utils/mergeCellProps.js +2 -6
- package/package.json +3 -3
|
@@ -6,11 +6,12 @@ var _templateObject;
|
|
|
6
6
|
|
|
7
7
|
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
8
8
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
9
|
-
import React, { useEffect } from 'react';
|
|
9
|
+
import React, { useEffect, useRef } from 'react';
|
|
10
10
|
import styled from 'styled-components';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { DEFAULT_FILTER_OPTIONS } from './util';
|
|
13
13
|
import { Classes, ButtonCSS } from '../../../base/styles';
|
|
14
|
+
import KeyCode from '../../../utils/keyCode';
|
|
14
15
|
var DefaultFilterContentStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n border-radius: 2px;\n width: 100%;\n\n ", "\n .filter-option-list {\n display: flex;\n flex-direction: column;\n margin-top: 8px;\n ul {\n margin: 0;\n padding: 0;\n li {\n display: flex;\n position: relative;\n flex-shrink: 0;\n height: 32px;\n align-items: center;\n border-radius: 2px;\n font-size: 12px;\n color: var(--color);\n padding: 0 12px;\n overflow: hidden;\n cursor: pointer;\n &:hover{\n background-color: var(--primary-color-level1);\n }\n }\n li.active{\n background-color: var(--primary-color-level1);\n }\n }\n }\n\n .filter-search {\n display: flex;\n padding: 6px 12px;\n\n .filter-search-inner {\n width: 100%;\n font-size: 12px;\n color: #333333;\n height: 28px;\n line-height: 28px;\n padding: 0 8px;\n outline: none;\n background-color: #FAFAFA;\n border-radius: 2px;\n border: 1px solid var(--strong-border-color);\n &:hover{\n border-color: var(--primary-color)\n } \n &:focus{\n border-color: var(--primary-color)\n } \n }\n }\n\n .filter-footer {\n display: flex;\n flex-direction: row;\n padding: 8px 12px;\n justify-content: space-between;\n\n .filter-btn {\n text-align: center;\n font-size: 12px;\n width: 60px;\n height: 24px;\n line-height: 24px;\n }\n \n }\n"])), ButtonCSS);
|
|
15
16
|
|
|
16
17
|
function DefaultFilterContent(_ref) {
|
|
@@ -30,6 +31,7 @@ function DefaultFilterContent(_ref) {
|
|
|
30
31
|
innerValue = _React$useState4[0],
|
|
31
32
|
setInnerValue = _React$useState4[1];
|
|
32
33
|
|
|
34
|
+
var inputRef = useRef();
|
|
33
35
|
var handleClick = React.useCallback(function (option) {
|
|
34
36
|
setSelectedValue(option.key);
|
|
35
37
|
}, []);
|
|
@@ -47,10 +49,26 @@ function DefaultFilterContent(_ref) {
|
|
|
47
49
|
});
|
|
48
50
|
};
|
|
49
51
|
|
|
52
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
53
|
+
if (e.keyCode === KeyCode.ENTER) {
|
|
54
|
+
confirm();
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
50
58
|
useEffect(function () {
|
|
51
59
|
setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
|
|
52
60
|
setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || '');
|
|
53
61
|
}, [filterModel]);
|
|
62
|
+
useEffect(function () {
|
|
63
|
+
// 兼容设置焦点后发生滚动
|
|
64
|
+
setTimeout(function () {
|
|
65
|
+
var _a;
|
|
66
|
+
|
|
67
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
|
|
68
|
+
preventScroll: true
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
}, []);
|
|
54
72
|
return /*#__PURE__*/React.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/React.createElement("div", {
|
|
55
73
|
className: 'filter-option-list'
|
|
56
74
|
}, /*#__PURE__*/React.createElement("ul", null, _mapInstanceProperty(DEFAULT_FILTER_OPTIONS).call(DEFAULT_FILTER_OPTIONS, function (option, index) {
|
|
@@ -72,7 +90,9 @@ function DefaultFilterContent(_ref) {
|
|
|
72
90
|
value: innerValue,
|
|
73
91
|
onChange: function onChange(e) {
|
|
74
92
|
setInnerValue(e.target.value);
|
|
75
|
-
}
|
|
93
|
+
},
|
|
94
|
+
onKeyDown: handleKeyDown,
|
|
95
|
+
ref: inputRef
|
|
76
96
|
})), /*#__PURE__*/React.createElement("div", {
|
|
77
97
|
className: 'filter-footer'
|
|
78
98
|
}, /*#__PURE__*/React.createElement("button", {
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export default function DefaultFilterIcon(_ref) {
|
|
3
|
+
var width = _ref.width,
|
|
4
|
+
height = _ref.height;
|
|
5
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
6
|
+
width: width,
|
|
7
|
+
height: height,
|
|
8
|
+
style: {
|
|
9
|
+
verticalAlign: 'middle'
|
|
10
|
+
},
|
|
11
|
+
viewBox: "0 0 1024 1024",
|
|
12
|
+
focusable: "false",
|
|
13
|
+
"data-icon": "filter",
|
|
14
|
+
fill: "currentColor",
|
|
15
|
+
version: "1.1",
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
17
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
18
|
+
d: "M891.448889 159.573333L626.460444 460.231111v443.221333c0 32.881778-25.429333 63.658667-55.864888 63.658667l-170.268445-172.942222V456.419556L132.266667 159.857778A59.619556 59.619556 0 0 1 173.511111 56.888889h676.977778c32.995556 0 59.733333 26.680889 59.733333 59.562667 0 17.066667-7.224889 32.312889-18.773333 43.121777z"
|
|
19
|
+
}));
|
|
20
|
+
}
|
|
@@ -6,12 +6,13 @@ interface FilterProps {
|
|
|
6
6
|
size?: number;
|
|
7
7
|
isFilterActive: boolean;
|
|
8
8
|
FilterPanelContent?: FilterPanelType;
|
|
9
|
-
filterIcon?: ReactNode;
|
|
9
|
+
filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
|
|
10
10
|
setFilterModel: DefaultFilterPanelProps['setFilterModel'];
|
|
11
11
|
filterModel: DefaultFilterPanelProps['filterModel'];
|
|
12
12
|
setFilter: CustomeFilterPanelProps['setFilter'];
|
|
13
13
|
onClick?: (e: React.MouseEvent) => any;
|
|
14
14
|
stopClickEventPropagation?: boolean;
|
|
15
|
+
hideFilterPopupHeader?: boolean;
|
|
15
16
|
}
|
|
16
|
-
declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation }: FilterProps): JSX.Element;
|
|
17
|
+
declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation, hideFilterPopupHeader }: FilterProps): JSX.Element;
|
|
17
18
|
export default Filter;
|
|
@@ -10,26 +10,25 @@ import styled from 'styled-components';
|
|
|
10
10
|
import { Classes } from '../../../base/styles';
|
|
11
11
|
import FilterPanel from './FilterPanel';
|
|
12
12
|
import DefaultFilterContent from './DefaultFilterContent';
|
|
13
|
+
import DefaultFilterIcon from './DefaultFilterIcon';
|
|
13
14
|
import { calculatePopupRelative } from '../../../utils';
|
|
14
15
|
import { addResizeObserver } from '../../../base/utils';
|
|
15
16
|
import cx from 'classnames';
|
|
16
|
-
var HEADER_ICON_OFFSET_Y =
|
|
17
|
+
var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
|
|
17
18
|
|
|
18
19
|
var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
|
|
19
20
|
|
|
20
|
-
var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // position: absolute;\n // right: 4px;\n // cursor: pointer;\n // transform: translateY(-50%);\n // top: 50%;\n // height: 12px; \n"])));
|
|
21
|
+
var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n // position: absolute;\n // right: 4px;\n // cursor: pointer;\n // transform: translateY(-50%);\n // top: 50%;\n // height: 12px; \n > .", " {\n display: flex\n }\n"])), Classes.filterIcon);
|
|
21
22
|
|
|
22
23
|
function Panel(_ref) {
|
|
23
24
|
var ele = _ref.ele,
|
|
24
25
|
filterIcon = _ref.filterIcon,
|
|
25
26
|
hidePanel = _ref.hidePanel,
|
|
26
|
-
renderPanelContent = _ref.renderPanelContent
|
|
27
|
+
renderPanelContent = _ref.renderPanelContent,
|
|
28
|
+
hideFilterPopupHeader = _ref.hideFilterPopupHeader;
|
|
27
29
|
var filterPanelRef = React.useRef(null);
|
|
28
30
|
|
|
29
|
-
var _React$useState = React.useState(calculatePopupRelative(ele, document.body,
|
|
30
|
-
x: HEADER_ICON_OFFSET_X,
|
|
31
|
-
y: HEADER_ICON_OFFSET_Y
|
|
32
|
-
})),
|
|
31
|
+
var _React$useState = React.useState(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader))),
|
|
33
32
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
34
33
|
position = _React$useState2[0],
|
|
35
34
|
setPosition = _React$useState2[1];
|
|
@@ -40,10 +39,7 @@ function Panel(_ref) {
|
|
|
40
39
|
};
|
|
41
40
|
|
|
42
41
|
var handleFilterPanelResize = function handleFilterPanelResize(resize) {
|
|
43
|
-
setPosition(calculatePopupRelative(ele, document.body,
|
|
44
|
-
x: HEADER_ICON_OFFSET_X,
|
|
45
|
-
y: HEADER_ICON_OFFSET_Y
|
|
46
|
-
}));
|
|
42
|
+
setPosition(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader)));
|
|
47
43
|
};
|
|
48
44
|
|
|
49
45
|
useEffect(function () {
|
|
@@ -58,7 +54,8 @@ function Panel(_ref) {
|
|
|
58
54
|
style: style,
|
|
59
55
|
onClose: hidePanel,
|
|
60
56
|
position: position,
|
|
61
|
-
filterIcon: filterIcon
|
|
57
|
+
filterIcon: filterIcon,
|
|
58
|
+
hideFilterPopupHeader: hideFilterPopupHeader
|
|
62
59
|
}, renderPanelContent()));
|
|
63
60
|
}
|
|
64
61
|
|
|
@@ -75,7 +72,8 @@ function Filter(_ref2) {
|
|
|
75
72
|
setFilterModel = _ref2.setFilterModel,
|
|
76
73
|
filterModel = _ref2.filterModel,
|
|
77
74
|
isFilterActive = _ref2.isFilterActive,
|
|
78
|
-
stopClickEventPropagation = _ref2.stopClickEventPropagation
|
|
75
|
+
stopClickEventPropagation = _ref2.stopClickEventPropagation,
|
|
76
|
+
hideFilterPopupHeader = _ref2.hideFilterPopupHeader;
|
|
79
77
|
|
|
80
78
|
var _React$useState3 = React.useState(false),
|
|
81
79
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
@@ -83,15 +81,12 @@ function Filter(_ref2) {
|
|
|
83
81
|
setShowPanel = _React$useState4[1];
|
|
84
82
|
|
|
85
83
|
var iconRef = React.useRef(null);
|
|
84
|
+
var iconWrapRef = React.useRef();
|
|
86
85
|
|
|
87
86
|
var hidePanel = function hidePanel() {
|
|
88
87
|
return setShowPanel(false);
|
|
89
88
|
};
|
|
90
89
|
|
|
91
|
-
var handleMouseDown = function handleMouseDown(e) {
|
|
92
|
-
e.stopPropagation(); // 阻止触发拖拽
|
|
93
|
-
};
|
|
94
|
-
|
|
95
90
|
var renderPanelContent = function renderPanelContent() {
|
|
96
91
|
if (FilterPanelContent) {
|
|
97
92
|
return /*#__PURE__*/React.createElement(FilterPanelContent, {
|
|
@@ -111,6 +106,12 @@ function Filter(_ref2) {
|
|
|
111
106
|
};
|
|
112
107
|
|
|
113
108
|
var handleIconClick = function handleIconClick(e) {
|
|
109
|
+
// 只有当icon区域点击会触发面板展开
|
|
110
|
+
// 防止 createPortal 区域的点击触发该事件
|
|
111
|
+
if (!e.currentTarget.contains(e.target)) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
|
|
114
115
|
if (stopClickEventPropagation) {
|
|
115
116
|
e.stopPropagation();
|
|
116
117
|
}
|
|
@@ -119,30 +120,39 @@ function Filter(_ref2) {
|
|
|
119
120
|
};
|
|
120
121
|
|
|
121
122
|
var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
|
|
123
|
+
var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
|
|
122
124
|
return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
|
|
123
125
|
style: style,
|
|
124
126
|
className: iconClassName,
|
|
125
|
-
|
|
126
|
-
ref:
|
|
127
|
+
onClick: handleIconClick,
|
|
128
|
+
ref: iconWrapRef
|
|
127
129
|
}, /*#__PURE__*/React.createElement("span", {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
},
|
|
130
|
+
ref: iconRef,
|
|
131
|
+
className: Classes.filterIcon
|
|
132
|
+
}, displayFilterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
|
|
131
133
|
width: size,
|
|
132
|
-
height: size
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
fill: "currentColor",
|
|
137
|
-
"aria-hidden": "true"
|
|
138
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
139
|
-
d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
|
140
|
-
}))), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
|
|
141
|
-
ele: iconRef.current,
|
|
142
|
-
filterIcon: filterIcon,
|
|
134
|
+
height: size
|
|
135
|
+
})), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
|
|
136
|
+
ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
|
|
137
|
+
filterIcon: displayFilterIcon,
|
|
143
138
|
hidePanel: hidePanel,
|
|
144
|
-
renderPanelContent: renderPanelContent
|
|
139
|
+
renderPanelContent: renderPanelContent,
|
|
140
|
+
hideFilterPopupHeader: hideFilterPopupHeader
|
|
145
141
|
}), document.body));
|
|
146
142
|
}
|
|
147
143
|
|
|
144
|
+
function _getPanelOffset(ele, hideFilterPopupHeader) {
|
|
145
|
+
if (hideFilterPopupHeader) {
|
|
146
|
+
return {
|
|
147
|
+
x: 0,
|
|
148
|
+
y: 0 - ele.offsetHeight
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
return {
|
|
153
|
+
x: HEADER_ICON_OFFSET_X,
|
|
154
|
+
y: HEADER_ICON_OFFSET_Y
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
|
|
148
158
|
export default Filter;
|
|
@@ -10,11 +10,12 @@ export interface FilterPanel {
|
|
|
10
10
|
filterIcon: ReactNode;
|
|
11
11
|
children?: ReactNode;
|
|
12
12
|
}
|
|
13
|
-
declare function FilterPanel({ style, children, position, filterIcon, onClose }: {
|
|
13
|
+
declare function FilterPanel({ style, children, position, filterIcon, onClose, hideFilterPopupHeader }: {
|
|
14
14
|
style: any;
|
|
15
15
|
children: any;
|
|
16
16
|
position: any;
|
|
17
17
|
filterIcon: any;
|
|
18
18
|
onClose: any;
|
|
19
|
+
hideFilterPopupHeader: any;
|
|
19
20
|
}): JSX.Element;
|
|
20
21
|
export default FilterPanel;
|
|
@@ -4,10 +4,12 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
|
|
|
4
4
|
|
|
5
5
|
var _templateObject;
|
|
6
6
|
|
|
7
|
-
import React, { useEffect, useState } from 'react';
|
|
7
|
+
import React, { useEffect, useState, useRef } from 'react';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
9
|
import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
|
|
10
|
-
|
|
10
|
+
import DefaultFilterIcon from './DefaultFilterIcon';
|
|
11
|
+
import { Classes } from '../../../base/styles';
|
|
12
|
+
var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n max-height: 450px;\n min-width: 160px;\n border-radius: 2px;\n background-color: #fff;\n box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n cursor: default;\n\n .", " {\n display: flex;\n background-color: #ebedf1;\n\n .", " {\n display: flex;\n color:#666;\n background-color: #fff;\n padding: 8px 16px 8px 16px;\n border-right: 1px solid transparent;\n border-left: 1px solid transparent;\n border-top: 1px solid transparent;\n border-top-right-radius: 2px;\n border-top-left-radius: 2px;\n }\n }\n\n .", " {\n display: flex;\n }\n"])), Classes.popupHeader, Classes.filterIcon, Classes.popupBody);
|
|
11
13
|
|
|
12
14
|
var useWindowEvents = function useWindowEvents(func, evens) {
|
|
13
15
|
React.useEffect(function () {
|
|
@@ -27,7 +29,8 @@ function FilterPanel(_ref) {
|
|
|
27
29
|
children = _ref.children,
|
|
28
30
|
position = _ref.position,
|
|
29
31
|
filterIcon = _ref.filterIcon,
|
|
30
|
-
onClose = _ref.onClose
|
|
32
|
+
onClose = _ref.onClose,
|
|
33
|
+
hideFilterPopupHeader = _ref.hideFilterPopupHeader;
|
|
31
34
|
|
|
32
35
|
var _useState = useState(position),
|
|
33
36
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -49,32 +52,38 @@ function FilterPanel(_ref) {
|
|
|
49
52
|
setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
|
|
50
53
|
setVisible(true);
|
|
51
54
|
}, [position]);
|
|
55
|
+
var hasPopupMouseEvent = useRef(false);
|
|
56
|
+
|
|
57
|
+
var handleMouseEvent = function handleMouseEvent() {
|
|
58
|
+
// 当弹出的过滤面板内部发生鼠标按下、抬起事件时,标记当前事件,并在click捕获期清除标记,用来确定鼠标按下、抬起发生在过滤面板内部
|
|
59
|
+
// 利用了React.createPortal冒泡是根据React Tree的特性:
|
|
60
|
+
// https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
|
|
61
|
+
hasPopupMouseEvent.current = true;
|
|
62
|
+
};
|
|
63
|
+
|
|
52
64
|
useWindowEvents(function (e) {
|
|
53
|
-
|
|
54
|
-
|
|
65
|
+
!isContainPanel(e) && !hasPopupMouseEvent.current && onClose();
|
|
66
|
+
hasPopupMouseEvent.current = false;
|
|
67
|
+
}, ['click']);
|
|
55
68
|
return /*#__PURE__*/React.createElement(FilterPanelStyle, {
|
|
69
|
+
className: Classes.popup,
|
|
56
70
|
style: _extends(_extends({}, style), {
|
|
57
71
|
left: visible ? perfectPosition.x : 0,
|
|
58
72
|
top: visible ? perfectPosition.y : 0,
|
|
59
73
|
opacity: visible ? 1 : 0
|
|
60
74
|
}),
|
|
75
|
+
onMouseDown: handleMouseEvent,
|
|
76
|
+
onMouseUp: handleMouseEvent,
|
|
61
77
|
ref: ref
|
|
62
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
63
|
-
className:
|
|
78
|
+
}, !hideFilterPopupHeader ? /*#__PURE__*/React.createElement("div", {
|
|
79
|
+
className: Classes.popupHeader
|
|
64
80
|
}, /*#__PURE__*/React.createElement("span", {
|
|
65
|
-
className:
|
|
66
|
-
}, filterIcon || /*#__PURE__*/React.createElement(
|
|
67
|
-
width:
|
|
68
|
-
height:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
"data-icon": "filter",
|
|
72
|
-
fill: "currentColor",
|
|
73
|
-
"aria-hidden": "true"
|
|
74
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
75
|
-
d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
|
76
|
-
})))), /*#__PURE__*/React.createElement("div", {
|
|
77
|
-
className: "popup-body"
|
|
81
|
+
className: Classes.filterIcon
|
|
82
|
+
}, filterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
|
|
83
|
+
width: 12,
|
|
84
|
+
height: 12
|
|
85
|
+
}))) : null, /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
className: Classes.popupBody
|
|
78
87
|
}, children));
|
|
79
88
|
}
|
|
80
89
|
|
|
@@ -12,7 +12,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
12
12
|
data = data + '';
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
return _includesInstanceProperty(data).call(data, value);
|
|
15
|
+
return _includesInstanceProperty(data).call(data, value[0]);
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
18
|
}, {
|
|
@@ -28,7 +28,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
28
28
|
data = data + '';
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
return !_includesInstanceProperty(data).call(data, value);
|
|
31
|
+
return !_includesInstanceProperty(data).call(data, value[0]);
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
}, {
|
|
@@ -36,7 +36,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
36
36
|
key: 'equal',
|
|
37
37
|
filter: function filter(value) {
|
|
38
38
|
return function (data) {
|
|
39
|
-
return value
|
|
39
|
+
return value[0] === data;
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
}, {
|
|
@@ -44,7 +44,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
44
44
|
key: 'notEqual',
|
|
45
45
|
filter: function filter(value) {
|
|
46
46
|
return function (data) {
|
|
47
|
-
return value !== data;
|
|
47
|
+
return value[0] !== data;
|
|
48
48
|
};
|
|
49
49
|
}
|
|
50
50
|
}, {
|
|
@@ -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';
|
|
@@ -5,7 +5,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { internals } from '../../internals';
|
|
7
7
|
import { always, arrayUtils } from '../../utils/others';
|
|
8
|
-
import { mergeCellProps } from '../../utils';
|
|
8
|
+
import { collectNodes, mergeCellProps } from '../../utils';
|
|
9
9
|
export function multiSelect() {
|
|
10
10
|
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
11
11
|
return function multiSelectStep(pipeline) {
|
|
@@ -44,7 +44,8 @@ export function multiSelect() {
|
|
|
44
44
|
/** 所有有效的 keys(disable 状态为 false) */
|
|
45
45
|
|
|
46
46
|
var allKeys = [];
|
|
47
|
-
|
|
47
|
+
var flatDataSource = collectNodes(dataSource);
|
|
48
|
+
flatDataSource.forEach(function (row, rowIndex) {
|
|
48
49
|
var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
49
50
|
fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
|
|
50
51
|
|
|
@@ -110,6 +111,10 @@ export function multiSelect() {
|
|
|
110
111
|
return mergeCellProps(preCellProps, checkboxCellProps);
|
|
111
112
|
},
|
|
112
113
|
render: function render(_, row, rowIndex) {
|
|
114
|
+
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
115
|
+
return null;
|
|
116
|
+
}
|
|
117
|
+
|
|
113
118
|
var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
114
119
|
var checked = set.has(key);
|
|
115
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;
|