@hi-ui/tree-select 5.0.0-experimental.0 → 5.0.0-experimental.2

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 (5) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/lib/cjs/TreeSelect.js +47 -9
  3. package/lib/esm/TreeSelect.js +47 -9
  4. package/lib/types/TreeSelect.d.ts +11 -2
  5. package/package.json +12 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,44 @@
1
1
  # @hi-ui/tree-select
2
2
 
3
+ ## 5.0.0-experimental.2
4
+
5
+ ### Minor Changes
6
+
7
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
+ - Updated dependencies [7f204c892]
13
+ - Updated dependencies [eb17c4697]
14
+ - Updated dependencies [eb17c4697]
15
+ - Updated dependencies [c407744fe]
16
+ - Updated dependencies [59cef699f]
17
+ - @hi-ui/icons@5.0.0-experimental.1
18
+ - @hi-ui/core@5.0.0-experimental.1
19
+ - @hi-ui/highlighter@5.0.0-experimental.1
20
+ - @hi-ui/input@5.0.0-experimental.2
21
+ - @hi-ui/picker@5.0.0-experimental.2
22
+ - @hi-ui/popper@5.0.0-experimental.1
23
+ - @hi-ui/tree@5.0.0-experimental.2
24
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
25
+
26
+ ## 5.0.0-experimental.1
27
+
28
+ ### Patch Changes
29
+
30
+ - 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
31
+ - 发布 hiui experimental 版本
32
+ - fe579e212: style(tree): update class names for tree node elements in SCSS (5.0)
33
+ - Updated dependencies [8f23e9322]
34
+ - Updated dependencies [b27483796]
35
+ - Updated dependencies [900c6c2f0]
36
+ - Updated dependencies
37
+ - Updated dependencies [fe579e212]
38
+ - @hi-ui/input@5.0.0-experimental.1
39
+ - @hi-ui/picker@5.0.0-experimental.1
40
+ - @hi-ui/tree@5.0.0-experimental.1
41
+
3
42
  ## 5.0.0-experimental.0
4
43
 
5
44
  ### Major Changes
package/lib/cjs/TreeSelect.js CHANGED
@@ -21,6 +21,7 @@ var useToggle = require('@hi-ui/use-toggle');
21
21
  var tree = require('@hi-ui/tree');
22
22
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
23
23
  var picker = require('@hi-ui/picker');
24
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
24
25
  var treeUtils = require('@hi-ui/tree-utils');
25
26
  var typeAssertion = require('@hi-ui/type-assertion');
26
27
  var arrayUtils = require('@hi-ui/array-utils');
@@ -45,7 +46,7 @@ var DEFAULT_EXPANDED_IDS = [];
45
46
  * 树形选择器
46
47
  */
47
48
  var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
48
- var _b;
49
+ var _b, _c;
49
50
  var _a$prefixCls = _a.prefixCls,
50
51
  prefixCls = _a$prefixCls === void 0 ? TREE_SELECT_PREFIX : _a$prefixCls,
51
52
  className = _a.className,
@@ -95,11 +96,31 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
95
96
  _a$showIndicator = _a.showIndicator,
96
97
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
97
98
  renderExtraHeader = _a.renderExtraHeader,
98
- 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", "clearSearchOnClosed", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "shouldShowSwitcher", "label", "showIndicator", "renderExtraHeader"]);
99
+ renderExtraFooter = _a.renderExtraFooter,
100
+ classNamesProp = _a.classNames,
101
+ stylesProp = _a.styles,
102
+ 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", "clearSearchOnClosed", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "shouldShowSwitcher", "label", "showIndicator", "renderExtraHeader", "renderExtraFooter", "classNames", "styles"]);
99
103
  var _useGlobalContext = core.useGlobalContext(),
100
- globalSize = _useGlobalContext.size;
104
+ globalSize = _useGlobalContext.size,
105
+ treeSelectConfig = _useGlobalContext.treeSelect;
101
106
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
102
107
  var i18n = core.useLocaleContext();
108
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
109
+ classNamesList: [treeSelectConfig === null || treeSelectConfig === void 0 ? void 0 : treeSelectConfig.classNames, classNamesProp],
110
+ stylesList: [treeSelectConfig === null || treeSelectConfig === void 0 ? void 0 : treeSelectConfig.styles, stylesProp],
111
+ info: {
112
+ props: Object.assign(Object.assign({}, rest), {
113
+ data: data,
114
+ disabled: disabled,
115
+ searchable: searchableProp,
116
+ visible: visible,
117
+ size: size,
118
+ appearance: appearance
119
+ })
120
+ }
121
+ }),
122
+ classNames = _useMergeSemantic.classNames,
123
+ styles = _useMergeSemantic.styles;
103
124
  var pickerInnerRef = React.useRef(null);
104
125
  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
105
126
  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
@@ -165,12 +186,12 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
165
186
  setSelectedItem = _useState[1];
166
187
  // ************************** 异步搜索 ************************* //
167
188
  // const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
168
- var _c = useSearchMode.useAsyncSearch({
189
+ var _d = useSearchMode.useAsyncSearch({
169
190
  dataSource: dataSource
170
191
  }),
171
- loading = _c.loading,
172
- hasError = _c.hasError,
173
- dataSourceStrategy = tslib.__rest(_c, ["loading", "hasError"]);
192
+ loading = _d.loading,
193
+ hasError = _d.hasError,
194
+ dataSourceStrategy = tslib.__rest(_d, ["loading", "hasError"]);
174
195
  var customSearchStrategy = useSearchMode.useTreeCustomSearch({
175
196
  data: data,
176
197
  filterOption: filterOption
@@ -244,10 +265,25 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
244
265
  (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
245
266
  }
246
267
  }, [menuVisible, treeProps.expandedIds]);
268
+ var pickerSemanticKeys = ['root', 'container', 'panel', 'header', 'search', 'body', 'footer', 'loading', 'empty', 'creator'];
269
+ var pickerClassNames = pickerSemanticKeys.reduce(function (acc, key) {
270
+ if ((classNames === null || classNames === void 0 ? void 0 : classNames[key]) !== undefined) {
271
+ acc[key] = classNames[key];
272
+ }
273
+ return acc;
274
+ }, {});
275
+ var pickerStyles = pickerSemanticKeys.reduce(function (acc, key) {
276
+ if (styles === null || styles === void 0 ? void 0 : styles[key]) {
277
+ acc[key] = styles[key];
278
+ }
279
+ return acc;
280
+ }, {});
247
281
  return /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
248
282
  ref: ref,
249
283
  innerRef: pickerInnerRef,
250
- className: cls
284
+ className: cls,
285
+ classNames: pickerClassNames,
286
+ styles: pickerStyles
251
287
  }, rest, {
252
288
  visible: menuVisible,
253
289
  disabled: disabled,
@@ -262,6 +298,7 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
262
298
  clearSearchOnClosed: clearSearchOnClosed,
263
299
  loading: rest.loading !== undefined ? rest.loading : loading,
264
300
  header: renderExtraHeader === null || renderExtraHeader === void 0 ? void 0 : renderExtraHeader(),
301
+ footer: (_c = rest.footer) !== null && _c !== void 0 ? _c : renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter(),
265
302
  trigger: customRender ? customRenderContent : ( /*#__PURE__*/React__default["default"].createElement(input.MockInput, {
266
303
  style: {
267
304
  maxWidth: appearance === 'contained' ? '360px' : undefined
@@ -285,7 +322,8 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
285
322
  label: label
286
323
  }))
287
324
  }), typeAssertion.isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(tree.Tree, Object.assign({
288
- className: prefixCls + "__tree",
325
+ className: classname.cx(prefixCls + "__tree", classNames === null || classNames === void 0 ? void 0 : classNames.tree),
326
+ style: styles === null || styles === void 0 ? void 0 : styles.tree,
289
327
  selectable: true,
290
328
  selectedId: value,
291
329
  onSelect: onSelect,
package/lib/esm/TreeSelect.js CHANGED
@@ -15,6 +15,7 @@ import { useUncontrolledToggle } from '@hi-ui/use-toggle';
15
15
  import { Tree } from '@hi-ui/tree';
16
16
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
17
17
  import { Picker } from '@hi-ui/picker';
18
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
18
19
  import { baseFlattenTree } from '@hi-ui/tree-utils';
19
20
  import { isUndef, isArrayNonEmpty } from '@hi-ui/type-assertion';
20
21
  import { uniqBy } from '@hi-ui/array-utils';
@@ -33,7 +34,7 @@ var DEFAULT_EXPANDED_IDS = [];
33
34
  * 树形选择器
34
35
  */
35
36
  var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
36
- var _b;
37
+ var _b, _c;
37
38
  var _a$prefixCls = _a.prefixCls,
38
39
  prefixCls = _a$prefixCls === void 0 ? TREE_SELECT_PREFIX : _a$prefixCls,
39
40
  className = _a.className,
@@ -83,11 +84,31 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
83
84
  _a$showIndicator = _a.showIndicator,
84
85
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
85
86
  renderExtraHeader = _a.renderExtraHeader,
86
- 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", "clearSearchOnClosed", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "shouldShowSwitcher", "label", "showIndicator", "renderExtraHeader"]);
87
+ renderExtraFooter = _a.renderExtraFooter,
88
+ classNamesProp = _a.classNames,
89
+ stylesProp = _a.styles,
90
+ 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", "clearSearchOnClosed", "clearable", "onClear", "invalid", "displayRender", "placeholder", "appearance", "virtual", "itemHeight", "height", "size", "prefix", "suffix", "customRender", "shouldShowSwitcher", "label", "showIndicator", "renderExtraHeader", "renderExtraFooter", "classNames", "styles"]);
87
91
  var _useGlobalContext = useGlobalContext(),
88
- globalSize = _useGlobalContext.size;
92
+ globalSize = _useGlobalContext.size,
93
+ treeSelectConfig = _useGlobalContext.treeSelect;
89
94
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
90
95
  var i18n = useLocaleContext();
96
+ var _useMergeSemantic = useMergeSemantic({
97
+ classNamesList: [treeSelectConfig === null || treeSelectConfig === void 0 ? void 0 : treeSelectConfig.classNames, classNamesProp],
98
+ stylesList: [treeSelectConfig === null || treeSelectConfig === void 0 ? void 0 : treeSelectConfig.styles, stylesProp],
99
+ info: {
100
+ props: Object.assign(Object.assign({}, rest), {
101
+ data: data,
102
+ disabled: disabled,
103
+ searchable: searchableProp,
104
+ visible: visible,
105
+ size: size,
106
+ appearance: appearance
107
+ })
108
+ }
109
+ }),
110
+ classNames = _useMergeSemantic.classNames,
111
+ styles = _useMergeSemantic.styles;
91
112
  var pickerInnerRef = useRef(null);
92
113
  var placeholder = isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
93
114
  var _useUncontrolledToggl = useUncontrolledToggle({
@@ -153,12 +174,12 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
153
174
  setSelectedItem = _useState[1];
154
175
  // ************************** 异步搜索 ************************* //
155
176
  // const { loading, hasError, loadRemoteData } = useDataSource({ dataSource, validate: isArray })
156
- var _c = useAsyncSearch({
177
+ var _d = useAsyncSearch({
157
178
  dataSource: dataSource
158
179
  }),
159
- loading = _c.loading,
160
- hasError = _c.hasError,
161
- dataSourceStrategy = __rest(_c, ["loading", "hasError"]);
180
+ loading = _d.loading,
181
+ hasError = _d.hasError,
182
+ dataSourceStrategy = __rest(_d, ["loading", "hasError"]);
162
183
  var customSearchStrategy = useTreeCustomSearch({
163
184
  data: data,
164
185
  filterOption: filterOption
@@ -232,10 +253,25 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
232
253
  (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
233
254
  }
234
255
  }, [menuVisible, treeProps.expandedIds]);
256
+ var pickerSemanticKeys = ['root', 'container', 'panel', 'header', 'search', 'body', 'footer', 'loading', 'empty', 'creator'];
257
+ var pickerClassNames = pickerSemanticKeys.reduce(function (acc, key) {
258
+ if ((classNames === null || classNames === void 0 ? void 0 : classNames[key]) !== undefined) {
259
+ acc[key] = classNames[key];
260
+ }
261
+ return acc;
262
+ }, {});
263
+ var pickerStyles = pickerSemanticKeys.reduce(function (acc, key) {
264
+ if (styles === null || styles === void 0 ? void 0 : styles[key]) {
265
+ acc[key] = styles[key];
266
+ }
267
+ return acc;
268
+ }, {});
235
269
  return /*#__PURE__*/React.createElement(Picker, Object.assign({
236
270
  ref: ref,
237
271
  innerRef: pickerInnerRef,
238
- className: cls
272
+ className: cls,
273
+ classNames: pickerClassNames,
274
+ styles: pickerStyles
239
275
  }, rest, {
240
276
  visible: menuVisible,
241
277
  disabled: disabled,
@@ -250,6 +286,7 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
250
286
  clearSearchOnClosed: clearSearchOnClosed,
251
287
  loading: rest.loading !== undefined ? rest.loading : loading,
252
288
  header: renderExtraHeader === null || renderExtraHeader === void 0 ? void 0 : renderExtraHeader(),
289
+ footer: (_c = rest.footer) !== null && _c !== void 0 ? _c : renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter(),
253
290
  trigger: customRender ? customRenderContent : ( /*#__PURE__*/React.createElement(MockInput, {
254
291
  style: {
255
292
  maxWidth: appearance === 'contained' ? '360px' : undefined
@@ -273,7 +310,8 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
273
310
  label: label
274
311
  }))
275
312
  }), isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React.createElement(Tree, Object.assign({
276
- className: prefixCls + "__tree",
313
+ className: cx(prefixCls + "__tree", classNames === null || classNames === void 0 ? void 0 : classNames.tree),
314
+ style: styles === null || styles === void 0 ? void 0 : styles.tree,
277
315
  selectable: true,
278
316
  selectedId: value,
279
317
  onSelect: onSelect,
package/lib/types/TreeSelect.d.ts CHANGED
@@ -1,14 +1,19 @@
1
1
  import React from 'react';
2
2
  import { TreeSelectDataItem, TreeSelectAppearanceEnum } from './types';
3
3
  import { TreeNodeEventData } from '@hi-ui/tree';
4
- import { PickerProps } from '@hi-ui/picker';
4
+ import { PickerProps, PickerSemanticName } from '@hi-ui/picker';
5
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
5
6
  import { HiBaseSizeEnum } from '@hi-ui/core';
6
7
  import { UseDataSource } from '@hi-ui/use-data-source';
7
8
  /**
8
9
  * 树形选择器
9
10
  */
10
11
  export declare const TreeSelect: React.ForwardRefExoticComponent<TreeSelectProps & React.RefAttributes<HTMLDivElement | null>>;
11
- export interface TreeSelectProps extends Omit<PickerProps, 'data' | 'onChange' | 'trigger' | 'scrollable' | 'header'> {
12
+ export type TreeSelectSemanticName = PickerSemanticName | 'tree';
13
+ export type TreeSelectSemanticClassNames = SemanticClassNamesType<TreeSelectProps, TreeSelectSemanticName>;
14
+ export type TreeSelectSemanticStyles = SemanticStylesType<TreeSelectProps, TreeSelectSemanticName>;
15
+ export type TreeSelectSemantic = ComponentSemantic<TreeSelectSemanticClassNames, TreeSelectSemanticStyles>;
16
+ export interface TreeSelectProps extends Omit<PickerProps, 'data' | 'onChange' | 'trigger' | 'scrollable' | 'header' | 'classNames' | 'styles'>, TreeSelectSemantic {
12
17
  /**
13
18
  * 展示数据
14
19
  */
@@ -157,4 +162,8 @@ export interface TreeSelectProps extends Omit<PickerProps, 'data' | 'onChange' |
157
162
  * 自定义下拉菜单顶部渲染
158
163
  */
159
164
  renderExtraHeader?: () => React.ReactNode;
165
+ /**
166
+ * 自定义下拉菜单底部渲染
167
+ */
168
+ renderExtraFooter?: () => React.ReactNode;
160
169
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tree-select",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-experimental.2",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -48,27 +48,28 @@
48
48
  "@hi-ui/classname": "^5.0.0-experimental.0",
49
49
  "@hi-ui/env": "^5.0.0-experimental.0",
50
50
  "@hi-ui/func-utils": "^5.0.0-experimental.0",
51
- "@hi-ui/highlighter": "^5.0.0-experimental.0",
52
- "@hi-ui/icons": "^5.0.0-experimental.0",
53
- "@hi-ui/input": "^5.0.0-experimental.0",
54
- "@hi-ui/picker": "^5.0.0-experimental.0",
55
- "@hi-ui/popper": "^5.0.0-experimental.0",
56
- "@hi-ui/tree": "^5.0.0-experimental.0",
51
+ "@hi-ui/highlighter": "^5.0.0-experimental.1",
52
+ "@hi-ui/icons": "^5.0.0-experimental.1",
53
+ "@hi-ui/input": "^5.0.0-experimental.2",
54
+ "@hi-ui/picker": "^5.0.0-experimental.2",
55
+ "@hi-ui/popper": "^5.0.0-experimental.1",
56
+ "@hi-ui/tree": "^5.0.0-experimental.2",
57
57
  "@hi-ui/tree-utils": "^5.0.0-experimental.0",
58
58
  "@hi-ui/type-assertion": "^5.0.0-experimental.0",
59
59
  "@hi-ui/use-data-source": "^5.0.0-experimental.0",
60
60
  "@hi-ui/use-search-mode": "^5.0.0-experimental.0",
61
61
  "@hi-ui/use-toggle": "^5.0.0-experimental.0",
62
- "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0"
62
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
63
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
63
64
  },
64
65
  "peerDependencies": {
65
- "@hi-ui/core": ">=5.0.0-experimental.0",
66
+ "@hi-ui/core": ">=5.0.0-experimental.1",
66
67
  "react": ">=16.8.6",
67
68
  "react-dom": ">=16.8.6"
68
69
  },
69
70
  "devDependencies": {
70
- "@hi-ui/core": "^5.0.0-experimental.0",
71
- "@hi-ui/core-css": "^5.0.0-experimental.0",
71
+ "@hi-ui/core": "^5.0.0-experimental.1",
72
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
72
73
  "react": "^17.0.1",
73
74
  "react-dom": "^17.0.1"
74
75
  }