@hi-ui/tag-input 4.0.6 → 4.0.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/lib/cjs/TagInput.js +55 -92
  3. package/lib/cjs/TagInputMock.js +85 -137
  4. package/lib/cjs/index.js +0 -4
  5. package/lib/cjs/styles/index.scss.js +1 -4
  6. package/lib/cjs/use-tag-input.js +5 -14
  7. package/lib/esm/TagInput.js +33 -46
  8. package/lib/esm/TagInputMock.js +69 -96
  9. package/lib/esm/styles/index.scss.js +1 -3
  10. package/lib/esm/use-tag-input.js +5 -8
  11. package/package.json +13 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @hi-ui/tag-input
2
2
 
3
+ ## 4.0.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2672](https://github.com/XiaoMi/hiui/pull/2672) [`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e) Thanks [@zyprepare](https://github.com/zyprepare)! - build: 升级到 rollup3,重新构建发布组件
8
+
9
+ - Updated dependencies [[`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e)]:
10
+ - @hi-ui/core@4.0.6
11
+ - @hi-ui/use-latest@4.0.2
12
+ - @hi-ui/use-merge-refs@4.0.2
13
+ - @hi-ui/use-outside-click@4.0.2
14
+ - @hi-ui/use-uncontrolled-state@4.0.2
15
+ - @hi-ui/icons@4.0.16
16
+ - @hi-ui/classname@4.0.2
17
+ - @hi-ui/env@4.0.2
18
+ - @hi-ui/func-utils@4.0.2
19
+ - @hi-ui/type-assertion@4.0.2
20
+
21
+ ## 4.0.7
22
+
23
+ ### Patch Changes
24
+
25
+ - [#2653](https://github.com/XiaoMi/hiui/pull/2653) [`b477d91db`](https://github.com/XiaoMi/hiui/commit/b477d91db15bbc92c8712a9a771af5b332779315) Thanks [@zyprepare](https://github.com/zyprepare)! - chore: 更新使用到的 G40 颜色值
26
+
3
27
  ## 4.0.6
4
28
 
5
29
  ### Patch Changes
package/lib/cjs/TagInput.js CHANGED
@@ -9,85 +9,54 @@
9
9
  */
10
10
  'use strict';
11
11
 
12
- var _typeof = require("@babel/runtime/helpers/typeof");
13
-
14
- Object.defineProperty(exports, '__esModule', {
15
- value: true
16
- });
17
-
18
12
  var tslib = require('tslib');
19
-
20
13
  var React = require('react');
21
-
22
14
  var classname = require('@hi-ui/classname');
23
-
24
15
  var env = require('@hi-ui/env');
25
-
26
16
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
27
-
28
17
  var icons = require('@hi-ui/icons');
29
-
30
18
  var useMergeRefs = require('@hi-ui/use-merge-refs');
31
-
32
19
  var useTagInput = require('./use-tag-input.js');
33
-
34
20
  var useOutsideClick = require('@hi-ui/use-outside-click');
35
-
36
21
  var useLatest = require('@hi-ui/use-latest');
37
-
38
- function _interopDefaultLegacy(e) {
39
- return e && _typeof(e) === 'object' && 'default' in e ? e : {
40
- 'default': e
41
- };
42
- }
43
-
44
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
45
-
46
22
  var _role = 'tag-input';
47
-
48
23
  var _prefix = classname.getPrefixCls(_role);
49
-
50
24
  var NOOP_ARRAY = [];
51
25
  /**
52
26
  * 标签输入框
53
27
  */
54
-
55
28
  var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
56
29
  var _a$prefixCls = _a.prefixCls,
57
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
58
- _a$role = _a.role,
59
- role = _a$role === void 0 ? _role : _a$role,
60
- className = _a.className,
61
- _a$defaultValue = _a.defaultValue,
62
- defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
63
- valueProp = _a.value,
64
- onChange = _a.onChange,
65
- placeholder = _a.placeholder,
66
- _a$data = _a.data,
67
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
68
- _a$wrap = _a.wrap,
69
- wrap = _a$wrap === void 0 ? true : _a$wrap,
70
- _a$clearable = _a.clearable,
71
- clearable = _a$clearable === void 0 ? true : _a$clearable,
72
- _a$disabled = _a.disabled,
73
- disabled = _a$disabled === void 0 ? false : _a$disabled,
74
- suffix = _a.suffix,
75
- displayRender = _a.displayRender,
76
- onClick = _a.onClick,
77
- _onMouseOver = _a.onMouseOver,
78
- _onMouseLeave = _a.onMouseLeave,
79
- onClear = _a.onClear,
80
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
81
-
30
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
31
+ _a$role = _a.role,
32
+ role = _a$role === void 0 ? _role : _a$role,
33
+ className = _a.className,
34
+ _a$defaultValue = _a.defaultValue,
35
+ defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
36
+ valueProp = _a.value,
37
+ onChange = _a.onChange,
38
+ placeholder = _a.placeholder,
39
+ _a$data = _a.data,
40
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
41
+ _a$wrap = _a.wrap,
42
+ wrap = _a$wrap === void 0 ? true : _a$wrap,
43
+ _a$clearable = _a.clearable,
44
+ clearable = _a$clearable === void 0 ? true : _a$clearable,
45
+ _a$disabled = _a.disabled,
46
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
47
+ suffix = _a.suffix,
48
+ displayRender = _a.displayRender,
49
+ onClick = _a.onClick,
50
+ _onMouseOver = _a.onMouseOver,
51
+ _onMouseLeave = _a.onMouseLeave,
52
+ onClear = _a.onClear,
53
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "wrap", "clearable", "disabled", "suffix", "displayRender", "onClick", "onMouseOver", "onMouseLeave", "onClear"]);
82
54
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
83
- value = _useUncontrolledState[0],
84
- tryChangeValue = _useUncontrolledState[1];
85
-
55
+ value = _useUncontrolledState[0],
56
+ tryChangeValue = _useUncontrolledState[1];
86
57
  var tagInputRef = React.useRef(null);
87
-
88
58
  var _useTagInput = useTagInput.useTagInput(data, tagInputRef),
89
- tagMaxWidth = _useTagInput[0];
90
-
59
+ tagMaxWidth = _useTagInput[0];
91
60
  var onClearLatest = useLatest.useLatestCallback(onClear);
92
61
  var tagList = React.useMemo(function () {
93
62
  return value.map(function (id) {
@@ -105,24 +74,20 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
105
74
  tryChangeValue(NOOP_ARRAY, tagList, false);
106
75
  onClearLatest();
107
76
  }, [tryChangeValue, disabled, onClearLatest, tagList]);
108
-
109
77
  var _useState = React.useState(false),
110
- hover = _useState[0],
111
- setHover = _useState[1];
112
-
78
+ hover = _useState[0],
79
+ setHover = _useState[1];
113
80
  var trySetHover = React.useCallback(function (hovered) {
114
81
  if (disabled) return;
115
82
  setHover(hovered);
116
83
  }, [disabled]);
117
- var tagCount = tagList.length; // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
118
-
84
+ var tagCount = tagList.length;
85
+ // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
119
86
  var showClearableIcon = clearable && tagCount > 0 && !disabled;
120
87
  var showTagCount = !wrap && tagCount > 0;
121
-
122
88
  var _useState2 = React.useState(false),
123
- expanded = _useState2[0],
124
- setExpanded = _useState2[1];
125
-
89
+ expanded = _useState2[0],
90
+ setExpanded = _useState2[1];
126
91
  useOutsideClick.useOutsideClick(tagInputRef, function () {
127
92
  return setExpanded(false);
128
93
  });
@@ -131,7 +96,7 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
131
96
  setExpanded(true);
132
97
  }, []);
133
98
  var cls = classname.cx(prefixCls, className, expanded ? prefixCls + "--expanded" : wrap ? prefixCls + "--wrap" : prefixCls + "--nowrap");
134
- return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
99
+ return /*#__PURE__*/React.createElement("div", Object.assign({
135
100
  ref: useMergeRefs.useMergeRefs(ref, tagInputRef),
136
101
  role: role,
137
102
  className: cls,
@@ -143,25 +108,25 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
143
108
  trySetHover(false);
144
109
  _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
145
110
  }
146
- }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
111
+ }, rest), /*#__PURE__*/React.createElement("div", {
147
112
  className: classname.cx(prefixCls + "__container", disabled && 'disabled'),
148
113
  onClick: onClick
149
- }, value.length !== 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
114
+ }, value.length !== 0 ? /*#__PURE__*/React.createElement("span", {
150
115
  className: prefixCls + "__value"
151
- }, /*#__PURE__*/React__default["default"].createElement("span", {
116
+ }, /*#__PURE__*/React.createElement("span", {
152
117
  className: classname.cx(prefixCls + "__tags", wrap && prefixCls + "__tags--all")
153
118
  }, tagList.map(function (option) {
154
119
  var title = displayRender ? displayRender(option) : true;
155
120
  var closeable = !option.disabled;
156
- return /*#__PURE__*/React__default["default"].createElement("span", {
121
+ return /*#__PURE__*/React.createElement("span", {
157
122
  className: prefixCls + "__tag",
158
123
  key: option.id
159
- }, /*#__PURE__*/React__default["default"].createElement("span", {
124
+ }, /*#__PURE__*/React.createElement("span", {
160
125
  className: prefixCls + "__tag-content",
161
126
  style: {
162
127
  maxWidth: tagMaxWidth
163
128
  }
164
- }, title === true ? option.title : title), closeable ? /*#__PURE__*/React__default["default"].createElement("span", {
129
+ }, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
165
130
  className: prefixCls + "__tag-closed",
166
131
  onClick: function onClick(evt) {
167
132
  if (disabled) return;
@@ -171,37 +136,37 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
171
136
  });
172
137
  tryChangeValue(nextValue, [option], false);
173
138
  }
174
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null)) : null);
175
- }))) : /*#__PURE__*/React__default["default"].createElement("span", {
139
+ }, /*#__PURE__*/React.createElement(icons.CloseOutlined, null)) : null);
140
+ }))) : /*#__PURE__*/React.createElement("span", {
176
141
  className: prefixCls + "__placeholder"
177
- }, placeholder), !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React__default["default"].createElement("span", {
142
+ }, placeholder), !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React.createElement("span", {
178
143
  className: prefixCls + "__suffix"
179
- }, showTagCount ? /*#__PURE__*/React__default["default"].createElement("span", {
144
+ }, showTagCount ? /*#__PURE__*/React.createElement("span", {
180
145
  className: classname.cx(prefixCls + "__tag--total"),
181
146
  onClick: handleExpand
182
- }, "" + (tagCount > 99 ? '+99' : tagCount)) : showClearableIcon && hover ? /*#__PURE__*/React__default["default"].createElement("span", {
147
+ }, "" + (tagCount > 99 ? '+99' : tagCount)) : showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
183
148
  className: prefixCls + "__clear",
184
149
  role: "button",
185
150
  tabIndex: -1,
186
151
  onClick: handleClear
187
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null)) : null, suffix) : null), value.length !== 0 && expanded ? /*#__PURE__*/React__default["default"].createElement("div", {
152
+ }, /*#__PURE__*/React.createElement(icons.CloseCircleFilled, null)) : null, suffix) : null), value.length !== 0 && expanded ? /*#__PURE__*/React.createElement("div", {
188
153
  className: prefixCls + "__container__expand"
189
- }, /*#__PURE__*/React__default["default"].createElement("span", {
154
+ }, /*#__PURE__*/React.createElement("span", {
190
155
  className: classname.cx(prefixCls + "__value")
191
- }, /*#__PURE__*/React__default["default"].createElement("span", {
156
+ }, /*#__PURE__*/React.createElement("span", {
192
157
  className: classname.cx(prefixCls + "__tags", prefixCls + "__tags--all")
193
158
  }, tagList.map(function (option) {
194
159
  var title = displayRender ? displayRender(option) : true;
195
160
  var closeable = !option.disabled;
196
- return /*#__PURE__*/React__default["default"].createElement("span", {
161
+ return /*#__PURE__*/React.createElement("span", {
197
162
  className: prefixCls + "__tag",
198
163
  key: option.id
199
- }, /*#__PURE__*/React__default["default"].createElement("span", {
164
+ }, /*#__PURE__*/React.createElement("span", {
200
165
  className: prefixCls + "__tag-content",
201
166
  style: {
202
167
  maxWidth: tagMaxWidth
203
168
  }
204
- }, title === true ? option.title : title), closeable ? /*#__PURE__*/React__default["default"].createElement("span", {
169
+ }, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
205
170
  className: prefixCls + "__tag-closed",
206
171
  onClick: function onClick(evt) {
207
172
  if (disabled) return;
@@ -211,19 +176,17 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
211
176
  });
212
177
  tryChangeValue(nextValue);
213
178
  }
214
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null)) : null);
215
- }))), showClearableIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
179
+ }, /*#__PURE__*/React.createElement(icons.CloseOutlined, null)) : null);
180
+ }))), showClearableIcon ? /*#__PURE__*/React.createElement("span", {
216
181
  className: prefixCls + "__suffix"
217
- }, /*#__PURE__*/React__default["default"].createElement("span", {
182
+ }, /*#__PURE__*/React.createElement("span", {
218
183
  className: prefixCls + "__clear",
219
184
  role: "button",
220
185
  tabIndex: -1,
221
186
  onClick: handleClear
222
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null))) : null) : null);
187
+ }, /*#__PURE__*/React.createElement(icons.CloseCircleFilled, null))) : null) : null);
223
188
  });
224
-
225
189
  if (env.__DEV__) {
226
190
  TagInput.displayName = 'TagInput';
227
191
  }
228
-
229
192
  exports.TagInput = TagInput;