@kdcloudjs/table 1.1.4-canary.1 → 1.1.4
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 +260 -582
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +9 -10
- 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 -7
- package/es/table/base/styles.js +6 -13
- package/es/table/base/table.d.ts +0 -2
- package/es/table/base/table.js +53 -31
- package/es/table/base/utils.d.ts +0 -7
- package/es/table/base/utils.js +1 -29
- package/es/table/pipeline/features/columnDrag.js +4 -5
- package/es/table/pipeline/features/columnFilter.d.ts +2 -2
- package/es/table/pipeline/features/columnFilter.js +15 -35
- package/es/table/pipeline/features/columnResizeWidth.js +1 -1
- package/es/table/pipeline/features/filter/DefaultFilterContent.js +2 -22
- package/es/table/pipeline/features/filter/Filter.d.ts +1 -1
- package/es/table/pipeline/features/filter/Filter.js +20 -16
- package/es/table/pipeline/features/filter/FilterPanel.js +15 -21
- package/es/table/pipeline/features/filter/util.js +4 -4
- package/es/table/pipeline/features/index.d.ts +0 -1
- package/es/table/pipeline/features/index.js +1 -2
- package/es/table/pipeline/features/multiSelect.js +2 -7
- package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/es/table/pipeline/features/rangeSelection.js +28 -156
- package/es/table/pipeline/features/singleSelect.js +0 -4
- package/es/table/pipeline/features/treeMode.d.ts +0 -2
- package/es/table/pipeline/features/treeMode.js +20 -18
- package/es/table/pipeline/pipeline.d.ts +1 -5
- package/es/table/pipeline/pipeline.js +10 -11
- package/es/table/utils/mergeCellProps.js +6 -2
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/styles.d.ts +2 -7
- package/lib/table/base/styles.js +6 -13
- package/lib/table/base/table.d.ts +0 -2
- package/lib/table/base/table.js +53 -31
- package/lib/table/base/utils.d.ts +0 -7
- package/lib/table/base/utils.js +1 -35
- package/lib/table/pipeline/features/columnDrag.js +4 -5
- package/lib/table/pipeline/features/columnFilter.d.ts +2 -2
- package/lib/table/pipeline/features/columnFilter.js +15 -33
- package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
- package/lib/table/pipeline/features/filter/DefaultFilterContent.js +1 -23
- package/lib/table/pipeline/features/filter/Filter.d.ts +1 -1
- package/lib/table/pipeline/features/filter/Filter.js +20 -17
- package/lib/table/pipeline/features/filter/FilterPanel.js +14 -21
- package/lib/table/pipeline/features/filter/util.js +4 -4
- package/lib/table/pipeline/features/index.d.ts +0 -1
- package/lib/table/pipeline/features/index.js +1 -15
- package/lib/table/pipeline/features/multiSelect.js +1 -6
- package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
- package/lib/table/pipeline/features/rangeSelection.js +30 -158
- package/lib/table/pipeline/features/singleSelect.js +0 -4
- package/lib/table/pipeline/features/treeMode.d.ts +0 -2
- package/lib/table/pipeline/features/treeMode.js +22 -19
- package/lib/table/pipeline/pipeline.d.ts +1 -5
- package/lib/table/pipeline/pipeline.js +10 -12
- package/lib/table/utils/mergeCellProps.js +6 -2
- package/package.json +3 -3
- package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +0 -5
- package/es/table/pipeline/features/filter/DefaultFilterIcon.js +0 -20
- package/es/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/es/table/pipeline/features/footerDataSource.js +0 -25
- package/es/table/utils/keyCode.d.ts +0 -4
- package/es/table/utils/keyCode.js +0 -4
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +0 -5
- package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +0 -30
- package/lib/table/pipeline/features/footerDataSource.d.ts +0 -9
- package/lib/table/pipeline/features/footerDataSource.js +0 -41
- package/lib/table/utils/keyCode.d.ts +0 -4
- package/lib/table/utils/keyCode.js +0 -11
|
@@ -33,8 +33,6 @@ var _util = require("./util");
|
|
|
33
33
|
|
|
34
34
|
var _styles = require("../../../base/styles");
|
|
35
35
|
|
|
36
|
-
var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
|
|
37
|
-
|
|
38
36
|
var _templateObject;
|
|
39
37
|
|
|
40
38
|
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); }
|
|
@@ -60,8 +58,6 @@ function DefaultFilterContent(_ref) {
|
|
|
60
58
|
innerValue = _React$useState4[0],
|
|
61
59
|
setInnerValue = _React$useState4[1];
|
|
62
60
|
|
|
63
|
-
var inputRef = (0, _react.useRef)();
|
|
64
|
-
|
|
65
61
|
var handleClick = _react.default.useCallback(function (option) {
|
|
66
62
|
setSelectedValue(option.key);
|
|
67
63
|
}, []);
|
|
@@ -79,26 +75,10 @@ function DefaultFilterContent(_ref) {
|
|
|
79
75
|
});
|
|
80
76
|
};
|
|
81
77
|
|
|
82
|
-
var handleKeyDown = function handleKeyDown(e) {
|
|
83
|
-
if (e.keyCode === _keyCode.default.ENTER) {
|
|
84
|
-
confirm();
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
|
|
88
78
|
(0, _react.useEffect)(function () {
|
|
89
79
|
setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
|
|
90
80
|
setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || '');
|
|
91
81
|
}, [filterModel]);
|
|
92
|
-
(0, _react.useEffect)(function () {
|
|
93
|
-
// 兼容设置焦点后发生滚动
|
|
94
|
-
setTimeout(function () {
|
|
95
|
-
var _a;
|
|
96
|
-
|
|
97
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
|
|
98
|
-
preventScroll: true
|
|
99
|
-
});
|
|
100
|
-
});
|
|
101
|
-
}, []);
|
|
102
82
|
return /*#__PURE__*/_react.default.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
103
83
|
className: 'filter-option-list'
|
|
104
84
|
}, /*#__PURE__*/_react.default.createElement("ul", null, (0, _map.default)(_util.DEFAULT_FILTER_OPTIONS).call(_util.DEFAULT_FILTER_OPTIONS, function (option, index) {
|
|
@@ -120,9 +100,7 @@ function DefaultFilterContent(_ref) {
|
|
|
120
100
|
value: innerValue,
|
|
121
101
|
onChange: function onChange(e) {
|
|
122
102
|
setInnerValue(e.target.value);
|
|
123
|
-
}
|
|
124
|
-
onKeyDown: handleKeyDown,
|
|
125
|
-
ref: inputRef
|
|
103
|
+
}
|
|
126
104
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
127
105
|
className: 'filter-footer'
|
|
128
106
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
@@ -6,7 +6,7 @@ interface FilterProps {
|
|
|
6
6
|
size?: number;
|
|
7
7
|
isFilterActive: boolean;
|
|
8
8
|
FilterPanelContent?: FilterPanelType;
|
|
9
|
-
filterIcon?: ReactNode
|
|
9
|
+
filterIcon?: ReactNode;
|
|
10
10
|
setFilterModel: DefaultFilterPanelProps['setFilterModel'];
|
|
11
11
|
filterModel: DefaultFilterPanelProps['filterModel'];
|
|
12
12
|
setFilter: CustomeFilterPanelProps['setFilter'];
|
|
@@ -31,8 +31,6 @@ var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
|
|
|
31
31
|
|
|
32
32
|
var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));
|
|
33
33
|
|
|
34
|
-
var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
|
|
35
|
-
|
|
36
34
|
var _utils = require("../../../utils");
|
|
37
35
|
|
|
38
36
|
var _utils2 = require("../../../base/utils");
|
|
@@ -45,7 +43,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
|
|
|
45
43
|
|
|
46
44
|
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; }
|
|
47
45
|
|
|
48
|
-
var HEADER_ICON_OFFSET_Y =
|
|
46
|
+
var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
|
|
49
47
|
|
|
50
48
|
var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
|
|
51
49
|
|
|
@@ -121,6 +119,10 @@ function Filter(_ref2) {
|
|
|
121
119
|
return setShowPanel(false);
|
|
122
120
|
};
|
|
123
121
|
|
|
122
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
123
|
+
e.stopPropagation(); // 阻止触发拖拽
|
|
124
|
+
};
|
|
125
|
+
|
|
124
126
|
var renderPanelContent = function renderPanelContent() {
|
|
125
127
|
if (FilterPanelContent) {
|
|
126
128
|
return /*#__PURE__*/_react.default.createElement(FilterPanelContent, {
|
|
@@ -140,12 +142,6 @@ function Filter(_ref2) {
|
|
|
140
142
|
};
|
|
141
143
|
|
|
142
144
|
var handleIconClick = function handleIconClick(e) {
|
|
143
|
-
// 只有当icon区域点击会触发面板展开
|
|
144
|
-
// 防止 createPortal 区域的点击触发该事件
|
|
145
|
-
if (!e.currentTarget.contains(e.target)) {
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
145
|
if (stopClickEventPropagation) {
|
|
150
146
|
e.stopPropagation();
|
|
151
147
|
}
|
|
@@ -154,20 +150,27 @@ function Filter(_ref2) {
|
|
|
154
150
|
};
|
|
155
151
|
|
|
156
152
|
var iconClassName = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, className, true), (0, _defineProperty2.default)(_cx, 'filter-panel-open', showPanel), _cx));
|
|
157
|
-
var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
|
|
158
153
|
return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
|
|
159
154
|
style: style,
|
|
160
155
|
className: iconClassName,
|
|
161
|
-
|
|
156
|
+
onMouseDown: handleMouseDown,
|
|
157
|
+
ref: iconRef
|
|
162
158
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
},
|
|
159
|
+
className: _styles.Classes.filterIcon,
|
|
160
|
+
onClick: handleIconClick
|
|
161
|
+
}, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
|
|
166
162
|
width: size,
|
|
167
|
-
height: size
|
|
168
|
-
|
|
163
|
+
height: size,
|
|
164
|
+
viewBox: "64 64 896 896",
|
|
165
|
+
focusable: "false",
|
|
166
|
+
"data-icon": "filter",
|
|
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, {
|
|
169
172
|
ele: iconRef.current,
|
|
170
|
-
filterIcon:
|
|
173
|
+
filterIcon: filterIcon,
|
|
171
174
|
hidePanel: hidePanel,
|
|
172
175
|
renderPanelContent: renderPanelContent
|
|
173
176
|
}), document.body));
|
|
@@ -25,15 +25,13 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
25
25
|
|
|
26
26
|
var _utils = require("../../../utils/");
|
|
27
27
|
|
|
28
|
-
var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
|
|
29
|
-
|
|
30
28
|
var _templateObject;
|
|
31
29
|
|
|
32
30
|
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); }
|
|
33
31
|
|
|
34
32
|
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; }
|
|
35
33
|
|
|
36
|
-
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 .popup-header {\n display: flex;\n background-color: #ebedf1;\n\n .popup-header-icon {\n
|
|
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 .popup-header {\n display: flex;\n background-color: #ebedf1;\n\n .popup-header-icon {\n color:#666;\n background-color: #fff;\n padding: 6px 16px 6px 16px;\n display: inline-block;\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 .popup-body {\n display: flex;\n }\n"])));
|
|
37
35
|
|
|
38
36
|
var useWindowEvents = function useWindowEvents(func, evens) {
|
|
39
37
|
_react.default.useEffect(function () {
|
|
@@ -75,36 +73,31 @@ function FilterPanel(_ref) {
|
|
|
75
73
|
setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
|
|
76
74
|
setVisible(true);
|
|
77
75
|
}, [position]);
|
|
78
|
-
var hasPopupMouseEvent = (0, _react.useRef)(false);
|
|
79
|
-
|
|
80
|
-
var handleMouseEvent = function handleMouseEvent() {
|
|
81
|
-
// 当弹出的过滤面板内部发生鼠标按下、抬起事件时,标记当前事件,并在click捕获期清除标记,用来确定鼠标按下、抬起发生在过滤面板内部
|
|
82
|
-
// 利用了React.createPortal冒泡是根据React Tree的特性:
|
|
83
|
-
// https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
|
|
84
|
-
hasPopupMouseEvent.current = true;
|
|
85
|
-
};
|
|
86
|
-
|
|
87
76
|
useWindowEvents(function (e) {
|
|
88
|
-
!isContainPanel(e) &&
|
|
89
|
-
|
|
90
|
-
}, ['click']);
|
|
77
|
+
return !isContainPanel(e) && onClose();
|
|
78
|
+
}, ['mousedown']);
|
|
91
79
|
return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
|
|
92
80
|
style: (0, _extends2.default)((0, _extends2.default)({}, style), {
|
|
93
81
|
left: visible ? perfectPosition.x : 0,
|
|
94
82
|
top: visible ? perfectPosition.y : 0,
|
|
95
83
|
opacity: visible ? 1 : 0
|
|
96
84
|
}),
|
|
97
|
-
onMouseDown: handleMouseEvent,
|
|
98
|
-
onMouseUp: handleMouseEvent,
|
|
99
85
|
ref: ref
|
|
100
86
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
101
87
|
className: 'popup-header'
|
|
102
88
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
103
89
|
className: 'popup-header-icon'
|
|
104
|
-
}, filterIcon || /*#__PURE__*/_react.default.createElement(
|
|
105
|
-
width:
|
|
106
|
-
height:
|
|
107
|
-
|
|
90
|
+
}, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
|
|
91
|
+
width: 14,
|
|
92
|
+
height: 14,
|
|
93
|
+
viewBox: "64 64 896 896",
|
|
94
|
+
focusable: "false",
|
|
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", {
|
|
108
101
|
className: "popup-body"
|
|
109
102
|
}, children));
|
|
110
103
|
}
|
|
@@ -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);
|
|
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);
|
|
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 !== 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
|
|
57
|
+
return value !== data;
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
60
|
}, {
|
|
@@ -16,4 +16,3 @@ 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';
|
|
@@ -55,18 +55,6 @@ Object.defineProperty(exports, "filter", {
|
|
|
55
55
|
return _filterInstanceProperty(_columnFilter);
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
|
-
Object.defineProperty(exports, "footerDataSource", {
|
|
59
|
-
enumerable: true,
|
|
60
|
-
get: function get() {
|
|
61
|
-
return _footerDataSource.footerDataSource;
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
Object.defineProperty(exports, "footerRowMetaSymbol", {
|
|
65
|
-
enumerable: true,
|
|
66
|
-
get: function get() {
|
|
67
|
-
return _footerDataSource.footerRowMetaSymbol;
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
58
|
Object.defineProperty(exports, "mergeCellHover", {
|
|
71
59
|
enumerable: true,
|
|
72
60
|
get: function get() {
|
|
@@ -168,6 +156,4 @@ var _columnFilter = require("./columnFilter");
|
|
|
168
156
|
|
|
169
157
|
var _rangeSelection = require("./rangeSelection");
|
|
170
158
|
|
|
171
|
-
var _mergeCellHover = require("./mergeCellHover");
|
|
172
|
-
|
|
173
|
-
var _footerDataSource = require("./footerDataSource");
|
|
159
|
+
var _mergeCellHover = require("./mergeCellHover");
|
|
@@ -61,8 +61,7 @@ function multiSelect() {
|
|
|
61
61
|
/** 所有有效的 keys(disable 状态为 false) */
|
|
62
62
|
|
|
63
63
|
var allKeys = [];
|
|
64
|
-
|
|
65
|
-
flatDataSource.forEach(function (row, rowIndex) {
|
|
64
|
+
dataSource.forEach(function (row, rowIndex) {
|
|
66
65
|
var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
67
66
|
|
|
68
67
|
fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
|
|
@@ -131,10 +130,6 @@ function multiSelect() {
|
|
|
131
130
|
return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
|
|
132
131
|
},
|
|
133
132
|
render: function render(_, row, rowIndex) {
|
|
134
|
-
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
135
|
-
return null;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
133
|
var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
139
134
|
|
|
140
135
|
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 lastClickCell = "lastClickCell";
|
|
10
10
|
export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.
|
|
10
|
+
exports.lastClickCell = void 0;
|
|
11
11
|
exports.rangeSelection = rangeSelection;
|
|
12
12
|
exports.rangeSelectionKey = void 0;
|
|
13
13
|
|
|
@@ -35,44 +35,42 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
35
35
|
|
|
36
36
|
var rangeSelectionKey = 'rangeSelection';
|
|
37
37
|
exports.rangeSelectionKey = rangeSelectionKey;
|
|
38
|
-
var
|
|
39
|
-
exports.
|
|
38
|
+
var lastClickCell = 'lastClickCell';
|
|
39
|
+
exports.lastClickCell = lastClickCell;
|
|
40
40
|
|
|
41
41
|
function rangeSelection(opts) {
|
|
42
42
|
return function step(pipeline) {
|
|
43
43
|
var SCROLL_SIZE = 30;
|
|
44
44
|
var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
|
|
45
|
-
var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
|
|
46
45
|
|
|
47
46
|
if (!tableBody) {
|
|
48
47
|
return pipeline;
|
|
49
48
|
}
|
|
50
49
|
|
|
51
50
|
var columns = pipeline.getColumns();
|
|
52
|
-
var dataSource = pipeline.getDataSource();
|
|
53
51
|
|
|
54
52
|
var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
|
|
55
53
|
var _a;
|
|
56
54
|
|
|
57
55
|
pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
|
|
58
56
|
(_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
|
|
59
|
-
};
|
|
57
|
+
}; // if (!pipeline.getFeatureOptions(rangeSelectionKey)) {
|
|
58
|
+
// pipeline.setFeatureOptions(rangeSelectionKey, {
|
|
59
|
+
// optionKey: rangeSelectionKey,
|
|
60
|
+
// rangeSelectedChange: rangeSelectedChange
|
|
61
|
+
// })
|
|
62
|
+
// }
|
|
63
|
+
|
|
60
64
|
|
|
61
65
|
var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
|
|
62
|
-
if (!startDragCell || !draggingCell) return;
|
|
66
|
+
if (!startDragCell || !draggingCell || isSameCell(startDragCell, draggingCell)) return;
|
|
63
67
|
var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
|
|
64
|
-
|
|
65
|
-
var _getRangeSelectionRow = getRangeSelectionRowInfo(startDragCell, draggingCell, dataSource),
|
|
66
|
-
startRow = _getRangeSelectionRow.startRow,
|
|
67
|
-
endRow = _getRangeSelectionRow.endRow,
|
|
68
|
-
footerRowRange = _getRangeSelectionRow.footerRowRange;
|
|
69
|
-
|
|
68
|
+
var isTopToBottom = startDragCell.rowIndex <= draggingCell.rowIndex;
|
|
70
69
|
var rangeSelection = {
|
|
71
|
-
startRow:
|
|
72
|
-
endRow:
|
|
70
|
+
startRow: isTopToBottom ? startDragCell.rowIndex : startDragCell.rowIndex + startDragCell.rowSpan - 1,
|
|
71
|
+
endRow: isTopToBottom ? draggingCell.rowIndex + draggingCell.rowSpan - 1 : draggingCell.rowIndex,
|
|
73
72
|
columns: rangeColumns,
|
|
74
|
-
startColumn: startDragCell.column
|
|
75
|
-
footerRowRange: footerRowRange
|
|
73
|
+
startColumn: startDragCell.column
|
|
76
74
|
};
|
|
77
75
|
rangeSelectedChange(rangeSelection);
|
|
78
76
|
};
|
|
@@ -83,23 +81,23 @@ function rangeSelection(opts) {
|
|
|
83
81
|
|
|
84
82
|
if (clickCell) {
|
|
85
83
|
if (event.shiftKey) {
|
|
86
|
-
var _lastClickCell = pipeline.getStateAtKey(
|
|
84
|
+
var _lastClickCell = pipeline.getStateAtKey(lastClickCell);
|
|
87
85
|
|
|
88
86
|
if (_lastClickCell) {
|
|
89
87
|
setRangeSelection(_lastClickCell, clickCell);
|
|
90
88
|
} else {
|
|
91
89
|
// 第一次进来就按住shift键,这时候要记住点击的单元格
|
|
92
|
-
pipeline.setStateAtKey(
|
|
90
|
+
pipeline.setStateAtKey(lastClickCell, clickCell);
|
|
93
91
|
}
|
|
94
92
|
} else {
|
|
95
|
-
pipeline.setStateAtKey(
|
|
96
|
-
|
|
93
|
+
pipeline.setStateAtKey(lastClickCell, clickCell);
|
|
94
|
+
rangeSelectedChange(null);
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
};
|
|
100
98
|
|
|
101
99
|
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
102
|
-
if (mouseDownEvent.button !== 0 || !(
|
|
100
|
+
if (mouseDownEvent.button !== 0 || !(0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
|
|
103
101
|
// shift + 点击选中
|
|
104
102
|
|
|
105
103
|
shiftKeySelect(mouseDownEvent);
|
|
@@ -155,11 +153,10 @@ function rangeSelection(opts) {
|
|
|
155
153
|
};
|
|
156
154
|
|
|
157
155
|
var onKeyDown = function onKeyDown(e) {
|
|
158
|
-
if (!(
|
|
156
|
+
if (!(0, _utils.isElementInEventPath)(tableBody, e.nativeEvent)) return;
|
|
159
157
|
|
|
160
158
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
|
161
159
|
var rowLen = pipeline.getDataSource().length;
|
|
162
|
-
var footerDataSource = pipeline.getFooterDataSource() || [];
|
|
163
160
|
|
|
164
161
|
if (columns.length && rowLen) {
|
|
165
162
|
opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
|
|
@@ -167,11 +164,7 @@ function rangeSelection(opts) {
|
|
|
167
164
|
startRow: 0,
|
|
168
165
|
endRow: rowLen - 1,
|
|
169
166
|
columns: columns,
|
|
170
|
-
startColumn: columns[0]
|
|
171
|
-
footerRowRange: footerDataSource.length > 0 ? {
|
|
172
|
-
startRow: 0,
|
|
173
|
-
endRow: footerDataSource.length - 1
|
|
174
|
-
} : null
|
|
167
|
+
startColumn: columns[0]
|
|
175
168
|
});
|
|
176
169
|
}
|
|
177
170
|
}
|
|
@@ -180,8 +173,7 @@ function rangeSelection(opts) {
|
|
|
180
173
|
pipeline.addTableProps({
|
|
181
174
|
onMouseDown: onMouseDown,
|
|
182
175
|
onKeyDown: onKeyDown,
|
|
183
|
-
tabIndex: -1
|
|
184
|
-
className: (0, _classnames.default)([_styles.Classes.rangeSelection])
|
|
176
|
+
tabIndex: -1
|
|
185
177
|
}); // todo: 后面可以把mousedown放到一个流里面
|
|
186
178
|
|
|
187
179
|
return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
|
|
@@ -197,29 +189,15 @@ function rangeSelection(opts) {
|
|
|
197
189
|
var _cx;
|
|
198
190
|
|
|
199
191
|
var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
|
|
200
|
-
var isInFooter = record[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
201
192
|
var startRow = rangeSelection.startRow,
|
|
202
193
|
endRow = rangeSelection.endRow,
|
|
203
|
-
columns = rangeSelection.columns
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
var _getRowIndex = getRowIndex(startRow, endRow),
|
|
207
|
-
startRowIndex = _getRowIndex.startRowIndex,
|
|
208
|
-
endRowIndex = _getRowIndex.endRowIndex;
|
|
209
|
-
|
|
210
|
-
var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
|
|
211
|
-
footerStartRowIndex = _getFooterRowIndex.startRowIndex,
|
|
212
|
-
footerEndRowIndex = _getFooterRowIndex.endRowIndex;
|
|
213
|
-
|
|
194
|
+
columns = rangeSelection.columns;
|
|
195
|
+
var startIndex = startRow < endRow ? startRow : endRow;
|
|
196
|
+
var endIndex = startRow < endRow ? endRow : startRow;
|
|
214
197
|
var startCol = columns[0];
|
|
215
198
|
var endCol = columns[columns.length - 1];
|
|
216
|
-
var
|
|
217
|
-
var
|
|
218
|
-
var match = footerMatch || bodyMatch;
|
|
219
|
-
var matchSingleCell = match && isCellRangeSingleCell(rangeSelection); // 单个范围选中单元格不显示样式
|
|
220
|
-
|
|
221
|
-
var showCellRangeStyle = match && !matchSingleCell;
|
|
222
|
-
var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSingleCell, matchSingleCell), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSelected, showCellRangeStyle), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeTop, showCellRangeStyle && (isInFooter ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex)), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeLeft, showCellRangeStyle && col.code === startCol.code), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeBottom, showCellRangeStyle && (isInFooter ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex)), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeRight, showCellRangeStyle && col.code === endCol.code), _cx));
|
|
199
|
+
var match = rowIndex >= startIndex && rowIndex <= endIndex;
|
|
200
|
+
var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSelected, match), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeTop, rowIndex === startIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeLeft, col.code === startCol.code && match), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeBottom, rowIndex === endIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeRight, col.code === endCol.code && match), _cx));
|
|
223
201
|
return (0, _utils.mergeCellProps)(prevCellProps, {
|
|
224
202
|
className: className
|
|
225
203
|
});
|
|
@@ -245,8 +223,7 @@ function getTargetCell(target, columns) {
|
|
|
245
223
|
rowIndex: parseInt(target.getAttribute('data-rowindex')),
|
|
246
224
|
rowSpan: parseInt(target.getAttribute('rowspan') || 1),
|
|
247
225
|
code: columnCode,
|
|
248
|
-
column: column
|
|
249
|
-
isInFooter: isEleInFooter(target)
|
|
226
|
+
column: column
|
|
250
227
|
}
|
|
251
228
|
};
|
|
252
229
|
}();
|
|
@@ -261,19 +238,7 @@ function getTargetCell(target, columns) {
|
|
|
261
238
|
}
|
|
262
239
|
|
|
263
240
|
function isSameCell(cell1, cell2) {
|
|
264
|
-
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
function isEleInFooter(target) {
|
|
268
|
-
while (target && !target.classList.contains(_styles.Classes.artTable)) {
|
|
269
|
-
if (target.classList.contains(_styles.Classes.tableFooter)) {
|
|
270
|
-
return true;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
target = target.parentElement;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
return false;
|
|
241
|
+
return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
|
|
277
242
|
}
|
|
278
243
|
|
|
279
244
|
function getRangeColumns(startCell, endCell, columns) {
|
|
@@ -290,97 +255,4 @@ function getRangeColumns(startCell, endCell, columns) {
|
|
|
290
255
|
} else {
|
|
291
256
|
return (0, _slice.default)(flatColumns).call(flatColumns, endIndex, startIndex + 1);
|
|
292
257
|
}
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
|
|
296
|
-
var footerRowRange = null;
|
|
297
|
-
var startRow = -1;
|
|
298
|
-
var endRow = -1;
|
|
299
|
-
|
|
300
|
-
var _getCellRangeRow = getCellRangeRow(startCell, endCell),
|
|
301
|
-
_startRow = _getCellRangeRow.startRow,
|
|
302
|
-
_endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
if (!startCell.isInFooter && !endCell.isInFooter) {
|
|
306
|
-
startRow = _startRow;
|
|
307
|
-
endRow = _endRow;
|
|
308
|
-
} else if (startCell.isInFooter && endCell.isInFooter) {
|
|
309
|
-
// 两个单元格都在表底
|
|
310
|
-
footerRowRange = {
|
|
311
|
-
startRow: _startRow,
|
|
312
|
-
endRow: _endRow
|
|
313
|
-
};
|
|
314
|
-
} else {
|
|
315
|
-
// 一个单元格在表体,一个在表底
|
|
316
|
-
if (startCell.isInFooter) {
|
|
317
|
-
startRow = dataSource.length - 1;
|
|
318
|
-
endRow = endCell.rowIndex;
|
|
319
|
-
footerRowRange = {
|
|
320
|
-
startRow: startCell.rowIndex,
|
|
321
|
-
endRow: 0
|
|
322
|
-
};
|
|
323
|
-
} else {
|
|
324
|
-
startRow = startCell.rowIndex;
|
|
325
|
-
endRow = dataSource.length - 1;
|
|
326
|
-
footerRowRange = {
|
|
327
|
-
startRow: 0,
|
|
328
|
-
endRow: endCell.rowIndex
|
|
329
|
-
};
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
return {
|
|
334
|
-
startRow: startRow,
|
|
335
|
-
endRow: endRow,
|
|
336
|
-
footerRowRange: footerRowRange
|
|
337
|
-
};
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
function getCellRangeRow(startCell, endCell) {
|
|
341
|
-
if (isSameCell(startCell, endCell)) {
|
|
342
|
-
return {
|
|
343
|
-
startRow: startCell.rowIndex,
|
|
344
|
-
endRow: startCell.rowIndex
|
|
345
|
-
};
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
var isTopToBottom = startCell.rowIndex <= endCell.rowIndex;
|
|
349
|
-
var startRow = isTopToBottom ? startCell.rowIndex : startCell.rowIndex + startCell.rowSpan - 1;
|
|
350
|
-
var endRow = isTopToBottom ? endCell.rowIndex + endCell.rowSpan - 1 : endCell.rowIndex;
|
|
351
|
-
return {
|
|
352
|
-
startRow: startRow,
|
|
353
|
-
endRow: endRow
|
|
354
|
-
};
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
function isCellRangeSingleCell(rangeSelection) {
|
|
358
|
-
var startRow = rangeSelection.startRow,
|
|
359
|
-
endRow = rangeSelection.endRow,
|
|
360
|
-
columns = rangeSelection.columns,
|
|
361
|
-
footerRowRange = rangeSelection.footerRowRange;
|
|
362
|
-
var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
|
|
363
|
-
var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
|
|
364
|
-
return isBodySingleCell || isFooterSingleCell;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
function getRowIndex(startRow, endRow) {
|
|
368
|
-
var isReverse = startRow > endRow;
|
|
369
|
-
var startRowIndex = isReverse ? endRow : startRow;
|
|
370
|
-
var endRowIndex = isReverse ? startRow : endRow;
|
|
371
|
-
return {
|
|
372
|
-
startRowIndex: startRowIndex,
|
|
373
|
-
endRowIndex: endRowIndex
|
|
374
|
-
};
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
function getFooterRowIndex(footerRowRange) {
|
|
378
|
-
if (footerRowRange) {
|
|
379
|
-
return getRowIndex(footerRowRange.startRow, footerRowRange.endRow);
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
return {
|
|
383
|
-
startRowIndex: -1,
|
|
384
|
-
endRowIndex: -1
|
|
385
|
-
};
|
|
386
258
|
}
|
|
@@ -76,10 +76,6 @@ function singleSelect() {
|
|
|
76
76
|
return preCellProps;
|
|
77
77
|
},
|
|
78
78
|
render: function render(_, row, rowIndex) {
|
|
79
|
-
if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
|
|
80
|
-
return null;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
79
|
var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
|
|
84
80
|
|
|
85
81
|
return /*#__PURE__*/_react.default.createElement(Radio, {
|
|
@@ -32,8 +32,6 @@ export interface TreeModeFeatureOptions {
|
|
|
32
32
|
stopClickEventPropagation?: boolean;
|
|
33
33
|
/** 指定表格每一行元信息的记录字段 */
|
|
34
34
|
treeMetaKey?: string | symbol;
|
|
35
|
-
/** 指定展开列 */
|
|
36
|
-
expandColCode?: string;
|
|
37
35
|
}
|
|
38
36
|
export declare function treeMode(opts?: TreeModeFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
39
37
|
export {};
|