@qsxy/element-plus-react 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (256) hide show
  1. package/dist/Alert/Alert.d.ts +7 -0
  2. package/dist/Alert/Alert.js +98 -0
  3. package/dist/Alert/index.d.ts +2 -0
  4. package/dist/Alert/index.js +1 -0
  5. package/dist/Alert/typings.d.ts +45 -0
  6. package/dist/Alert/typings.js +1 -0
  7. package/dist/Calendar/Calendar.js +12 -3
  8. package/dist/Calendar/Footer.js +4 -2
  9. package/dist/Calendar/QuarterPanel.d.ts +4 -0
  10. package/dist/Calendar/QuarterPanel.js +109 -0
  11. package/dist/Calendar/WeekPanel.js +1 -1
  12. package/dist/Calendar/typings.d.ts +1 -1
  13. package/dist/Card/Card.js +13 -6
  14. package/dist/Card/typings.d.ts +1 -1
  15. package/dist/Cascader/Cascader.js +1 -1
  16. package/dist/Cascader/useCascader.d.ts +0 -14
  17. package/dist/Cascader/useCascader.js +33 -32
  18. package/dist/Checkbox/Checkbox.js +3 -2
  19. package/dist/ConfigProvider/ConfigProvider.js +2 -24
  20. package/dist/ConfigProvider/ConfigProviderContext.js +1 -1
  21. package/dist/ConfigProvider/typings.d.ts +1 -1
  22. package/dist/Container/Main.d.ts +1 -1
  23. package/dist/Container/typings.d.ts +1 -1
  24. package/dist/DatePicker/DatePicker.js +38 -12
  25. package/dist/DatePicker/DateRangePicker.js +27 -9
  26. package/dist/DatePicker/main.js +1 -1
  27. package/dist/DatePicker/typings.d.ts +1 -1
  28. package/dist/DateTimePicker/DateTimePicker.js +2 -2
  29. package/dist/Dialog/Dialog.js +5 -12
  30. package/dist/Input/Input.js +190 -149
  31. package/dist/Input/InputRange.js +1 -1
  32. package/dist/Input/TextArea.js +87 -12
  33. package/dist/Input/typings.d.ts +56 -5
  34. package/dist/Input/useComposition.d.ts +23 -0
  35. package/dist/Input/useComposition.js +63 -0
  36. package/dist/Input/utils.d.ts +7 -0
  37. package/dist/Input/utils.js +95 -0
  38. package/dist/InputNumber/InputNumber.js +351 -141
  39. package/dist/InputNumber/typings.d.ts +16 -2
  40. package/dist/Loading/Loading.js +5 -2
  41. package/dist/Menu/Menu.js +25 -1
  42. package/dist/Menu/MenuItem.js +4 -2
  43. package/dist/Menu/SubMenu.js +2 -2
  44. package/dist/Menu/SubMenuCollapseTransition.js +14 -9
  45. package/dist/Menu/typings.d.ts +2 -1
  46. package/dist/Message/Message.js +51 -23
  47. package/dist/Message/index.js +8 -10
  48. package/dist/Message/typings.d.ts +8 -5
  49. package/dist/MessageBox/MessageBox.js +52 -30
  50. package/dist/MessageBox/index.d.ts +2 -1
  51. package/dist/MessageBox/index.js +4 -2
  52. package/dist/MessageBox/typings.d.ts +3 -0
  53. package/dist/Notification/Notification.js +26 -19
  54. package/dist/Select/Option.js +30 -14
  55. package/dist/Select/SelectContext.d.ts +5 -5
  56. package/dist/Select/SelectContext.js +2 -1
  57. package/dist/Select/SelectCore.d.ts +2 -2
  58. package/dist/Select/SelectCore.js +172 -449
  59. package/dist/Select/SelectDropdown.js +85 -155
  60. package/dist/Select/index.d.ts +1 -1
  61. package/dist/Select/typings.d.ts +52 -22
  62. package/dist/Select/useSelect.d.ts +128 -0
  63. package/dist/Select/useSelect.js +524 -0
  64. package/dist/Space/Space.d.ts +4 -0
  65. package/dist/Space/Space.js +128 -0
  66. package/dist/Space/SpaceItem.d.ts +7 -0
  67. package/dist/Space/SpaceItem.js +14 -0
  68. package/dist/Space/index.d.ts +3 -0
  69. package/dist/Space/index.js +2 -0
  70. package/dist/Space/typings.d.ts +26 -0
  71. package/dist/Space/typings.js +1 -0
  72. package/dist/Space/useSpace.d.ts +7 -0
  73. package/dist/Space/useSpace.js +104 -0
  74. package/dist/Statistic/Statistic.d.ts +4 -0
  75. package/dist/Statistic/Statistic.js +92 -0
  76. package/dist/Statistic/index.d.ts +2 -0
  77. package/dist/Statistic/index.js +1 -0
  78. package/dist/Statistic/typings.d.ts +28 -0
  79. package/dist/Statistic/typings.js +1 -0
  80. package/dist/Switch/Switch.js +2 -2
  81. package/dist/Table/Table.js +3 -0
  82. package/dist/Table/typings.d.ts +2 -0
  83. package/dist/Table/util.js +6 -5
  84. package/dist/Tag/Tag.js +22 -17
  85. package/dist/Tag/typings.d.ts +1 -1
  86. package/dist/Text/Text.d.ts +4 -0
  87. package/dist/Text/Text.js +84 -0
  88. package/dist/Text/index.d.ts +2 -0
  89. package/dist/Text/index.js +1 -0
  90. package/dist/Text/typings.d.ts +15 -0
  91. package/dist/Text/typings.js +1 -0
  92. package/dist/TimePicker/TimePicker.js +2 -2
  93. package/dist/Tree/CollapseTransition.d.ts +7 -0
  94. package/dist/Tree/CollapseTransition.js +60 -0
  95. package/dist/Tree/Tree.d.ts +3 -140
  96. package/dist/Tree/Tree.js +350 -77
  97. package/dist/Tree/TreeContext.d.ts +9 -0
  98. package/dist/Tree/TreeContext.js +14 -0
  99. package/dist/Tree/TreeNode.d.ts +5 -3
  100. package/dist/Tree/TreeNode.js +321 -331
  101. package/dist/Tree/TreeNodeContent.d.ts +9 -0
  102. package/dist/Tree/TreeNodeContent.js +22 -0
  103. package/dist/Tree/index.d.ts +3 -8
  104. package/dist/Tree/index.js +1 -4
  105. package/dist/Tree/model/node.d.ts +62 -0
  106. package/dist/Tree/model/node.js +601 -0
  107. package/dist/Tree/model/tree-store.d.ts +52 -0
  108. package/dist/Tree/model/tree-store.js +510 -0
  109. package/dist/Tree/model/useDragNode.d.ts +30 -0
  110. package/dist/Tree/model/useDragNode.js +293 -0
  111. package/dist/Tree/model/useKeydown.d.ts +0 -0
  112. package/dist/Tree/model/useKeydown.js +104 -0
  113. package/dist/Tree/model/useNodeExpandEventBroadcast.d.ts +15 -0
  114. package/dist/Tree/model/useNodeExpandEventBroadcast.js +54 -0
  115. package/dist/Tree/model/util.d.ts +7 -0
  116. package/dist/Tree/model/util.js +24 -0
  117. package/dist/Tree/typings.d.ts +225 -114
  118. package/dist/TreeSelect/TreeSelect.d.ts +2 -10
  119. package/dist/TreeSelect/TreeSelect.js +90 -566
  120. package/dist/TreeSelect/TreeSelectOption.d.ts +6 -0
  121. package/dist/TreeSelect/TreeSelectOption.js +62 -0
  122. package/dist/TreeSelect/cacheOptions.d.ts +9 -0
  123. package/dist/TreeSelect/cacheOptions.js +22 -0
  124. package/dist/TreeSelect/index.d.ts +0 -1
  125. package/dist/TreeSelect/typings.d.ts +11 -63
  126. package/dist/TreeSelect/useSelect.d.ts +125 -0
  127. package/dist/TreeSelect/useSelect.js +104 -0
  128. package/dist/TreeSelect/useTree.d.ts +130 -0
  129. package/dist/TreeSelect/useTree.js +285 -0
  130. package/dist/TreeSelect/utils.d.ts +10 -0
  131. package/dist/TreeSelect/utils.js +38 -0
  132. package/dist/Upload/UploadContent.js +2 -0
  133. package/dist/Upload/ajax.js +3 -0
  134. package/dist/Upload/typings.d.ts +4 -0
  135. package/dist/Util/aria.d.ts +25 -0
  136. package/dist/Util/aria.js +118 -0
  137. package/dist/Util/base.d.ts +5 -0
  138. package/dist/Util/base.js +140 -1
  139. package/dist/config/Constants.d.ts +3 -0
  140. package/dist/config/Constants.js +8 -0
  141. package/dist/hooks/index.d.ts +1 -0
  142. package/dist/hooks/index.js +1 -0
  143. package/dist/hooks/popperPropsUtils.js +1 -1
  144. package/dist/hooks/treePropsUtils.d.ts +3 -3
  145. package/dist/hooks/treePropsUtils.js +2 -2
  146. package/dist/hooks/useCalcInputWidth.d.ts +8 -0
  147. package/dist/{Tree/useUnmount.js → hooks/useCalcInputWidth.js} +23 -27
  148. package/dist/hooks/useComposition.d.ts +16 -0
  149. package/dist/hooks/useComposition.js +39 -0
  150. package/dist/hooks/useConfigProvider.d.ts +27 -0
  151. package/dist/hooks/useConfigProvider.js +78 -0
  152. package/dist/hooks/useCursor.d.ts +2 -0
  153. package/dist/hooks/useCursor.js +52 -0
  154. package/dist/hooks/useFocusController.d.ts +27 -0
  155. package/dist/hooks/useFocusController.js +72 -0
  156. package/dist/hooks/useResizeObserver.js +6 -6
  157. package/dist/index.css +1 -1
  158. package/dist/index.d.ts +18 -11
  159. package/dist/index.js +11 -5
  160. package/dist/locale/en.d.ts +15 -0
  161. package/dist/locale/en.js +15 -0
  162. package/dist/locale/zhCn.d.ts +15 -0
  163. package/dist/locale/zhCn.js +15 -0
  164. package/package.json +1 -1
  165. package/theme-chalk/alert.scss +115 -0
  166. package/theme-chalk/aside.scss +8 -8
  167. package/theme-chalk/button-group.scss +80 -80
  168. package/theme-chalk/button.scss +304 -304
  169. package/theme-chalk/calendar/date-table.scss +164 -164
  170. package/theme-chalk/calendar/index.scss +1 -0
  171. package/theme-chalk/calendar/quarter-table.scss +78 -0
  172. package/theme-chalk/checkbox.scss +34 -0
  173. package/theme-chalk/color/index.scss +20 -20
  174. package/theme-chalk/common/transition.scss +142 -142
  175. package/theme-chalk/common/var.scss +1 -1
  176. package/theme-chalk/container.scss +14 -14
  177. package/theme-chalk/dark/css-vars.scss +39 -39
  178. package/theme-chalk/dark/var.scss +225 -225
  179. package/theme-chalk/date-picker.scss +12 -12
  180. package/theme-chalk/drawer.scss +1 -0
  181. package/theme-chalk/footer.scss +12 -12
  182. package/theme-chalk/header.scss +12 -12
  183. package/theme-chalk/index.scss +4 -0
  184. package/theme-chalk/input/input-range.scss +2 -1
  185. package/theme-chalk/input/input.scss +298 -437
  186. package/theme-chalk/input/input.scss--bak +578 -0
  187. package/theme-chalk/input-number.bak +172 -0
  188. package/theme-chalk/input-number.scss +192 -172
  189. package/theme-chalk/link.scss +87 -87
  190. package/theme-chalk/main.scss +14 -14
  191. package/theme-chalk/menu.scss +353 -353
  192. package/theme-chalk/message.scss +104 -178
  193. package/theme-chalk/mixins/_button.scss +224 -224
  194. package/theme-chalk/mixins/_col.scss +33 -33
  195. package/theme-chalk/mixins/_var.scss +67 -67
  196. package/theme-chalk/mixins/config.scss +5 -5
  197. package/theme-chalk/mixins/function.scss +99 -99
  198. package/theme-chalk/mixins/mixins.scss +240 -240
  199. package/theme-chalk/mixins/utils.scss +39 -39
  200. package/theme-chalk/notification.bak +156 -0
  201. package/theme-chalk/notification.scss +109 -156
  202. package/theme-chalk/popper.scss +104 -104
  203. package/theme-chalk/radio-button.scss +169 -169
  204. package/theme-chalk/select/index.scss +222 -191
  205. package/theme-chalk/select/index.scss--bak +247 -0
  206. package/theme-chalk/select/option-group.scss +2 -2
  207. package/theme-chalk/select/option.scss +2 -2
  208. package/theme-chalk/select/select-dropdown.scss +2 -2
  209. package/theme-chalk/space.scss +20 -0
  210. package/theme-chalk/statistic.scss +35 -0
  211. package/theme-chalk/switch.scss +300 -300
  212. package/theme-chalk/tag.scss +150 -172
  213. package/theme-chalk/tag.scss--bak +203 -0
  214. package/theme-chalk/text.scss +48 -0
  215. package/theme-chalk/transition.scss +34 -4
  216. package/theme-chalk/tree-select.scss +41 -25
  217. package/theme-chalk/tree.scss +136 -0
  218. package/theme-chalk/var.scss +83 -83
  219. package/dist/Tree/DirectoryTree.d.ts +0 -15
  220. package/dist/Tree/DirectoryTree.js +0 -183
  221. package/dist/Tree/DropIndicator.d.ts +0 -8
  222. package/dist/Tree/DropIndicator.js +0 -34
  223. package/dist/Tree/Indent.d.ts +0 -9
  224. package/dist/Tree/Indent.js +0 -25
  225. package/dist/Tree/MotionTreeNode.d.ts +0 -14
  226. package/dist/Tree/MotionTreeNode.js +0 -125
  227. package/dist/Tree/NodeList.d.ts +0 -50
  228. package/dist/Tree/NodeList.js +0 -301
  229. package/dist/Tree/RCTree.d.ts +0 -248
  230. package/dist/Tree/RCTree.js +0 -1216
  231. package/dist/Tree/contextTypes.d.ts +0 -69
  232. package/dist/Tree/contextTypes.js +0 -9
  233. package/dist/Tree/typings.tsx--bak +0 -245
  234. package/dist/Tree/useUnmount.d.ts +0 -5
  235. package/dist/Tree/util.d.ts +0 -51
  236. package/dist/Tree/util.js +0 -303
  237. package/dist/Tree/utils/conductUtil.d.ts +0 -17
  238. package/dist/Tree/utils/conductUtil.js +0 -209
  239. package/dist/Tree/utils/dictUtil.d.ts +0 -13
  240. package/dist/Tree/utils/dictUtil.js +0 -75
  241. package/dist/Tree/utils/diffUtil.d.ts +0 -7
  242. package/dist/Tree/utils/diffUtil.js +0 -48
  243. package/dist/Tree/utils/dropIndicator.d.ts +0 -11
  244. package/dist/Tree/utils/dropIndicator.js +0 -36
  245. package/dist/Tree/utils/iconUtil.d.ts +0 -5
  246. package/dist/Tree/utils/iconUtil.js +0 -62
  247. package/dist/Tree/utils/keyUtil.d.ts +0 -2
  248. package/dist/Tree/utils/keyUtil.js +0 -3
  249. package/dist/Tree/utils/motion.d.ts +0 -10
  250. package/dist/Tree/utils/motion.js +0 -54
  251. package/dist/Tree/utils/pickAttrs.d.ts +0 -11
  252. package/dist/Tree/utils/pickAttrs.js +0 -51
  253. package/dist/Tree/utils/treeUtil.d.ts +0 -86
  254. package/dist/Tree/utils/treeUtil.js +0 -364
  255. package/dist/TreeSelect/Utils.d.ts +0 -3
  256. package/dist/TreeSelect/Utils.js +0 -20
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3;
1
+ var _templateObject;
2
2
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  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."); }
@@ -7,21 +7,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
7
7
  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; } }
8
8
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
9
9
  import classNames from 'classnames';
10
- import trim from 'lodash/trim';
11
10
  import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
12
11
  import { useTranslation } from 'react-i18next';
13
12
  import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
14
- import { Divider } from "../Divider";
15
- import Icon from "../Icon/Icon";
16
- import Input from "../Input/Input";
17
13
  import Scrollbar from "../Scrollbar/Scrollbar";
18
- import { isEmpty, isNotEmpty } from "../Util";
14
+ import { isNotEmpty } from "../Util";
19
15
  import { useClassNames } from "../hooks";
20
16
  import Option from "./Option";
21
17
  import { SelectContext } from "./SelectContext";
22
18
  var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
23
19
  var value = props.value,
24
20
  filterable = props.filterable,
21
+ allowCreate = props.allowCreate,
25
22
  _props$multiple = props.multiple,
26
23
  multiple = _props$multiple === void 0 ? false : _props$multiple,
27
24
  filterMethod = props.filterMethod,
@@ -29,22 +26,23 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
29
26
  remote = _props$remote === void 0 ? false : _props$remote,
30
27
  remoteMethod = props.remoteMethod,
31
28
  loadingText = props.loadingText,
29
+ loadingIcon = props.loadingIcon,
32
30
  noMatchText = props.noMatchText,
33
31
  noDataText = props.noDataText,
34
- searchInstance = props.searchInstance,
35
- createItem = props.createItem,
36
- setCreateItem = props.setCreateItem,
37
- createInputRef = props.createInputRef,
32
+ searchText = props.inputValue,
33
+ setInputValue = props.setInputValue,
38
34
  onChoose = props.onChoose,
39
35
  popperInstRef = props.popperInstRef,
40
- contentRef = props.contentRef;
36
+ contentRef = props.contentRef,
37
+ header = props.header,
38
+ footer = props.footer,
39
+ cachedOptions = props.cachedOptions;
41
40
  var _useClassNames = useClassNames('select'),
42
41
  b = _useClassNames.b,
43
42
  e = _useClassNames.e,
44
43
  be = _useClassNames.be,
45
44
  is = _useClassNames.is;
46
45
  var ulRef = useRef(null);
47
- var remoteSearchRef = useRef(null);
48
46
  var _useConfigProvider = useConfigProvider(),
49
47
  locale = _useConfigProvider.locale;
50
48
  var _useTranslation = useTranslation(),
@@ -55,13 +53,6 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
55
53
  _useState2 = _slicedToArray(_useState, 2),
56
54
  hover = _useState2[0],
57
55
  setHover = _useState2[1];
58
- // 搜索关键词
59
- var _useState3 = useState(''),
60
- _useState4 = _slicedToArray(_useState3, 2),
61
- searchText = _useState4[0],
62
- setSearchText = _useState4[1];
63
- // const [remoteSearch, setRemoteSearch] = useState('');
64
- // const remoteSearch = useMemo(() => searchInstance.current?.getValue(), [searchInstance]);
65
56
 
66
57
  /** 搜索时 */
67
58
  useEffect(function () {
@@ -69,46 +60,30 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
69
60
  var _popperInstRef$curren;
70
61
  (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
71
62
  }
72
- // eslint-disable-next-line react-hooks/exhaustive-deps
73
- }, [searchText]);
74
-
75
- /** 清除搜索关键词 */
76
- var onClearSearch = useCallback(function (event) {
77
- event === null || event === void 0 || event.stopPropagation();
78
- setSearchText('');
79
- }, []);
80
-
81
- /** 搜索 */
82
- var onSearch = useCallback(function (val) {
83
- var keywords = trim(val + '');
84
- if (keywords === searchText) {
85
- return;
86
- } else if (isEmpty(keywords)) {
87
- setSearchText('');
63
+ if (filterable && remote) {
64
+ remoteMethod === null || remoteMethod === void 0 || remoteMethod(searchText);
65
+ }
66
+ if (filterable && filterMethod) {
67
+ filterMethod === null || filterMethod === void 0 || filterMethod(searchText);
88
68
  }
89
- setSearchText(keywords);
90
- }, [searchText]);
91
69
 
92
- /** 搜索 */
93
- var onRemote = useCallback(function (val) {
94
- remoteMethod === null || remoteMethod === void 0 || remoteMethod(val);
95
- }, [remoteMethod]);
70
+ // eslint-disable-next-line react-hooks/exhaustive-deps
71
+ }, [searchText]);
96
72
  var filterAction = useCallback(function (p) {
97
73
  if (isNotEmpty(searchText) && isNotEmpty(p.value)) {
98
- if (filterMethod) {
99
- var _p$label;
100
- var filterResult = filterMethod((_p$label = p.label) !== null && _p$label !== void 0 ? _p$label : p.value.toString(), searchText);
101
- return filterResult;
102
- } else {
103
- var _p$label2;
104
- var regex = new RegExp(searchText, 'gi');
105
- var res = null !== ((_p$label2 = p.label) !== null && _p$label2 !== void 0 ? _p$label2 : p.value.toString()).match(regex);
106
- return res;
107
- }
74
+ var _ref, _p$label;
75
+ // if (filterMethod) {
76
+ // const filterResult = filterMethod(p.label ?? p.value.toString(), searchText);
77
+ // return filterResult;
78
+ // } else {
79
+ // }
80
+ var regex = new RegExp(searchText, 'gi');
81
+ var res = null !== "".concat((_ref = (_p$label = p.label) !== null && _p$label !== void 0 ? _p$label : p.value) !== null && _ref !== void 0 ? _ref : '').match(regex);
82
+ return res;
108
83
  } else {
109
84
  return true;
110
85
  }
111
- }, [filterMethod, searchText]);
86
+ }, [searchText]);
112
87
  var scrollToSelected = useCallback(function () {
113
88
  // const node = ulRef.current?.querySelectorAll('.selected');
114
89
  // if (node && node.length > 0) {
@@ -128,40 +103,56 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
128
103
  useImperativeHandle(ref, function () {
129
104
  return {
130
105
  clear: function clear() {
131
- setSearchText('');
132
106
  remoteMethod === null || remoteMethod === void 0 || remoteMethod('');
133
107
  },
134
- onEnter: function onEnter() {
135
- setTimeout(function () {
136
- var _searchInstance$curre, _remoteSearchRef$curr;
137
- (_searchInstance$curre = searchInstance.current) === null || _searchInstance$curre === void 0 || _searchInstance$curre.focus();
138
- (_remoteSearchRef$curr = remoteSearchRef.current) === null || _remoteSearchRef$curr === void 0 || _remoteSearchRef$curr.focus();
139
- }, 500);
140
- },
141
108
  hover: setHover,
142
109
  scrollToSelected: scrollToSelected
143
110
  };
144
111
  });
145
112
  var loading = useMemo(function () {
146
- return /*#__PURE__*/React.createElement(Option, {
147
- className: "no-data",
148
- value: ""
149
- }, loadingText);
150
- }, [loadingText]);
113
+ if (loadingIcon) {
114
+ return /*#__PURE__*/React.createElement("div", {
115
+ className: be('dropdown', 'loading')
116
+ }, loadingIcon);
117
+ } else if (loadingText) {
118
+ return /*#__PURE__*/React.createElement("div", {
119
+ className: be('dropdown', 'empty')
120
+ }, loadingText);
121
+ }
122
+ }, [be, loadingIcon, loadingText]);
151
123
  var options = useMemo(function () {
124
+ // 正在创建新的选项
125
+ if (filterable && allowCreate && isNotEmpty(searchText)) {
126
+ // 单选时的创建项显示在下拉项里
127
+ if (!multiple && value === searchText) {
128
+ return /*#__PURE__*/React.createElement(React.Fragment, null, searchText && !multiple && /*#__PURE__*/React.createElement(Option, {
129
+ value: searchText,
130
+ label: searchText
131
+ }), props.children);
132
+ }
133
+ return /*#__PURE__*/React.createElement(Option, {
134
+ value: searchText,
135
+ label: searchText,
136
+ onClick: function onClick() {
137
+ if (multiple) {
138
+ setInputValue('');
139
+ }
140
+ }
141
+ });
142
+ }
152
143
  // 搜索
153
- if (isNotEmpty(searchText)) {
144
+ if (filterable && !remote && isNotEmpty(searchText) && !filterMethod) {
154
145
  var match = false;
155
146
  return props.children ? /*#__PURE__*/React.createElement(React.Fragment, null, Children.toArray(props.children).map(function (item) {
156
147
  var _nodeType;
157
148
  var nodeType = item === null || item === void 0 ? void 0 : item.type;
158
149
  nodeType = ((_nodeType = nodeType) === null || _nodeType === void 0 ? void 0 : _nodeType.displayName) || nodeType;
159
- if (nodeType === 'Select.Option') {
150
+ if (nodeType === 'ElOption') {
160
151
  if (filterAction(item.props)) {
161
152
  match = true;
162
153
  return item;
163
154
  }
164
- } else if (nodeType === 'OptionGroup') {
155
+ } else if (nodeType === 'ElOptionGroup') {
165
156
  if (item.props.children) {
166
157
  var matchChildren = Children.toArray(item.props.children).filter(function (item1) {
167
158
  if (filterAction(item1.props)) {
@@ -173,122 +164,61 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (props, ref) {
173
164
  } else {
174
165
  return null;
175
166
  }
167
+ } else if (nodeType === 'ElTree') {
168
+ // filterAction(item.props);
169
+ match = true;
170
+ return item;
176
171
  }
177
172
 
178
173
  // if (filterAction(item.props)) {
179
174
  // match = true;
180
175
  // return item;
181
176
  // }
182
- }), !match && /*#__PURE__*/React.createElement(Option, {
183
- className: "no-data",
184
- value: "",
185
- key: 'noMatchText'
177
+ }), !match && /*#__PURE__*/React.createElement("div", {
178
+ className: be('dropdown', 'empty')
186
179
  }, noMatchText)) : null;
187
- }
188
- // 正在创建新的选项
189
- else if (isNotEmpty(createItem)) {
190
- // 单选时的创建项显示在下拉项里
191
- if (!multiple && value === createItem) {
192
- return /*#__PURE__*/React.createElement(React.Fragment, null, createItem && !multiple && /*#__PURE__*/React.createElement(Option, {
193
- value: createItem,
194
- label: createItem
195
- }), props.children);
196
- }
197
- return /*#__PURE__*/React.createElement(Option, {
198
- value: createItem,
199
- label: createItem,
200
- onClick: function onClick() {
201
- if (multiple) {
202
- setCreateItem('');
203
- if (createInputRef.current) {
204
- createInputRef.current.value = '';
205
- }
206
- }
207
- }
208
- });
209
180
  } else {
210
181
  if (Children.count(props.children) > 0) {
211
182
  return props.children;
212
183
  } else {
213
- return /*#__PURE__*/React.createElement(Option, {
214
- className: "no-data",
215
- value: ""
216
- }, noDataText);
184
+ return /*#__PURE__*/React.createElement("div", {
185
+ className: be('dropdown', 'empty')
186
+ }, remote ? noMatchText : noDataText);
217
187
  }
218
188
  }
219
- }, [searchText, createItem, props.children, noMatchText, filterAction, multiple, value, setCreateItem, createInputRef, noDataText]);
189
+ }, [filterable, allowCreate, searchText, remote, filterMethod, multiple, value, props.children, setInputValue, be, noMatchText, filterAction, noDataText]);
220
190
  return /*#__PURE__*/React.createElement("div", {
221
191
  className: classNames(b(_templateObject || (_templateObject = _taggedTemplateLiteral(["dorpdown"]))), is({
222
192
  multiple: multiple
223
- })),
224
- onClick: function onClick(event) {
225
- return event.stopPropagation();
226
- },
227
- ref: contentRef
228
- }, /*#__PURE__*/React.createElement(React.Fragment, null, filterable && !remote ? /*#__PURE__*/React.createElement("div", {
229
- className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["search"]))),
230
- onClick: function onClick(event) {
231
- return event.stopPropagation();
232
- }
233
- }, /*#__PURE__*/React.createElement(Input, {
234
- ref: searchInstance,
235
- placeholder: t('el.select.search', {
236
- lng: locale
193
+ }), {
194
+ 'custom-header': header,
195
+ 'custom-footer': footer
237
196
  }),
238
- clearable: true,
239
- plain: true
240
- // debounceInput
241
- ,
242
- onClear: onClearSearch,
243
- onChange: onSearch,
244
- prefix: /*#__PURE__*/React.createElement(Icon, {
245
- prefix: "fal",
246
- name: "search"
247
- })
248
- }), /*#__PURE__*/React.createElement(Divider, {
249
- style: {
250
- margin: 0
251
- }
252
- })) : null, filterable && remote ? /*#__PURE__*/React.createElement("div", {
253
- className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["search"]))),
254
197
  onClick: function onClick(event) {
255
198
  return event.stopPropagation();
256
- }
257
- }, /*#__PURE__*/React.createElement(Input, {
258
- ref: remoteSearchRef
259
- // value={remoteSearch}
260
- ,
261
- placeholder: t('el.select.search', {
262
- lng: locale
263
- }),
264
- clearable: true,
265
- plain: true,
266
- debounceInput: true,
267
- onClear: function onClear() {
268
- return onRemote('');
269
199
  },
270
- onChange: onRemote,
271
- prefix: /*#__PURE__*/React.createElement(Icon, {
272
- prefix: "fal",
273
- name: "search"
274
- })
275
- }), /*#__PURE__*/React.createElement(Divider, {
276
- style: {
277
- margin: 0
278
- }
279
- })) : null, /*#__PURE__*/React.createElement(SelectContext.Provider, {
200
+ ref: contentRef
201
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, header ? /*#__PURE__*/React.createElement("div", {
202
+ className: be('dropdown', 'header')
203
+ }, header) : null, /*#__PURE__*/React.createElement(SelectContext.Provider, {
280
204
  value: {
281
205
  value: value,
282
206
  onChoose: onChoose,
283
207
  hover: hover,
284
208
  setHover: setHover,
285
- multiple: multiple
209
+ multiple: multiple,
210
+ cachedOptions: cachedOptions
286
211
  }
287
212
  }, /*#__PURE__*/React.createElement(Scrollbar, {
288
- wrapClass: be('dropdown', 'wrap')
213
+ wrapClass: be('dropdown', 'wrap'),
214
+ wrapStyle: {
215
+ display: props.loading ? 'none' : undefined
216
+ }
289
217
  }, /*#__PURE__*/React.createElement("ul", {
290
218
  className: be('dropdown', 'list'),
291
219
  ref: ulRef
292
- }, props.loading ? loading : options)))));
220
+ }, options)), props.loading ? loading : null), footer ? /*#__PURE__*/React.createElement("div", {
221
+ className: be('dropdown', 'footer')
222
+ }, footer) : null));
293
223
  });
294
224
  export default SelectDropdown;
@@ -1,4 +1,4 @@
1
1
  export { default as Option } from './Option';
2
2
  export { default as OptionGroup } from './OptionGroup';
3
3
  export { default as Select } from './Select';
4
- export type { SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './typings';
4
+ export type { OptionData, SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './typings';
@@ -1,18 +1,17 @@
1
1
  import React, { RefObject } from 'react';
2
- import { InputRef } from '../Input/typings';
2
+ import { IconName } from '../Icon';
3
3
  import { PopperOptionRef, PopperOptions } from '../Popper';
4
4
  import { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps, TypeAttributes } from '../types/common';
5
- export type ValueType = string | number | (string | number)[];
5
+ export type OptionValue = string | number | boolean;
6
+ export type ValueType = OptionValue | OptionValue[];
6
7
  export type SelectRef = {
7
- inputInstance?: RefObject<InputRef>;
8
- searchInstance?: RefObject<InputRef>;
9
8
  popperInstRef: RefObject<PopperOptionRef>;
10
- selectedLabel: string | string[];
11
- setLabel: (label: string) => void;
12
9
  getValue: () => ValueType;
13
10
  setValue: (value: ValueType) => void;
14
11
  onClear: (event?: any) => void;
15
12
  setVisible: (value: boolean) => void;
13
+ cachedOptions: React.RefObject<Map<OptionValue, OptionData>>;
14
+ onChoose: <T = any>(val: string, data: OptionData<T>, event?: any) => ValueType;
16
15
  };
17
16
  type Child = React.ReactElement<SelectOptionGroupProps | SelectOptionProps> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps>[];
18
17
  export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<Child | Child[]>, NativeProps, AnimationEventProps, PopperOptions {
@@ -24,20 +23,24 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
24
23
  valueKey?: string;
25
24
  /** 是否可以清空选项 */
26
25
  clearable?: boolean;
26
+ /** 自定义清除图标 */
27
+ clearIcon?: IconName;
27
28
  /** 占位符 */
28
29
  placeholder?: string;
29
30
  /** 是否可搜索 */
30
31
  filterable?: boolean;
31
32
  /** 自定义搜索方法 */
32
- filterMethod?: (val: ValueType, searchText: string) => boolean;
33
+ filterMethod?: (searchText: string) => void;
33
34
  /** 选项为空时显示的文字 */
34
- noDataText?: React.ReactElement | string;
35
+ noDataText?: string;
35
36
  /** 搜索条件无匹配时显示的文字 */
36
- noMatchText?: React.ReactElement | string;
37
+ noMatchText?: string;
37
38
  /** 是否正在从远程获取数据 */
38
39
  loading?: boolean;
39
40
  /** 远程加载时显示的文字 */
40
- loadingText?: React.ReactElement | string;
41
+ loadingText?: string;
42
+ /** 远程加载时显示的图标 */
43
+ loadingIcon?: React.ReactElement;
41
44
  /** */
42
45
  max?: boolean;
43
46
  /** 下拉菜单的内容是否有箭头 */
@@ -74,29 +77,54 @@ export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>
74
77
  remote?: boolean;
75
78
  /** 自定义搜索方法 */
76
79
  remoteMethod?: (searchText: string) => void;
80
+ /** 远程搜索方法显示后缀图标 */
81
+ remoteShowSuffix?: boolean;
82
+ /** 自定义后缀图标组件 */
83
+ suffixIcon?: IconName;
77
84
  /** 标签类型 */
78
85
  tagType?: TypeAttributes.Appearance;
79
86
  /** 标签效果 */
80
87
  tagEffect?: 'light' | 'dark' | 'plain';
88
+ labelFormat?: (index: number, value: OptionValue, label?: OptionValue) => React.ReactElement;
81
89
  /** 选中值发生变化时触发 */
82
- onChange?: (value: ValueType, label?: string | (string | number)[]) => void;
90
+ onChange?: <T = any>(value: ValueType, data?: OptionData<T> | OptionData<T>[]) => void;
83
91
  /** 下拉框出现/隐藏时触发 */
84
92
  onVisibleChange?: (visible: boolean) => void;
85
93
  /** 多选模式下移除tag时触发/隐藏时触发 */
86
94
  onRemoveTag?: (tagValue: any) => void;
87
95
  /** 可清空的单选模式下用户点击清空按钮时触发 */
88
96
  onClear?: () => void;
89
- /** 数据加载成功时调用 */
90
- onLoadSuccess?: (value: ValueType, label?: (string | number | undefined)[]) => void;
97
+ /** 对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单 */
98
+ automaticDropdown?: boolean;
99
+ /** 下拉列表顶部的内容 */
100
+ header?: React.ReactElement;
101
+ /** 下拉列表底部的内容 */
102
+ footer?: React.ReactElement;
103
+ /** 作为 Select 组件的内容时 */
104
+ tag?: <T = any>(params: {
105
+ data: OptionData<T>[];
106
+ selectDisabled: boolean;
107
+ deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData<T>) => void;
108
+ }) => React.ReactElement;
109
+ unmountOnExit?: boolean;
91
110
  }
92
111
  export interface SelectOptionProps extends BaseProps, NativeProps {
93
112
  /** 选项的值 */
94
- value: string | number;
113
+ value: OptionValue;
95
114
  /** 选项的标签,若不设置则默认与 value 相同 */
96
- label?: string;
115
+ label?: OptionValue;
116
+ /** option 的附加数据,会传递到 onClick 事件的参数 data 中 */
117
+ data?: any;
97
118
  /** 是否禁用该选项 */
98
119
  disabled?: boolean;
99
- onClick?: (value: ValueType, label: string, e: Event) => void;
120
+ onClick?: <T = any>(value: ValueType, data: OptionData<T>) => void;
121
+ }
122
+ export interface OptionData<T = any> {
123
+ index?: number;
124
+ value: OptionValue;
125
+ label: OptionValue;
126
+ disabled?: boolean;
127
+ data?: T;
100
128
  }
101
129
  export interface SelectOptionGroupProps extends BaseProps<React.ReactElement<SelectOptionProps> | React.ReactElement<SelectOptionProps>[]>, NativeProps {
102
130
  /** 分组的组名 */
@@ -106,17 +134,19 @@ export interface SelectOptionGroupProps extends BaseProps<React.ReactElement<Sel
106
134
  }
107
135
  export interface SelectDropdownProps extends SelectProps {
108
136
  value: ValueType;
109
- searchInstance: RefObject<InputRef>;
110
- createItem: string;
111
- setCreateItem: (createItem: string) => void;
112
- onChoose: (val: string, text: string, event: any) => void;
137
+ inputValue: string;
138
+ setInputValue: (value: string) => void;
139
+ onChoose: <T = any>(val: string, data: OptionData<T>, event: any) => void;
113
140
  contentRef: RefObject<HTMLDivElement>;
114
- createInputRef: RefObject<HTMLInputElement>;
115
141
  popperInstRef: RefObject<PopperOptionRef>;
142
+ /** 下拉列表顶部的内容 */
143
+ header?: React.ReactElement;
144
+ /** 下拉列表底部的内容 */
145
+ footer?: React.ReactElement;
146
+ cachedOptions: React.RefObject<Map<OptionValue, OptionData>>;
116
147
  }
117
148
  export interface SelectDropdownRef {
118
149
  clear: () => void;
119
- onEnter: () => void;
120
150
  hover: (value: ValueType) => void;
121
151
  scrollToSelected: () => void;
122
152
  }
@@ -0,0 +1,128 @@
1
+ import React from 'react';
2
+ import { PopperOptionRef } from '../Popper/typings';
3
+ import { TooltipRef } from '../Tooltip/typings';
4
+ import { OptionData, OptionValue, SelectDropdownRef, SelectOptionGroupProps, SelectOptionProps, SelectProps, ValueType } from './typings';
5
+ declare const useSelect: (props: SelectProps) => {
6
+ nsSelect: {
7
+ wb: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
8
+ b: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
9
+ e: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
10
+ m: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
11
+ be: (prefix: string, sub: string, compName?: boolean) => string;
12
+ em: (sub: string, modifier: string, compName?: boolean) => string;
13
+ bm: (prefix: string, modifier: string, compName?: boolean) => string;
14
+ bem: (prefix: string, sub: string, modifier: string, compName?: boolean) => string;
15
+ ebm: (sub: string, prefix: string, modifier: string, compName?: boolean) => string;
16
+ is: (...classes: import("../hooks/useClassNames").ClassValue[]) => string;
17
+ cssVarBlock: (object: Record<string, string>) => Record<string, string>;
18
+ cssVarBlockName: (name: string) => string;
19
+ cssVarName: (name: string) => string;
20
+ };
21
+ containerRef: React.MutableRefObject<HTMLDivElement>;
22
+ contentRef: React.MutableRefObject<HTMLDivElement>;
23
+ wrapperRef: React.MutableRefObject<HTMLInputElement>;
24
+ popperInstRef: React.MutableRefObject<PopperOptionRef>;
25
+ selectDropdownRef: React.MutableRefObject<SelectDropdownRef>;
26
+ tagTooltipRef: React.MutableRefObject<TooltipRef>;
27
+ inputRef: React.MutableRefObject<HTMLInputElement>;
28
+ suffixWrapperRef: React.MutableRefObject<HTMLDivElement>;
29
+ inputValue: string;
30
+ setInputHovering: (hovering: boolean) => void;
31
+ setInputValue: React.Dispatch<React.SetStateAction<string>>;
32
+ setIsFocused: (focused: boolean) => void;
33
+ filterable: boolean;
34
+ clearable: boolean;
35
+ clearIcon: import("..").IconName;
36
+ multiple: boolean;
37
+ onChange: <T = any>(value: ValueType, data?: OptionData<T> | OptionData<T>[]) => void;
38
+ allowCreate: boolean;
39
+ onEnter: (node?: HTMLElement | Text) => void;
40
+ afterLeave: (node?: HTMLElement | Text) => void;
41
+ onVisibleChange: (visible: boolean) => void;
42
+ onRemoveTag: (tagValue: any) => void;
43
+ htmlInputProps: React.AllHTMLAttributes<any>;
44
+ transitionProps: import("..").TransitionProps;
45
+ popperProps: Partial<import("../Popper/typings").PopperProps>;
46
+ value: ValueType;
47
+ setValue: (value: ValueType) => void;
48
+ disabled: boolean;
49
+ size: import("..").TypeAttributes.Size;
50
+ optionData: OptionData<any>[];
51
+ multiValue: OptionValue[];
52
+ multiOptionData: OptionData<any>[];
53
+ selected: OptionData<any> | OptionData<any>[];
54
+ label: string;
55
+ visible: boolean;
56
+ setVisible: React.Dispatch<React.SetStateAction<boolean>>;
57
+ popperStyle: React.CSSProperties;
58
+ placeholder: string;
59
+ shouldShowPlaceholder: boolean;
60
+ handleEnter: (node: any) => void;
61
+ handleAfterLeave: (node?: any) => void;
62
+ toggleMenu: (event?: React.MouseEvent<HTMLSpanElement>) => void;
63
+ onCloseTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, item: OptionData) => void;
64
+ onClear: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
65
+ onChoose: (val: string, data: OptionData, event?: any) => string | OptionValue[];
66
+ labelFormat: (index: number, value: OptionValue, label?: OptionValue) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
67
+ iconComponent: import("..").IconName;
68
+ iconReverse: string;
69
+ isComposing: React.MutableRefObject<boolean>;
70
+ remote: boolean;
71
+ handleCompositionStart: (event: React.CompositionEvent<HTMLInputElement>) => void;
72
+ handleCompositionUpdate: (event: React.CompositionEvent<HTMLInputElement>) => void;
73
+ handleCompositionEnd: (event: React.CompositionEvent<HTMLInputElement>) => void;
74
+ cachedOptions: React.MutableRefObject<Map<OptionValue, OptionData<any>>>;
75
+ valueKey?: string;
76
+ filterMethod?: (searchText: string) => void;
77
+ noDataText?: string;
78
+ noMatchText?: string;
79
+ loading?: boolean;
80
+ loadingText?: string;
81
+ loadingIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
82
+ max?: boolean;
83
+ showArrow?: boolean;
84
+ required?: boolean;
85
+ error?: boolean;
86
+ warning?: boolean;
87
+ maxWidth?: number;
88
+ collapseTags?: boolean;
89
+ maxCollapseTags?: number;
90
+ collapseTagsTooltip?: boolean;
91
+ collapseTips?: (collapseNum: number, total: number) => string;
92
+ plain?: boolean;
93
+ prepend?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
94
+ append?: string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
95
+ appendToBody?: boolean;
96
+ remoteMethod?: (searchText: string) => void;
97
+ tagType?: import("..").TypeAttributes.Appearance;
98
+ tagEffect?: "light" | "dark" | "plain";
99
+ /** 获取所有的option组件 */
100
+ automaticDropdown?: boolean;
101
+ header?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
102
+ footer?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
103
+ tag?: <T_1 = any>(params: {
104
+ data: OptionData<T_1>[];
105
+ selectDisabled: boolean;
106
+ deleteTag: (event: React.MouseEvent<HTMLElement, MouseEvent>, tag: OptionData<T_1>) => void;
107
+ }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
108
+ unmountOnExit?: boolean;
109
+ name?: string;
110
+ readOnly?: boolean;
111
+ defaultValue?: ValueType;
112
+ classPrefix?: string;
113
+ children?: (React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>>[]) | (React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps, string | React.JSXElementConstructor<any>>[])[];
114
+ className?: string;
115
+ style?: React.CSSProperties & Partial<Record<never, string>>;
116
+ beforeEnter?: (node?: HTMLElement | Text) => void;
117
+ afterEnter?: (node?: HTMLElement | Text) => void;
118
+ beforeLeave?: (node?: HTMLElement | Text) => void;
119
+ onLeave?: (node?: HTMLElement | Text) => void;
120
+ offset?: number;
121
+ placement?: import("@popperjs/core/lib/enums").Placement;
122
+ arrowOffset?: number;
123
+ popperClass?: string;
124
+ effect?: string;
125
+ popperOptions?: import("@popperjs/core/lib/types").Options;
126
+ fallbackPlacements?: import("@popperjs/core/lib/enums").Placement[] | ((placement?: import("@popperjs/core/lib/enums").Placement) => import("@popperjs/core/lib/enums").Placement[]);
127
+ };
128
+ export default useSelect;