@hi-ui/input 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 (6) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/lib/cjs/Input.js +30 -8
  3. package/lib/esm/Input.js +30 -8
  4. package/lib/types/Input.d.ts +6 -21
  5. package/lib/types/MockInput.d.ts +1 -1
  6. package/package.json +7 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @hi-ui/input
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
+ - @hi-ui/icons@5.0.0-experimental.1
17
+ - @hi-ui/core@5.0.0-experimental.1
18
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
19
+
3
20
  ## 5.0.0-experimental.1
4
21
 
5
22
  ### Patch Changes
package/lib/cjs/Input.js CHANGED
@@ -21,6 +21,7 @@ var useMergeRefs = require('@hi-ui/use-merge-refs');
21
21
  var icons = require('@hi-ui/icons');
22
22
  var core = require('@hi-ui/core');
23
23
  var useInput = require('./use-input.js');
24
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
24
25
  function _interopDefaultCompat(e) {
25
26
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
26
27
  'default': e
@@ -69,11 +70,12 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
69
70
  type = _a.type,
70
71
  containerRef = _a.containerRef,
71
72
  waitCompositionEnd = _a.waitCompositionEnd,
72
- styles = _a.styles,
73
- classNames = _a.classNames,
73
+ stylesProp = _a.styles,
74
+ classNamesProp = _a.classNames,
74
75
  rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef", "waitCompositionEnd", "styles", "classNames"]);
75
76
  var _useGlobalContext = core.useGlobalContext(),
76
- globalSize = _useGlobalContext.size;
77
+ globalSize = _useGlobalContext.size,
78
+ inputConfig = _useGlobalContext.input;
77
79
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
78
80
  // @TODO: 临时方案，后面迁移至 InputGroup
79
81
  var _useMemo = React.useMemo(function () {
@@ -130,21 +132,40 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
130
132
  setHover = _useState[1];
131
133
  // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
132
134
  var showClearableIcon = clearable && !!value && !disabled;
135
+ // 合并语义化类名和样式
136
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
137
+ classNamesList: [inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.classNames, classNamesProp],
138
+ stylesList: [inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.styles, stylesProp],
139
+ info: {
140
+ props: Object.assign(Object.assign({}, rest), {
141
+ size: size,
142
+ appearance: appearance,
143
+ disabled: disabled,
144
+ readOnly: readOnly,
145
+ invalid: invalid,
146
+ clearable: clearable
147
+ })
148
+ }
149
+ }),
150
+ classNames = _useMergeSemantic.classNames,
151
+ styles = _useMergeSemantic.styles;
133
152
  var mergedRef = useMergeRefs.useMergeRefs(ref, inputElementRef);
134
153
  var cls = classname.cx(prefixCls, className, prefixCls + "--size-" + size, prefixCls + "--appearance-" + appearance);
135
154
  var outerCls = classname.cx(prefixCls + "__outer", prepend && prefixCls + "__outer--prepend", prepend && unsetPrepend && prefixCls + "__outer--prepend-unset", append && prefixCls + "__outer--append", append && unsetAppend && prefixCls + "__outer--append-unset");
136
155
  return /*#__PURE__*/React__default["default"].createElement("div", {
137
156
  role: role,
138
- className: cls,
139
- style: style,
157
+ className: classname.cx(cls, classNames === null || classNames === void 0 ? void 0 : classNames.root),
158
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
140
159
  ref: containerRef
141
160
  }, /*#__PURE__*/React__default["default"].createElement("div", {
142
- className: outerCls
161
+ className: classname.cx(outerCls, classNames === null || classNames === void 0 ? void 0 : classNames.outer),
162
+ style: styles === null || styles === void 0 ? void 0 : styles.outer
143
163
  }, prepend ? ( /*#__PURE__*/React__default["default"].createElement("div", {
144
164
  className: classname.cx(prefixCls + "__prepend", classNames === null || classNames === void 0 ? void 0 : classNames.prepend),
145
165
  style: styles === null || styles === void 0 ? void 0 : styles.prepend
146
166
  }, prepend)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
147
- className: classname.cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && prefixCls + "__inner--focused", disabled && prefixCls + "__inner--disabled", readOnly && prefixCls + "__inner--readonly", invalid && prefixCls + "__inner--invalid"),
167
+ className: classname.cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && prefixCls + "__inner--focused", disabled && prefixCls + "__inner--disabled", readOnly && prefixCls + "__inner--readonly", invalid && prefixCls + "__inner--invalid", classNames === null || classNames === void 0 ? void 0 : classNames.inner),
168
+ style: styles === null || styles === void 0 ? void 0 : styles.inner,
148
169
  onMouseOver: function onMouseOver(e) {
149
170
  setHover(true);
150
171
  },
@@ -163,7 +184,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
163
184
  style: styles === null || styles === void 0 ? void 0 : styles.suffix
164
185
  }, showClearableIcon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
165
186
  ref: clearElementRef,
166
- className: classname.cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
187
+ className: classname.cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active", classNames === null || classNames === void 0 ? void 0 : classNames.clear),
188
+ style: styles === null || styles === void 0 ? void 0 : styles.clear,
167
189
  role: "button",
168
190
  tabIndex: -1,
169
191
  onClick: function onClick(evt) {
package/lib/esm/Input.js CHANGED
@@ -15,6 +15,7 @@ import { useMergeRefs } from '@hi-ui/use-merge-refs';
15
15
  import { CloseCircleFilled } from '@hi-ui/icons';
16
16
  import { useGlobalContext } from '@hi-ui/core';
17
17
  import { useInput } from './use-input.js';
18
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
18
19
  var _prefix = getPrefixCls('input');
19
20
  /**
20
21
  * 输入框
@@ -57,11 +58,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
57
58
  type = _a.type,
58
59
  containerRef = _a.containerRef,
59
60
  waitCompositionEnd = _a.waitCompositionEnd,
60
- styles = _a.styles,
61
- classNames = _a.classNames,
61
+ stylesProp = _a.styles,
62
+ classNamesProp = _a.classNames,
62
63
  rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef", "waitCompositionEnd", "styles", "classNames"]);
63
64
  var _useGlobalContext = useGlobalContext(),
64
- globalSize = _useGlobalContext.size;
65
+ globalSize = _useGlobalContext.size,
66
+ inputConfig = _useGlobalContext.input;
65
67
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
66
68
  // @TODO: 临时方案，后面迁移至 InputGroup
67
69
  var _useMemo = useMemo(function () {
@@ -118,21 +120,40 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
118
120
  setHover = _useState[1];
119
121
  // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
120
122
  var showClearableIcon = clearable && !!value && !disabled;
123
+ // 合并语义化类名和样式
124
+ var _useMergeSemantic = useMergeSemantic({
125
+ classNamesList: [inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.classNames, classNamesProp],
126
+ stylesList: [inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.styles, stylesProp],
127
+ info: {
128
+ props: Object.assign(Object.assign({}, rest), {
129
+ size: size,
130
+ appearance: appearance,
131
+ disabled: disabled,
132
+ readOnly: readOnly,
133
+ invalid: invalid,
134
+ clearable: clearable
135
+ })
136
+ }
137
+ }),
138
+ classNames = _useMergeSemantic.classNames,
139
+ styles = _useMergeSemantic.styles;
121
140
  var mergedRef = useMergeRefs(ref, inputElementRef);
122
141
  var cls = cx(prefixCls, className, prefixCls + "--size-" + size, prefixCls + "--appearance-" + appearance);
123
142
  var outerCls = cx(prefixCls + "__outer", prepend && prefixCls + "__outer--prepend", prepend && unsetPrepend && prefixCls + "__outer--prepend-unset", append && prefixCls + "__outer--append", append && unsetAppend && prefixCls + "__outer--append-unset");
124
143
  return /*#__PURE__*/React.createElement("div", {
125
144
  role: role,
126
- className: cls,
127
- style: style,
145
+ className: cx(cls, classNames === null || classNames === void 0 ? void 0 : classNames.root),
146
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
128
147
  ref: containerRef
129
148
  }, /*#__PURE__*/React.createElement("div", {
130
- className: outerCls
149
+ className: cx(outerCls, classNames === null || classNames === void 0 ? void 0 : classNames.outer),
150
+ style: styles === null || styles === void 0 ? void 0 : styles.outer
131
151
  }, prepend ? ( /*#__PURE__*/React.createElement("div", {
132
152
  className: cx(prefixCls + "__prepend", classNames === null || classNames === void 0 ? void 0 : classNames.prepend),
133
153
  style: styles === null || styles === void 0 ? void 0 : styles.prepend
134
154
  }, prepend)) : null, /*#__PURE__*/React.createElement("div", {
135
- className: cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && prefixCls + "__inner--focused", disabled && prefixCls + "__inner--disabled", readOnly && prefixCls + "__inner--readonly", invalid && prefixCls + "__inner--invalid"),
155
+ className: cx(prefixCls + "__inner", prefix && prefixCls + "__inner--prefix", suffix && prefixCls + "__inner--suffix", focused && prefixCls + "__inner--focused", disabled && prefixCls + "__inner--disabled", readOnly && prefixCls + "__inner--readonly", invalid && prefixCls + "__inner--invalid", classNames === null || classNames === void 0 ? void 0 : classNames.inner),
156
+ style: styles === null || styles === void 0 ? void 0 : styles.inner,
136
157
  onMouseOver: function onMouseOver(e) {
137
158
  setHover(true);
138
159
  },
@@ -151,7 +172,8 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
151
172
  style: styles === null || styles === void 0 ? void 0 : styles.suffix
152
173
  }, showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
153
174
  ref: clearElementRef,
154
- className: cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
175
+ className: cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active", classNames === null || classNames === void 0 ? void 0 : classNames.clear),
176
+ style: styles === null || styles === void 0 ? void 0 : styles.clear,
155
177
  role: "button",
156
178
  tabIndex: -1,
157
179
  onClick: function onClick(evt) {
package/lib/types/Input.d.ts CHANGED
@@ -1,11 +1,16 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLFieldProps, HiBaseSizeEnum } from '@hi-ui/core';
3
3
  import { InputAppearanceEnum, InputTypeEnum } from './types';
4
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
4
5
  /**
5
6
  * 输入框
6
7
  */
7
8
  export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | null>>;
8
- export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
9
+ export type InputSemanticName = 'root' | 'outer' | 'inner' | 'input' | 'prefix' | 'suffix' | 'prepend' | 'append' | 'clear';
10
+ export type InputSemanticClassNames = SemanticClassNamesType<InputProps, InputSemanticName>;
11
+ export type InputSemanticStyles = SemanticStylesType<InputProps, InputSemanticName>;
12
+ export type InputSemantic = ComponentSemantic<InputSemanticClassNames, InputSemanticStyles>;
13
+ export interface InputProps extends HiBaseHTMLFieldProps<'input'>, InputSemantic {
9
14
  /**
10
15
  * 开启输入框只读
11
16
  */
@@ -93,26 +98,6 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
93
98
  * 是否等待文本段落组成完成
94
99
  */
95
100
  waitCompositionEnd?: boolean;
96
- /**
97
- * 语义化样式设置
98
- */
99
- styles?: {
100
- input?: React.CSSProperties;
101
- prefix?: React.CSSProperties;
102
- suffix?: React.CSSProperties;
103
- prepend?: React.CSSProperties;
104
- append?: React.CSSProperties;
105
- };
106
- /**
107
- * 语义化样式类名设置
108
- */
109
- classNames?: {
110
- input?: string;
111
- prefix?: string;
112
- suffix?: string;
113
- prepend?: string;
114
- append?: string;
115
- };
116
101
  }
117
102
  /**
118
103
  * 模拟伪装目标事件 target
package/lib/types/MockInput.d.ts CHANGED
@@ -3,7 +3,7 @@ import type { HiBaseAppearanceEnum, HiBaseDataItem, HiBaseHTMLFieldProps } from
3
3
  /**
4
4
  * 支持自定义渲染输入框内容，暂时仅供内部 Picker 类组件使用，不对外提供
5
5
  */
6
- export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "readOnly" | "placeholder" | "defaultValue" | "onChange" | "type" | "focused" | "size" | "onSelect" | "title" | "prefix" | "data" | "label" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "onClear" | "displayRender" | "showIndicator"> & {
6
+ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "readOnly" | "placeholder" | "defaultValue" | "onChange" | "type" | "focused" | "size" | "onSelect" | "title" | "prefix" | "data" | "label" | "onClick" | "suffix" | "appearance" | "clearableTrigger" | "clearable" | "onClear" | "displayRender" | "showIndicator"> & {
7
7
  prefixCls?: string;
8
8
  role?: string;
9
9
  } & {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/input",
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,20 +48,21 @@
48
48
  "@hi-ui/dom-utils": "^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/icons": "^5.0.0-experimental.0",
51
+ "@hi-ui/icons": "^5.0.0-experimental.1",
52
52
  "@hi-ui/type-assertion": "^5.0.0-experimental.0",
53
53
  "@hi-ui/use-latest": "^5.0.0-experimental.0",
54
54
  "@hi-ui/use-merge-refs": "^5.0.0-experimental.0",
55
- "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0"
55
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
56
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
56
57
  },
57
58
  "peerDependencies": {
58
- "@hi-ui/core": ">=5.0.0-experimental.0",
59
+ "@hi-ui/core": ">=5.0.0-experimental.1",
59
60
  "react": ">=16.8.6",
60
61
  "react-dom": ">=16.8.6"
61
62
  },
62
63
  "devDependencies": {
63
- "@hi-ui/core": "^5.0.0-experimental.0",
64
- "@hi-ui/core-css": "^5.0.0-experimental.1",
64
+ "@hi-ui/core": "^5.0.0-experimental.1",
65
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
65
66
  "react": "^17.0.1",
66
67
  "react-dom": "^17.0.1"
67
68
  }