@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.
@@ -49,7 +49,7 @@ function Actions(props) {
49
49
  style: style
50
50
  }, /*#__PURE__*/React.createElement(Space, {
51
51
  direction: "horizontal",
52
- size: 16
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
+ }
@@ -0,0 +1,13 @@
1
+ .@{prefixCls}-dropdown {
2
+ .popover();
3
+
4
+ &-item {
5
+ .popoverItem();
6
+
7
+ &-disabled {
8
+ color: rgba(0, 0, 0, 0.25);
9
+ background-color: #fff !important;
10
+ cursor: not-allowed;
11
+ }
12
+ }
13
+ }
@@ -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
- setValue(function (prev) {
168
- if (item.value === prev.type) {
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
- var handleChangeOption = function handleChangeOption(item) {
179
- setValue(function (prev) {
180
- if (item.label === prev.option) {
181
- return prev;
167
+ setValue(newValue);
168
+
169
+ if (onChange) {
170
+ onChange(newValue);
182
171
  }
172
+ }
173
+ };
183
174
 
184
- return _objectSpread(_objectSpread({}, prev), {}, {
185
- option: item.label,
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
- setValue(function (prev) {
195
- return _objectSpread(_objectSpread({}, prev), {}, {
196
- dates: dates ? dates.map(function (item) {
197
- return item.format(dateFormat);
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", {
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  &-type.ant-dropdown-trigger {
26
- flex: 0 0 124px;
26
+ flex: 0 0 auto;
27
27
  margin-right: 8px;
28
28
  border: 1px solid @select-border-color;
29
29
  border-radius: @border-radius-base;
@@ -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;
@@ -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 { Button, Checkbox, Form, Input, Popover, Space, Dropdown, Menu, Modal, message, Select, Empty, InputNumber } from 'antd';
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
- var prefixCls = PREFIX_CLS;
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 tabsJson;
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
- tabsJson = localStorage.getItem("filter-storage-".concat(storageKey));
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 5:
170
- return _context.abrupt("return", null);
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
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
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
- className: "".concat(prefixCls, "-filter"),
386
- onValuesChange: handleValuesChange,
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, "-filter-tab-bar")
472
+ className: "".concat(prefixCls, "-tab-bar")
395
473
  }), /*#__PURE__*/React.createElement(FormLayout, {
396
474
  direction: "row"
397
- }, data.map(function (item) {
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
- style: getColStyle()
415
- }, /*#__PURE__*/React.createElement(Form.Item, {
416
- label: /*#__PURE__*/React.createElement(Button, {
417
- type: "primary",
418
- htmlType: "submit"
419
- }, "\u67E5\u8BE2")
420
- }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
421
- placement: "bottomRight",
422
- overlay: /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
423
- key: "reset",
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
- }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement(Menu.Item, {
426
- key: "save",
518
+ }, {
519
+ text: '保存方案',
427
520
  onClick: handleAddTab
428
- }, "\u4FDD\u5B58\u65B9\u6848"), /*#__PURE__*/React.createElement(Menu.Item, {
429
- key: "delete",
521
+ }, {
522
+ text: '删除方案',
430
523
  onClick: handleDelete
431
- }, "\u5220\u9664\u65B9\u6848"))
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, "-filter-popover"),
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, "-filter-items-search"),
442
- suffix: /*#__PURE__*/React.createElement(Icons.Search, {
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, "-filter-items")
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, "-filter-item")
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, "-filter-btn"),
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
- }, /*#__PURE__*/React.createElement("svg", {
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;
@@ -1,30 +1,6 @@
1
- @import '../theme.less';
2
-
3
1
  .@{prefixCls}-filter {
4
- &-tab {
5
- height: 100%;
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
- &-popover {
41
- width: 227px;
42
- padding-top: 0;
16
+ &-btns {
17
+ display: flex;
18
+ margin-bottom: 16px;
19
+ padding: 0 8px;
20
+ }
43
21
 
44
- .ant-popover-arrow {
45
- display: none;
46
- }
22
+ &-submit {
23
+ box-sizing: border-box;
24
+ width: 92px;
25
+ padding-right: 8px;
26
+ text-align: right;
27
+ }
47
28
 
48
- .ant-popover-inner {
49
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
50
- }
29
+ &-popover {
30
+ .popover(220px);
51
31
 
52
- .ant-popover-inner-content {
53
- padding: 4px 5px 16px;
32
+ .ant-popover-inner {
33
+ padding: 16px 0;
54
34
  }
55
35
  }
56
36
 
57
- &-items-search.ant-input-affix-wrapper {
58
- height: 40px;
59
- background-color: #f7f6f6;
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
- margin-top: 16px;
48
+ .popoverItem();
77
49
 
78
- .ant-checkbox-wrapper {
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
+ }
@@ -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,5 @@
1
+ import { CSSProperties } from 'react';
2
+ export default function CollapseUp(props: {
3
+ className?: string;
4
+ style?: CSSProperties;
5
+ }): JSX.Element;
@@ -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,5 @@
1
+ import { CSSProperties } from 'react';
2
+ export default function LookUp(props: {
3
+ className?: string;
4
+ style?: CSSProperties;
5
+ }): JSX.Element;
@@ -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
+ }
@@ -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;
@@ -54,10 +54,6 @@
54
54
  &.ant-tabs-tabpane {
55
55
  border-top-left-radius: 0;
56
56
  }
57
-
58
- & > .@{prefixCls}-filter:first-child {
59
- margin-top: -16px;
60
- }
61
57
  }
62
58
 
63
59
  &-footer {
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
@@ -22,3 +22,4 @@
22
22
  @import './FormTable/index.less';
23
23
  @import './TabBar/index.less';
24
24
  @import './SymbolIcon/index.less';
25
+ @import './Dropdown/index.less';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lemon-fe/components",
3
- "version": "0.1.7",
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": "84f94d37e2938930fa2c32d2da6573dfc517b458"
44
+ "gitHead": "58dc15b111e2965a940be72535debd94635b8914"
45
45
  }