@hi-ui/tag-input 4.0.7 → 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 +18 -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,23 @@
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
+
3
21
  ## 4.0.7
4
22
 
5
23
  ### 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;
package/lib/cjs/TagInputMock.js CHANGED
@@ -9,92 +9,63 @@
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 useLatest = require('@hi-ui/use-latest');
31
-
32
19
  var typeAssertion = require('@hi-ui/type-assertion');
33
-
34
20
  var ResizeDetector = require('react-resize-detector');
35
-
36
- function _interopDefaultLegacy(e) {
37
- return e && _typeof(e) === 'object' && 'default' in e ? e : {
38
- 'default': e
39
- };
40
- }
41
-
42
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
43
-
44
- var ResizeDetector__default = /*#__PURE__*/_interopDefaultLegacy(ResizeDetector);
45
-
46
21
  var _role = 'tag-input-mock';
47
-
48
22
  var _prefix = classname.getPrefixCls(_role);
49
-
50
23
  var NOOP_ARRAY = [];
51
24
  var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
52
25
  var _a$prefixCls = _a.prefixCls,
53
- prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
54
- _a$role = _a.role,
55
- role = _a$role === void 0 ? _role : _a$role,
56
- className = _a.className,
57
- _a$defaultValue = _a.defaultValue,
58
- defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
59
- valueProp = _a.value,
60
- onChange = _a.onChange,
61
- placeholder = _a.placeholder,
62
- _a$data = _a.data,
63
- data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
64
- _a$disabled = _a.disabled,
65
- disabled = _a$disabled === void 0 ? false : _a$disabled,
66
- _a$clearable = _a.clearable,
67
- clearable = _a$clearable === void 0 ? true : _a$clearable,
68
- _a$focused = _a.focused,
69
- focused = _a$focused === void 0 ? false : _a$focused,
70
- _a$invalid = _a.invalid,
71
- invalid = _a$invalid === void 0 ? false : _a$invalid,
72
- _a$readOnly = _a.readOnly,
73
- readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
74
- _a$size = _a.size,
75
- size = _a$size === void 0 ? 'md' : _a$size,
76
- _a$appearance = _a.appearance,
77
- appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
78
- _a$wrap = _a.wrap,
79
- wrap = _a$wrap === void 0 ? false : _a$wrap,
80
- _a$expandable = _a.expandable,
81
- expandable = _a$expandable === void 0 ? false : _a$expandable,
82
- _a$activeExpandable = _a.activeExpandable,
83
- activeExpandable = _a$activeExpandable === void 0 ? false : _a$activeExpandable,
84
- suffix = _a.suffix,
85
- _a$tagWidth = _a.tagWidth,
86
- tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
87
- displayRender = _a.displayRender,
88
- _onMouseOver = _a.onMouseOver,
89
- _onMouseLeave = _a.onMouseLeave,
90
- onClear = _a.onClear,
91
- onExpand = _a.onExpand,
92
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "expandable", "activeExpandable", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
93
-
26
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
27
+ _a$role = _a.role,
28
+ role = _a$role === void 0 ? _role : _a$role,
29
+ className = _a.className,
30
+ _a$defaultValue = _a.defaultValue,
31
+ defaultValue = _a$defaultValue === void 0 ? NOOP_ARRAY : _a$defaultValue,
32
+ valueProp = _a.value,
33
+ onChange = _a.onChange,
34
+ placeholder = _a.placeholder,
35
+ _a$data = _a.data,
36
+ data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
37
+ _a$disabled = _a.disabled,
38
+ disabled = _a$disabled === void 0 ? false : _a$disabled,
39
+ _a$clearable = _a.clearable,
40
+ clearable = _a$clearable === void 0 ? true : _a$clearable,
41
+ _a$focused = _a.focused,
42
+ focused = _a$focused === void 0 ? false : _a$focused,
43
+ _a$invalid = _a.invalid,
44
+ invalid = _a$invalid === void 0 ? false : _a$invalid,
45
+ _a$readOnly = _a.readOnly,
46
+ readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
47
+ _a$size = _a.size,
48
+ size = _a$size === void 0 ? 'md' : _a$size,
49
+ _a$appearance = _a.appearance,
50
+ appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
51
+ _a$wrap = _a.wrap,
52
+ wrap = _a$wrap === void 0 ? false : _a$wrap,
53
+ _a$expandable = _a.expandable,
54
+ expandable = _a$expandable === void 0 ? false : _a$expandable,
55
+ _a$activeExpandable = _a.activeExpandable,
56
+ activeExpandable = _a$activeExpandable === void 0 ? false : _a$activeExpandable,
57
+ suffix = _a.suffix,
58
+ _a$tagWidth = _a.tagWidth,
59
+ tagWidth = _a$tagWidth === void 0 ? 20 : _a$tagWidth,
60
+ displayRender = _a.displayRender,
61
+ _onMouseOver = _a.onMouseOver,
62
+ _onMouseLeave = _a.onMouseLeave,
63
+ onClear = _a.onClear,
64
+ onExpand = _a.onExpand,
65
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultValue", "value", "onChange", "placeholder", "data", "disabled", "clearable", "focused", "invalid", "readOnly", "size", "appearance", "wrap", "expandable", "activeExpandable", "suffix", "tagWidth", "displayRender", "onMouseOver", "onMouseLeave", "onClear", "onExpand"]);
94
66
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
95
- value = _useUncontrolledState[0],
96
- tryChangeValue = _useUncontrolledState[1];
97
-
67
+ value = _useUncontrolledState[0],
68
+ tryChangeValue = _useUncontrolledState[1];
98
69
  var tagList = React.useMemo(function () {
99
70
  return value.map(function (id) {
100
71
  return data.find(function (item) {
@@ -106,57 +77,44 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
106
77
  });
107
78
  }, [value, data]);
108
79
  var tagCount = tagList.length;
109
-
110
80
  var _useState = React.useState(),
111
- _useState$ = _useState[0],
112
- containerWidth = _useState$ === void 0 ? 0 : _useState$,
113
- setContainerWidth = _useState[1];
114
-
81
+ _useState$ = _useState[0],
82
+ containerWidth = _useState$ === void 0 ? 0 : _useState$,
83
+ setContainerWidth = _useState[1];
115
84
  var mergedTagList = React.useMemo(function () {
116
85
  if (wrap) {
117
86
  return tagList;
118
87
  }
119
-
120
88
  return tagList.slice(0, Math.min(tagList.length, containerWidth / tagWidth));
121
89
  }, [tagList, tagWidth, containerWidth, wrap]);
122
90
  var showTags = mergedTagList.length > 0;
123
91
  var showTagCount = !wrap && showTags;
124
-
125
92
  var _useState2 = React.useState({}),
126
- tagsWidth = _useState2[0],
127
- setTagsWidth = _useState2[1];
128
-
93
+ tagsWidth = _useState2[0],
94
+ setTagsWidth = _useState2[1];
129
95
  var getTagWidth = React.useCallback(function (index) {
130
96
  return typeof mergedTagList[index] !== 'undefined' && tagsWidth[mergedTagList[index].id] || 0;
131
97
  }, [tagsWidth, mergedTagList]);
132
-
133
98
  var _useState3 = React.useState(0),
134
- suffixWidth = _useState3[0],
135
- setSuffixWidth = _useState3[1]; // TODO: 设置第一个 tagWidth 超出省略，预防无展示
99
+ suffixWidth = _useState3[0],
100
+ setSuffixWidth = _useState3[1];
101
+ // TODO: 设置第一个 tagWidth 超出省略，预防无展示
136
102
  // const [tagMaxWidth, setTagMaxWidth] = useState(0)
137
-
138
-
139
103
  var _useState4 = React.useState(0),
140
- tagMaxCount = _useState4[0],
141
- setTagMaxCount = _useState4[1];
142
-
104
+ tagMaxCount = _useState4[0],
105
+ setTagMaxCount = _useState4[1];
143
106
  React.useLayoutEffect(function () {
144
107
  var tagMaxCount = 0;
145
-
146
108
  if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
147
109
  var len = mergedTagList.length;
148
110
  var lastIndex = len - 1;
149
111
  var totalWidth = suffixWidth;
150
-
151
112
  for (var i = 0; i < len; ++i) {
152
113
  var currentTagWidth = getTagWidth(i);
153
-
154
114
  if (currentTagWidth === undefined) {
155
115
  break;
156
116
  }
157
-
158
117
  totalWidth += currentTagWidth;
159
-
160
118
  if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
161
119
  tagMaxCount = lastIndex;
162
120
  break;
@@ -167,17 +125,15 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
167
125
  }
168
126
  } else {
169
127
  tagMaxCount = 0;
170
- } // 保底要展示 1 个
171
-
172
-
128
+ }
129
+ // 保底要展示 1 个
173
130
  setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount);
174
- }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]); // mergedTagList 更新后同步更新 tagsWidth
175
-
131
+ }, [tagsWidth, suffixWidth, getTagWidth, containerWidth, mergedTagList, suffix]);
132
+ // mergedTagList 更新后同步更新 tagsWidth
176
133
  React.useEffect(function () {
177
134
  var updatedTagsWidth = {};
178
135
  mergedTagList.forEach(function (item) {
179
136
  var _a;
180
-
181
137
  var id = item.id;
182
138
  updatedTagsWidth[id] = (_a = tagsWidth[id]) !== null && _a !== void 0 ? _a : 0;
183
139
  });
@@ -190,27 +146,25 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
190
146
  tryChangeValue(NOOP_ARRAY, tagList, false);
191
147
  onClearLatest();
192
148
  }, [tryChangeValue, disabled, onClearLatest, tagList]);
193
-
194
149
  var _useState5 = React.useState(false),
195
- hover = _useState5[0],
196
- setHover = _useState5[1];
197
-
150
+ hover = _useState5[0],
151
+ setHover = _useState5[1];
198
152
  var trySetHover = React.useCallback(function (hovered) {
199
153
  if (disabled) return;
200
154
  setHover(hovered);
201
- }, [disabled]); // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
202
-
155
+ }, [disabled]);
156
+ // 在开启 clearable 下展示 清除内容按钮，可点击进行内容清楚
203
157
  var showClearableIcon = clearable && showTags && !disabled;
204
158
  var maxTagWidth = containerWidth - suffixWidth;
205
159
  var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, prefixCls + "--size-" + size, focused && "focused", readOnly && 'readonly', invalid && 'invalid', disabled && prefixCls + "--disabled", wrap && prefixCls + "--wrap", expandable && prefixCls + "--expandable");
206
- return /*#__PURE__*/React__default["default"].createElement(ResizeDetector__default["default"], {
160
+ return /*#__PURE__*/React.createElement(ResizeDetector, {
207
161
  skipOnMount: false,
208
162
  onResize: function onResize(w) {
209
163
  if (w) {
210
164
  setContainerWidth(w);
211
165
  }
212
166
  }
213
- }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
167
+ }, /*#__PURE__*/React.createElement("div", Object.assign({
214
168
  ref: ref,
215
169
  role: role,
216
170
  className: cls,
@@ -222,10 +176,10 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
222
176
  trySetHover(false);
223
177
  _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(evt);
224
178
  }
225
- }, rest), showTags ? /*#__PURE__*/React__default["default"].createElement("span", {
179
+ }, rest), showTags ? /*#__PURE__*/React.createElement("span", {
226
180
  className: prefixCls + "__tags"
227
181
  }, mergedTagList.map(function (option, index) {
228
- return /*#__PURE__*/React__default["default"].createElement(MockTag, {
182
+ return /*#__PURE__*/React.createElement(MockTag, {
229
183
  hidden: wrap ? false : index > tagMaxCount,
230
184
  maxWidth: maxTagWidth,
231
185
  key: option.id,
@@ -238,37 +192,34 @@ var TagInputMock = /*#__PURE__*/React.forwardRef(function (_a, ref) {
238
192
  onTagResize: function onTagResize(id, w) {
239
193
  return setTagsWidth(function (prev) {
240
194
  var _Object$assign;
241
-
242
195
  return Object.assign(Object.assign({}, prev), (_Object$assign = {}, _Object$assign[id] = w, _Object$assign));
243
196
  });
244
197
  }
245
198
  });
246
- })) : /*#__PURE__*/React__default["default"].createElement("span", {
199
+ })) : /*#__PURE__*/React.createElement("span", {
247
200
  className: prefixCls + "__placeholder"
248
- }, placeholder), /*#__PURE__*/React__default["default"].createElement(ResizeDetector__default["default"], {
201
+ }, placeholder), /*#__PURE__*/React.createElement(ResizeDetector, {
249
202
  skipOnMount: false,
250
203
  onResize: function onResize(w) {
251
204
  if (w) {
252
205
  setSuffixWidth(w);
253
206
  }
254
207
  }
255
- }, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React__default["default"].createElement("span", {
208
+ }, !!suffix || showClearableIcon && hover || showTagCount ? /*#__PURE__*/React.createElement("span", {
256
209
  className: prefixCls + "__suffix"
257
- }, showTagCount ? /*#__PURE__*/React__default["default"].createElement("span", {
210
+ }, showTagCount ? /*#__PURE__*/React.createElement("span", {
258
211
  className: classname.cx(prefixCls + "__tag--total", activeExpandable && prefixCls + "__tag--active"),
259
212
  onClick: onExpand
260
- }, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React__default["default"].createElement("span", {
213
+ }, "" + (tagCount > 99 ? '99+' : tagCount)) : null, showClearableIcon && hover ? /*#__PURE__*/React.createElement("span", {
261
214
  className: prefixCls + "__clear",
262
215
  role: "button",
263
216
  tabIndex: -1,
264
217
  onClick: handleClear
265
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, null)) : suffix) : null)));
218
+ }, /*#__PURE__*/React.createElement(icons.CloseCircleFilled, null)) : suffix) : null)));
266
219
  });
267
-
268
220
  if (env.__DEV__) {
269
221
  TagInputMock.displayName = 'TagInputMock';
270
222
  }
271
-
272
223
  var hiddenStyle = {
273
224
  position: 'absolute',
274
225
  opacity: 0,
@@ -277,44 +228,42 @@ var hiddenStyle = {
277
228
  overflow: 'hidden',
278
229
  display: 'none'
279
230
  };
280
-
281
231
  function MockTag(_ref) {
282
232
  var prefixCls = _ref.prefixCls,
283
- option = _ref.option,
284
- disabled = _ref.disabled,
285
- value = _ref.value,
286
- onTagResize = _ref.onTagResize,
287
- tryChangeValue = _ref.tryChangeValue,
288
- displayRender = _ref.displayRender,
289
- maxWidth = _ref.maxWidth,
290
- _ref$hidden = _ref.hidden,
291
- hidden = _ref$hidden === void 0 ? false : _ref$hidden;
233
+ option = _ref.option,
234
+ disabled = _ref.disabled,
235
+ value = _ref.value,
236
+ onTagResize = _ref.onTagResize,
237
+ tryChangeValue = _ref.tryChangeValue,
238
+ displayRender = _ref.displayRender,
239
+ maxWidth = _ref.maxWidth,
240
+ _ref$hidden = _ref.hidden,
241
+ hidden = _ref$hidden === void 0 ? false : _ref$hidden;
292
242
  var title = typeAssertion.isFunction(displayRender) ? displayRender(option) : true;
293
243
  var closeable = !option.disabled;
294
- return /*#__PURE__*/React__default["default"].createElement(ResizeDetector__default["default"], {
244
+ return /*#__PURE__*/React.createElement(ResizeDetector, {
295
245
  skipOnMount: false,
296
246
  onResize: function onResize(width) {
297
247
  // 隐藏后就不允许设置 tagSize，避免无限循环触发“宽度计算响应式策略”
298
248
  if (hidden) return;
299
-
300
249
  if (width !== undefined) {
301
250
  onTagResize(option.id, width);
302
251
  }
303
252
  }
304
- }, /*#__PURE__*/React__default["default"].createElement("div", {
253
+ }, /*#__PURE__*/React.createElement("div", {
305
254
  style: {
306
255
  display: 'inline-block',
307
256
  verticalAlign: 'middle'
308
257
  }
309
- }, /*#__PURE__*/React__default["default"].createElement("span", {
258
+ }, /*#__PURE__*/React.createElement("span", {
310
259
  className: prefixCls + "__tag",
311
260
  style: hidden ? hiddenStyle : {
312
261
  maxWidth: maxWidth
313
262
  },
314
263
  key: option.id
315
- }, /*#__PURE__*/React__default["default"].createElement("span", {
264
+ }, /*#__PURE__*/React.createElement("span", {
316
265
  className: prefixCls + "__tag-content"
317
- }, title === true ? option.title : title), closeable ? /*#__PURE__*/React__default["default"].createElement("span", {
266
+ }, title === true ? option.title : title), closeable ? /*#__PURE__*/React.createElement("span", {
318
267
  className: prefixCls + "__tag-closed",
319
268
  onClick: function onClick(evt) {
320
269
  if (disabled) return;
@@ -324,7 +273,6 @@ function MockTag(_ref) {
324
273
  });
325
274
  tryChangeValue(nextValue, [option], false);
326
275
  }
327
- }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null)) : null)));
276
+ }, /*#__PURE__*/React.createElement(icons.CloseOutlined, null)) : null)));
328
277
  }
329
-
330
278
  exports.TagInputMock = TagInputMock;