@kdcloudjs/table 1.1.4 → 1.1.5-canary.10
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 +905 -346
- 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 +11 -2
- package/es/table/base/styles.js +19 -8
- package/es/table/base/table.d.ts +3 -1
- package/es/table/base/table.js +35 -56
- package/es/table/base/utils.d.ts +7 -0
- package/es/table/base/utils.js +36 -2
- package/es/table/common-views.js +1 -1
- package/es/table/pipeline/features/colGroupExtendable.d.ts +8 -0
- package/es/table/pipeline/features/colGroupExtendable.js +105 -0
- package/es/table/pipeline/features/columnDrag.js +5 -4
- package/es/table/pipeline/features/columnFilter.d.ts +8 -2
- package/es/table/pipeline/features/columnFilter.js +43 -19
- package/es/table/pipeline/features/columnResizeWidth.js +1 -1
- package/es/table/pipeline/features/contextMenu.d.ts +5 -1
- package/es/table/pipeline/features/contextMenu.js +18 -28
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +27 -7
- 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 +5 -2
- package/es/table/pipeline/features/filter/Filter.js +65 -37
- package/es/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/es/table/pipeline/features/filter/FilterPanel.js +40 -21
- 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 +2 -0
- package/es/table/pipeline/features/index.js +3 -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 +180 -30
- 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 +20 -21
- package/es/table/pipeline/pipeline.d.ts +1 -1
- package/es/table/pipeline/pipeline.js +4 -9
- package/es/table/utils/element.d.ts +1 -0
- package/es/table/utils/element.js +4 -0
- package/es/table/utils/keyCode.d.ts +5 -0
- package/es/table/utils/keyCode.js +5 -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 +11 -2
- package/lib/table/base/styles.js +19 -8
- package/lib/table/base/table.d.ts +3 -1
- package/lib/table/base/table.js +35 -56
- package/lib/table/base/utils.d.ts +7 -0
- package/lib/table/base/utils.js +43 -2
- package/lib/table/common-views.js +1 -1
- package/lib/table/pipeline/features/colGroupExtendable.d.ts +8 -0
- package/lib/table/pipeline/features/colGroupExtendable.js +126 -0
- package/lib/table/pipeline/features/columnDrag.js +5 -4
- package/lib/table/pipeline/features/columnFilter.d.ts +8 -2
- package/lib/table/pipeline/features/columnFilter.js +41 -19
- package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
- package/lib/table/pipeline/features/contextMenu.d.ts +5 -1
- package/lib/table/pipeline/features/contextMenu.js +17 -28
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +28 -6
- 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 +5 -2
- package/lib/table/pipeline/features/filter/Filter.js +68 -37
- package/lib/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
- package/lib/table/pipeline/features/filter/FilterPanel.js +42 -20
- 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 +2 -0
- package/lib/table/pipeline/features/index.js +23 -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 +183 -32
- 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 +21 -23
- package/lib/table/pipeline/pipeline.d.ts +1 -1
- package/lib/table/pipeline/pipeline.js +4 -9
- package/lib/table/utils/element.d.ts +1 -0
- package/lib/table/utils/element.js +6 -0
- package/lib/table/utils/keyCode.d.ts +5 -0
- package/lib/table/utils/keyCode.js +12 -0
- package/lib/table/utils/mergeCellProps.js +2 -6
- package/package.json +3 -3
|
@@ -25,17 +25,21 @@ var _reactDom = require("react-dom");
|
|
|
25
25
|
|
|
26
26
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
27
27
|
|
|
28
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
29
|
+
|
|
28
30
|
var _styles = require("../../../base/styles");
|
|
29
31
|
|
|
30
32
|
var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
|
|
31
33
|
|
|
32
34
|
var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));
|
|
33
35
|
|
|
36
|
+
var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
|
|
37
|
+
|
|
34
38
|
var _utils = require("../../../utils");
|
|
35
39
|
|
|
36
40
|
var _utils2 = require("../../../base/utils");
|
|
37
41
|
|
|
38
|
-
var
|
|
42
|
+
var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
|
|
39
43
|
|
|
40
44
|
var _templateObject;
|
|
41
45
|
|
|
@@ -43,24 +47,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
|
|
|
43
47
|
|
|
44
48
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
45
49
|
|
|
46
|
-
var HEADER_ICON_OFFSET_Y =
|
|
50
|
+
var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
|
|
47
51
|
|
|
48
52
|
var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
|
|
49
53
|
|
|
50
|
-
var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n // position: absolute;\n // right: 4px;\n // cursor: pointer;\n // transform: translateY(-50%);\n // top: 50%;\n // height: 12px; \n"])));
|
|
54
|
+
var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.Classes.filterIcon);
|
|
51
55
|
|
|
52
56
|
function Panel(_ref) {
|
|
53
57
|
var ele = _ref.ele,
|
|
54
58
|
filterIcon = _ref.filterIcon,
|
|
55
59
|
hidePanel = _ref.hidePanel,
|
|
56
|
-
renderPanelContent = _ref.renderPanelContent
|
|
60
|
+
renderPanelContent = _ref.renderPanelContent,
|
|
61
|
+
hideFilterPopupHeader = _ref.hideFilterPopupHeader,
|
|
62
|
+
popupParent = _ref.popupParent;
|
|
57
63
|
|
|
58
64
|
var filterPanelRef = _react.default.useRef(null);
|
|
59
65
|
|
|
60
|
-
var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele,
|
|
61
|
-
x: HEADER_ICON_OFFSET_X,
|
|
62
|
-
y: HEADER_ICON_OFFSET_Y
|
|
63
|
-
})),
|
|
66
|
+
var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader))),
|
|
64
67
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
65
68
|
position = _React$useState2[0],
|
|
66
69
|
setPosition = _React$useState2[1];
|
|
@@ -71,10 +74,7 @@ function Panel(_ref) {
|
|
|
71
74
|
};
|
|
72
75
|
|
|
73
76
|
var handleFilterPanelResize = function handleFilterPanelResize(resize) {
|
|
74
|
-
setPosition((0, _utils.calculatePopupRelative)(ele,
|
|
75
|
-
x: HEADER_ICON_OFFSET_X,
|
|
76
|
-
y: HEADER_ICON_OFFSET_Y
|
|
77
|
-
}));
|
|
77
|
+
setPosition((0, _utils.calculatePopupRelative)(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
|
|
78
78
|
};
|
|
79
79
|
|
|
80
80
|
(0, _react.useEffect)(function () {
|
|
@@ -89,7 +89,8 @@ function Panel(_ref) {
|
|
|
89
89
|
style: style,
|
|
90
90
|
onClose: hidePanel,
|
|
91
91
|
position: position,
|
|
92
|
-
filterIcon: filterIcon
|
|
92
|
+
filterIcon: filterIcon,
|
|
93
|
+
hideFilterPopupHeader: hideFilterPopupHeader
|
|
93
94
|
}, renderPanelContent()));
|
|
94
95
|
}
|
|
95
96
|
|
|
@@ -106,7 +107,10 @@ function Filter(_ref2) {
|
|
|
106
107
|
setFilterModel = _ref2.setFilterModel,
|
|
107
108
|
filterModel = _ref2.filterModel,
|
|
108
109
|
isFilterActive = _ref2.isFilterActive,
|
|
109
|
-
stopClickEventPropagation = _ref2.stopClickEventPropagation
|
|
110
|
+
stopClickEventPropagation = _ref2.stopClickEventPropagation,
|
|
111
|
+
stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
|
|
112
|
+
hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
|
|
113
|
+
getPopupParent = _ref2.getPopupParent;
|
|
110
114
|
|
|
111
115
|
var _React$useState3 = _react.default.useState(false),
|
|
112
116
|
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
|
@@ -115,14 +119,12 @@ function Filter(_ref2) {
|
|
|
115
119
|
|
|
116
120
|
var iconRef = _react.default.useRef(null);
|
|
117
121
|
|
|
122
|
+
var iconWrapRef = _react.default.useRef();
|
|
123
|
+
|
|
118
124
|
var hidePanel = function hidePanel() {
|
|
119
125
|
return setShowPanel(false);
|
|
120
126
|
};
|
|
121
127
|
|
|
122
|
-
var handleMouseDown = function handleMouseDown(e) {
|
|
123
|
-
e.stopPropagation(); // 阻止触发拖拽
|
|
124
|
-
};
|
|
125
|
-
|
|
126
128
|
var renderPanelContent = function renderPanelContent() {
|
|
127
129
|
if (FilterPanelContent) {
|
|
128
130
|
return /*#__PURE__*/_react.default.createElement(FilterPanelContent, {
|
|
@@ -142,38 +144,67 @@ function Filter(_ref2) {
|
|
|
142
144
|
};
|
|
143
145
|
|
|
144
146
|
var handleIconClick = function handleIconClick(e) {
|
|
147
|
+
// 只有当icon区域点击会触发面板展开
|
|
148
|
+
// 防止 createPortal 区域的点击触发该事件
|
|
149
|
+
if (e.currentTarget.contains(e.target)) {
|
|
150
|
+
setShowPanel(true);
|
|
151
|
+
}
|
|
152
|
+
|
|
145
153
|
if (stopClickEventPropagation) {
|
|
146
154
|
e.stopPropagation();
|
|
147
155
|
}
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
159
|
+
if (e.keyCode === _keyCode.default.ESC) {
|
|
160
|
+
if (e.currentTarget.contains(e.target)) {
|
|
161
|
+
setShowPanel(false);
|
|
162
|
+
}
|
|
148
163
|
|
|
149
|
-
|
|
164
|
+
if (stopESCKeyDownEventPropagation) {
|
|
165
|
+
e.stopPropagation();
|
|
166
|
+
}
|
|
167
|
+
}
|
|
150
168
|
};
|
|
151
169
|
|
|
152
170
|
var iconClassName = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, className, true), (0, _defineProperty2.default)(_cx, 'filter-panel-open', showPanel), _cx));
|
|
171
|
+
var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
|
|
172
|
+
var popupParent = (getPopupParent === null || getPopupParent === void 0 ? void 0 : getPopupParent(iconWrapRef.current)) || document.body;
|
|
153
173
|
return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
|
|
154
174
|
style: style,
|
|
155
175
|
className: iconClassName,
|
|
156
|
-
|
|
157
|
-
|
|
176
|
+
onClick: handleIconClick,
|
|
177
|
+
onKeyDown: handleKeyDown,
|
|
178
|
+
ref: iconWrapRef,
|
|
179
|
+
tabIndex: -1
|
|
158
180
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
},
|
|
181
|
+
ref: iconRef,
|
|
182
|
+
className: _styles.Classes.filterIcon
|
|
183
|
+
}, displayFilterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
|
|
162
184
|
width: size,
|
|
163
|
-
height: size
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
fill: "currentColor",
|
|
168
|
-
"aria-hidden": "true"
|
|
169
|
-
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
170
|
-
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"
|
|
171
|
-
}))), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
|
|
172
|
-
ele: iconRef.current,
|
|
173
|
-
filterIcon: filterIcon,
|
|
185
|
+
height: size
|
|
186
|
+
})), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
|
|
187
|
+
ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
|
|
188
|
+
filterIcon: displayFilterIcon,
|
|
174
189
|
hidePanel: hidePanel,
|
|
175
|
-
renderPanelContent: renderPanelContent
|
|
176
|
-
|
|
190
|
+
renderPanelContent: renderPanelContent,
|
|
191
|
+
hideFilterPopupHeader: hideFilterPopupHeader,
|
|
192
|
+
popupParent: popupParent
|
|
193
|
+
}), popupParent));
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
function _getPanelOffset(ele, hideFilterPopupHeader) {
|
|
197
|
+
if (hideFilterPopupHeader) {
|
|
198
|
+
return {
|
|
199
|
+
x: 0,
|
|
200
|
+
y: 0 - ele.offsetHeight
|
|
201
|
+
};
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
return {
|
|
205
|
+
x: HEADER_ICON_OFFSET_X,
|
|
206
|
+
y: HEADER_ICON_OFFSET_Y
|
|
207
|
+
};
|
|
177
208
|
}
|
|
178
209
|
|
|
179
210
|
var _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;
|
|
@@ -25,13 +25,19 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
25
25
|
|
|
26
26
|
var _utils = require("../../../utils/");
|
|
27
27
|
|
|
28
|
+
var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
|
|
29
|
+
|
|
30
|
+
var _styles = require("../../../base/styles");
|
|
31
|
+
|
|
32
|
+
var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
|
|
33
|
+
|
|
28
34
|
var _templateObject;
|
|
29
35
|
|
|
30
36
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
37
|
|
|
32
38
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
39
|
|
|
34
|
-
var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 .
|
|
40
|
+
var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.Classes.popupHeader, _styles.Classes.filterIcon, _styles.Classes.popupBody);
|
|
35
41
|
|
|
36
42
|
var useWindowEvents = function useWindowEvents(func, evens) {
|
|
37
43
|
_react.default.useEffect(function () {
|
|
@@ -51,7 +57,8 @@ function FilterPanel(_ref) {
|
|
|
51
57
|
children = _ref.children,
|
|
52
58
|
position = _ref.position,
|
|
53
59
|
filterIcon = _ref.filterIcon,
|
|
54
|
-
onClose = _ref.onClose
|
|
60
|
+
onClose = _ref.onClose,
|
|
61
|
+
hideFilterPopupHeader = _ref.hideFilterPopupHeader;
|
|
55
62
|
|
|
56
63
|
var _useState = (0, _react.useState)(position),
|
|
57
64
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -73,32 +80,47 @@ function FilterPanel(_ref) {
|
|
|
73
80
|
setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
|
|
74
81
|
setVisible(true);
|
|
75
82
|
}, [position]);
|
|
83
|
+
var hasPopupMouseEvent = (0, _react.useRef)(false);
|
|
84
|
+
|
|
85
|
+
var handleMouseEvent = function handleMouseEvent() {
|
|
86
|
+
// 当弹出的过滤面板内部发生鼠标按下、抬起事件时,标记当前事件,并在click捕获期清除标记,用来确定鼠标按下、抬起发生在过滤面板内部
|
|
87
|
+
// 利用了React.createPortal冒泡是根据React Tree的特性:
|
|
88
|
+
// https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
|
|
89
|
+
hasPopupMouseEvent.current = true;
|
|
90
|
+
};
|
|
91
|
+
|
|
76
92
|
useWindowEvents(function (e) {
|
|
77
|
-
|
|
78
|
-
|
|
93
|
+
!isContainPanel(e) && !hasPopupMouseEvent.current && onClose();
|
|
94
|
+
hasPopupMouseEvent.current = false;
|
|
95
|
+
}, ['click']);
|
|
96
|
+
|
|
97
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
98
|
+
if (e.currentTarget.contains(e.target) && e.keyCode === _keyCode.default.ESC) {
|
|
99
|
+
onClose();
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
|
|
79
103
|
return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
|
|
104
|
+
className: _styles.Classes.popup,
|
|
80
105
|
style: (0, _extends2.default)((0, _extends2.default)({}, style), {
|
|
81
106
|
left: visible ? perfectPosition.x : 0,
|
|
82
107
|
top: visible ? perfectPosition.y : 0,
|
|
83
108
|
opacity: visible ? 1 : 0
|
|
84
109
|
}),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
110
|
+
onMouseDown: handleMouseEvent,
|
|
111
|
+
onMouseUp: handleMouseEvent,
|
|
112
|
+
onKeyDown: handleKeyDown,
|
|
113
|
+
ref: ref,
|
|
114
|
+
tabIndex: -1
|
|
115
|
+
}, !hideFilterPopupHeader ? /*#__PURE__*/_react.default.createElement("div", {
|
|
116
|
+
className: _styles.Classes.popupHeader
|
|
88
117
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
89
|
-
className:
|
|
90
|
-
}, filterIcon || /*#__PURE__*/_react.default.createElement(
|
|
91
|
-
width:
|
|
92
|
-
height:
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
"data-icon": "filter",
|
|
96
|
-
fill: "currentColor",
|
|
97
|
-
"aria-hidden": "true"
|
|
98
|
-
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
99
|
-
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"
|
|
100
|
-
})))), /*#__PURE__*/_react.default.createElement("div", {
|
|
101
|
-
className: "popup-body"
|
|
118
|
+
className: _styles.Classes.filterIcon
|
|
119
|
+
}, filterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
|
|
120
|
+
width: 12,
|
|
121
|
+
height: 12
|
|
122
|
+
}))) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
123
|
+
className: _styles.Classes.popupBody
|
|
102
124
|
}, children));
|
|
103
125
|
}
|
|
104
126
|
|
|
@@ -22,7 +22,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
22
22
|
data = data + '';
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
return (0, _includes.default)(data).call(data, value);
|
|
25
|
+
return (0, _includes.default)(data).call(data, value[0]);
|
|
26
26
|
};
|
|
27
27
|
}
|
|
28
28
|
}, {
|
|
@@ -38,7 +38,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
38
38
|
data = data + '';
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
return !(0, _includes.default)(data).call(data, value);
|
|
41
|
+
return !(0, _includes.default)(data).call(data, value[0]);
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
44
|
}, {
|
|
@@ -46,7 +46,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
46
46
|
key: 'equal',
|
|
47
47
|
filter: function filter(value) {
|
|
48
48
|
return function (data) {
|
|
49
|
-
return value
|
|
49
|
+
return value[0] === data;
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
}, {
|
|
@@ -54,7 +54,7 @@ var DEFAULT_FILTER_OPTIONS = [{
|
|
|
54
54
|
key: 'notEqual',
|
|
55
55
|
filter: function filter(value) {
|
|
56
56
|
return function (data) {
|
|
57
|
-
return value !== data;
|
|
57
|
+
return value[0] !== data;
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
60
|
}, {
|
|
@@ -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,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.footerDataSource = footerDataSource;
|
|
9
|
+
exports.footerRowMetaSymbol = void 0;
|
|
10
|
+
|
|
11
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
12
|
+
|
|
13
|
+
var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
14
|
+
|
|
15
|
+
var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
|
|
16
|
+
|
|
17
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
18
|
+
|
|
19
|
+
var footerRowMetaSymbol = (0, _symbol.default)('footer-row');
|
|
20
|
+
exports.footerRowMetaSymbol = footerRowMetaSymbol;
|
|
21
|
+
|
|
22
|
+
function footerDataSource() {
|
|
23
|
+
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
24
|
+
return function footerDataSourceStep(pipeline) {
|
|
25
|
+
var _a, _b;
|
|
26
|
+
|
|
27
|
+
var footerDataSource = (_a = opts.dataSource) !== null && _a !== void 0 ? _a : pipeline.getFooterDataSource();
|
|
28
|
+
var footerRowMetaKey = (_b = opts.footerRowMetaKey) !== null && _b !== void 0 ? _b : footerRowMetaSymbol;
|
|
29
|
+
pipeline.setFeatureOptions('footerRowMetaKey', footerRowMetaKey);
|
|
30
|
+
|
|
31
|
+
if (footerDataSource) {
|
|
32
|
+
pipeline.footerDataSource((0, _map.default)(footerDataSource).call(footerDataSource, function (row) {
|
|
33
|
+
return (0, _extends3.default)((0, _defineProperty2.default)({}, footerRowMetaKey, true), row);
|
|
34
|
+
}));
|
|
35
|
+
} else {
|
|
36
|
+
console.warn('调用 pipeline.use(features.footerDataSource()) 前请先设置页脚数据源,设置方法有:pipeline.use(features.footerDataSource({dataSource:any[]})) 或者 pipeline.footerDataSource(any[])');
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return pipeline;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
@@ -16,3 +16,5 @@ 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';
|
|
20
|
+
export { colGroupExtendable, colGroupExtendOption } from './colGroupExtendable';
|
|
@@ -19,6 +19,12 @@ Object.defineProperty(exports, "buildTree", {
|
|
|
19
19
|
return _buildTree.buildTree;
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
|
+
Object.defineProperty(exports, "colGroupExtendable", {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function get() {
|
|
25
|
+
return _colGroupExtendable.colGroupExtendable;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
22
28
|
Object.defineProperty(exports, "columnDrag", {
|
|
23
29
|
enumerable: true,
|
|
24
30
|
get: function get() {
|
|
@@ -55,6 +61,18 @@ Object.defineProperty(exports, "filter", {
|
|
|
55
61
|
return _filterInstanceProperty(_columnFilter);
|
|
56
62
|
}
|
|
57
63
|
});
|
|
64
|
+
Object.defineProperty(exports, "footerDataSource", {
|
|
65
|
+
enumerable: true,
|
|
66
|
+
get: function get() {
|
|
67
|
+
return _footerDataSource.footerDataSource;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
Object.defineProperty(exports, "footerRowMetaSymbol", {
|
|
71
|
+
enumerable: true,
|
|
72
|
+
get: function get() {
|
|
73
|
+
return _footerDataSource.footerRowMetaSymbol;
|
|
74
|
+
}
|
|
75
|
+
});
|
|
58
76
|
Object.defineProperty(exports, "mergeCellHover", {
|
|
59
77
|
enumerable: true,
|
|
60
78
|
get: function get() {
|
|
@@ -156,4 +174,8 @@ var _columnFilter = require("./columnFilter");
|
|
|
156
174
|
|
|
157
175
|
var _rangeSelection = require("./rangeSelection");
|
|
158
176
|
|
|
159
|
-
var _mergeCellHover = require("./mergeCellHover");
|
|
177
|
+
var _mergeCellHover = require("./mergeCellHover");
|
|
178
|
+
|
|
179
|
+
var _footerDataSource = require("./footerDataSource");
|
|
180
|
+
|
|
181
|
+
var _colGroupExtendable = require("./colGroupExtendable");
|
|
@@ -61,7 +61,8 @@ function multiSelect() {
|
|
|
61
61
|
/** 所有有效的 keys(disable 状态为 false) */
|
|
62
62
|
|
|
63
63
|
var allKeys = [];
|
|
64
|
-
|
|
64
|
+
var flatDataSource = (0, _utils.collectNodes)(dataSource);
|
|
65
|
+
flatDataSource.forEach(function (row, rowIndex) {
|
|
65
66
|
var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
66
67
|
|
|
67
68
|
fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
|
|
@@ -130,6 +131,10 @@ function multiSelect() {
|
|
|
130
131
|
return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
|
|
131
132
|
},
|
|
132
133
|
render: function render(_, row, rowIndex) {
|
|
134
|
+
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
137
|
+
|
|
133
138
|
var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
134
139
|
|
|
135
140
|
var checked = set.has(key);
|
|
@@ -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;
|