@hi-ui/check-cascader 5.0.0-canary.2 → 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 +17 -0
  2. package/lib/cjs/CheckCascader.js +65 -4
  3. package/lib/cjs/styles/index.scss.js +1 -1
  4. package/lib/esm/CheckCascader.js +67 -6
  5. package/lib/esm/styles/index.scss.js +1 -1
  6. package/lib/types/CheckCascader.d.ts +4 -0
  7. package/lib/types/types.d.ts +1 -1
  8. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
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
+
3
20
  ## 5.0.0-canary.2
4
21
 
5
22
  ### Minor Changes
package/lib/cjs/CheckCascader.js CHANGED
@@ -86,7 +86,8 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
86
86
  customRender = _a.customRender,
87
87
  fieldNames = _a.fieldNames,
88
88
  label = _a.label,
89
- 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"]);
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"]);
90
91
  var i18n = core.useLocaleContext();
91
92
  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkCascader.placeholder') : placeholderProp;
92
93
  var flatted = type === 'flatted';
@@ -98,6 +99,11 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
98
99
  }),
99
100
  menuVisible = _useUncontrolledToggl[0],
100
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;
101
107
  var _useCache = index.useCache(data),
102
108
  cascaderData = _useCache[0],
103
109
  setCascaderData = _useCache[1];
@@ -196,7 +202,7 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
196
202
  }, [titleRender, searchValue, searchMode]);
197
203
  var shouldUseSearch = !!searchValue;
198
204
  var selectProps = {
199
- data: shouldUseSearch ? stateInSearch.data : flattedData,
205
+ data: filterItems || (shouldUseSearch ? stateInSearch.data : flattedData),
200
206
  titleRender: proxyTitleRender
201
207
  };
202
208
  var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
@@ -245,7 +251,62 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
245
251
  onChange: proxyOnChange,
246
252
  data: flattedData,
247
253
  invalid: invalid,
248
- label: label
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
+ }
249
310
  })))
250
311
  }), typeAssertion.isArrayNonEmpty(selectProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(CheckCascaderMenuList.CheckCascaderMenuList, {
251
312
  disabled: disabled,
@@ -258,7 +319,7 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
258
319
  onSelect: onSelect,
259
320
  onLoadChildren: onLoadChildren,
260
321
  titleRender: proxyTitleRender,
261
- flatted: flatted || !!searchValue,
322
+ flatted: flatted || !!searchValue || activeExpandable,
262
323
  // @ts-ignore
263
324
  flattedData: selectProps.data,
264
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';
@@ -74,7 +74,8 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
74
74
  customRender = _a.customRender,
75
75
  fieldNames = _a.fieldNames,
76
76
  label = _a.label,
77
- 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"]);
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"]);
78
79
  var i18n = useLocaleContext();
79
80
  var placeholder = isUndef(placeholderProp) ? i18n.get('checkCascader.placeholder') : placeholderProp;
80
81
  var flatted = type === 'flatted';
@@ -86,6 +87,11 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
86
87
  }),
87
88
  menuVisible = _useUncontrolledToggl[0],
88
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;
89
95
  var _useCache = useCache(data),
90
96
  cascaderData = _useCache[0],
91
97
  setCascaderData = _useCache[1];
@@ -184,7 +190,7 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
184
190
  }, [titleRender, searchValue, searchMode]);
185
191
  var shouldUseSearch = !!searchValue;
186
192
  var selectProps = {
187
- data: shouldUseSearch ? stateInSearch.data : flattedData,
193
+ data: filterItems || (shouldUseSearch ? stateInSearch.data : flattedData),
188
194
  titleRender: proxyTitleRender
189
195
  };
190
196
  var cls = cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
@@ -233,7 +239,62 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
233
239
  onChange: proxyOnChange,
234
240
  data: flattedData,
235
241
  invalid: invalid,
236
- label: label
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
+ }
237
298
  })))
238
299
  }), isArrayNonEmpty(selectProps.data) ? ( /*#__PURE__*/React.createElement(CheckCascaderMenuList, {
239
300
  disabled: disabled,
@@ -246,7 +307,7 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
246
307
  onSelect: onSelect,
247
308
  onLoadChildren: onLoadChildren,
248
309
  titleRender: proxyTitleRender,
249
- flatted: flatted || !!searchValue,
310
+ flatted: flatted || !!searchValue || activeExpandable,
250
311
  // @ts-ignore
251
312
  flattedData: selectProps.data,
252
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
@@ -136,4 +136,8 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
136
136
  * 自定义触发器
137
137
  */
138
138
  customRender?: React.ReactNode | ((selectItems: (FlattedCheckCascaderDataItem | undefined)[]) => React.ReactNode);
139
+ /**
140
+ * 是否只展示选中的选项
141
+ */
142
+ showOnlyShowChecked?: boolean;
139
143
  }
package/lib/types/types.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface CheckCascaderDataItem {
4
4
  /**
5
5
  * 树节点唯一 id
6
6
  */
7
- id?: React.ReactText;
7
+ id: React.ReactText;
8
8
  /**
9
9
  * 树节点标题
10
10
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/check-cascader",
3
- "version": "5.0.0-canary.2",
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>",
@@ -52,10 +52,10 @@
52
52
  "@hi-ui/func-utils": "^5.0.0-canary.0",
53
53
  "@hi-ui/icons": "^5.0.0-canary.0",
54
54
  "@hi-ui/input": "^5.0.0-canary.2",
55
- "@hi-ui/picker": "^5.0.0-canary.1",
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.2",
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
  }