@lemon-fe/components 0.1.7 → 0.1.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/es/Actions/index.js +3 -2
- package/es/Dropdown/index.d.ts +14 -0
- package/es/Dropdown/index.js +53 -0
- package/es/Dropdown/index.less +13 -0
- package/es/DurationPicker/index.js +30 -27
- package/es/DurationPicker/index.less +1 -1
- package/es/Filter/index.d.ts +1 -0
- package/es/Filter/index.js +160 -100
- package/es/Filter/index.less +26 -52
- package/es/Filter/typings.d.ts +4 -0
- package/es/Icons/CollapseUp.d.ts +5 -0
- package/es/Icons/CollapseUp.js +31 -0
- package/es/Icons/LookUp.d.ts +5 -0
- package/es/Icons/LookUp.js +74 -0
- package/es/Icons/index.d.ts +4 -0
- package/es/Icons/index.js +5 -1
- package/es/Section/index.less +0 -4
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/index.less +1 -0
- package/package.json +2 -2
package/es/Actions/index.js
CHANGED
|
@@ -49,7 +49,7 @@ function Actions(props) {
|
|
|
49
49
|
style: style
|
|
50
50
|
}, /*#__PURE__*/React.createElement(Space, {
|
|
51
51
|
direction: "horizontal",
|
|
52
|
-
size:
|
|
52
|
+
size: 12
|
|
53
53
|
}, visibleBtns.map(function (item, index) {
|
|
54
54
|
if (item === null) {
|
|
55
55
|
return item;
|
|
@@ -118,7 +118,8 @@ function Actions(props) {
|
|
|
118
118
|
}, rest), text, /*#__PURE__*/React.createElement(Icons.Down, {
|
|
119
119
|
style: {
|
|
120
120
|
opacity: 0.7,
|
|
121
|
-
fontSize: 16
|
|
121
|
+
fontSize: 16,
|
|
122
|
+
verticalAlign: -3
|
|
122
123
|
}
|
|
123
124
|
})));
|
|
124
125
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { PopoverProps } from 'antd';
|
|
2
|
+
import type { ReactElement } from 'react';
|
|
3
|
+
interface Props {
|
|
4
|
+
actions: ({
|
|
5
|
+
text: string | ReactElement;
|
|
6
|
+
onClick: () => void;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
} | null)[];
|
|
9
|
+
overlayClassName?: string;
|
|
10
|
+
placement?: PopoverProps['placement'];
|
|
11
|
+
children?: ReactElement | null;
|
|
12
|
+
}
|
|
13
|
+
export default function Dropdown(props: Props): JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
+
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
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."); }
|
|
6
|
+
|
|
7
|
+
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); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
import { Popover } from 'antd';
|
|
16
|
+
import React, { useState } from 'react';
|
|
17
|
+
import classNames from 'classnames';
|
|
18
|
+
import { PREFIX_CLS } from '../constants';
|
|
19
|
+
export default function Dropdown(props) {
|
|
20
|
+
var actions = props.actions,
|
|
21
|
+
overlayClassName = props.overlayClassName,
|
|
22
|
+
_props$placement = props.placement,
|
|
23
|
+
placement = _props$placement === void 0 ? 'bottomRight' : _props$placement,
|
|
24
|
+
children = props.children;
|
|
25
|
+
|
|
26
|
+
var _useState = useState(false),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
visible = _useState2[0],
|
|
29
|
+
setVisible = _useState2[1];
|
|
30
|
+
|
|
31
|
+
var prefixCls = "".concat(PREFIX_CLS, "-dropdown");
|
|
32
|
+
return /*#__PURE__*/React.createElement(Popover, {
|
|
33
|
+
trigger: "click",
|
|
34
|
+
placement: placement,
|
|
35
|
+
visible: visible,
|
|
36
|
+
onVisibleChange: setVisible,
|
|
37
|
+
overlayClassName: classNames(prefixCls, overlayClassName),
|
|
38
|
+
content: actions.map(function (item, index) {
|
|
39
|
+
return item !== null && /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: classNames("".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-disabled"), item.disabled)),
|
|
41
|
+
key: index,
|
|
42
|
+
onClick: function onClick() {
|
|
43
|
+
if (item.disabled) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
setVisible(false);
|
|
48
|
+
item.onClick();
|
|
49
|
+
}
|
|
50
|
+
}, item.text);
|
|
51
|
+
})
|
|
52
|
+
}, children);
|
|
53
|
+
}
|
|
@@ -136,11 +136,6 @@ export default function DurationPicker(props) {
|
|
|
136
136
|
value = _useState2[0],
|
|
137
137
|
setValue = _useState2[1];
|
|
138
138
|
|
|
139
|
-
useEffect(function () {
|
|
140
|
-
if (value !== defaultValue && value !== valueProp && onChange) {
|
|
141
|
-
onChange(value);
|
|
142
|
-
}
|
|
143
|
-
}, [value]);
|
|
144
139
|
useEffect(function () {
|
|
145
140
|
if (valueProp !== undefined) {
|
|
146
141
|
setValue(valueProp);
|
|
@@ -164,40 +159,48 @@ export default function DurationPicker(props) {
|
|
|
164
159
|
}, [value]);
|
|
165
160
|
|
|
166
161
|
var handleChangeType = function handleChangeType(item) {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
return prev;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
return _objectSpread(_objectSpread({}, prev), {}, {
|
|
162
|
+
if (value.type !== item.value) {
|
|
163
|
+
var newValue = _objectSpread(_objectSpread({}, value), {}, {
|
|
173
164
|
type: item.value
|
|
174
165
|
});
|
|
175
|
-
});
|
|
176
|
-
};
|
|
177
166
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
if (
|
|
181
|
-
|
|
167
|
+
setValue(newValue);
|
|
168
|
+
|
|
169
|
+
if (onChange) {
|
|
170
|
+
onChange(newValue);
|
|
182
171
|
}
|
|
172
|
+
}
|
|
173
|
+
};
|
|
183
174
|
|
|
184
|
-
|
|
185
|
-
|
|
175
|
+
var handleChangeOption = function handleChangeOption(item) {
|
|
176
|
+
if (value.option !== item.label) {
|
|
177
|
+
var newValue = _objectSpread(_objectSpread({}, value), {}, {
|
|
186
178
|
dates: item.value !== null ? item.value().map(function (date) {
|
|
187
179
|
return date.format(dateFormat);
|
|
188
|
-
}) : undefined
|
|
180
|
+
}) : undefined,
|
|
181
|
+
option: item.label
|
|
189
182
|
});
|
|
190
|
-
|
|
183
|
+
|
|
184
|
+
setValue(newValue);
|
|
185
|
+
|
|
186
|
+
if (onChange) {
|
|
187
|
+
onChange(newValue);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
191
190
|
};
|
|
192
191
|
|
|
193
192
|
var handleChangeDates = function handleChangeDates(dates) {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}) : undefined
|
|
199
|
-
});
|
|
193
|
+
var newValue = _objectSpread(_objectSpread({}, value), {}, {
|
|
194
|
+
dates: dates ? dates.map(function (item) {
|
|
195
|
+
return item.format(dateFormat);
|
|
196
|
+
}) : undefined
|
|
200
197
|
});
|
|
198
|
+
|
|
199
|
+
setValue(newValue);
|
|
200
|
+
|
|
201
|
+
if (onChange) {
|
|
202
|
+
onChange(newValue);
|
|
203
|
+
}
|
|
201
204
|
};
|
|
202
205
|
|
|
203
206
|
return /*#__PURE__*/React.createElement("div", {
|
package/es/Filter/index.d.ts
CHANGED
|
@@ -2,5 +2,6 @@ import type { ComponentOption, FilterProps } from './typings';
|
|
|
2
2
|
declare function Filter<T extends Record<string, any> = Record<string, any>>(props: FilterProps<T>): JSX.Element;
|
|
3
3
|
declare namespace Filter {
|
|
4
4
|
var setComponents: (items: ComponentOption[]) => void;
|
|
5
|
+
var setStorage: <T>(getData: (storageKey: string) => T | Promise<T>, setData: <T_1>(storageKey: string, data: T_1) => void | Promise<void>) => void;
|
|
5
6
|
}
|
|
6
7
|
export default Filter;
|
package/es/Filter/index.js
CHANGED
|
@@ -29,13 +29,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
29
29
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
30
30
|
|
|
31
31
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
32
|
-
import
|
|
32
|
+
import ResizeObserver from 'rc-resize-observer';
|
|
33
|
+
import { Button, Checkbox, Form, Input, Popover, Space, Modal, message, Select, Empty, InputNumber } from 'antd';
|
|
33
34
|
import { useDebounce, useRequest } from '@lemon-fe/hooks';
|
|
35
|
+
import classNames from 'classnames';
|
|
34
36
|
import Icons from '../Icons';
|
|
35
37
|
import DurationPicker from '../DurationPicker';
|
|
36
38
|
import FormLayout from '../FormLayout';
|
|
37
39
|
import { PREFIX_CLS } from '../constants';
|
|
38
40
|
import TabBar from '../TabBar';
|
|
41
|
+
import Dropdown from '../Dropdown';
|
|
39
42
|
var components = [{
|
|
40
43
|
type: 'input',
|
|
41
44
|
render: function render(item) {
|
|
@@ -67,6 +70,21 @@ var components = [{
|
|
|
67
70
|
}, item.extraProps));
|
|
68
71
|
}
|
|
69
72
|
}];
|
|
73
|
+
|
|
74
|
+
var getStorageData = function getData(storageKey) {
|
|
75
|
+
var data = localStorage.getItem("filter-storage-".concat(storageKey));
|
|
76
|
+
|
|
77
|
+
if (data) {
|
|
78
|
+
return JSON.parse(data);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
return null;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
var setStorageData = function setData(storageKey, data) {
|
|
85
|
+
localStorage.setItem("filter-storage-".concat(storageKey), JSON.stringify(data));
|
|
86
|
+
};
|
|
87
|
+
|
|
70
88
|
var DEFAULT_TAB_TITLE = '默认';
|
|
71
89
|
|
|
72
90
|
function setComponents(items) {
|
|
@@ -79,6 +97,11 @@ function setComponents(items) {
|
|
|
79
97
|
components = _toConsumableArray(compMap.values());
|
|
80
98
|
}
|
|
81
99
|
|
|
100
|
+
function setStorage(getData, setData) {
|
|
101
|
+
getStorageData = getData;
|
|
102
|
+
setStorageData = setData;
|
|
103
|
+
}
|
|
104
|
+
|
|
82
105
|
function Filter(props) {
|
|
83
106
|
var data = props.data,
|
|
84
107
|
defaultValueProp = props.defaultValue,
|
|
@@ -87,8 +110,9 @@ function Filter(props) {
|
|
|
87
110
|
defaultActiveKeys = props.defaultActiveKeys,
|
|
88
111
|
storageKey = props.storageKey,
|
|
89
112
|
onValuesChange = props.onValuesChange,
|
|
90
|
-
style = props.style
|
|
91
|
-
|
|
113
|
+
style = props.style,
|
|
114
|
+
simple = props.simple;
|
|
115
|
+
var prefixCls = "".concat(PREFIX_CLS, "-filter");
|
|
92
116
|
var defaultValue = useMemo(function () {
|
|
93
117
|
return defaultValueProp || value;
|
|
94
118
|
}, []);
|
|
@@ -143,8 +167,18 @@ function Filter(props) {
|
|
|
143
167
|
_Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
|
|
144
168
|
form = _Form$useForm4[0];
|
|
145
169
|
|
|
170
|
+
var _useState11 = useState(0),
|
|
171
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
172
|
+
width = _useState12[0],
|
|
173
|
+
setWidth = _useState12[1];
|
|
174
|
+
|
|
175
|
+
var _useState13 = useState(false),
|
|
176
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
177
|
+
collapsed = _useState14[0],
|
|
178
|
+
setCollapsed = _useState14[1];
|
|
179
|
+
|
|
146
180
|
var _useRequest = useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
|
|
147
|
-
var
|
|
181
|
+
var tabsData;
|
|
148
182
|
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
149
183
|
while (1) {
|
|
150
184
|
switch (_context.prev = _context.next) {
|
|
@@ -157,17 +191,12 @@ function Filter(props) {
|
|
|
157
191
|
return _context.abrupt("return", null);
|
|
158
192
|
|
|
159
193
|
case 2:
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
if (!tabsJson) {
|
|
163
|
-
_context.next = 5;
|
|
164
|
-
break;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
return _context.abrupt("return", JSON.parse(tabsJson));
|
|
194
|
+
_context.next = 4;
|
|
195
|
+
return getStorageData(storageKey);
|
|
168
196
|
|
|
169
|
-
case
|
|
170
|
-
|
|
197
|
+
case 4:
|
|
198
|
+
tabsData = _context.sent;
|
|
199
|
+
return _context.abrupt("return", tabsData);
|
|
171
200
|
|
|
172
201
|
case 6:
|
|
173
202
|
case "end":
|
|
@@ -227,6 +256,10 @@ function Filter(props) {
|
|
|
227
256
|
next.push(tab);
|
|
228
257
|
}
|
|
229
258
|
|
|
259
|
+
if (!!storageKey) {
|
|
260
|
+
setStorageData(storageKey, next.slice(1));
|
|
261
|
+
}
|
|
262
|
+
|
|
230
263
|
setTabs(next);
|
|
231
264
|
setActive(index);
|
|
232
265
|
setShowModal(false);
|
|
@@ -306,6 +339,12 @@ function Filter(props) {
|
|
|
306
339
|
return next;
|
|
307
340
|
});
|
|
308
341
|
setActive(active - 1);
|
|
342
|
+
|
|
343
|
+
if (!!storageKey) {
|
|
344
|
+
setStorageData(storageKey, tabs.filter(function (item) {
|
|
345
|
+
return item.title !== tabs[active].title && item.title !== '默认';
|
|
346
|
+
}));
|
|
347
|
+
}
|
|
309
348
|
}
|
|
310
349
|
});
|
|
311
350
|
};
|
|
@@ -356,7 +395,48 @@ function Filter(props) {
|
|
|
356
395
|
};
|
|
357
396
|
};
|
|
358
397
|
|
|
359
|
-
|
|
398
|
+
var cols = useMemo(function () {
|
|
399
|
+
if (!width || !collapsed) {
|
|
400
|
+
return data;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
var rows = [];
|
|
404
|
+
var currRow = [];
|
|
405
|
+
var value = 0;
|
|
406
|
+
data.forEach(function (item) {
|
|
407
|
+
var _compMap$get;
|
|
408
|
+
|
|
409
|
+
var itemWidth = getColStyle(item.colSpan || ((_compMap$get = compMap.get(item.type)) === null || _compMap$get === void 0 ? void 0 : _compMap$get.colSpan)).width;
|
|
410
|
+
|
|
411
|
+
if (value + itemWidth > width) {
|
|
412
|
+
if (currRow.length > 0) {
|
|
413
|
+
rows.push(currRow);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
currRow = [item];
|
|
417
|
+
value = itemWidth;
|
|
418
|
+
} else {
|
|
419
|
+
currRow.push(item);
|
|
420
|
+
value += itemWidth;
|
|
421
|
+
}
|
|
422
|
+
});
|
|
423
|
+
|
|
424
|
+
if (currRow.length > 0) {
|
|
425
|
+
rows.push(currRow);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
console.log(rows);
|
|
429
|
+
|
|
430
|
+
if (rows.length <= 2) {
|
|
431
|
+
return data;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
return [rows[0], rows[rows.length - 1]].flat();
|
|
435
|
+
}, [data, width, collapsed]);
|
|
436
|
+
var content = /*#__PURE__*/React.createElement("div", {
|
|
437
|
+
className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-simple"), simple)),
|
|
438
|
+
style: style
|
|
439
|
+
}, /*#__PURE__*/React.createElement(Modal, {
|
|
360
440
|
destroyOnClose: true,
|
|
361
441
|
visible: showModal,
|
|
362
442
|
onCancel: toggleModal,
|
|
@@ -382,19 +462,17 @@ function Filter(props) {
|
|
|
382
462
|
initialValues: defaultValue,
|
|
383
463
|
onFinish: handleFinish,
|
|
384
464
|
form: form,
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
style: style
|
|
388
|
-
}, /*#__PURE__*/React.createElement(TabBar, {
|
|
465
|
+
onValuesChange: handleValuesChange
|
|
466
|
+
}, !simple && /*#__PURE__*/React.createElement(TabBar, {
|
|
389
467
|
tabs: tabs,
|
|
390
468
|
activeKey: tabs[active].title,
|
|
391
469
|
onTabClick: function onTabClick(_, index) {
|
|
392
470
|
return handleTabChange(index);
|
|
393
471
|
},
|
|
394
|
-
className: "".concat(prefixCls, "-
|
|
472
|
+
className: "".concat(prefixCls, "-tab-bar")
|
|
395
473
|
}), /*#__PURE__*/React.createElement(FormLayout, {
|
|
396
474
|
direction: "row"
|
|
397
|
-
},
|
|
475
|
+
}, cols.map(function (item) {
|
|
398
476
|
var visible = activeKeys.has(item.key);
|
|
399
477
|
var target = compMap.get(item.type);
|
|
400
478
|
|
|
@@ -411,48 +489,59 @@ function Filter(props) {
|
|
|
411
489
|
label: item.hideLabel ? undefined : item.label
|
|
412
490
|
}, target.render(item)));
|
|
413
491
|
}), /*#__PURE__*/React.createElement("div", {
|
|
414
|
-
|
|
415
|
-
}, /*#__PURE__*/React.createElement(
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
},
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
492
|
+
className: "".concat(prefixCls, "-btns")
|
|
493
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
494
|
+
className: "".concat(prefixCls, "-submit")
|
|
495
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
496
|
+
type: "primary",
|
|
497
|
+
htmlType: "submit"
|
|
498
|
+
}, "\u67E5\u8BE2")), simple ? /*#__PURE__*/React.createElement(Button, {
|
|
499
|
+
className: "".concat(prefixCls, "-btn"),
|
|
500
|
+
onClick: handleReset
|
|
501
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
502
|
+
width: "20",
|
|
503
|
+
height: "20",
|
|
504
|
+
viewBox: "0 0 20 20",
|
|
505
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
506
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
507
|
+
d: "m15 12 .98 3.314a8 8 0 1 0-3.293 2.223",
|
|
508
|
+
stroke: "currentColor",
|
|
509
|
+
strokeWidth: "1.5",
|
|
510
|
+
strokeLinecap: "round",
|
|
511
|
+
strokeLinejoin: "round",
|
|
512
|
+
fill: "none",
|
|
513
|
+
fillRule: "evenodd"
|
|
514
|
+
}))) : /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
|
|
515
|
+
actions: [{
|
|
516
|
+
text: '重置',
|
|
424
517
|
onClick: handleReset
|
|
425
|
-
},
|
|
426
|
-
|
|
518
|
+
}, {
|
|
519
|
+
text: '保存方案',
|
|
427
520
|
onClick: handleAddTab
|
|
428
|
-
},
|
|
429
|
-
|
|
521
|
+
}, {
|
|
522
|
+
text: '删除方案',
|
|
430
523
|
onClick: handleDelete
|
|
431
|
-
}
|
|
524
|
+
}]
|
|
432
525
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
433
526
|
icon: /*#__PURE__*/React.createElement(Icons.More, null)
|
|
434
527
|
})), /*#__PURE__*/React.createElement(Popover, {
|
|
435
528
|
trigger: "click",
|
|
436
|
-
overlayClassName: "".concat(prefixCls, "-
|
|
529
|
+
overlayClassName: "".concat(prefixCls, "-popover"),
|
|
437
530
|
destroyTooltipOnHide: true,
|
|
438
531
|
content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
|
|
439
532
|
placeholder: "\u641C\u7D22\u9009\u9879",
|
|
440
533
|
allowClear: true,
|
|
441
|
-
className: "".concat(prefixCls, "-
|
|
442
|
-
|
|
443
|
-
style: {
|
|
444
|
-
color: '#686868'
|
|
445
|
-
}
|
|
446
|
-
}),
|
|
534
|
+
className: "".concat(prefixCls, "-items-search"),
|
|
535
|
+
prefix: /*#__PURE__*/React.createElement(Icons.Search, null),
|
|
447
536
|
onChange: function onChange(e) {
|
|
448
537
|
return handleChangeKeywords(e.currentTarget.value);
|
|
449
538
|
}
|
|
450
539
|
}), /*#__PURE__*/React.createElement("div", {
|
|
451
|
-
className: "".concat(prefixCls, "-
|
|
540
|
+
className: "".concat(prefixCls, "-items")
|
|
452
541
|
}, items.length > 0 ? items.map(function (item) {
|
|
453
542
|
return /*#__PURE__*/React.createElement("div", {
|
|
454
543
|
key: item.key,
|
|
455
|
-
className: "".concat(prefixCls, "-
|
|
544
|
+
className: "".concat(prefixCls, "-item")
|
|
456
545
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
457
546
|
checked: activeKeys.has(item.key),
|
|
458
547
|
onChange: function onChange(e) {
|
|
@@ -464,65 +553,36 @@ function Filter(props) {
|
|
|
464
553
|
}))),
|
|
465
554
|
placement: "bottomRight"
|
|
466
555
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
467
|
-
className: "".concat(prefixCls, "-
|
|
556
|
+
className: "".concat(prefixCls, "-btn"),
|
|
468
557
|
onClick: function onClick() {
|
|
469
558
|
setKeywords('');
|
|
559
|
+
},
|
|
560
|
+
icon: /*#__PURE__*/React.createElement(Icons.LookUp, null)
|
|
561
|
+
})), /*#__PURE__*/React.createElement(Button, {
|
|
562
|
+
className: "".concat(prefixCls, "-btn"),
|
|
563
|
+
onClick: function onClick() {
|
|
564
|
+
return setCollapsed(function (prev) {
|
|
565
|
+
return !prev;
|
|
566
|
+
});
|
|
567
|
+
},
|
|
568
|
+
icon: /*#__PURE__*/React.createElement(Icons.CollapseUp, {
|
|
569
|
+
style: {
|
|
570
|
+
transform: collapsed ? 'rotateX(180deg)' : undefined
|
|
571
|
+
}
|
|
572
|
+
})
|
|
573
|
+
}))))));
|
|
574
|
+
|
|
575
|
+
if (simple) {
|
|
576
|
+
return content;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
|
|
580
|
+
onResize: function onResize(size) {
|
|
581
|
+
return setWidth(size.width + 16);
|
|
470
582
|
}
|
|
471
|
-
},
|
|
472
|
-
width: "18",
|
|
473
|
-
height: "18",
|
|
474
|
-
viewBox: "0 0 18 18",
|
|
475
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
476
|
-
}, /*#__PURE__*/React.createElement("g", {
|
|
477
|
-
transform: "translate(2 2)",
|
|
478
|
-
fill: "none",
|
|
479
|
-
fillRule: "evenodd"
|
|
480
|
-
}, /*#__PURE__*/React.createElement("rect", {
|
|
481
|
-
fillOpacity: ".65",
|
|
482
|
-
fill: "currentColor",
|
|
483
|
-
y: "4",
|
|
484
|
-
width: "14",
|
|
485
|
-
height: "1.5",
|
|
486
|
-
rx: ".75"
|
|
487
|
-
}), /*#__PURE__*/React.createElement("rect", {
|
|
488
|
-
fillOpacity: ".65",
|
|
489
|
-
fill: "currentColor",
|
|
490
|
-
y: "8",
|
|
491
|
-
width: "6",
|
|
492
|
-
height: "1.5",
|
|
493
|
-
rx: ".75"
|
|
494
|
-
}), /*#__PURE__*/React.createElement("rect", {
|
|
495
|
-
fillOpacity: ".65",
|
|
496
|
-
fill: "currentColor",
|
|
497
|
-
y: "12",
|
|
498
|
-
width: "6",
|
|
499
|
-
height: "1.5",
|
|
500
|
-
rx: ".75"
|
|
501
|
-
}), /*#__PURE__*/React.createElement("rect", {
|
|
502
|
-
fillOpacity: ".65",
|
|
503
|
-
fill: "currentColor",
|
|
504
|
-
width: "14",
|
|
505
|
-
height: "1.5",
|
|
506
|
-
rx: ".75"
|
|
507
|
-
}), /*#__PURE__*/React.createElement("g", {
|
|
508
|
-
transform: "rotate(-45 15.45 -2.157)"
|
|
509
|
-
}, /*#__PURE__*/React.createElement("circle", {
|
|
510
|
-
strokeOpacity: ".65",
|
|
511
|
-
stroke: "currentColor",
|
|
512
|
-
strokeWidth: "1.5",
|
|
513
|
-
cx: "3",
|
|
514
|
-
cy: "3",
|
|
515
|
-
r: "2.25"
|
|
516
|
-
}), /*#__PURE__*/React.createElement("rect", {
|
|
517
|
-
strokeOpacity: ".65",
|
|
518
|
-
stroke: "currentColor",
|
|
519
|
-
x: "2.75",
|
|
520
|
-
y: "5.5",
|
|
521
|
-
width: "1",
|
|
522
|
-
height: "2",
|
|
523
|
-
rx: ".5"
|
|
524
|
-
}))))))))))));
|
|
583
|
+
}, content));
|
|
525
584
|
}
|
|
526
585
|
|
|
527
586
|
Filter.setComponents = setComponents;
|
|
587
|
+
Filter.setStorage = setStorage;
|
|
528
588
|
export default Filter;
|
package/es/Filter/index.less
CHANGED
|
@@ -1,30 +1,6 @@
|
|
|
1
|
-
@import '../theme.less';
|
|
2
|
-
|
|
3
1
|
.@{prefixCls}-filter {
|
|
4
|
-
&-tab {
|
|
5
|
-
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
|
|
8
|
-
&-bar {
|
|
9
|
-
margin-bottom: 16px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&-active {
|
|
13
|
-
position: relative;
|
|
14
|
-
color: .primary(1) [];
|
|
15
|
-
cursor: pointer;
|
|
16
|
-
|
|
17
|
-
&::after {
|
|
18
|
-
position: absolute;
|
|
19
|
-
bottom: 0;
|
|
20
|
-
left: 0;
|
|
21
|
-
display: block;
|
|
22
|
-
width: 100%;
|
|
23
|
-
height: 2px;
|
|
24
|
-
background-color: .primary(1) [];
|
|
25
|
-
content: '';
|
|
26
|
-
}
|
|
27
|
-
}
|
|
2
|
+
&-tab-bar {
|
|
3
|
+
margin-bottom: 16px;
|
|
28
4
|
}
|
|
29
5
|
|
|
30
6
|
&-btn {
|
|
@@ -37,46 +13,44 @@
|
|
|
37
13
|
}
|
|
38
14
|
}
|
|
39
15
|
|
|
40
|
-
&-
|
|
41
|
-
|
|
42
|
-
|
|
16
|
+
&-btns {
|
|
17
|
+
display: flex;
|
|
18
|
+
margin-bottom: 16px;
|
|
19
|
+
padding: 0 8px;
|
|
20
|
+
}
|
|
43
21
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
22
|
+
&-submit {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
width: 92px;
|
|
25
|
+
padding-right: 8px;
|
|
26
|
+
text-align: right;
|
|
27
|
+
}
|
|
47
28
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
29
|
+
&-popover {
|
|
30
|
+
.popover(220px);
|
|
51
31
|
|
|
52
|
-
.ant-popover-inner
|
|
53
|
-
padding:
|
|
32
|
+
.ant-popover-inner {
|
|
33
|
+
padding: 16px 0;
|
|
54
34
|
}
|
|
55
35
|
}
|
|
56
36
|
|
|
57
|
-
&-items-search
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
border: none;
|
|
61
|
-
outline: none;
|
|
62
|
-
box-shadow: none;
|
|
63
|
-
|
|
64
|
-
input {
|
|
65
|
-
background-color: transparent;
|
|
66
|
-
}
|
|
37
|
+
&-items-search {
|
|
38
|
+
width: auto;
|
|
39
|
+
margin: 0 16px 8px;
|
|
67
40
|
}
|
|
68
41
|
|
|
69
42
|
&-items {
|
|
70
43
|
max-height: 400px;
|
|
71
|
-
padding: 0 20px;
|
|
72
44
|
overflow: auto;
|
|
73
45
|
}
|
|
74
46
|
|
|
75
47
|
&-item {
|
|
76
|
-
|
|
48
|
+
.popoverItem();
|
|
77
49
|
|
|
78
|
-
|
|
79
|
-
color: #888;
|
|
80
|
-
}
|
|
50
|
+
overflow: hidden;
|
|
81
51
|
}
|
|
82
52
|
}
|
|
53
|
+
|
|
54
|
+
.@{prefixCls}-section-body > .@{prefixCls}-filter:not(.@{prefixCls}-filter-simple):first-child {
|
|
55
|
+
margin-top: -16px;
|
|
56
|
+
}
|
package/es/Filter/typings.d.ts
CHANGED
|
@@ -19,6 +19,10 @@ export interface FilterProps<T extends Record<string, any> = Record<string, any>
|
|
|
19
19
|
defaultActiveKeys?: string[];
|
|
20
20
|
storageKey?: string;
|
|
21
21
|
style?: CSSProperties;
|
|
22
|
+
/**
|
|
23
|
+
* @description 是否简化筛选器,简化版不包含标签以及选项保存
|
|
24
|
+
*/
|
|
25
|
+
simple?: boolean;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
export interface ComponentOption {
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import Icon from '@ant-design/icons';
|
|
9
|
+
|
|
10
|
+
var Svg = function Svg(props) {
|
|
11
|
+
return /*#__PURE__*/React.createElement("svg", _objectSpread({
|
|
12
|
+
width: "18",
|
|
13
|
+
height: "18",
|
|
14
|
+
viewBox: "0 0 18 18",
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
16
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
17
|
+
d: "M2.47 4.22a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 1 1-1.06 1.065l-.97-.976v5.693a.751.751 0 0 1-1.5 0V6.559l-.97.975A.75.75 0 1 1 .22 6.47l2.25-2.25Zm14.78 1.282h-9a.751.751 0 0 1 0-1.5h9a.751.751 0 0 1 0 1.5Zm-9.75 3c0-.413.336-.75.75-.75h6a.751.751 0 0 1 0 1.5h-6a.751.751 0 0 1-.75-.75Zm0 3.75c0-.413.336-.75.75-.75h6a.751.751 0 0 1 0 1.5h-6a.751.751 0 0 1-.75-.75Z",
|
|
18
|
+
fillOpacity: ".65",
|
|
19
|
+
fill: "currentColor",
|
|
20
|
+
fillRule: "evenodd"
|
|
21
|
+
}));
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export default function CollapseUp(props) {
|
|
25
|
+
return /*#__PURE__*/React.createElement(Icon, _objectSpread({
|
|
26
|
+
style: {
|
|
27
|
+
pointerEvents: 'none'
|
|
28
|
+
},
|
|
29
|
+
component: Svg
|
|
30
|
+
}, props));
|
|
31
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
|
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import Icon from '@ant-design/icons';
|
|
9
|
+
|
|
10
|
+
var Svg = function Svg(props) {
|
|
11
|
+
return /*#__PURE__*/React.createElement("svg", _objectSpread({
|
|
12
|
+
width: "18",
|
|
13
|
+
height: "18",
|
|
14
|
+
viewBox: "0 0 18 18",
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
16
|
+
}, props), /*#__PURE__*/React.createElement("g", {
|
|
17
|
+
transform: "translate(2 2)",
|
|
18
|
+
fill: "none",
|
|
19
|
+
fillRule: "evenodd"
|
|
20
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
21
|
+
fillOpacity: ".65",
|
|
22
|
+
fill: "currentColor",
|
|
23
|
+
y: "4",
|
|
24
|
+
width: "14",
|
|
25
|
+
height: "1.5",
|
|
26
|
+
rx: ".75"
|
|
27
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
28
|
+
fillOpacity: ".65",
|
|
29
|
+
fill: "currentColor",
|
|
30
|
+
y: "8",
|
|
31
|
+
width: "6",
|
|
32
|
+
height: "1.5",
|
|
33
|
+
rx: ".75"
|
|
34
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
35
|
+
fillOpacity: ".65",
|
|
36
|
+
fill: "currentColor",
|
|
37
|
+
y: "12",
|
|
38
|
+
width: "6",
|
|
39
|
+
height: "1.5",
|
|
40
|
+
rx: ".75"
|
|
41
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
42
|
+
fillOpacity: ".65",
|
|
43
|
+
fill: "currentColor",
|
|
44
|
+
width: "14",
|
|
45
|
+
height: "1.5",
|
|
46
|
+
rx: ".75"
|
|
47
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
48
|
+
transform: "rotate(-45 15.45 -2.157)"
|
|
49
|
+
}, /*#__PURE__*/React.createElement("circle", {
|
|
50
|
+
strokeOpacity: ".65",
|
|
51
|
+
stroke: "currentColor",
|
|
52
|
+
strokeWidth: "1.5",
|
|
53
|
+
cx: "3",
|
|
54
|
+
cy: "3",
|
|
55
|
+
r: "2.25"
|
|
56
|
+
}), /*#__PURE__*/React.createElement("rect", {
|
|
57
|
+
strokeOpacity: ".65",
|
|
58
|
+
stroke: "currentColor",
|
|
59
|
+
x: "2.75",
|
|
60
|
+
y: "5.5",
|
|
61
|
+
width: "1",
|
|
62
|
+
height: "2",
|
|
63
|
+
rx: ".5"
|
|
64
|
+
}))));
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export default function LookUp(props) {
|
|
68
|
+
return /*#__PURE__*/React.createElement(Icon, _objectSpread({
|
|
69
|
+
style: {
|
|
70
|
+
pointerEvents: 'none'
|
|
71
|
+
},
|
|
72
|
+
component: Svg
|
|
73
|
+
}, props));
|
|
74
|
+
}
|
package/es/Icons/index.d.ts
CHANGED
|
@@ -5,6 +5,8 @@ import DarkSearch from './DarkSearch';
|
|
|
5
5
|
import More from './More';
|
|
6
6
|
import Calendar from './Calendar';
|
|
7
7
|
import BigTip from './BigTip';
|
|
8
|
+
import LookUp from './LookUp';
|
|
9
|
+
import CollapseUp from './CollapseUp';
|
|
8
10
|
declare const Icons: {
|
|
9
11
|
Search: typeof Search;
|
|
10
12
|
Down: typeof Down;
|
|
@@ -14,5 +16,7 @@ declare const Icons: {
|
|
|
14
16
|
More: typeof More;
|
|
15
17
|
Calendar: typeof Calendar;
|
|
16
18
|
BigTip: typeof BigTip;
|
|
19
|
+
LookUp: typeof LookUp;
|
|
20
|
+
CollapseUp: typeof CollapseUp;
|
|
17
21
|
};
|
|
18
22
|
export default Icons;
|
package/es/Icons/index.js
CHANGED
|
@@ -6,6 +6,8 @@ import DarkSearch from './DarkSearch';
|
|
|
6
6
|
import More from './More';
|
|
7
7
|
import Calendar from './Calendar';
|
|
8
8
|
import BigTip from './BigTip';
|
|
9
|
+
import LookUp from './LookUp';
|
|
10
|
+
import CollapseUp from './CollapseUp';
|
|
9
11
|
var Icons = {
|
|
10
12
|
Search: Search,
|
|
11
13
|
Down: Down,
|
|
@@ -14,6 +16,8 @@ var Icons = {
|
|
|
14
16
|
DarkSearch: DarkSearch,
|
|
15
17
|
More: More,
|
|
16
18
|
Calendar: Calendar,
|
|
17
|
-
BigTip: BigTip
|
|
19
|
+
BigTip: BigTip,
|
|
20
|
+
LookUp: LookUp,
|
|
21
|
+
CollapseUp: CollapseUp
|
|
18
22
|
};
|
|
19
23
|
export default Icons;
|
package/es/Section/index.less
CHANGED
package/es/index.d.ts
CHANGED
|
@@ -27,3 +27,4 @@ export { default as FormTable } from './FormTable';
|
|
|
27
27
|
export type { FormTableColumnType, FormTableProps, FormTableRef } from './FormTable/typings';
|
|
28
28
|
export { default as TabBar } from './TabBar';
|
|
29
29
|
export { default as SymbolIcon } from './SymbolIcon';
|
|
30
|
+
export { default as Dropdown } from './Dropdown';
|
package/es/index.js
CHANGED
|
@@ -21,4 +21,5 @@ export { default as FormHorizontal } from './FormHorizontal';
|
|
|
21
21
|
export { default as FormInline } from './FormInline';
|
|
22
22
|
export { default as FormTable } from './FormTable';
|
|
23
23
|
export { default as TabBar } from './TabBar';
|
|
24
|
-
export { default as SymbolIcon } from './SymbolIcon';
|
|
24
|
+
export { default as SymbolIcon } from './SymbolIcon';
|
|
25
|
+
export { default as Dropdown } from './Dropdown';
|
package/es/index.less
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lemon-fe/components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"description": "> TODO: description",
|
|
5
5
|
"author": "鲁盛杰 <lusj@cnlemon.net>",
|
|
6
6
|
"homepage": "",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"react": "^17.0.2",
|
|
42
42
|
"react-dom": "^17.0.2"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "58dc15b111e2965a940be72535debd94635b8914"
|
|
45
45
|
}
|