@hi-ui/input 5.0.0-canary.6 → 5.0.0-canary.8

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,28 @@
1
1
  # @hi-ui/input
2
2
 
3
+ ## 5.0.0-canary.8
4
+
5
+ ### Minor Changes
6
+
7
+ - ab2d5625d: feat(input&number-input): add styles and classNames api (5.0)
8
+
9
+ ## 5.0.0-canary.7
10
+
11
+ ### Patch Changes
12
+
13
+ - chore: rebase master (5.0)
14
+ - Updated dependencies
15
+ - @hi-ui/core@5.0.0-canary.2
16
+ - @hi-ui/use-latest@5.0.0-canary.2
17
+ - @hi-ui/use-merge-refs@5.0.0-canary.2
18
+ - @hi-ui/use-uncontrolled-state@5.0.0-canary.2
19
+ - @hi-ui/icons@5.0.0-canary.2
20
+ - @hi-ui/classname@5.0.0-canary.2
21
+ - @hi-ui/dom-utils@5.0.0-canary.2
22
+ - @hi-ui/env@5.0.0-canary.2
23
+ - @hi-ui/func-utils@5.0.0-canary.2
24
+ - @hi-ui/type-assertion@5.0.0-canary.2
25
+
3
26
  ## 5.0.0-canary.6
4
27
 
5
28
  ### Patch Changes
@@ -74,6 +97,12 @@
74
97
  - @hi-ui/func-utils@5.0.0-canary.0
75
98
  - @hi-ui/type-assertion@5.0.0-canary.0
76
99
 
100
+ ## 4.4.0
101
+
102
+ ### Minor Changes
103
+
104
+ - [#3172](https://github.com/XiaoMi/hiui/pull/3172) [`a883d8e19`](https://github.com/XiaoMi/hiui/commit/a883d8e197446ef0e7cefcc5cc44d21ed1d0807f) Thanks [@zyprepare](https://github.com/zyprepare)! - feat(mock-input): 增加 onClear 参数 (#3171)
105
+
77
106
  ## 4.3.0
78
107
 
79
108
  ### Minor Changes
package/lib/cjs/Input.js CHANGED
@@ -68,7 +68,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
68
68
  type = _a.type,
69
69
  containerRef = _a.containerRef,
70
70
  waitCompositionEnd = _a.waitCompositionEnd,
71
- 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"]);
71
+ styles = _a.styles,
72
+ classNames = _a.classNames,
73
+ 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"]);
72
74
  // @TODO: 临时方案,后面迁移至 InputGroup
73
75
  var _useMemo = React.useMemo(function () {
74
76
  var shouldUnset = [false, false];
@@ -134,9 +136,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
134
136
  ref: containerRef
135
137
  }, /*#__PURE__*/React__default["default"].createElement("div", {
136
138
  className: outerCls
137
- }, prepend ? /*#__PURE__*/React__default["default"].createElement("div", {
138
- className: prefixCls + "__prepend"
139
- }, prepend) : null, /*#__PURE__*/React__default["default"].createElement("div", {
139
+ }, prepend ? ( /*#__PURE__*/React__default["default"].createElement("div", {
140
+ className: prefixCls + "__prepend " + (classNames === null || classNames === void 0 ? void 0 : classNames.prepend),
141
+ style: styles === null || styles === void 0 ? void 0 : styles.prepend
142
+ }, prepend)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
140
143
  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"),
141
144
  onMouseOver: function onMouseOver(e) {
142
145
  setHover(true);
@@ -144,13 +147,16 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
144
147
  onMouseLeave: function onMouseLeave(e) {
145
148
  setHover(false);
146
149
  }
147
- }, prefix ? /*#__PURE__*/React__default["default"].createElement("span", {
148
- className: prefixCls + "__prefix"
149
- }, prefix) : null, /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
150
+ }, prefix ? ( /*#__PURE__*/React__default["default"].createElement("span", {
151
+ className: prefixCls + "__prefix " + (classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
152
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
153
+ }, prefix)) : null, /*#__PURE__*/React__default["default"].createElement("input", Object.assign({
150
154
  ref: mergedRef,
151
- className: prefixCls + "__text"
155
+ className: prefixCls + "__text " + (classNames === null || classNames === void 0 ? void 0 : classNames.input),
156
+ style: styles === null || styles === void 0 ? void 0 : styles.input
152
157
  }, getInputProps(), rest)), suffix || showClearableIcon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
153
- className: prefixCls + "__suffix"
158
+ className: prefixCls + "__suffix " + (classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
159
+ style: styles === null || styles === void 0 ? void 0 : styles.suffix
154
160
  }, showClearableIcon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
155
161
  ref: clearElementRef,
156
162
  className: classname.cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
@@ -161,9 +167,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
161
167
  onClear === null || onClear === void 0 ? void 0 : onClear();
162
168
  focus();
163
169
  }
164
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null))) : null, suffix)) : null), append ? /*#__PURE__*/React__default["default"].createElement("div", {
165
- className: prefixCls + "__append"
166
- }, append) : null));
170
+ }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null))) : null, suffix)) : null), append ? ( /*#__PURE__*/React__default["default"].createElement("div", {
171
+ className: prefixCls + "__append " + (classNames === null || classNames === void 0 ? void 0 : classNames.append),
172
+ style: styles === null || styles === void 0 ? void 0 : styles.append
173
+ }, append)) : null));
167
174
  });
168
175
  if (env.__DEV__) {
169
176
  Input.displayName = 'Input';
@@ -20,6 +20,7 @@ var env = require('@hi-ui/env');
20
20
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
21
21
  var icons = require('@hi-ui/icons');
22
22
  var typeAssertion = require('@hi-ui/type-assertion');
23
+ var useLatest = require('@hi-ui/use-latest');
23
24
  function _interopDefaultCompat(e) {
24
25
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
25
26
  'default': e
@@ -67,8 +68,9 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
67
68
  suffixProp = _a.suffix,
68
69
  _onMouseOver = _a.onMouseOver,
69
70
  _onMouseLeave = _a.onMouseLeave,
71
+ onClear = _a.onClear,
70
72
  label = _a.label,
71
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "prefix", "suffix", "onMouseOver", "onMouseLeave", "label"]);
73
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "prefix", "suffix", "onMouseOver", "onMouseLeave", "onClear", "label"]);
72
74
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
73
75
  value = _useUncontrolledState[0],
74
76
  tryChangeValue = _useUncontrolledState[1];
@@ -89,11 +91,13 @@ var MockInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
89
91
  }
90
92
  return displayItem.title;
91
93
  }, [displayItem, displayRender]);
94
+ var onClearLatest = useLatest.useLatestCallback(onClear);
92
95
  var handleClear = React.useCallback(function (evt) {
93
96
  if (disabled) return;
94
97
  evt.stopPropagation();
95
98
  tryChangeValue(NOOP_VALUE, displayItem);
96
- }, [tryChangeValue, disabled, displayItem]);
99
+ onClearLatest === null || onClearLatest === void 0 ? void 0 : onClearLatest();
100
+ }, [tryChangeValue, disabled, displayItem, onClearLatest]);
97
101
  var _useState = React.useState(false),
98
102
  hover = _useState[0],
99
103
  setHover = _useState[1];
package/lib/esm/Input.js CHANGED
@@ -56,7 +56,9 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
56
56
  type = _a.type,
57
57
  containerRef = _a.containerRef,
58
58
  waitCompositionEnd = _a.waitCompositionEnd,
59
- 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"]);
59
+ styles = _a.styles,
60
+ classNames = _a.classNames,
61
+ 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"]);
60
62
  // @TODO: 临时方案,后面迁移至 InputGroup
61
63
  var _useMemo = useMemo(function () {
62
64
  var shouldUnset = [false, false];
@@ -122,9 +124,10 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
122
124
  ref: containerRef
123
125
  }, /*#__PURE__*/React.createElement("div", {
124
126
  className: outerCls
125
- }, prepend ? /*#__PURE__*/React.createElement("div", {
126
- className: prefixCls + "__prepend"
127
- }, prepend) : null, /*#__PURE__*/React.createElement("div", {
127
+ }, prepend ? ( /*#__PURE__*/React.createElement("div", {
128
+ className: prefixCls + "__prepend " + (classNames === null || classNames === void 0 ? void 0 : classNames.prepend),
129
+ style: styles === null || styles === void 0 ? void 0 : styles.prepend
130
+ }, prepend)) : null, /*#__PURE__*/React.createElement("div", {
128
131
  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"),
129
132
  onMouseOver: function onMouseOver(e) {
130
133
  setHover(true);
@@ -132,13 +135,16 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
132
135
  onMouseLeave: function onMouseLeave(e) {
133
136
  setHover(false);
134
137
  }
135
- }, prefix ? /*#__PURE__*/React.createElement("span", {
136
- className: prefixCls + "__prefix"
137
- }, prefix) : null, /*#__PURE__*/React.createElement("input", Object.assign({
138
+ }, prefix ? ( /*#__PURE__*/React.createElement("span", {
139
+ className: prefixCls + "__prefix " + (classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
140
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
141
+ }, prefix)) : null, /*#__PURE__*/React.createElement("input", Object.assign({
138
142
  ref: mergedRef,
139
- className: prefixCls + "__text"
143
+ className: prefixCls + "__text " + (classNames === null || classNames === void 0 ? void 0 : classNames.input),
144
+ style: styles === null || styles === void 0 ? void 0 : styles.input
140
145
  }, getInputProps(), rest)), suffix || showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
141
- className: prefixCls + "__suffix"
146
+ className: prefixCls + "__suffix " + (classNames === null || classNames === void 0 ? void 0 : classNames.suffix),
147
+ style: styles === null || styles === void 0 ? void 0 : styles.suffix
142
148
  }, showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
143
149
  ref: clearElementRef,
144
150
  className: cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
@@ -149,9 +155,10 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
149
155
  onClear === null || onClear === void 0 ? void 0 : onClear();
150
156
  focus();
151
157
  }
152
- }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null, suffix)) : null), append ? /*#__PURE__*/React.createElement("div", {
153
- className: prefixCls + "__append"
154
- }, append) : null));
158
+ }, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null, suffix)) : null), append ? ( /*#__PURE__*/React.createElement("div", {
159
+ className: prefixCls + "__append " + (classNames === null || classNames === void 0 ? void 0 : classNames.append),
160
+ style: styles === null || styles === void 0 ? void 0 : styles.append
161
+ }, append)) : null));
155
162
  });
156
163
  if (__DEV__) {
157
164
  Input.displayName = 'Input';
@@ -14,6 +14,7 @@ import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
15
15
  import { CloseCircleFilled } from '@hi-ui/icons';
16
16
  import { isArray } from '@hi-ui/type-assertion';
17
+ import { useLatestCallback } from '@hi-ui/use-latest';
17
18
  var _role = 'mock-input';
18
19
  var _prefix = getPrefixCls(_role);
19
20
  var NOOP_VALUE = '';
@@ -55,8 +56,9 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
55
56
  suffixProp = _a.suffix,
56
57
  _onMouseOver = _a.onMouseOver,
57
58
  _onMouseLeave = _a.onMouseLeave,
59
+ onClear = _a.onClear,
58
60
  label = _a.label,
59
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "prefix", "suffix", "onMouseOver", "onMouseLeave", "label"]);
61
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "defaultValue", "value", "onChange", "placeholder", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "clearableTrigger", "displayRender", "prefix", "suffix", "onMouseOver", "onMouseLeave", "onClear", "label"]);
60
62
  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
61
63
  value = _useUncontrolledState[0],
62
64
  tryChangeValue = _useUncontrolledState[1];
@@ -77,11 +79,13 @@ var MockInput = /*#__PURE__*/forwardRef(function (_a, ref) {
77
79
  }
78
80
  return displayItem.title;
79
81
  }, [displayItem, displayRender]);
82
+ var onClearLatest = useLatestCallback(onClear);
80
83
  var handleClear = useCallback(function (evt) {
81
84
  if (disabled) return;
82
85
  evt.stopPropagation();
83
86
  tryChangeValue(NOOP_VALUE, displayItem);
84
- }, [tryChangeValue, disabled, displayItem]);
87
+ onClearLatest === null || onClearLatest === void 0 ? void 0 : onClearLatest();
88
+ }, [tryChangeValue, disabled, displayItem, onClearLatest]);
85
89
  var _useState = useState(false),
86
90
  hover = _useState[0],
87
91
  setHover = _useState[1];
@@ -93,6 +93,26 @@ export interface InputProps extends HiBaseHTMLFieldProps<'input'> {
93
93
  * 是否等待文本段落组成完成
94
94
  */
95
95
  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
+ };
96
116
  }
97
117
  /**
98
118
  * 模拟伪装目标事件 target
@@ -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" | "onSelect" | "title" | "size" | "prefix" | "data" | "label" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "displayRender"> & {
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" | "onSelect" | "title" | "size" | "prefix" | "data" | "label" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "onClear" | "displayRender"> & {
7
7
  prefixCls?: string | undefined;
8
8
  role?: string | undefined;
9
9
  } & {
@@ -27,6 +27,10 @@ export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.
27
27
  * 清除按钮展示的触发形态
28
28
  */
29
29
  clearableTrigger?: "always" | "hover" | undefined;
30
+ /**
31
+ * 点击关闭按钮时触发
32
+ */
33
+ onClear?: (() => void) | undefined;
30
34
  /**
31
35
  * 是否禁止使用
32
36
  */
@@ -109,6 +113,10 @@ export declare type MockInputProps = HiBaseHTMLFieldProps<'div', {
109
113
  * 清除按钮展示的触发形态
110
114
  */
111
115
  clearableTrigger?: 'always' | 'hover';
116
+ /**
117
+ * 点击关闭按钮时触发
118
+ */
119
+ onClear?: () => void;
112
120
  /**
113
121
  * 是否禁止使用
114
122
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/input",
3
- "version": "5.0.0-canary.6",
3
+ "version": "5.0.0-canary.8",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,24 +44,24 @@
44
44
  "url": "https://github.com/XiaoMi/hiui/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@hi-ui/classname": "^5.0.0-canary.1",
48
- "@hi-ui/dom-utils": "^5.0.0-canary.1",
49
- "@hi-ui/env": "^5.0.0-canary.1",
50
- "@hi-ui/func-utils": "^5.0.0-canary.1",
51
- "@hi-ui/icons": "^5.0.0-canary.1",
52
- "@hi-ui/type-assertion": "^5.0.0-canary.1",
53
- "@hi-ui/use-latest": "^5.0.0-canary.1",
54
- "@hi-ui/use-merge-refs": "^5.0.0-canary.1",
55
- "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.1"
47
+ "@hi-ui/classname": "^5.0.0-canary.2",
48
+ "@hi-ui/dom-utils": "^5.0.0-canary.2",
49
+ "@hi-ui/env": "^5.0.0-canary.2",
50
+ "@hi-ui/func-utils": "^5.0.0-canary.2",
51
+ "@hi-ui/icons": "^5.0.0-canary.2",
52
+ "@hi-ui/type-assertion": "^5.0.0-canary.2",
53
+ "@hi-ui/use-latest": "^5.0.0-canary.2",
54
+ "@hi-ui/use-merge-refs": "^5.0.0-canary.2",
55
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.2"
56
56
  },
57
57
  "peerDependencies": {
58
- "@hi-ui/core": ">=5.0.0-canary.1",
58
+ "@hi-ui/core": ">=5.0.0-canary.2",
59
59
  "react": ">=16.8.6",
60
60
  "react-dom": ">=16.8.6"
61
61
  },
62
62
  "devDependencies": {
63
- "@hi-ui/core": "^5.0.0-canary.1",
64
- "@hi-ui/core-css": "^5.0.0-canary.5",
63
+ "@hi-ui/core": "^5.0.0-canary.2",
64
+ "@hi-ui/core-css": "^5.0.0-canary.6",
65
65
  "react": "^17.0.1",
66
66
  "react-dom": "^17.0.1"
67
67
  }