@hi-ui/check-cascader 5.0.0-canary.1 → 5.0.0-canary.3

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 (8) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/lib/cjs/CheckCascader.js +72 -5
  3. package/lib/cjs/styles/index.scss.js +1 -1
  4. package/lib/esm/CheckCascader.js +74 -7
  5. package/lib/esm/styles/index.scss.js +1 -1
  6. package/lib/types/CheckCascader.d.ts +11 -3
  7. package/lib/types/types.d.ts +3 -1
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @hi-ui/check-cascader
2
2
 
3
+ ## 5.0.0-canary.3
4
+
5
+ ### Minor Changes
6
+
7
+ - c3052130d: feat(check-cascader): add showOnlyShowChecked api (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - df3615e78: <br>
12
+ - style(tag-input): 间距调整 (5.0)
13
+ - style(select): 选择类组件选项圆角改为 4px (5.0)
14
+ - style(picker): 搜索框样式调整 (5.0)
15
+ - Updated dependencies [3cb3377dc]
16
+ - Updated dependencies [df3615e78]
17
+ - @hi-ui/picker@5.0.0-canary.3
18
+ - @hi-ui/tag-input@5.0.0-canary.4
19
+
20
+ ## 5.0.0-canary.2
21
+
22
+ ### Minor Changes
23
+
24
+ - 6c4bf35af: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies [6c4bf35af]
29
+ - @hi-ui/input@5.0.0-canary.2
30
+ - @hi-ui/tag-input@5.0.0-canary.2
31
+
3
32
  ## 5.0.0-canary.1
4
33
 
5
34
  ### Patch Changes
package/lib/cjs/CheckCascader.js CHANGED
@@ -85,7 +85,9 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
85
85
  dropdownColumnRender = _a.dropdownColumnRender,
86
86
  customRender = _a.customRender,
87
87
  fieldNames = _a.fieldNames,
88
- rest = tslib.__rest(_a, ["prefixCls", "className", "defaultValue", "value", "onChange", "data", "placeholder", "clearable", "onSelect", "expandTrigger", "disabled", "emptyContent", "changeOnSelect", "render", "displayRender", "checkCascaded", "searchPlaceholder", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames"]);
88
+ label = _a.label,
89
+ showOnlyShowChecked = _a.showOnlyShowChecked,
90
+ rest = tslib.__rest(_a, ["prefixCls", "className", "defaultValue", "value", "onChange", "data", "placeholder", "clearable", "onSelect", "expandTrigger", "disabled", "emptyContent", "changeOnSelect", "render", "displayRender", "checkCascaded", "searchPlaceholder", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames", "label", "showOnlyShowChecked"]);
89
91
  var i18n = core.useLocaleContext();
90
92
  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkCascader.placeholder') : placeholderProp;
91
93
  var flatted = type === 'flatted';
@@ -97,6 +99,11 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
97
99
  }),
98
100
  menuVisible = _useUncontrolledToggl[0],
99
101
  menuVisibleAction = _useUncontrolledToggl[1];
102
+ var _useState = React.useState(null),
103
+ filterItems = _useState[0],
104
+ setFilterItems = _useState[1];
105
+ var expandedViewRef = React.useRef('normal');
106
+ var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
100
107
  var _useCache = index.useCache(data),
101
108
  cascaderData = _useCache[0],
102
109
  setCascaderData = _useCache[1];
@@ -195,7 +202,7 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
195
202
  }, [titleRender, searchValue, searchMode]);
196
203
  var shouldUseSearch = !!searchValue;
197
204
  var selectProps = {
198
- data: shouldUseSearch ? stateInSearch.data : flattedData,
205
+ data: filterItems || (shouldUseSearch ? stateInSearch.data : flattedData),
199
206
  titleRender: proxyTitleRender
200
207
  };
201
208
  var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
@@ -225,7 +232,11 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
225
232
  footer: typeAssertion.isFunction(renderExtraFooter) && renderExtraFooter(),
226
233
  keyword: keywordProp,
227
234
  onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
228
- trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItems) : customRender : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({}, tagInputProps, {
235
+ trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItems) : customRender : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({
236
+ style: {
237
+ maxWidth: appearance === 'contained' ? '360px' : undefined
238
+ }
239
+ }, tagInputProps, {
229
240
  size: size,
230
241
  clearable: clearable,
231
242
  placeholder: placeholder,
@@ -239,7 +250,63 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
239
250
  // @ts-ignore
240
251
  onChange: proxyOnChange,
241
252
  data: flattedData,
242
- invalid: invalid
253
+ invalid: invalid,
254
+ label: label,
255
+ // onExpand={() => {
256
+ // // setViewSelected(true)
257
+ // menuVisibleAction.on()
258
+ // }}
259
+ onClick: function onClick(evt) {
260
+ if (!showOnlyShowChecked) return;
261
+ evt.preventDefault();
262
+ if (filterItems) {
263
+ setFilterItems(null);
264
+ }
265
+ if (menuVisible) {
266
+ if (expandedViewRef.current === 'normal') {
267
+ menuVisibleAction.off();
268
+ }
269
+ } else {
270
+ menuVisibleAction.on();
271
+ }
272
+ expandedViewRef.current = 'normal';
273
+ },
274
+ expandable: showOnlyShowChecked,
275
+ activeExpandable: activeExpandable,
276
+ onExpand: function onExpand(evt) {
277
+ if (!showOnlyShowChecked) return;
278
+ // 阻止冒泡触发外层 onClick
279
+ evt.preventDefault();
280
+ evt.stopPropagation();
281
+ // 选中数据
282
+ setFilterItems(function () {
283
+ var filterFunc = function filterFunc(node) {
284
+ var _a;
285
+ if (value.includes(node.id)) {
286
+ return true;
287
+ }
288
+ if (node.children && ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
289
+ return node.children.some(function (child) {
290
+ return filterFunc(child);
291
+ });
292
+ }
293
+ return false;
294
+ };
295
+ // filterTree 过滤树结构，将不包含value中的节点分支过滤掉
296
+ // 返回过滤后的树结构
297
+ var treeData = treeUtils.filterTree(data, filterFunc);
298
+ return index$1.flattenTreeData(treeData, fieldNames);
299
+ });
300
+ // 展开/关闭操作
301
+ if (menuVisible) {
302
+ if (expandedViewRef.current !== 'normal') {
303
+ menuVisibleAction.off();
304
+ }
305
+ } else {
306
+ menuVisibleAction.on();
307
+ }
308
+ expandedViewRef.current = 'onlyChecked';
309
+ }
243
310
  })))
244
311
  }), typeAssertion.isArrayNonEmpty(selectProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(CheckCascaderMenuList.CheckCascaderMenuList, {
245
312
  disabled: disabled,
@@ -252,7 +319,7 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
252
319
  onSelect: onSelect,
253
320
  onLoadChildren: onLoadChildren,
254
321
  titleRender: proxyTitleRender,
255
- flatted: flatted || !!searchValue,
322
+ flatted: flatted || !!searchValue || activeExpandable,
256
323
  // @ts-ignore
257
324
  flattedData: selectProps.data,
258
325
  originalFlattedData: flattedData,
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "@charset \"UTF-8\";.hi-v5-check-cascader__popper .hi-v5-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v5-check-cascader__popper .hi-v5-picker__loading, .hi-v5-check-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-check-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-check-cascader-panel-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v5-check-cascader-panel-search .hi-v5-input__prefix {font-size: 16px;padding-left: 0;}.hi-v5-check-cascader-panel-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v5-check-cascader-menus {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-check-cascader-menus--flatted .hi-v5-check-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-check-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 140px;max-height: 256px;overflow: auto;padding: 0 var(--hi-v5-spacing-3, 6px);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6eaf0);}.hi-v5-check-cascader-menu:last-of-type {border: none;}.hi-v5-check-cascader-menu--checkable .hi-v5-check-cascader-menu-checkbox + .title__text {padding-left: 8px;}.hi-v5-check-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-check-cascader-menu-checkbox {position: relative;}.hi-v5-check-cascader-menu-checkbox::after {right: 0;top: -8px;bottom: -8px;left: -8px;content: \"\";position: absolute;display: block;}.hi-v5-check-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-3, 6px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-check-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #ebeff5);}.hi-v5-check-cascader-menus--selectchange .hi-v5-check-cascader-menu-option:hover .hi-v5-checkbox__icon {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-check-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-500, #737680);background: transparent;}.hi-v5-check-cascader-menu-option--disabled .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-gray-400, #c0c3cc);}.hi-v5-check-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-check-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-check-cascader-menu .title__text--col {display: inline-block;}.hi-v5-check-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-check-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-check-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-check-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tree--icon-loading {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
15
+ var css_248z = "@charset \"UTF-8\";.hi-v5-check-cascader__popper .hi-v5-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v5-check-cascader__popper .hi-v5-picker__loading, .hi-v5-check-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-check-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-check-cascader-panel-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v5-check-cascader-panel-search .hi-v5-input__prefix {font-size: 16px;padding-left: 0;}.hi-v5-check-cascader-panel-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v5-check-cascader-menus {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-check-cascader-menus--flatted .hi-v5-check-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-check-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 140px;max-height: 256px;overflow: auto;padding: 0 var(--hi-v5-spacing-3, 6px);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6eaf0);}.hi-v5-check-cascader-menu:last-of-type {border: none;}.hi-v5-check-cascader-menu--checkable .hi-v5-check-cascader-menu-checkbox + .title__text {padding-left: 8px;}.hi-v5-check-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-check-cascader-menu-checkbox {position: relative;}.hi-v5-check-cascader-menu-checkbox::after {right: 0;top: -8px;bottom: -8px;left: -8px;content: \"\";position: absolute;display: block;}.hi-v5-check-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-3, 6px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-md, 4px);}.hi-v5-check-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #ebeff5);}.hi-v5-check-cascader-menus--selectchange .hi-v5-check-cascader-menu-option:hover .hi-v5-checkbox__icon {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #e0e9ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #e0e9ff));}.hi-v5-check-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-500, #737680);background: transparent;}.hi-v5-check-cascader-menu-option--disabled .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-gray-400, #c0c3cc);}.hi-v5-check-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-check-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-check-cascader-menu .title__text--col {display: inline-block;}.hi-v5-check-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-check-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-check-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-check-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tree--icon-loading {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/CheckCascader.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, useMemo, useCallback } from 'react';
11
+ import React, { forwardRef, useState, useRef, useMemo, useCallback } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledToggle } from '@hi-ui/use-toggle';
@@ -20,7 +20,7 @@ import { TagInputMock } from '@hi-ui/tag-input';
20
20
  import { CheckCascaderMenuList } from './CheckCascaderMenuList.js';
21
21
  import { useTreeCustomSearch, useTreeUpMatchSearch, useSearchMode, matchStrategy } from '@hi-ui/use-search-mode';
22
22
  import { flattenTreeData } from './utils/index.js';
23
- import { getTopDownAncestors, getNodeAncestorsWithMe } from '@hi-ui/tree-utils';
23
+ import { getTopDownAncestors, getNodeAncestorsWithMe, filterTree } from '@hi-ui/tree-utils';
24
24
  import { useLatestCallback } from '@hi-ui/use-latest';
25
25
  import { isUndef, isFunction, isArrayNonEmpty } from '@hi-ui/type-assertion';
26
26
  import { useLocaleContext } from '@hi-ui/core';
@@ -73,7 +73,9 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
73
73
  dropdownColumnRender = _a.dropdownColumnRender,
74
74
  customRender = _a.customRender,
75
75
  fieldNames = _a.fieldNames,
76
- rest = __rest(_a, ["prefixCls", "className", "defaultValue", "value", "onChange", "data", "placeholder", "clearable", "onSelect", "expandTrigger", "disabled", "emptyContent", "changeOnSelect", "render", "displayRender", "checkCascaded", "searchPlaceholder", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames"]);
76
+ label = _a.label,
77
+ showOnlyShowChecked = _a.showOnlyShowChecked,
78
+ rest = __rest(_a, ["prefixCls", "className", "defaultValue", "value", "onChange", "data", "placeholder", "clearable", "onSelect", "expandTrigger", "disabled", "emptyContent", "changeOnSelect", "render", "displayRender", "checkCascaded", "searchPlaceholder", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames", "label", "showOnlyShowChecked"]);
77
79
  var i18n = useLocaleContext();
78
80
  var placeholder = isUndef(placeholderProp) ? i18n.get('checkCascader.placeholder') : placeholderProp;
79
81
  var flatted = type === 'flatted';
@@ -85,6 +87,11 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
85
87
  }),
86
88
  menuVisible = _useUncontrolledToggl[0],
87
89
  menuVisibleAction = _useUncontrolledToggl[1];
90
+ var _useState = useState(null),
91
+ filterItems = _useState[0],
92
+ setFilterItems = _useState[1];
93
+ var expandedViewRef = useRef('normal');
94
+ var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
88
95
  var _useCache = useCache(data),
89
96
  cascaderData = _useCache[0],
90
97
  setCascaderData = _useCache[1];
@@ -183,7 +190,7 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
183
190
  }, [titleRender, searchValue, searchMode]);
184
191
  var shouldUseSearch = !!searchValue;
185
192
  var selectProps = {
186
- data: shouldUseSearch ? stateInSearch.data : flattedData,
193
+ data: filterItems || (shouldUseSearch ? stateInSearch.data : flattedData),
187
194
  titleRender: proxyTitleRender
188
195
  };
189
196
  var cls = cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
@@ -213,7 +220,11 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
213
220
  footer: isFunction(renderExtraFooter) && renderExtraFooter(),
214
221
  keyword: keywordProp,
215
222
  onSearch: callAllFuncs(onSearchProp, onSearch),
216
- trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItems) : customRender : ( /*#__PURE__*/React.createElement(TagInputMock, Object.assign({}, tagInputProps, {
223
+ trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItems) : customRender : ( /*#__PURE__*/React.createElement(TagInputMock, Object.assign({
224
+ style: {
225
+ maxWidth: appearance === 'contained' ? '360px' : undefined
226
+ }
227
+ }, tagInputProps, {
217
228
  size: size,
218
229
  clearable: clearable,
219
230
  placeholder: placeholder,
@@ -227,7 +238,63 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
227
238
  // @ts-ignore
228
239
  onChange: proxyOnChange,
229
240
  data: flattedData,
230
- invalid: invalid
241
+ invalid: invalid,
242
+ label: label,
243
+ // onExpand={() => {
244
+ // // setViewSelected(true)
245
+ // menuVisibleAction.on()
246
+ // }}
247
+ onClick: function onClick(evt) {
248
+ if (!showOnlyShowChecked) return;
249
+ evt.preventDefault();
250
+ if (filterItems) {
251
+ setFilterItems(null);
252
+ }
253
+ if (menuVisible) {
254
+ if (expandedViewRef.current === 'normal') {
255
+ menuVisibleAction.off();
256
+ }
257
+ } else {
258
+ menuVisibleAction.on();
259
+ }
260
+ expandedViewRef.current = 'normal';
261
+ },
262
+ expandable: showOnlyShowChecked,
263
+ activeExpandable: activeExpandable,
264
+ onExpand: function onExpand(evt) {
265
+ if (!showOnlyShowChecked) return;
266
+ // 阻止冒泡触发外层 onClick
267
+ evt.preventDefault();
268
+ evt.stopPropagation();
269
+ // 选中数据
270
+ setFilterItems(function () {
271
+ var filterFunc = function filterFunc(node) {
272
+ var _a;
273
+ if (value.includes(node.id)) {
274
+ return true;
275
+ }
276
+ if (node.children && ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
277
+ return node.children.some(function (child) {
278
+ return filterFunc(child);
279
+ });
280
+ }
281
+ return false;
282
+ };
283
+ // filterTree 过滤树结构，将不包含value中的节点分支过滤掉
284
+ // 返回过滤后的树结构
285
+ var treeData = filterTree(data, filterFunc);
286
+ return flattenTreeData(treeData, fieldNames);
287
+ });
288
+ // 展开/关闭操作
289
+ if (menuVisible) {
290
+ if (expandedViewRef.current !== 'normal') {
291
+ menuVisibleAction.off();
292
+ }
293
+ } else {
294
+ menuVisibleAction.on();
295
+ }
296
+ expandedViewRef.current = 'onlyChecked';
297
+ }
231
298
  })))
232
299
  }), isArrayNonEmpty(selectProps.data) ? ( /*#__PURE__*/React.createElement(CheckCascaderMenuList, {
233
300
  disabled: disabled,
@@ -240,7 +307,7 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
240
307
  onSelect: onSelect,
241
308
  onLoadChildren: onLoadChildren,
242
309
  titleRender: proxyTitleRender,
243
- flatted: flatted || !!searchValue,
310
+ flatted: flatted || !!searchValue || activeExpandable,
244
311
  // @ts-ignore
245
312
  flattedData: selectProps.data,
246
313
  originalFlattedData: flattedData,
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- var css_248z = "@charset \"UTF-8\";.hi-v5-check-cascader__popper .hi-v5-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v5-check-cascader__popper .hi-v5-picker__loading, .hi-v5-check-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-check-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-check-cascader-panel-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v5-check-cascader-panel-search .hi-v5-input__prefix {font-size: 16px;padding-left: 0;}.hi-v5-check-cascader-panel-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v5-check-cascader-menus {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-check-cascader-menus--flatted .hi-v5-check-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-check-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 140px;max-height: 256px;overflow: auto;padding: 0 var(--hi-v5-spacing-3, 6px);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6eaf0);}.hi-v5-check-cascader-menu:last-of-type {border: none;}.hi-v5-check-cascader-menu--checkable .hi-v5-check-cascader-menu-checkbox + .title__text {padding-left: 8px;}.hi-v5-check-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-check-cascader-menu-checkbox {position: relative;}.hi-v5-check-cascader-menu-checkbox::after {right: 0;top: -8px;bottom: -8px;left: -8px;content: \"\";position: absolute;display: block;}.hi-v5-check-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-3, 6px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-check-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #ebeff5);}.hi-v5-check-cascader-menus--selectchange .hi-v5-check-cascader-menu-option:hover .hi-v5-checkbox__icon {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-check-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-500, #737680);background: transparent;}.hi-v5-check-cascader-menu-option--disabled .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-gray-400, #c0c3cc);}.hi-v5-check-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-check-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-check-cascader-menu .title__text--col {display: inline-block;}.hi-v5-check-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-check-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-check-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-check-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tree--icon-loading {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
11
+ var css_248z = "@charset \"UTF-8\";.hi-v5-check-cascader__popper .hi-v5-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v5-check-cascader__popper .hi-v5-picker__loading, .hi-v5-check-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-check-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-check-cascader-panel-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v5-check-cascader-panel-search .hi-v5-input__prefix {font-size: 16px;padding-left: 0;}.hi-v5-check-cascader-panel-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v5-check-cascader-menus {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-check-cascader-menus--flatted .hi-v5-check-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-check-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 140px;max-height: 256px;overflow: auto;padding: 0 var(--hi-v5-spacing-3, 6px);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6eaf0);}.hi-v5-check-cascader-menu:last-of-type {border: none;}.hi-v5-check-cascader-menu--checkable .hi-v5-check-cascader-menu-checkbox + .title__text {padding-left: 8px;}.hi-v5-check-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-check-cascader-menu-checkbox {position: relative;}.hi-v5-check-cascader-menu-checkbox::after {right: 0;top: -8px;bottom: -8px;left: -8px;content: \"\";position: absolute;display: block;}.hi-v5-check-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-3, 6px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-md, 4px);}.hi-v5-check-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #ebeff5);}.hi-v5-check-cascader-menus--selectchange .hi-v5-check-cascader-menu-option:hover .hi-v5-checkbox__icon {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #e0e9ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #e0e9ff));}.hi-v5-check-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-500, #737680);background: transparent;}.hi-v5-check-cascader-menu-option--disabled .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-gray-400, #c0c3cc);}.hi-v5-check-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-check-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-check-cascader-menu .title__text--col {display: inline-block;}.hi-v5-check-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-check-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-check-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-check-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tree--icon-loading {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/CheckCascader.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import { CheckCascaderDataItem, CheckCascaderExpandTriggerEnum, CheckCascaderItemEventData, FlattedCheckCascaderDataItem } from './types';
2
+ import { CheckCascaderDataItem, CheckCascaderExpandTriggerEnum, CheckCascaderItemEventData, CheckCascaderAppearanceEnum, FlattedCheckCascaderDataItem } from './types';
3
3
  import { PickerProps } from '@hi-ui/picker';
4
4
  import { TagInputMockProps } from '@hi-ui/tag-input';
5
- import { HiBaseAppearanceEnum, HiBaseFieldNames, HiBaseSizeEnum } from '@hi-ui/core';
5
+ import { HiBaseFieldNames, HiBaseSizeEnum } from '@hi-ui/core';
6
6
  /**
7
7
  * 多项级联选择器
8
8
  */
@@ -89,7 +89,11 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
89
89
  /**
90
90
  * 设置展现形式
91
91
  */
92
- appearance?: HiBaseAppearanceEnum;
92
+ appearance?: CheckCascaderAppearanceEnum;
93
+ /**
94
+ * 设置输入框 label 内容，仅在 appearance 为 contained 时生效
95
+ */
96
+ label?: React.ReactNode;
93
97
  /**
94
98
  * 自定义搜索过滤器，仅在 searchable 为 true 时有效
95
99
  * 第一个参数为输入的关键字，
@@ -132,4 +136,8 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
132
136
  * 自定义触发器
133
137
  */
134
138
  customRender?: React.ReactNode | ((selectItems: (FlattedCheckCascaderDataItem | undefined)[]) => React.ReactNode);
139
+ /**
140
+ * 是否只展示选中的选项
141
+ */
142
+ showOnlyShowChecked?: boolean;
135
143
  }
package/lib/types/types.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import React from 'react';
2
+ import type { HiBaseAppearanceEnum } from '@hi-ui/core';
2
3
  export interface CheckCascaderDataItem {
3
4
  /**
4
5
  * 树节点唯一 id
5
6
  */
6
- id?: React.ReactText;
7
+ id: React.ReactText;
7
8
  /**
8
9
  * 树节点标题
9
10
  */
@@ -59,3 +60,4 @@ export interface CheckCascaderDataItemRequiredProps {
59
60
  export interface CheckCascaderItemEventData extends FlattedCheckCascaderDataItem, CheckCascaderDataItemRequiredProps {
60
61
  }
61
62
  export declare type CheckCascaderExpandTriggerEnum = 'click' | 'hover';
63
+ export declare type CheckCascaderAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/check-cascader",
3
- "version": "5.0.0-canary.1",
3
+ "version": "5.0.0-canary.3",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -51,11 +51,11 @@
51
51
  "@hi-ui/env": "^5.0.0-canary.0",
52
52
  "@hi-ui/func-utils": "^5.0.0-canary.0",
53
53
  "@hi-ui/icons": "^5.0.0-canary.0",
54
- "@hi-ui/input": "^5.0.0-canary.1",
55
- "@hi-ui/picker": "^5.0.0-canary.1",
54
+ "@hi-ui/input": "^5.0.0-canary.2",
55
+ "@hi-ui/picker": "^5.0.0-canary.3",
56
56
  "@hi-ui/popper": "^5.0.0-canary.0",
57
57
  "@hi-ui/spinner": "^5.0.0-canary.0",
58
- "@hi-ui/tag-input": "^5.0.0-canary.1",
58
+ "@hi-ui/tag-input": "^5.0.0-canary.4",
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",
@@ -75,7 +75,7 @@
75
75
  },
76
76
  "devDependencies": {
77
77
  "@hi-ui/core": "^5.0.0-canary.0",
78
- "@hi-ui/core-css": "^5.0.0-canary.1",
78
+ "@hi-ui/core-css": "^5.0.0-canary.2",
79
79
  "react": "^17.0.1",
80
80
  "react-dom": "^17.0.1"
81
81
  }