@lemon-fe/components 1.3.0-alpha.1 → 1.3.1
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/es/data-grid/components/custom-panel/index.js +12 -4
- package/es/data-grid/components/custom-panel/item.js +9 -44
- package/es/data-grid/components/custom-panel/typings.d.ts +2 -0
- package/es/data-grid/components/search.js +2 -1
- package/es/data-grid/index.d.ts +1 -1
- package/es/data-grid/index.js +8 -5
- package/es/data-grid/typings.d.ts +4 -0
- package/es/filter/fields-config.d.ts +24 -0
- package/es/filter/fields-config.js +261 -0
- package/es/filter/index.d.ts +1 -1
- package/es/filter/index.js +415 -200
- package/es/filter/index.less +84 -5
- package/es/filter/locale/en_US.js +9 -2
- package/es/filter/locale/locale.d.ts +8 -1
- package/es/filter/locale/zh_CN.js +9 -2
- package/es/filter/typings.d.ts +32 -1
- package/es/index.d.ts +1 -1
- package/es/select-view/index.d.ts +12 -1
- package/es/select-view/index.js +25 -14
- package/package.json +4 -4
|
@@ -64,17 +64,19 @@ export default function CustomColumnPanel(params) {
|
|
|
64
64
|
var handleChangeKeywords = useDebounce(setKeywords, 200);
|
|
65
65
|
useEffect(function () {
|
|
66
66
|
var handler = function handler(e) {
|
|
67
|
-
if (e.type === 'columnMoved' && !e.finished) {
|
|
67
|
+
if ((e.type === 'columnMoved' || e.type === 'columnResized') && !e.finished) {
|
|
68
68
|
return;
|
|
69
69
|
}
|
|
70
70
|
handleColumnState();
|
|
71
71
|
};
|
|
72
|
+
api.addEventListener('columnVisible', handler);
|
|
72
73
|
api.addEventListener('columnMoved', handler);
|
|
73
74
|
api.addEventListener('columnPinned', handler);
|
|
74
75
|
api.addEventListener('columnResized', handler);
|
|
75
76
|
api.addEventListener('columnValueChanged', handler);
|
|
76
77
|
api.addEventListener('newColumnsLoaded', handler);
|
|
77
78
|
return function () {
|
|
79
|
+
api.removeEventListener('columnVisible', handler);
|
|
78
80
|
api.removeEventListener('columnMoved', handler);
|
|
79
81
|
api.removeEventListener('columnPinned', handler);
|
|
80
82
|
api.removeEventListener('columnResized', handler);
|
|
@@ -108,7 +110,9 @@ export default function CustomColumnPanel(params) {
|
|
|
108
110
|
column: column,
|
|
109
111
|
title: title,
|
|
110
112
|
children: [],
|
|
111
|
-
leaf: []
|
|
113
|
+
leaf: [],
|
|
114
|
+
disabled: def.lockVisible || false,
|
|
115
|
+
visible: column.isVisible() ? 1 : 0
|
|
112
116
|
};
|
|
113
117
|
var node = originNode;
|
|
114
118
|
var path = [node];
|
|
@@ -126,7 +130,9 @@ export default function CustomColumnPanel(params) {
|
|
|
126
130
|
id: id,
|
|
127
131
|
children: [node],
|
|
128
132
|
title: groupDef.headerName,
|
|
129
|
-
leaf: [originNode]
|
|
133
|
+
leaf: [originNode],
|
|
134
|
+
disabled: originNode.disabled,
|
|
135
|
+
visible: originNode.visible
|
|
130
136
|
};
|
|
131
137
|
node = parentNode;
|
|
132
138
|
path.unshift(node);
|
|
@@ -138,6 +144,8 @@ export default function CustomColumnPanel(params) {
|
|
|
138
144
|
if (node1 !== undefined && node2 !== undefined && node1.id === node2.id) {
|
|
139
145
|
node1.children = [].concat(_toConsumableArray(node1.children), _toConsumableArray(node2.children));
|
|
140
146
|
node1.leaf = [].concat(_toConsumableArray(node1.leaf), _toConsumableArray(node2.leaf));
|
|
147
|
+
node1.disabled = node1.disabled && node2.disabled;
|
|
148
|
+
node1.visible = node1.visible === 1 && node2.visible === 1 ? 1 : node1.visible === 1 || node2.visible === 1 ? 2 : 0;
|
|
141
149
|
path[i] = node1;
|
|
142
150
|
continue;
|
|
143
151
|
}
|
|
@@ -229,7 +237,7 @@ export default function CustomColumnPanel(params) {
|
|
|
229
237
|
autoFocus: true,
|
|
230
238
|
placeholder: dataGridLocale.searchText,
|
|
231
239
|
onChange: function onChange(e) {
|
|
232
|
-
handleChangeKeywords(e.target.value);
|
|
240
|
+
handleChangeKeywords(e.target.value.trim());
|
|
233
241
|
},
|
|
234
242
|
onKeyUp: function onKeyUp(e) {
|
|
235
243
|
if (e.key === 'Enter') {
|
|
@@ -5,18 +5,16 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
5
5
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
6
6
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
7
7
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
-
import React, { memo, useContext
|
|
8
|
+
import React, { memo, useContext } from 'react';
|
|
9
9
|
import Dropdown from "../../../dropdown";
|
|
10
10
|
import Icons from "../../../icons";
|
|
11
11
|
import { useLocaleReceiver } from "../../../locale-receiver";
|
|
12
12
|
import { isCustomField, prefix } from "../../utils";
|
|
13
13
|
import DragContext from "./drag-context";
|
|
14
14
|
import { useDraggable, useDroppable } from '@dnd-kit/core';
|
|
15
|
-
import { useLastestRef } from '@lemon-fe/hooks';
|
|
16
15
|
import classNames from 'classnames';
|
|
17
16
|
var Item = /*#__PURE__*/memo(function (props) {
|
|
18
17
|
var node = props.node,
|
|
19
|
-
api = props.api,
|
|
20
18
|
columnApi = props.columnApi,
|
|
21
19
|
level = props.level,
|
|
22
20
|
dragActive = props.dragActive,
|
|
@@ -39,43 +37,7 @@ var Item = /*#__PURE__*/memo(function (props) {
|
|
|
39
37
|
disabled: colDef.lockPosition === true
|
|
40
38
|
}),
|
|
41
39
|
setDropRef = _useDroppable.setNodeRef;
|
|
42
|
-
var
|
|
43
|
-
if (column) {
|
|
44
|
-
if (column.isVisible()) {
|
|
45
|
-
return 1;
|
|
46
|
-
}
|
|
47
|
-
return 0;
|
|
48
|
-
}
|
|
49
|
-
var count = 0;
|
|
50
|
-
node.leaf.forEach(function (item) {
|
|
51
|
-
if (item.column) {
|
|
52
|
-
if (item.column.isVisible()) {
|
|
53
|
-
count += 1;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
if (count === 0) {
|
|
58
|
-
return 0;
|
|
59
|
-
} else if (count === node.leaf.length) {
|
|
60
|
-
return 1;
|
|
61
|
-
} else {
|
|
62
|
-
return 2;
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
var _useState = useState(0),
|
|
66
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
67
|
-
visible = _useState2[0],
|
|
68
|
-
setVisible = _useState2[1];
|
|
69
|
-
useEffect(function () {
|
|
70
|
-
setVisible(getChecked.current());
|
|
71
|
-
var handler = function handler() {
|
|
72
|
-
setVisible(getChecked.current());
|
|
73
|
-
};
|
|
74
|
-
api.addEventListener('columnVisible', handler);
|
|
75
|
-
return function () {
|
|
76
|
-
api.removeEventListener('columnVisible', handler);
|
|
77
|
-
};
|
|
78
|
-
}, [node.column]);
|
|
40
|
+
var visible = node.visible;
|
|
79
41
|
var _useLocaleReceiver = useLocaleReceiver('DataGrid'),
|
|
80
42
|
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
|
|
81
43
|
dataGridLocale = _useLocaleReceiver2[0];
|
|
@@ -88,18 +50,19 @@ var Item = /*#__PURE__*/memo(function (props) {
|
|
|
88
50
|
}, /*#__PURE__*/React.createElement("div", {
|
|
89
51
|
className: classNames('ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper', {
|
|
90
52
|
'ag-checked': visible === 1,
|
|
91
|
-
'ag-indeterminate': visible === 2
|
|
53
|
+
'ag-indeterminate': visible === 2,
|
|
54
|
+
'ag-disabled': node.disabled
|
|
92
55
|
}),
|
|
93
56
|
role: "presentation"
|
|
94
57
|
}, /*#__PURE__*/React.createElement("input", {
|
|
95
58
|
className: "ag-input-field-input ag-checkbox-input",
|
|
96
59
|
type: "checkbox",
|
|
97
60
|
tabIndex: -1,
|
|
98
|
-
disabled:
|
|
61
|
+
disabled: node.disabled,
|
|
99
62
|
checked: visible === 1,
|
|
100
63
|
onChange: function onChange() {
|
|
101
64
|
var hide;
|
|
102
|
-
if (visible === 1) {
|
|
65
|
+
if (node.visible === 1) {
|
|
103
66
|
hide = true;
|
|
104
67
|
} else {
|
|
105
68
|
hide = false;
|
|
@@ -113,7 +76,9 @@ var Item = /*#__PURE__*/memo(function (props) {
|
|
|
113
76
|
});
|
|
114
77
|
} else {
|
|
115
78
|
columnApi.applyColumnState({
|
|
116
|
-
state: node.leaf.
|
|
79
|
+
state: node.leaf.filter(function (item) {
|
|
80
|
+
return !item.disabled;
|
|
81
|
+
}).map(function (item) {
|
|
117
82
|
return {
|
|
118
83
|
colId: item.column.getColId(),
|
|
119
84
|
hide: hide
|
|
@@ -36,7 +36,8 @@ export default /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Search(props,
|
|
|
36
36
|
var _useLocaleReceiver = useLocaleReceiver('DataGrid'),
|
|
37
37
|
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
|
|
38
38
|
dataGridLocale = _useLocaleReceiver2[0];
|
|
39
|
-
var handleSearch = useDebounce(function (
|
|
39
|
+
var handleSearch = useDebounce(function (str) {
|
|
40
|
+
var keywords = str.trim();
|
|
40
41
|
if (keywords.length <= 0) {
|
|
41
42
|
setState(defaultState);
|
|
42
43
|
return;
|
package/es/data-grid/index.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ declare const Editors: {
|
|
|
17
17
|
Text: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("./typings").TextEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
|
|
18
18
|
Date: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("./typings").DateEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
|
|
19
19
|
Number: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & import("./typings").NumberEditorParams<any> & React.RefAttributes<import("ag-grid-react").ICellEditorReactComp>>;
|
|
20
|
-
Select: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & Pick<import("antd").SelectProps<any, import("antd/lib/select").BaseOptionType>, "disabled" | "
|
|
20
|
+
Select: React.ForwardRefExoticComponent<import("ag-grid-community").ICellEditorParams<any, any, any> & Pick<import("antd").SelectProps<any, import("antd/lib/select").BaseOptionType>, "disabled" | "allowClear" | "mode" | "showSearch" | "optionFilterProp" | "options" | "virtual" | "listHeight"> & {
|
|
21
21
|
fieldNames?: {
|
|
22
22
|
label: string;
|
|
23
23
|
value: string;
|
package/es/data-grid/index.js
CHANGED
|
@@ -1631,11 +1631,13 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
|
|
|
1631
1631
|
} else {
|
|
1632
1632
|
gridRowSelection = 'multiple';
|
|
1633
1633
|
}
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1634
|
+
if (!rowSelection.hideFooterSelected) {
|
|
1635
|
+
footer.push( /*#__PURE__*/React.createElement(Selected, {
|
|
1636
|
+
selection: this.selected,
|
|
1637
|
+
onClear: this.handleClearSelected,
|
|
1638
|
+
key: "selection"
|
|
1639
|
+
}));
|
|
1640
|
+
}
|
|
1639
1641
|
} else {
|
|
1640
1642
|
gridRowSelection = 'single';
|
|
1641
1643
|
}
|
|
@@ -1696,6 +1698,7 @@ var InternalDataGrid = /*#__PURE__*/function (_Component) {
|
|
|
1696
1698
|
enableCellEditingOnBackspace: true,
|
|
1697
1699
|
maintainColumnOrder: true,
|
|
1698
1700
|
suppressCsvExport: true,
|
|
1701
|
+
suppressExcelExport: true,
|
|
1699
1702
|
rowMultiSelectWithClick: gridRowSelection === 'multiple',
|
|
1700
1703
|
noRowsOverlayComponent: this.NoRowsOverlay,
|
|
1701
1704
|
getMainMenuItems: this.getMainMenuItems,
|
|
@@ -75,6 +75,10 @@ export declare type RowSelectionType<T = any> = {
|
|
|
75
75
|
fixed?: boolean;
|
|
76
76
|
checkboxSelection?: boolean | CheckboxSelectionCallback<T>;
|
|
77
77
|
onChange?: (selectedKeys: string[], selectedRows: T[]) => void;
|
|
78
|
+
/**
|
|
79
|
+
* @description 是否隐藏底部已选项
|
|
80
|
+
*/
|
|
81
|
+
hideFooterSelected?: boolean;
|
|
78
82
|
};
|
|
79
83
|
export declare type PaginationType = {
|
|
80
84
|
current?: number;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { FilterItemType, FilterView } from './typings';
|
|
3
|
+
declare type FieldValue = FilterView<any>['fields'][0];
|
|
4
|
+
export declare type Value = FieldValue & {
|
|
5
|
+
label?: string;
|
|
6
|
+
/**
|
|
7
|
+
* 禁止设置是否可见
|
|
8
|
+
*/
|
|
9
|
+
lockVisible?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* 在设置内是否可见
|
|
12
|
+
*/
|
|
13
|
+
hiddenInFields: boolean;
|
|
14
|
+
};
|
|
15
|
+
interface Props {
|
|
16
|
+
originData: FilterItemType<any>[];
|
|
17
|
+
value: Value[];
|
|
18
|
+
onChange: (value: FieldValue[]) => void;
|
|
19
|
+
onSave: () => void;
|
|
20
|
+
classNamePrefix: (value?: string) => string;
|
|
21
|
+
}
|
|
22
|
+
declare function FieldsConfig(props: Props): JSX.Element;
|
|
23
|
+
declare const _default: React.MemoExoticComponent<typeof FieldsConfig>;
|
|
24
|
+
export default _default;
|
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
8
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
10
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
11
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
12
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
13
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
15
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
16
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
17
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
18
|
+
import { Button, Checkbox, Input, message, Popover } from 'antd';
|
|
19
|
+
import React, { memo, useRef, useState } from 'react';
|
|
20
|
+
import Empty from "../empty";
|
|
21
|
+
import Icons from "../icons";
|
|
22
|
+
import { useLocaleReceiver } from "../locale-receiver";
|
|
23
|
+
import { DndContext, DragOverlay, closestCenter, useDraggable, useDroppable } from '@dnd-kit/core';
|
|
24
|
+
import { useDebounce } from '@lemon-fe/hooks';
|
|
25
|
+
import classNames from 'classnames';
|
|
26
|
+
function SortItem(props) {
|
|
27
|
+
var item = props.data,
|
|
28
|
+
index = props.index,
|
|
29
|
+
prefix = props.classNamePrefix,
|
|
30
|
+
dragActive = props.dragActive,
|
|
31
|
+
onHiddenChange = props.onHiddenChange;
|
|
32
|
+
var _useDraggable = useDraggable({
|
|
33
|
+
id: item.key,
|
|
34
|
+
data: {
|
|
35
|
+
index: index,
|
|
36
|
+
data: item
|
|
37
|
+
}
|
|
38
|
+
}),
|
|
39
|
+
attributes = _useDraggable.attributes,
|
|
40
|
+
listeners = _useDraggable.listeners,
|
|
41
|
+
setDragRef = _useDraggable.setNodeRef;
|
|
42
|
+
var _useDroppable = useDroppable({
|
|
43
|
+
id: item.key,
|
|
44
|
+
data: {
|
|
45
|
+
index: index,
|
|
46
|
+
data: item
|
|
47
|
+
}
|
|
48
|
+
}),
|
|
49
|
+
setDropRef = _useDroppable.setNodeRef;
|
|
50
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
key: item.key,
|
|
52
|
+
className: classNames(prefix('item'), dragActive ? prefix("item-active-".concat(dragActive)) : undefined),
|
|
53
|
+
ref: setDropRef
|
|
54
|
+
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
55
|
+
ref: setDragRef
|
|
56
|
+
}, listeners, attributes), /*#__PURE__*/React.createElement(Icons.Drag, null)), /*#__PURE__*/React.createElement(Checkbox, {
|
|
57
|
+
disabled: item.lockVisible,
|
|
58
|
+
checked: !item.hidden,
|
|
59
|
+
onChange: function onChange(e) {
|
|
60
|
+
onHiddenChange(!e.target.checked);
|
|
61
|
+
}
|
|
62
|
+
}), /*#__PURE__*/React.createElement("span", null, item.label));
|
|
63
|
+
}
|
|
64
|
+
function FieldsConfig(props) {
|
|
65
|
+
var prefix = props.classNamePrefix;
|
|
66
|
+
var items = props.value;
|
|
67
|
+
var _useLocaleReceiver = useLocaleReceiver('Filter'),
|
|
68
|
+
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
|
|
69
|
+
filterLocale = _useLocaleReceiver2[0];
|
|
70
|
+
var _useState = useState(''),
|
|
71
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
72
|
+
keywords = _useState2[0],
|
|
73
|
+
setKeywords = _useState2[1];
|
|
74
|
+
var _useState3 = useState(''),
|
|
75
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
76
|
+
overlay = _useState4[0],
|
|
77
|
+
setOverlay = _useState4[1];
|
|
78
|
+
var _useState5 = useState(),
|
|
79
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
80
|
+
dragActive = _useState6[0],
|
|
81
|
+
setDragActive = _useState6[1];
|
|
82
|
+
var _useState7 = useState(false),
|
|
83
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
84
|
+
open = _useState8[0],
|
|
85
|
+
setOpen = _useState8[1];
|
|
86
|
+
var prevValue = useRef(props.value);
|
|
87
|
+
var handleChangeKeywords = useDebounce(setKeywords, 300);
|
|
88
|
+
var handleHiddenChange = function handleHiddenChange(index, hidden) {
|
|
89
|
+
var newValue = _toConsumableArray(props.value);
|
|
90
|
+
newValue[index] = _objectSpread(_objectSpread({}, newValue[index]), {}, {
|
|
91
|
+
hidden: hidden
|
|
92
|
+
});
|
|
93
|
+
var visibleCount = newValue.reduce(function (prev, item) {
|
|
94
|
+
return prev + (item.hidden ? 0 : 1);
|
|
95
|
+
}, 0);
|
|
96
|
+
if (visibleCount) {
|
|
97
|
+
props.onChange(newValue);
|
|
98
|
+
} else {
|
|
99
|
+
message.warning(filterLocale.hideOptionKeepOne);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
return /*#__PURE__*/React.createElement(Popover, {
|
|
103
|
+
trigger: "click",
|
|
104
|
+
overlayClassName: prefix('popover'),
|
|
105
|
+
destroyTooltipOnHide: true,
|
|
106
|
+
open: open,
|
|
107
|
+
onOpenChange: function onOpenChange(openStatus) {
|
|
108
|
+
if (openStatus) {
|
|
109
|
+
prevValue.current = props.value;
|
|
110
|
+
}
|
|
111
|
+
setOpen(openStatus);
|
|
112
|
+
},
|
|
113
|
+
content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
114
|
+
className: prefix('items-search')
|
|
115
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
116
|
+
placeholder: filterLocale.searchOptionText,
|
|
117
|
+
allowClear: true,
|
|
118
|
+
prefix: /*#__PURE__*/React.createElement(Icons.Search, null),
|
|
119
|
+
onChange: function onChange(e) {
|
|
120
|
+
return handleChangeKeywords(e.currentTarget.value);
|
|
121
|
+
}
|
|
122
|
+
})), /*#__PURE__*/React.createElement(DndContext, {
|
|
123
|
+
onDragStart: function onDragStart(e) {
|
|
124
|
+
var _e$active$data$curren;
|
|
125
|
+
setOverlay((_e$active$data$curren = e.active.data.current) === null || _e$active$data$curren === void 0 ? void 0 : _e$active$data$curren.data.label);
|
|
126
|
+
},
|
|
127
|
+
collisionDetection: closestCenter,
|
|
128
|
+
onDragMove: function onDragMove(e) {
|
|
129
|
+
var active = e.active,
|
|
130
|
+
over = e.over;
|
|
131
|
+
var drop;
|
|
132
|
+
if (active.rect.current.translated && over && !over.disabled) {
|
|
133
|
+
var overlayRect = active.rect.current.translated;
|
|
134
|
+
var targetRect = over.rect;
|
|
135
|
+
var overlayCenter = {
|
|
136
|
+
x: overlayRect.left + overlayRect.width / 2,
|
|
137
|
+
y: overlayRect.top + overlayRect.height / 2
|
|
138
|
+
};
|
|
139
|
+
var node = over.data.current;
|
|
140
|
+
var dragIndex = active.data.current.index;
|
|
141
|
+
var targetIndex = node.index;
|
|
142
|
+
if (dragIndex !== targetIndex) {
|
|
143
|
+
var targetCenter = {
|
|
144
|
+
x: targetRect.left + targetRect.width / 2,
|
|
145
|
+
y: targetRect.top + targetRect.height / 2
|
|
146
|
+
};
|
|
147
|
+
if (overlayCenter.y >= targetCenter.y) {
|
|
148
|
+
if (dragIndex >= targetIndex) {
|
|
149
|
+
drop = {
|
|
150
|
+
indicator: 'bottom',
|
|
151
|
+
index: targetIndex + 1,
|
|
152
|
+
node: node
|
|
153
|
+
};
|
|
154
|
+
} else {
|
|
155
|
+
drop = {
|
|
156
|
+
indicator: 'bottom',
|
|
157
|
+
index: targetIndex,
|
|
158
|
+
node: node
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
} else {
|
|
162
|
+
if (dragIndex >= targetIndex) {
|
|
163
|
+
drop = {
|
|
164
|
+
indicator: 'top',
|
|
165
|
+
index: targetIndex,
|
|
166
|
+
node: node
|
|
167
|
+
};
|
|
168
|
+
} else {
|
|
169
|
+
drop = {
|
|
170
|
+
indicator: 'top',
|
|
171
|
+
index: targetIndex - 1,
|
|
172
|
+
node: node
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
setDragActive(drop);
|
|
179
|
+
},
|
|
180
|
+
onDragEnd: function onDragEnd(e) {
|
|
181
|
+
if (dragActive) {
|
|
182
|
+
var dragIndex = e.active.data.current.index;
|
|
183
|
+
var dropIndex = dragActive.index;
|
|
184
|
+
if (dragIndex !== dropIndex) {
|
|
185
|
+
var newItems = _toConsumableArray(props.value);
|
|
186
|
+
var target = newItems[dragIndex];
|
|
187
|
+
newItems.splice(dragIndex, 1);
|
|
188
|
+
newItems.splice(dropIndex, 0, target);
|
|
189
|
+
props.onChange(newItems);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
setOverlay('');
|
|
193
|
+
setDragActive(undefined);
|
|
194
|
+
},
|
|
195
|
+
onDragCancel: function onDragCancel() {
|
|
196
|
+
setOverlay('');
|
|
197
|
+
setDragActive(undefined);
|
|
198
|
+
}
|
|
199
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
200
|
+
className: prefix('items')
|
|
201
|
+
}, items.length > 0 ? items.map(function (item, index) {
|
|
202
|
+
var str = keywords.trim();
|
|
203
|
+
if (!item.label || str && !item.label.includes(str) || item.hiddenInFields) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
return /*#__PURE__*/React.createElement(SortItem, {
|
|
207
|
+
key: item.key,
|
|
208
|
+
data: item,
|
|
209
|
+
index: index,
|
|
210
|
+
classNamePrefix: prefix,
|
|
211
|
+
onHiddenChange: function onHiddenChange(hidden) {
|
|
212
|
+
handleHiddenChange(index, hidden);
|
|
213
|
+
},
|
|
214
|
+
dragActive: (dragActive === null || dragActive === void 0 ? void 0 : dragActive.node.data.key) === item.key ? dragActive.indicator : undefined
|
|
215
|
+
});
|
|
216
|
+
}) : /*#__PURE__*/React.createElement(Empty, {
|
|
217
|
+
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
218
|
+
})), /*#__PURE__*/React.createElement(DragOverlay, {
|
|
219
|
+
dropAnimation: null
|
|
220
|
+
}, overlay ? /*#__PURE__*/React.createElement("div", {
|
|
221
|
+
className: prefix('drag-item')
|
|
222
|
+
}, overlay) : null)), /*#__PURE__*/React.createElement("div", {
|
|
223
|
+
className: prefix('popover-footer')
|
|
224
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
225
|
+
onClick: function onClick() {
|
|
226
|
+
props.onChange(props.originData.map(function (item) {
|
|
227
|
+
return {
|
|
228
|
+
key: item.key,
|
|
229
|
+
hidden: false
|
|
230
|
+
};
|
|
231
|
+
}));
|
|
232
|
+
},
|
|
233
|
+
size: "small"
|
|
234
|
+
}, filterLocale.resetText), /*#__PURE__*/React.createElement(Button, {
|
|
235
|
+
style: {
|
|
236
|
+
marginLeft: 'auto'
|
|
237
|
+
},
|
|
238
|
+
size: "small",
|
|
239
|
+
onClick: function onClick() {
|
|
240
|
+
props.onChange(prevValue.current);
|
|
241
|
+
setOpen(false);
|
|
242
|
+
}
|
|
243
|
+
}, filterLocale.cancel), /*#__PURE__*/React.createElement(Button, {
|
|
244
|
+
size: "small",
|
|
245
|
+
type: "primary",
|
|
246
|
+
onClick: function onClick() {
|
|
247
|
+
prevValue.current = props.value;
|
|
248
|
+
setOpen(false);
|
|
249
|
+
props.onSave();
|
|
250
|
+
}
|
|
251
|
+
}, filterLocale.save))),
|
|
252
|
+
placement: "bottomRight"
|
|
253
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
254
|
+
className: prefix('btn'),
|
|
255
|
+
onClick: function onClick() {
|
|
256
|
+
setKeywords('');
|
|
257
|
+
},
|
|
258
|
+
icon: /*#__PURE__*/React.createElement(Icons.LookUp, null)
|
|
259
|
+
}));
|
|
260
|
+
}
|
|
261
|
+
export default /*#__PURE__*/memo(FieldsConfig);
|
package/es/filter/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { ComponentOption, FilterProps } from './typings';
|
|
2
|
+
import type { ComponentOption, FilterProps } from './typings.d';
|
|
3
3
|
declare function Filter<T extends Record<string, any> = Record<string, any>>(originalProps: FilterProps<T>): JSX.Element;
|
|
4
4
|
declare namespace Filter {
|
|
5
5
|
var setComponents: (items: ComponentOption[]) => void;
|