@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.
Files changed (75) hide show
  1. package/dist/@kdcloudjs/table.css +1 -1
  2. package/dist/@kdcloudjs/table.js +642 -288
  3. package/dist/@kdcloudjs/table.js.map +1 -1
  4. package/dist/@kdcloudjs/table.min.css +1 -1
  5. package/dist/@kdcloudjs/table.min.js +10 -9
  6. package/dist/@kdcloudjs/table.min.js.map +1 -1
  7. package/es/table/base/html-table.js +1 -1
  8. package/es/table/base/styles.d.ts +10 -2
  9. package/es/table/base/styles.js +17 -7
  10. package/es/table/base/table.d.ts +2 -0
  11. package/es/table/base/table.js +31 -53
  12. package/es/table/base/utils.d.ts +7 -0
  13. package/es/table/base/utils.js +29 -1
  14. package/es/table/pipeline/features/columnDrag.js +21 -11
  15. package/es/table/pipeline/features/columnFilter.d.ts +4 -2
  16. package/es/table/pipeline/features/columnFilter.js +39 -17
  17. package/es/table/pipeline/features/columnResizeWidth.js +1 -1
  18. package/es/table/pipeline/features/filter/DefaultFilterContent.js +22 -2
  19. package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
  20. package/es/table/pipeline/features/filter/DefaultFilterIcon.js +20 -0
  21. package/es/table/pipeline/features/filter/Filter.d.ts +3 -2
  22. package/es/table/pipeline/features/filter/Filter.js +44 -34
  23. package/es/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
  24. package/es/table/pipeline/features/filter/FilterPanel.js +29 -20
  25. package/es/table/pipeline/features/filter/util.js +4 -4
  26. package/es/table/pipeline/features/footerDataSource.d.ts +9 -0
  27. package/es/table/pipeline/features/footerDataSource.js +25 -0
  28. package/es/table/pipeline/features/index.d.ts +1 -0
  29. package/es/table/pipeline/features/index.js +2 -1
  30. package/es/table/pipeline/features/multiSelect.js +7 -2
  31. package/es/table/pipeline/features/rangeSelection.d.ts +1 -1
  32. package/es/table/pipeline/features/rangeSelection.js +156 -28
  33. package/es/table/pipeline/features/singleSelect.js +4 -0
  34. package/es/table/pipeline/features/treeMode.d.ts +2 -0
  35. package/es/table/pipeline/features/treeMode.js +18 -20
  36. package/es/table/pipeline/pipeline.d.ts +5 -1
  37. package/es/table/pipeline/pipeline.js +12 -11
  38. package/es/table/utils/keyCode.d.ts +4 -0
  39. package/es/table/utils/keyCode.js +4 -0
  40. package/es/table/utils/mergeCellProps.js +2 -6
  41. package/lib/table/base/html-table.js +1 -1
  42. package/lib/table/base/styles.d.ts +10 -2
  43. package/lib/table/base/styles.js +17 -7
  44. package/lib/table/base/table.d.ts +2 -0
  45. package/lib/table/base/table.js +31 -53
  46. package/lib/table/base/utils.d.ts +7 -0
  47. package/lib/table/base/utils.js +35 -1
  48. package/lib/table/pipeline/features/columnDrag.js +21 -11
  49. package/lib/table/pipeline/features/columnFilter.d.ts +4 -2
  50. package/lib/table/pipeline/features/columnFilter.js +37 -17
  51. package/lib/table/pipeline/features/columnResizeWidth.js +1 -1
  52. package/lib/table/pipeline/features/filter/DefaultFilterContent.js +23 -1
  53. package/lib/table/pipeline/features/filter/DefaultFilterIcon.d.ts +5 -0
  54. package/lib/table/pipeline/features/filter/DefaultFilterIcon.js +30 -0
  55. package/lib/table/pipeline/features/filter/Filter.d.ts +3 -2
  56. package/lib/table/pipeline/features/filter/Filter.js +46 -34
  57. package/lib/table/pipeline/features/filter/FilterPanel.d.ts +2 -1
  58. package/lib/table/pipeline/features/filter/FilterPanel.js +30 -19
  59. package/lib/table/pipeline/features/filter/util.js +4 -4
  60. package/lib/table/pipeline/features/footerDataSource.d.ts +9 -0
  61. package/lib/table/pipeline/features/footerDataSource.js +41 -0
  62. package/lib/table/pipeline/features/index.d.ts +1 -0
  63. package/lib/table/pipeline/features/index.js +15 -1
  64. package/lib/table/pipeline/features/multiSelect.js +6 -1
  65. package/lib/table/pipeline/features/rangeSelection.d.ts +1 -1
  66. package/lib/table/pipeline/features/rangeSelection.js +158 -30
  67. package/lib/table/pipeline/features/singleSelect.js +4 -0
  68. package/lib/table/pipeline/features/treeMode.d.ts +2 -0
  69. package/lib/table/pipeline/features/treeMode.js +19 -22
  70. package/lib/table/pipeline/pipeline.d.ts +5 -1
  71. package/lib/table/pipeline/pipeline.js +13 -11
  72. package/lib/table/utils/keyCode.d.ts +4 -0
  73. package/lib/table/utils/keyCode.js +11 -0
  74. package/lib/table/utils/mergeCellProps.js +2 -6
  75. 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,5 @@
1
+ /// <reference types="react" />
2
+ export default function DefaultFilterIcon({ width, height }: {
3
+ width: string | number;
4
+ height: string | number;
5
+ }): JSX.Element;
@@ -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 = 6 + 1; // padding-top + border
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
- onMouseDown: handleMouseDown,
126
- ref: iconRef
127
+ onClick: handleIconClick,
128
+ ref: iconWrapRef
127
129
  }, /*#__PURE__*/React.createElement("span", {
128
- className: Classes.filterIcon,
129
- onClick: handleIconClick
130
- }, filterIcon || /*#__PURE__*/React.createElement("svg", {
130
+ ref: iconRef,
131
+ className: Classes.filterIcon
132
+ }, displayFilterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
131
133
  width: size,
132
- height: size,
133
- viewBox: "64 64 896 896",
134
- focusable: "false",
135
- "data-icon": "filter",
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
- 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 .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"])));
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
- return !isContainPanel(e) && onClose();
54
- }, ['mousedown']);
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: 'popup-header'
78
+ }, !hideFilterPopupHeader ? /*#__PURE__*/React.createElement("div", {
79
+ className: Classes.popupHeader
64
80
  }, /*#__PURE__*/React.createElement("span", {
65
- className: 'popup-header-icon'
66
- }, filterIcon || /*#__PURE__*/React.createElement("svg", {
67
- width: 14,
68
- height: 14,
69
- viewBox: "64 64 896 896",
70
- focusable: "false",
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 !== data;
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
- dataSource.forEach(function (row, rowIndex) {
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 lastClickCell = "lastClickCell";
9
+ export declare const lastClickCellKey = "lastClickCell";
10
10
  export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;