@hi-ui/check-select 5.0.0-canary.0 → 5.0.0-canary.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 +25 -0
  2. package/lib/cjs/CheckSelect.js +32 -2
  3. package/lib/esm/CheckSelect.js +33 -3
  4. package/lib/types/CheckSelect.d.ts +12 -0
  5. package/lib/types/types.d.ts +1 -1
  6. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @hi-ui/check-select
2
2
 
3
+ ## 5.0.0-canary.2
4
+
5
+ ### Minor Changes
6
+
7
+ - d621cf2b7: feat(select): 增加 creatableInSearch、createTitle 参数，支持在搜索无结果时可创建选项 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [2451ab789]
12
+ - Updated dependencies [d621cf2b7]
13
+ - @hi-ui/popper@5.0.0-canary.1
14
+ - @hi-ui/picker@5.0.0-canary.2
15
+
16
+ ## 5.0.0-canary.1
17
+
18
+ ### Minor Changes
19
+
20
+ - 6c4bf35af: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies [6c4bf35af]
25
+ - @hi-ui/input@5.0.0-canary.2
26
+ - @hi-ui/tag-input@5.0.0-canary.2
27
+
3
28
  ## 5.0.0-canary.0
4
29
 
5
30
  ### Major Changes
package/lib/cjs/CheckSelect.js CHANGED
@@ -36,6 +36,7 @@ var useSearchMode = require('@hi-ui/use-search-mode');
36
36
  require('@hi-ui/use-children');
37
37
  var useFlattenData = require('./hooks/use-flatten-data.js');
38
38
  var index = require('./utils/index.js');
39
+ var useId = require('@hi-ui/use-id');
39
40
  function _interopDefaultCompat(e) {
40
41
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
41
42
  'default': e
@@ -85,6 +86,8 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
85
86
  titleRender = _a.render,
86
87
  renderExtraFooter = _a.renderExtraFooter,
87
88
  onSearchProp = _a.onSearch,
89
+ onItemCreate = _a.onItemCreate,
90
+ creatableInSearch = _a.creatableInSearch,
88
91
  _a$fieldNames = _a.fieldNames,
89
92
  fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
90
93
  _a$checkedOnEntered = _a.checkedOnEntered,
@@ -97,10 +100,12 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
97
100
  suffix = _a.suffix,
98
101
  onKeyDownProp = _a.onKeyDown,
99
102
  keywordProp = _a.keyword,
100
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword"]);
103
+ label = _a.label,
104
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "label"]);
101
105
  var i18n = core.useLocaleContext();
102
106
  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp;
103
107
  // ************************** Picker ************************* //
108
+ var innerRef = React.useRef(null);
104
109
  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
105
110
  visible: visible,
106
111
  disabled: disabled,
@@ -259,12 +264,29 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
259
264
  var handleKeyDown = useLatest.useLatestCallback(function (evt) {
260
265
  var key = evt.key;
261
266
  if (key === 'Enter' && checkedOnEntered) {
267
+ if (creatableInSearch && showData.length === 0) {
268
+ handleCreate(searchValue);
269
+ return;
270
+ }
262
271
  var focusedItem = showData[focusedIndex];
263
272
  if (focusedItem) {
264
273
  onSelect(focusedItem, !isCheckedId(focusedItem.id));
265
274
  }
266
275
  }
267
276
  });
277
+ var handleCreate = useLatest.useLatestCallback(function (keyword) {
278
+ var _a;
279
+ var id = keyword + "-" + useId.uuid();
280
+ var createdItem = {
281
+ id: id,
282
+ title: keyword
283
+ };
284
+ onSelect(createdItem, true);
285
+ onItemCreate === null || onItemCreate === void 0 ? void 0 : onItemCreate(createdItem);
286
+ // 创建后重置搜索和关闭弹窗
287
+ (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resetSearch();
288
+ menuVisibleAction.off();
289
+ });
268
290
  // 更新 focused 索引
269
291
  React.useEffect(function () {
270
292
  setFocusedIndex(defaultIndex);
@@ -302,6 +324,7 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
302
324
  value: context$1
303
325
  }, /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
304
326
  ref: ref,
327
+ innerRef: innerRef,
305
328
  className: cls
306
329
  }, rootProps, {
307
330
  visible: menuVisible,
@@ -315,7 +338,13 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
315
338
  onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
316
339
  loading: rest.loading !== undefined ? rest.loading : loading,
317
340
  footer: renderDefaultFooter(),
318
- trigger: customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({}, tagInputProps, {
341
+ creatableInSearch: creatableInSearch,
342
+ onCreate: handleCreate,
343
+ trigger: customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({
344
+ style: {
345
+ maxWidth: appearance === 'contained' ? '360px' : undefined
346
+ }
347
+ }, tagInputProps, {
319
348
  size: size,
320
349
  clearable: clearable,
321
350
  placeholder: placeholder,
@@ -325,6 +354,7 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
325
354
  suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
326
355
  focused: menuVisible,
327
356
  appearance: appearance,
357
+ label: label,
328
358
  value: value,
329
359
  // @ts-ignore
330
360
  onChange: tryChangeValue,
package/lib/esm/CheckSelect.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import { __rest } from 'tslib';
11
- import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
11
+ import React, { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useCheckSelect } from './use-check-select.js';
@@ -30,6 +30,7 @@ import { useAsyncSearch, useTreeCustomSearch, useFilterSearch, useSearchMode } f
30
30
  import '@hi-ui/use-children';
31
31
  import { flattenData } from './hooks/use-flatten-data.js';
32
32
  import { getAllCheckedStatus, isCheckableOption, isOption } from './utils/index.js';
33
+ import { uuid } from '@hi-ui/use-id';
33
34
  var _role = 'check-select';
34
35
  var _prefix = getPrefixCls(_role);
35
36
  var DEFAULT_FIELD_NAMES = {};
@@ -71,6 +72,8 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
71
72
  titleRender = _a.render,
72
73
  renderExtraFooter = _a.renderExtraFooter,
73
74
  onSearchProp = _a.onSearch,
75
+ onItemCreate = _a.onItemCreate,
76
+ creatableInSearch = _a.creatableInSearch,
74
77
  _a$fieldNames = _a.fieldNames,
75
78
  fieldNames = _a$fieldNames === void 0 ? DEFAULT_FIELD_NAMES : _a$fieldNames,
76
79
  _a$checkedOnEntered = _a.checkedOnEntered,
@@ -83,10 +86,12 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
83
86
  suffix = _a.suffix,
84
87
  onKeyDownProp = _a.onKeyDown,
85
88
  keywordProp = _a.keyword,
86
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword"]);
89
+ label = _a.label,
90
+ rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "label"]);
87
91
  var i18n = useLocaleContext();
88
92
  var placeholder = isUndef(placeholderProp) ? i18n.get('checkSelect.placeholder') : placeholderProp;
89
93
  // ************************** Picker ************************* //
94
+ var innerRef = useRef(null);
90
95
  var _useUncontrolledToggl = useUncontrolledToggle({
91
96
  visible: visible,
92
97
  disabled: disabled,
@@ -245,12 +250,29 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
245
250
  var handleKeyDown = useLatestCallback(function (evt) {
246
251
  var key = evt.key;
247
252
  if (key === 'Enter' && checkedOnEntered) {
253
+ if (creatableInSearch && showData.length === 0) {
254
+ handleCreate(searchValue);
255
+ return;
256
+ }
248
257
  var focusedItem = showData[focusedIndex];
249
258
  if (focusedItem) {
250
259
  onSelect(focusedItem, !isCheckedId(focusedItem.id));
251
260
  }
252
261
  }
253
262
  });
263
+ var handleCreate = useLatestCallback(function (keyword) {
264
+ var _a;
265
+ var id = keyword + "-" + uuid();
266
+ var createdItem = {
267
+ id: id,
268
+ title: keyword
269
+ };
270
+ onSelect(createdItem, true);
271
+ onItemCreate === null || onItemCreate === void 0 ? void 0 : onItemCreate(createdItem);
272
+ // 创建后重置搜索和关闭弹窗
273
+ (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.resetSearch();
274
+ menuVisibleAction.off();
275
+ });
254
276
  // 更新 focused 索引
255
277
  useEffect(function () {
256
278
  setFocusedIndex(defaultIndex);
@@ -288,6 +310,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
288
310
  value: context
289
311
  }, /*#__PURE__*/React.createElement(Picker, Object.assign({
290
312
  ref: ref,
313
+ innerRef: innerRef,
291
314
  className: cls
292
315
  }, rootProps, {
293
316
  visible: menuVisible,
@@ -301,7 +324,13 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
301
324
  onSearch: callAllFuncs(onSearchProp, onSearch),
302
325
  loading: rest.loading !== undefined ? rest.loading : loading,
303
326
  footer: renderDefaultFooter(),
304
- trigger: customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : ( /*#__PURE__*/React.createElement(TagInputMock, Object.assign({}, tagInputProps, {
327
+ creatableInSearch: creatableInSearch,
328
+ onCreate: handleCreate,
329
+ trigger: customRender ? typeof customRender === 'function' ? customRender(mergedCheckedItems) : customRender : ( /*#__PURE__*/React.createElement(TagInputMock, Object.assign({
330
+ style: {
331
+ maxWidth: appearance === 'contained' ? '360px' : undefined
332
+ }
333
+ }, tagInputProps, {
305
334
  size: size,
306
335
  clearable: clearable,
307
336
  placeholder: placeholder,
@@ -311,6 +340,7 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
311
340
  suffix: [menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null), suffix],
312
341
  focused: menuVisible,
313
342
  appearance: appearance,
343
+ label: label,
314
344
  value: value,
315
345
  // @ts-ignore
316
346
  onChange: tryChangeValue,
package/lib/types/CheckSelect.d.ts CHANGED
@@ -56,6 +56,10 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
56
56
  * 设置展现形式
57
57
  */
58
58
  appearance?: CheckSelectAppearanceEnum;
59
+ /**
60
+ * 设置输入框 label 内容，仅在 appearance 为 contained 时生效
61
+ */
62
+ label?: React.ReactNode;
59
63
  /**
60
64
  * 节点搜索模式，仅在mode=normal模式下生效
61
65
  */
@@ -118,6 +122,14 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
118
122
  * TagInput 参数设置
119
123
  */
120
124
  tagInputProps?: TagInputMockProps;
125
+ /**
126
+ * 是否开启创建选项
127
+ */
128
+ creatableInSearch?: boolean;
129
+ /**
130
+ * 创建选项时触发
131
+ */
132
+ onItemCreate?: (item: CheckSelectMergedItem) => void;
121
133
  }
122
134
  export declare const CheckSelectOption: React.ForwardRefExoticComponent<Pick<CheckSelectOptionProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
123
135
  export interface CheckSelectOptionProps extends HiBaseHTMLProps {
package/lib/types/types.d.ts CHANGED
@@ -49,4 +49,4 @@ export interface FlattedCheckSelectDataItem extends CheckSelectDataItem {
49
49
  }
50
50
  export interface CheckSelectItemEventData extends FlattedCheckSelectDataItem, CheckSelectRequiredProps {
51
51
  }
52
- export declare type CheckSelectAppearanceEnum = HiBaseAppearanceEnum | undefined;
52
+ export declare type CheckSelectAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/check-select",
3
- "version": "5.0.0-canary.0",
3
+ "version": "5.0.0-canary.2",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -52,16 +52,17 @@
52
52
  "@hi-ui/func-utils": "^5.0.0-canary.0",
53
53
  "@hi-ui/highlighter": "^5.0.0-canary.0",
54
54
  "@hi-ui/icons": "^5.0.0-canary.0",
55
- "@hi-ui/input": "^5.0.0-canary.0",
56
- "@hi-ui/picker": "^5.0.0-canary.0",
57
- "@hi-ui/popper": "^5.0.0-canary.0",
58
- "@hi-ui/tag-input": "^5.0.0-canary.0",
55
+ "@hi-ui/input": "^5.0.0-canary.2",
56
+ "@hi-ui/picker": "^5.0.0-canary.2",
57
+ "@hi-ui/popper": "^5.0.0-canary.1",
58
+ "@hi-ui/tag-input": "^5.0.0-canary.2",
59
59
  "@hi-ui/times": "^5.0.0-canary.0",
60
60
  "@hi-ui/tree-utils": "^5.0.0-canary.0",
61
61
  "@hi-ui/type-assertion": "^5.0.0-canary.0",
62
62
  "@hi-ui/use-check": "^5.0.0-canary.0",
63
63
  "@hi-ui/use-children": "^5.0.0-canary.0",
64
64
  "@hi-ui/use-data-source": "^5.0.0-canary.0",
65
+ "@hi-ui/use-id": "^5.0.0-canary.0",
65
66
  "@hi-ui/use-latest": "^5.0.0-canary.0",
66
67
  "@hi-ui/use-search-mode": "^5.0.0-canary.0",
67
68
  "@hi-ui/use-toggle": "^5.0.0-canary.0",