@hi-ui/dropdown 5.0.0-experimental.0 → 5.0.0-experimental.1

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 +20 -0
  2. package/lib/cjs/Dropdown.js +46 -10
  3. package/lib/esm/Dropdown.js +46 -10
  4. package/lib/types/Dropdown.d.ts +6 -1
  5. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @hi-ui/dropdown
2
2
 
3
+ ## 5.0.0-experimental.1
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/button@5.0.0-experimental.1
20
+ - @hi-ui/popper@5.0.0-experimental.1
21
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
22
+
3
23
  ## 5.0.0-experimental.0
4
24
 
5
25
  ### Major Changes
package/lib/cjs/Dropdown.js CHANGED
@@ -25,6 +25,7 @@ var typeAssertion = require('@hi-ui/type-assertion');
25
25
  var Button = require('@hi-ui/button');
26
26
  var icons = require('@hi-ui/icons');
27
27
  var index = require('./utils/index.js');
28
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
28
29
  function _interopDefaultCompat(e) {
29
30
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
30
31
  'default': e
@@ -45,6 +46,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
45
46
  _a$role = _a.role,
46
47
  role = _a$role === void 0 ? _role : _a$role,
47
48
  className = _a.className,
49
+ style = _a.style,
50
+ classNamesProp = _a.classNames,
51
+ stylesProp = _a.styles,
48
52
  triggerButton = _a.children,
49
53
  _a$data = _a.data,
50
54
  data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
@@ -56,7 +60,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
56
60
  onButtonClick = _a.onButtonClick,
57
61
  overlayClassName = _a.overlayClassName,
58
62
  sizeProp = _a.size,
59
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
63
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
60
64
  var transformedData = React.useMemo(function () {
61
65
  return index.transformData(data, fieldNames);
62
66
  }, [data, fieldNames]);
@@ -68,13 +72,28 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
68
72
  disabled = providedValue.disabled,
69
73
  menuVisible = providedValue.menuVisible,
70
74
  menuVisibleAction = providedValue.menuVisibleAction;
71
- var cls = classname.cx(prefixCls, className, disabled && prefixCls + "--disabled");
72
75
  var _useGlobalContext = core.useGlobalContext(),
73
- globalSize = _useGlobalContext.size;
76
+ globalSize = _useGlobalContext.size,
77
+ dropdownConfig = _useGlobalContext.dropdown;
74
78
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
75
79
  if (size === 'xs') {
76
80
  size = 'sm';
77
81
  }
82
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
83
+ classNamesList: [dropdownConfig === null || dropdownConfig === void 0 ? void 0 : dropdownConfig.classNames, classNamesProp],
84
+ stylesList: [dropdownConfig === null || dropdownConfig === void 0 ? void 0 : dropdownConfig.styles, stylesProp],
85
+ info: {
86
+ props: Object.assign(Object.assign({}, rest), {
87
+ title: title,
88
+ type: type,
89
+ size: size,
90
+ disabled: disabled
91
+ })
92
+ }
93
+ }),
94
+ classNames = _useMergeSemantic.classNames,
95
+ styles = _useMergeSemantic.styles;
96
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, disabled && prefixCls + "--disabled");
78
97
  var dig = function dig(treeData) {
79
98
  return treeData.map(function (item) {
80
99
  var menu = typeAssertion.isArrayNonEmpty(item.children) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
@@ -96,6 +115,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
96
115
  target: item.target,
97
116
  value: item.id,
98
117
  menu: menu,
118
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.menuItem,
119
+ style: styles === null || styles === void 0 ? void 0 : styles.menuItem,
99
120
  onClick: function onClick(evt) {
100
121
  evt.stopPropagation();
101
122
  if (item.disabled) return;
@@ -108,13 +129,24 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
108
129
  });
109
130
  };
110
131
  var renderButton = function renderButton() {
111
- if (triggerButton) {
132
+ if (triggerButton && /*#__PURE__*/React__default["default"].isValidElement(triggerButton)) {
133
+ // @ts-ignore
134
+ return /*#__PURE__*/React.cloneElement(triggerButton,
112
135
  // @ts-ignore
113
- return /*#__PURE__*/React.cloneElement(triggerButton, getTriggerProps(triggerButton.props, triggerButton.ref));
136
+ getTriggerProps(Object.assign(Object.assign({}, triggerButton.props), {
137
+ // @ts-ignore
138
+ className: classname.cx(triggerButton.props.className, classNames === null || classNames === void 0 ? void 0 : classNames.trigger),
139
+ // @ts-ignore
140
+ style: Object.assign(Object.assign({}, triggerButton.props.style), styles === null || styles === void 0 ? void 0 : styles.trigger)
141
+ }),
142
+ // @ts-ignore
143
+ triggerButton.ref));
114
144
  }
115
145
  if (type === 'text' || type === 'button') {
116
146
  return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({}, getTriggerProps(), {
117
- appearance: type === 'button' ? 'line' : 'link'
147
+ appearance: type === 'button' ? 'line' : 'link',
148
+ className: classname.cx(classNames === null || classNames === void 0 ? void 0 : classNames.trigger),
149
+ style: styles === null || styles === void 0 ? void 0 : styles.trigger
118
150
  }), title, /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, {
119
151
  style: {
120
152
  marginInlineStart: 2,
@@ -126,7 +158,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
126
158
  return /*#__PURE__*/React__default["default"].createElement(Button.ButtonGroup, null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
127
159
  onClick: onButtonClick
128
160
  }, title), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
129
- className: classname.cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
161
+ className: classname.cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap", classNames === null || classNames === void 0 ? void 0 : classNames.trigger),
162
+ style: styles === null || styles === void 0 ? void 0 : styles.trigger
130
163
  }, getTriggerProps(), {
131
164
  icon: /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, {
132
165
  style: {
@@ -142,15 +175,18 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_a, ref) {
142
175
  }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
143
176
  ref: ref,
144
177
  role: role,
145
- className: cls
178
+ className: cls,
179
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
146
180
  }, rootProps), renderButton(), typeAssertion.isArrayNonEmpty(transformedData) ? ( /*#__PURE__*/React__default["default"].createElement(DropdownMenu, Object.assign({}, getMenuProps({
147
181
  overlay: {
148
182
  disabledPortal: false,
149
- className: overlayClassName,
183
+ className: classname.cx(overlayClassName, classNames === null || classNames === void 0 ? void 0 : classNames.menu),
150
184
  gutterGap: 4
151
185
  }
152
186
  }), {
153
- size: size
187
+ size: size,
188
+ className: classname.cx(classNames === null || classNames === void 0 ? void 0 : classNames.menu),
189
+ style: styles === null || styles === void 0 ? void 0 : styles.menu
154
190
  }), dig(transformedData))) : null));
155
191
  });
156
192
  if (env.__DEV__) {
package/lib/esm/Dropdown.js CHANGED
@@ -19,6 +19,7 @@ import { isArrayNonEmpty, isArray } from '@hi-ui/type-assertion';
19
19
  import Button, { ButtonGroup } from '@hi-ui/button';
20
20
  import { DownOutlined } from '@hi-ui/icons';
21
21
  import { transformData } from './utils/index.js';
22
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
22
23
  var _role = 'dropdown';
23
24
  var _prefix = getPrefixCls(_role);
24
25
  var DEFAULT_DATA = [];
@@ -32,6 +33,9 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
32
33
  _a$role = _a.role,
33
34
  role = _a$role === void 0 ? _role : _a$role,
34
35
  className = _a.className,
36
+ style = _a.style,
37
+ classNamesProp = _a.classNames,
38
+ stylesProp = _a.styles,
35
39
  triggerButton = _a.children,
36
40
  _a$data = _a.data,
37
41
  data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
@@ -43,7 +47,7 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
43
47
  onButtonClick = _a.onButtonClick,
44
48
  overlayClassName = _a.overlayClassName,
45
49
  sizeProp = _a.size,
46
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
50
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "data", "fieldNames", "title", "type", "onClick", "onButtonClick", "overlayClassName", "size"]);
47
51
  var transformedData = useMemo(function () {
48
52
  return transformData(data, fieldNames);
49
53
  }, [data, fieldNames]);
@@ -55,13 +59,28 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
55
59
  disabled = providedValue.disabled,
56
60
  menuVisible = providedValue.menuVisible,
57
61
  menuVisibleAction = providedValue.menuVisibleAction;
58
- var cls = cx(prefixCls, className, disabled && prefixCls + "--disabled");
59
62
  var _useGlobalContext = useGlobalContext(),
60
- globalSize = _useGlobalContext.size;
63
+ globalSize = _useGlobalContext.size,
64
+ dropdownConfig = _useGlobalContext.dropdown;
61
65
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
62
66
  if (size === 'xs') {
63
67
  size = 'sm';
64
68
  }
69
+ var _useMergeSemantic = useMergeSemantic({
70
+ classNamesList: [dropdownConfig === null || dropdownConfig === void 0 ? void 0 : dropdownConfig.classNames, classNamesProp],
71
+ stylesList: [dropdownConfig === null || dropdownConfig === void 0 ? void 0 : dropdownConfig.styles, stylesProp],
72
+ info: {
73
+ props: Object.assign(Object.assign({}, rest), {
74
+ title: title,
75
+ type: type,
76
+ size: size,
77
+ disabled: disabled
78
+ })
79
+ }
80
+ }),
81
+ classNames = _useMergeSemantic.classNames,
82
+ styles = _useMergeSemantic.styles;
83
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, disabled && prefixCls + "--disabled");
65
84
  var dig = function dig(treeData) {
66
85
  return treeData.map(function (item) {
67
86
  var menu = isArrayNonEmpty(item.children) ? ( /*#__PURE__*/React.createElement(DropdownMenu, {
@@ -83,6 +102,8 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
83
102
  target: item.target,
84
103
  value: item.id,
85
104
  menu: menu,
105
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.menuItem,
106
+ style: styles === null || styles === void 0 ? void 0 : styles.menuItem,
86
107
  onClick: function onClick(evt) {
87
108
  evt.stopPropagation();
88
109
  if (item.disabled) return;
@@ -95,13 +116,24 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
95
116
  });
96
117
  };
97
118
  var renderButton = function renderButton() {
98
- if (triggerButton) {
119
+ if (triggerButton && /*#__PURE__*/React.isValidElement(triggerButton)) {
120
+ // @ts-ignore
121
+ return /*#__PURE__*/cloneElement(triggerButton,
99
122
  // @ts-ignore
100
- return /*#__PURE__*/cloneElement(triggerButton, getTriggerProps(triggerButton.props, triggerButton.ref));
123
+ getTriggerProps(Object.assign(Object.assign({}, triggerButton.props), {
124
+ // @ts-ignore
125
+ className: cx(triggerButton.props.className, classNames === null || classNames === void 0 ? void 0 : classNames.trigger),
126
+ // @ts-ignore
127
+ style: Object.assign(Object.assign({}, triggerButton.props.style), styles === null || styles === void 0 ? void 0 : styles.trigger)
128
+ }),
129
+ // @ts-ignore
130
+ triggerButton.ref));
101
131
  }
102
132
  if (type === 'text' || type === 'button') {
103
133
  return /*#__PURE__*/React.createElement(Button, Object.assign({}, getTriggerProps(), {
104
- appearance: type === 'button' ? 'line' : 'link'
134
+ appearance: type === 'button' ? 'line' : 'link',
135
+ className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.trigger),
136
+ style: styles === null || styles === void 0 ? void 0 : styles.trigger
105
137
  }), title, /*#__PURE__*/React.createElement(DownOutlined, {
106
138
  style: {
107
139
  marginInlineStart: 2,
@@ -113,7 +145,8 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
113
145
  return /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
114
146
  onClick: onButtonClick
115
147
  }, title), /*#__PURE__*/React.createElement(Button, Object.assign({
116
- className: cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap")
148
+ className: cx(prefixCls + "__icon", prefixCls + "__icon-btn-wrap", classNames === null || classNames === void 0 ? void 0 : classNames.trigger),
149
+ style: styles === null || styles === void 0 ? void 0 : styles.trigger
117
150
  }, getTriggerProps(), {
118
151
  icon: /*#__PURE__*/React.createElement(DownOutlined, {
119
152
  style: {
@@ -129,15 +162,18 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
129
162
  }, /*#__PURE__*/React.createElement("div", Object.assign({
130
163
  ref: ref,
131
164
  role: role,
132
- className: cls
165
+ className: cls,
166
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
133
167
  }, rootProps), renderButton(), isArrayNonEmpty(transformedData) ? ( /*#__PURE__*/React.createElement(DropdownMenu, Object.assign({}, getMenuProps({
134
168
  overlay: {
135
169
  disabledPortal: false,
136
- className: overlayClassName,
170
+ className: cx(overlayClassName, classNames === null || classNames === void 0 ? void 0 : classNames.menu),
137
171
  gutterGap: 4
138
172
  }
139
173
  }), {
140
- size: size
174
+ size: size,
175
+ className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.menu),
176
+ style: styles === null || styles === void 0 ? void 0 : styles.menu
141
177
  }), dig(transformedData))) : null));
142
178
  });
143
179
  if (__DEV__) {
package/lib/types/Dropdown.d.ts CHANGED
@@ -3,11 +3,16 @@ import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
3
3
  import { PopperOverlayProps } from '@hi-ui/popper';
4
4
  import { UseDropdownProps } from './use-dropdown';
5
5
  import { DropdownDataItem } from './types';
6
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
6
7
  /**
7
8
  * 下拉菜单
8
9
  */
9
10
  export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement | null>>;
10
- export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, UseDropdownProps {
11
+ export type DropdownSemanticName = 'root' | 'trigger' | 'menu' | 'menuItem';
12
+ export type DropdownSemanticClassNames = SemanticClassNamesType<DropdownProps, DropdownSemanticName>;
13
+ export type DropdownSemanticStyles = SemanticStylesType<DropdownProps, DropdownSemanticName>;
14
+ export type DropdownSemantic = ComponentSemantic<DropdownSemanticClassNames, DropdownSemanticStyles>;
15
+ export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, UseDropdownProps, DropdownSemantic {
11
16
  /**
12
17
  * 下拉菜单显示标题的内容
13
18
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/dropdown",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-experimental.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,27 +44,28 @@
44
44
  "url": "https://github.com/XiaoMi/hiui/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@hi-ui/button": "^5.0.0-experimental.0",
47
+ "@hi-ui/button": "^5.0.0-experimental.1",
48
48
  "@hi-ui/classname": "^5.0.0-experimental.0",
49
49
  "@hi-ui/dom-utils": "^5.0.0-experimental.0",
50
50
  "@hi-ui/env": "^5.0.0-experimental.0",
51
- "@hi-ui/icons": "^5.0.0-experimental.0",
52
- "@hi-ui/popper": "^5.0.0-experimental.0",
51
+ "@hi-ui/icons": "^5.0.0-experimental.1",
52
+ "@hi-ui/popper": "^5.0.0-experimental.1",
53
53
  "@hi-ui/react-utils": "^5.0.0-experimental.0",
54
54
  "@hi-ui/type-assertion": "^5.0.0-experimental.0",
55
55
  "@hi-ui/use-latest": "^5.0.0-experimental.0",
56
56
  "@hi-ui/use-timeout": "^5.0.0-experimental.0",
57
57
  "@hi-ui/use-toggle": "^5.0.0-experimental.0",
58
- "@hi-ui/use-unmount-effect": "^5.0.0-experimental.0"
58
+ "@hi-ui/use-unmount-effect": "^5.0.0-experimental.0",
59
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
59
60
  },
60
61
  "peerDependencies": {
61
- "@hi-ui/core": ">=5.0.0-experimental.0",
62
+ "@hi-ui/core": ">=5.0.0-experimental.1",
62
63
  "react": ">=16.8.6",
63
64
  "react-dom": ">=16.8.6"
64
65
  },
65
66
  "devDependencies": {
66
- "@hi-ui/core": "^5.0.0-experimental.0",
67
- "@hi-ui/core-css": "^5.0.0-experimental.0",
67
+ "@hi-ui/core": "^5.0.0-experimental.1",
68
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
68
69
  "react": "^17.0.1",
69
70
  "react-dom": "^17.0.1"
70
71
  }