@hi-ui/tree-select 5.0.0-experimental.1 → 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 +23 -0
  2. package/lib/cjs/TreeSelect.js +40 -4
  3. package/lib/esm/TreeSelect.js +40 -4
  4. package/lib/types/TreeSelect.d.ts +7 -2
  5. package/package.json +12 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
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
+
3
26
  ## 5.0.0-experimental.1
4
27
 
5
28
  ### Patch 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');
@@ -96,11 +97,30 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
96
97
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
97
98
  renderExtraHeader = _a.renderExtraHeader,
98
99
  renderExtraFooter = _a.renderExtraFooter,
99
- 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"]);
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"]);
100
103
  var _useGlobalContext = core.useGlobalContext(),
101
- globalSize = _useGlobalContext.size;
104
+ globalSize = _useGlobalContext.size,
105
+ treeSelectConfig = _useGlobalContext.treeSelect;
102
106
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
103
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;
104
124
  var pickerInnerRef = React.useRef(null);
105
125
  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
106
126
  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
@@ -245,10 +265,25 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
245
265
  (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
246
266
  }
247
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
+ }, {});
248
281
  return /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
249
282
  ref: ref,
250
283
  innerRef: pickerInnerRef,
251
- className: cls
284
+ className: cls,
285
+ classNames: pickerClassNames,
286
+ styles: pickerStyles
252
287
  }, rest, {
253
288
  visible: menuVisible,
254
289
  disabled: disabled,
@@ -287,7 +322,8 @@ var TreeSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
287
322
  label: label
288
323
  }))
289
324
  }), typeAssertion.isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(tree.Tree, Object.assign({
290
- 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,
291
327
  selectable: true,
292
328
  selectedId: value,
293
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';
@@ -84,11 +85,30 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
84
85
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
85
86
  renderExtraHeader = _a.renderExtraHeader,
86
87
  renderExtraFooter = _a.renderExtraFooter,
87
- 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"]);
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"]);
88
91
  var _useGlobalContext = useGlobalContext(),
89
- globalSize = _useGlobalContext.size;
92
+ globalSize = _useGlobalContext.size,
93
+ treeSelectConfig = _useGlobalContext.treeSelect;
90
94
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
91
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;
92
112
  var pickerInnerRef = useRef(null);
93
113
  var placeholder = isUndef(placeholderProp) ? i18n.get('treeSelect.placeholder') : placeholderProp;
94
114
  var _useUncontrolledToggl = useUncontrolledToggle({
@@ -233,10 +253,25 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
233
253
  (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
234
254
  }
235
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
+ }, {});
236
269
  return /*#__PURE__*/React.createElement(Picker, Object.assign({
237
270
  ref: ref,
238
271
  innerRef: pickerInnerRef,
239
- className: cls
272
+ className: cls,
273
+ classNames: pickerClassNames,
274
+ styles: pickerStyles
240
275
  }, rest, {
241
276
  visible: menuVisible,
242
277
  disabled: disabled,
@@ -275,7 +310,8 @@ var TreeSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
275
310
  label: label
276
311
  }))
277
312
  }), isArrayNonEmpty(treeProps.data) ? ( /*#__PURE__*/React.createElement(Tree, Object.assign({
278
- 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,
279
315
  selectable: true,
280
316
  selectedId: value,
281
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
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tree-select",
3
- "version": "5.0.0-experimental.1",
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.1",
54
- "@hi-ui/picker": "^5.0.0-experimental.1",
55
- "@hi-ui/popper": "^5.0.0-experimental.0",
56
- "@hi-ui/tree": "^5.0.0-experimental.1",
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.1",
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
  }