@hi-ui/tree-select 4.3.0 → 5.0.0-alpha.0

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/CHANGELOG.md CHANGED
@@ -1,5 +1,89 @@
1
1
  # @hi-ui/tree-select
2
2
 
3
+ ## 5.0.0-alpha.0
4
+
5
+ ### Major Changes
6
+
7
+ - 1b05b44a4: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
8
+
9
+ ### Minor Changes
10
+
11
+ - 77ed66eac: <br>
12
+ - feat(picker): 下拉选择类组件增加 xs 尺寸 (5.0)
13
+ - feat(input): 输入框组件增加 xs 尺寸 (5.0)
14
+ - 632dbda3a: feat: 下拉选择组件增加 showIndicator 参数 & 修改 appearance 中的 unset 样式 (5.0)
15
+ - 1b51c1bbe: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
16
+
17
+ ### Patch Changes
18
+
19
+ - eb5506b8d: style(picker): 移除 picker 组件中的 \_\_text 样式定义 (5.0)
20
+ - c3ec579cd: fix: 修改组件问题 (5.0)
21
+ - cfaf8c48d: perf: 对下拉选择类组件的 customRender 的内容增加 memoization 以优化性能 (5.0)
22
+ - 61d132802: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
23
+ - 9f2ee08cf: <br>
24
+ - style(tag-input): 间距调整 (5.0)
25
+ - style(select): 选择类组件选项圆角改为 4px (5.0)
26
+ - style(picker): 搜索框样式调整 (5.0)
27
+ - c125e4c48: fix: 修复 UI 问题 (5.0)
28
+ - Updated dependencies [abebb5eed]
29
+ - Updated dependencies [85bb84874]
30
+ - Updated dependencies [7bda04e64]
31
+ - Updated dependencies [5de7a848b]
32
+ - Updated dependencies [77ed66eac]
33
+ - Updated dependencies [ddd2acc79]
34
+ - Updated dependencies [5de7a848b]
35
+ - Updated dependencies [1b05b44a4]
36
+ - Updated dependencies [0cd15438e]
37
+ - Updated dependencies [eb69f0baa]
38
+ - Updated dependencies [a01771e8d]
39
+ - Updated dependencies [67960d871]
40
+ - Updated dependencies [de7f92b26]
41
+ - Updated dependencies [8116f0304]
42
+ - Updated dependencies [85bb84874]
43
+ - Updated dependencies [f5dd358d7]
44
+ - Updated dependencies [77ed66eac]
45
+ - Updated dependencies [632dbda3a]
46
+ - Updated dependencies [2c7c65a5a]
47
+ - Updated dependencies [36bb992d3]
48
+ - Updated dependencies [1b51c1bbe]
49
+ - Updated dependencies [61d132802]
50
+ - Updated dependencies [6ebf40f96]
51
+ - Updated dependencies [9f2ee08cf]
52
+ - Updated dependencies [6eac4b78b]
53
+ - Updated dependencies [85bb84874]
54
+ - Updated dependencies [bcd3d08dd]
55
+ - Updated dependencies [4fb586f6f]
56
+ - Updated dependencies [c125e4c48]
57
+ - Updated dependencies [b7ad460d8]
58
+ - Updated dependencies [df25ec39b]
59
+ - @hi-ui/picker@5.0.0-alpha.0
60
+ - @hi-ui/tree@5.0.0-alpha.0
61
+ - @hi-ui/input@5.0.0-alpha.0
62
+ - @hi-ui/core@5.0.0-alpha.0
63
+ - @hi-ui/use-data-source@5.0.0-alpha.0
64
+ - @hi-ui/use-search-mode@5.0.0-alpha.0
65
+ - @hi-ui/use-toggle@5.0.0-alpha.0
66
+ - @hi-ui/use-uncontrolled-state@5.0.0-alpha.0
67
+ - @hi-ui/icons@5.0.0-alpha.0
68
+ - @hi-ui/highlighter@5.0.0-alpha.0
69
+ - @hi-ui/popper@5.0.0-alpha.0
70
+ - @hi-ui/array-utils@5.0.0-alpha.0
71
+ - @hi-ui/classname@5.0.0-alpha.0
72
+ - @hi-ui/env@5.0.0-alpha.0
73
+ - @hi-ui/func-utils@5.0.0-alpha.0
74
+ - @hi-ui/tree-utils@5.0.0-alpha.0
75
+ - @hi-ui/type-assertion@5.0.0-alpha.0
76
+
77
+ ## 4.3.1
78
+
79
+ ### Patch Changes
80
+
81
+ - [#3196](https://github.com/XiaoMi/hiui/pull/3196) [`80a909d2d`](https://github.com/XiaoMi/hiui/commit/80a909d2dae99d68d71f2ec6f4b210080d032ec0) Thanks [@KEH3](https://github.com/KEH3)! - fix(popper): ref 中增加更新位置方法解决上游组件弹窗被遮挡问题 (#3195)
82
+
83
+ - Updated dependencies [[`80a909d2d`](https://github.com/XiaoMi/hiui/commit/80a909d2dae99d68d71f2ec6f4b210080d032ec0)]:
84
+ - @hi-ui/picker@4.1.8
85
+ - @hi-ui/popper@4.1.7
86
+
3
87
  ## 4.3.0
4
88
 
5
89
  ### Minor Changes
@@ -89,8 +89,12 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
89
89
  prefix = _a.prefix,
90
90
  suffix = _a.suffix,
91
91
  customRender = _a.customRender,
92
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender"]);
92
+ label = _a.label,
93
+ _a$showIndicator = _a.showIndicator,
94
+ showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
95
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "label", "showIndicator"]);
93
96
  var i18n = core.useLocaleContext();
97
+ var pickerInnerRef = React.useRef(null);
94
98
  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
95
99
  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
96
100
  visible: visible,
@@ -195,9 +199,9 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
195
199
  }
196
200
  // 本地搜索执行默认高亮规则
197
201
  var highlight = !!searchValue && (searchMode === 'highlight' || searchMode === 'filter');
198
- var ret = highlight ? /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
199
- keyword: searchValue
200
- }, node.title) : true;
202
+ var ret = highlight ? ( /*#__PURE__*/React__default["default"].createElement(highlighter.Highlighter, {
203
+ keyword: new RegExp(searchValue, 'ig')
204
+ }, node.title)) : true;
201
205
  return ret;
202
206
  }, [titleRender, searchValue, searchMode]);
203
207
  var shouldUseSearch = !!searchValue && !hasError;
@@ -221,9 +225,20 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
221
225
  }
222
226
  return flattedData;
223
227
  }, [selectedItem, flattedData]);
228
+ var customRenderContent = React.useMemo(function () {
229
+ return customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : null;
230
+ }, [customRender, selectedItem]);
224
231
  var cls = classname.cx(prefixCls, className);
232
+ React.useEffect(function () {
233
+ var _a;
234
+ if (menuVisible) {
235
+ // 数据改变时更新弹窗显示位置,避免弹窗内容被遮挡
236
+ (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
237
+ }
238
+ }, [menuVisible, treeProps.expandedIds]);
225
239
  return /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
226
240
  ref: ref,
241
+ innerRef: pickerInnerRef,
227
242
  className: cls
228
243
  }, rest, {
229
244
  visible: menuVisible,
@@ -237,9 +252,10 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
237
252
  keyword: keywordProp,
238
253
  onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
239
254
  loading: rest.loading !== undefined ? rest.loading : loading,
240
- trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : ( /*#__PURE__*/React__default["default"].createElement(input.MockInput
241
- // disabled={disabled}
242
- , {
255
+ trigger: customRender ? customRenderContent : ( /*#__PURE__*/React__default["default"].createElement(input.MockInput, {
256
+ style: {
257
+ maxWidth: appearance === 'contained' ? '360px' : undefined
258
+ },
243
259
  // disabled={disabled}
244
260
  size: size,
245
261
  clearable: clearable,
@@ -247,6 +263,7 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
247
263
  placeholder: placeholder,
248
264
  displayRender: displayRenderProp,
249
265
  prefix: prefix,
266
+ showIndicator: showIndicator,
250
267
  suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
251
268
  focused: menuVisible,
252
269
  value: value,
@@ -254,7 +271,8 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
254
271
  data: mergedData,
255
272
  // @ts-ignore
256
273
  invalid: invalid,
257
- appearance: appearance
274
+ appearance: appearance,
275
+ label: label
258
276
  }))
259
277
  }), typeAssertion.isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(tree.Tree, Object.assign({
260
278
  size: 'md',
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "";
15
+ var css_248z = ".hi-v5-tree-select__tree .hi-v5-tree-node__wrap {border-radius: var(--hi-v5-border-radius-md, 4px);}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import { __rest } from 'tslib';
11
- import React, { forwardRef, useCallback, useMemo, useState } from 'react';
11
+ import React, { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledToggle } from '@hi-ui/use-toggle';
@@ -77,8 +77,12 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
77
77
  prefix = _a.prefix,
78
78
  suffix = _a.suffix,
79
79
  customRender = _a.customRender,
80
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender"]);
80
+ label = _a.label,
81
+ _a$showIndicator = _a.showIndicator,
82
+ showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
83
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "dataSource", "disabled", "visible", "onOpen", "onClose", "fieldNames", "defaultExpandAll", "expandedIds", "defaultExpandedIds", "onExpand", "defaultValue", "value", "onChange", "searchable", "searchMode", "onLoadChildren", "render", "filterOption", "keyword", "onSearch", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "label", "showIndicator"]);
81
84
  var i18n = useLocaleContext();
85
+ var pickerInnerRef = useRef(null);
82
86
  var placeholder = isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
83
87
  var _useUncontrolledToggl = useUncontrolledToggle({
84
88
  visible: visible,
@@ -183,9 +187,9 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
183
187
  }
184
188
  // 本地搜索执行默认高亮规则
185
189
  var highlight = !!searchValue && (searchMode === 'highlight' || searchMode === 'filter');
186
- var ret = highlight ? /*#__PURE__*/React.createElement(Highlighter, {
187
- keyword: searchValue
188
- }, node.title) : true;
190
+ var ret = highlight ? ( /*#__PURE__*/React.createElement(Highlighter, {
191
+ keyword: new RegExp(searchValue, 'ig')
192
+ }, node.title)) : true;
189
193
  return ret;
190
194
  }, [titleRender, searchValue, searchMode]);
191
195
  var shouldUseSearch = !!searchValue && !hasError;
@@ -209,9 +213,20 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
209
213
  }
210
214
  return flattedData;
211
215
  }, [selectedItem, flattedData]);
216
+ var customRenderContent = useMemo(function () {
217
+ return customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : null;
218
+ }, [customRender, selectedItem]);
212
219
  var cls = cx(prefixCls, className);
220
+ useEffect(function () {
221
+ var _a;
222
+ if (menuVisible) {
223
+ // 数据改变时更新弹窗显示位置,避免弹窗内容被遮挡
224
+ (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
225
+ }
226
+ }, [menuVisible, treeProps.expandedIds]);
213
227
  return /*#__PURE__*/React.createElement(Picker, Object.assign({
214
228
  ref: ref,
229
+ innerRef: pickerInnerRef,
215
230
  className: cls
216
231
  }, rest, {
217
232
  visible: menuVisible,
@@ -225,9 +240,10 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
225
240
  keyword: keywordProp,
226
241
  onSearch: callAllFuncs(onSearchProp, onSearch),
227
242
  loading: rest.loading !== undefined ? rest.loading : loading,
228
- trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItem) : customRender : ( /*#__PURE__*/React.createElement(MockInput
229
- // disabled={disabled}
230
- , {
243
+ trigger: customRender ? customRenderContent : ( /*#__PURE__*/React.createElement(MockInput, {
244
+ style: {
245
+ maxWidth: appearance === 'contained' ? '360px' : undefined
246
+ },
231
247
  // disabled={disabled}
232
248
  size: size,
233
249
  clearable: clearable,
@@ -235,6 +251,7 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
235
251
  placeholder: placeholder,
236
252
  displayRender: displayRenderProp,
237
253
  prefix: prefix,
254
+ showIndicator: showIndicator,
238
255
  suffix: [menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null), suffix],
239
256
  focused: menuVisible,
240
257
  value: value,
@@ -242,7 +259,8 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
242
259
  data: mergedData,
243
260
  // @ts-ignore
244
261
  invalid: invalid,
245
- appearance: appearance
262
+ appearance: appearance,
263
+ label: label
246
264
  }))
247
265
  }), isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React.createElement(Tree, Object.assign({
248
266
  size: 'md',
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- var css_248z = "";
11
+ var css_248z = ".hi-v5-tree-select__tree .hi-v5-tree-node__wrap {border-radius: var(--hi-v5-border-radius-md, 4px);}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import { TreeSelectDataItem } from './types';
2
+ import { TreeSelectDataItem, TreeSelectAppearanceEnum } from './types';
3
3
  import { TreeNodeEventData } from '@hi-ui/tree';
4
4
  import { PickerProps } from '@hi-ui/picker';
5
- import { HiBaseAppearanceEnum, HiBaseSizeEnum } from '@hi-ui/core';
5
+ import { HiBaseSizeEnum } from '@hi-ui/core';
6
6
  import { UseDataSource } from '@hi-ui/use-data-source';
7
7
  /**
8
8
  * 树形选择器
@@ -109,7 +109,11 @@ export interface TreeSelectProps extends Omit<PickerProps, 'data' | 'onChange' |
109
109
  /**
110
110
  * 设置展现形式
111
111
  */
112
- appearance?: HiBaseAppearanceEnum;
112
+ appearance?: TreeSelectAppearanceEnum;
113
+ /**
114
+ * 设置输入框 label 内容,仅在 appearance 为 contained 时生效
115
+ */
116
+ label?: React.ReactNode;
113
117
  /**
114
118
  * 设置虚拟滚动容器的可视高度。暂不对外暴露
115
119
  * @private
@@ -140,4 +144,8 @@ export interface TreeSelectProps extends Omit<PickerProps, 'data' | 'onChange' |
140
144
  * 自定义触发器
141
145
  */
142
146
  customRender?: React.ReactNode | ((selectedItem: TreeSelectDataItem | null) => React.ReactNode);
147
+ /**
148
+ * 是否展示箭头
149
+ */
150
+ showIndicator?: boolean;
143
151
  }
@@ -1,4 +1,4 @@
1
- import { HiBaseDataItem } from '@hi-ui/core';
1
+ import { HiBaseAppearanceEnum, HiBaseDataItem } from '@hi-ui/core';
2
2
  import React from 'react';
3
3
  export interface TreeSelectDataItem extends HiBaseDataItem {
4
4
  /**
@@ -48,3 +48,4 @@ export interface TreeSelectDataSource<T = any> {
48
48
  */
49
49
  transformResponse?: (response: object) => T;
50
50
  }
51
+ export declare type TreeSelectAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tree-select",
3
- "version": "4.3.0",
3
+ "version": "5.0.0-alpha.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -19,6 +19,7 @@
19
19
  "typings": "lib/types/index.d.ts",
20
20
  "exports": {
21
21
  ".": {
22
+ "types": "./lib/types/index.d.ts",
22
23
  "require": "./lib/cjs/index.js",
23
24
  "default": "./lib/esm/index.js"
24
25
  }
@@ -43,31 +44,31 @@
43
44
  "url": "https://github.com/XiaoMi/hiui/issues"
44
45
  },
45
46
  "dependencies": {
46
- "@hi-ui/array-utils": "^4.0.5",
47
- "@hi-ui/classname": "^4.0.5",
48
- "@hi-ui/env": "^4.0.5",
49
- "@hi-ui/func-utils": "^4.0.4",
50
- "@hi-ui/highlighter": "^4.1.2",
51
- "@hi-ui/icons": "^4.0.19",
52
- "@hi-ui/input": "^4.4.0",
53
- "@hi-ui/picker": "^4.1.6",
54
- "@hi-ui/popper": "^4.1.5",
55
- "@hi-ui/tree": "^4.6.1",
56
- "@hi-ui/tree-utils": "^4.1.4",
57
- "@hi-ui/type-assertion": "^4.0.4",
58
- "@hi-ui/use-data-source": "^4.0.4",
59
- "@hi-ui/use-search-mode": "^4.1.4",
60
- "@hi-ui/use-toggle": "^4.0.4",
61
- "@hi-ui/use-uncontrolled-state": "^4.0.4"
47
+ "@hi-ui/array-utils": "^5.0.0-alpha.0",
48
+ "@hi-ui/classname": "^5.0.0-alpha.0",
49
+ "@hi-ui/env": "^5.0.0-alpha.0",
50
+ "@hi-ui/func-utils": "^5.0.0-alpha.0",
51
+ "@hi-ui/highlighter": "^5.0.0-alpha.0",
52
+ "@hi-ui/icons": "^5.0.0-alpha.0",
53
+ "@hi-ui/input": "^5.0.0-alpha.0",
54
+ "@hi-ui/picker": "^5.0.0-alpha.0",
55
+ "@hi-ui/popper": "^5.0.0-alpha.0",
56
+ "@hi-ui/tree": "^5.0.0-alpha.0",
57
+ "@hi-ui/tree-utils": "^5.0.0-alpha.0",
58
+ "@hi-ui/type-assertion": "^5.0.0-alpha.0",
59
+ "@hi-ui/use-data-source": "^5.0.0-alpha.0",
60
+ "@hi-ui/use-search-mode": "^5.0.0-alpha.0",
61
+ "@hi-ui/use-toggle": "^5.0.0-alpha.0",
62
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-alpha.0"
62
63
  },
63
64
  "peerDependencies": {
64
- "@hi-ui/core": ">=4.0.8",
65
+ "@hi-ui/core": ">=5.0.0-alpha.0",
65
66
  "react": ">=16.8.6",
66
67
  "react-dom": ">=16.8.6"
67
68
  },
68
69
  "devDependencies": {
69
- "@hi-ui/core": "^4.0.8",
70
- "@hi-ui/core-css": "^4.1.5",
70
+ "@hi-ui/core": "^5.0.0-alpha.0",
71
+ "@hi-ui/core-css": "^5.0.0-alpha.0",
71
72
  "react": "^17.0.1",
72
73
  "react-dom": "^17.0.1"
73
74
  }