@hi-ui/check-cascader 4.2.7 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hi-ui/check-cascader
 
+## 4.3.0
+
+### Minor Changes
+
+- [#2868](https://github.com/XiaoMi/hiui/pull/2868) [`95f2e843d`](https://github.com/XiaoMi/hiui/commit/95f2e843d154d5767c08d7a04a86d61804d71396) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 新增支持配置字段别名
+
+- [#2824](https://github.com/XiaoMi/hiui/pull/2824) [`912c60b7b`](https://github.com/XiaoMi/hiui/commit/912c60b7b0f19a8386ec1de30fe6440e3963f288) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 支持前置后置内容
+
+- [#2920](https://github.com/XiaoMi/hiui/pull/2920) [`ec38ee1a6`](https://github.com/XiaoMi/hiui/commit/ec38ee1a62f1716106ecd4617840295c1f22ed5b) Thanks [@yang-x20](https://github.com/yang-x20)! - feat: 新增自定义触发器
+
 ## 4.2.7
 
 ### Patch Changes

package/lib/cjs/CheckCascader.js

@@ -78,9 +78,13 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     tagInputProps = _a.tagInputProps,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'md' : _a$size,
+    prefix = _a.prefix,
+    suffix = _a.suffix,
     renderExtraFooter = _a.renderExtraFooter,
     dropdownColumnRender = _a.dropdownColumnRender,
-    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", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "renderExtraFooter", "dropdownColumnRender"]);
+    customRender = _a.customRender,
+    fieldNames = _a.fieldNames,
+    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", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames"]);
   var i18n = core.useLocaleContext();
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkCascader.placeholder') : placeholderProp;
   var flatted = type === 'flatted';
@@ -96,8 +100,8 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     cascaderData = _useCache[0],
     setCascaderData = _useCache[1];
   var flattedData = React.useMemo(function () {
-    return index$1.flattenTreeData(cascaderData);
-  }, [cascaderData]);
+    return index$1.flattenTreeData(cascaderData, fieldNames);
+  }, [cascaderData, fieldNames]);
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
     _value = _useUncontrolledState[0],
     tryChangeValue = _useUncontrolledState[1];
@@ -190,6 +194,13 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     titleRender: proxyTitleRender
   };
   var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
+  var selectedItems = React.useMemo(function () {
+    return value.map(function (selectedId) {
+      return flattedData.find(function (item) {
+        return item.id === selectedId;
+      });
+    });
+  }, [value, flattedData]);
   return /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
     ref: ref,
     className: cls,
@@ -210,13 +221,14 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     scrollable: false,
     footer: typeAssertion.isFunction(renderExtraFooter) && renderExtraFooter(),
     onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
-    trigger: /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({}, tagInputProps, {
+    trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItems) : customRender : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({}, tagInputProps, {
       size: size,
       clearable: clearable,
       placeholder: placeholder,
       // @ts-ignore
       displayRender: displayRender,
-      suffix: menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null),
+      prefix: prefix,
+      suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
       focused: menuVisible,
       appearance: appearance,
       value: value,
@@ -224,7 +236,7 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onChange: proxyOnChange,
       data: flattedData,
       invalid: invalid
-    }))
+    })))
   }), typeAssertion.isArrayNonEmpty(selectProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(CheckCascaderMenuList.CheckCascaderMenuList, {
     disabled: disabled,
     value: value,

package/lib/esm/CheckCascader.js

@@ -66,9 +66,13 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
     tagInputProps = _a.tagInputProps,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'md' : _a$size,
+    prefix = _a.prefix,
+    suffix = _a.suffix,
     renderExtraFooter = _a.renderExtraFooter,
     dropdownColumnRender = _a.dropdownColumnRender,
-    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", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "renderExtraFooter", "dropdownColumnRender"]);
+    customRender = _a.customRender,
+    fieldNames = _a.fieldNames,
+    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", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames"]);
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('checkCascader.placeholder') : placeholderProp;
   var flatted = type === 'flatted';
@@ -84,8 +88,8 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
     cascaderData = _useCache[0],
     setCascaderData = _useCache[1];
   var flattedData = useMemo(function () {
-    return flattenTreeData(cascaderData);
-  }, [cascaderData]);
+    return flattenTreeData(cascaderData, fieldNames);
+  }, [cascaderData, fieldNames]);
   var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
     _value = _useUncontrolledState[0],
     tryChangeValue = _useUncontrolledState[1];
@@ -178,6 +182,13 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
     titleRender: proxyTitleRender
   };
   var cls = cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
+  var selectedItems = useMemo(function () {
+    return value.map(function (selectedId) {
+      return flattedData.find(function (item) {
+        return item.id === selectedId;
+      });
+    });
+  }, [value, flattedData]);
   return /*#__PURE__*/React.createElement(Picker, Object.assign({
     ref: ref,
     className: cls,
@@ -198,13 +209,14 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
     scrollable: false,
     footer: isFunction(renderExtraFooter) && renderExtraFooter(),
     onSearch: callAllFuncs(onSearchProp, onSearch),
-    trigger: /*#__PURE__*/React.createElement(TagInputMock, Object.assign({}, tagInputProps, {
+    trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItems) : customRender : ( /*#__PURE__*/React.createElement(TagInputMock, Object.assign({}, tagInputProps, {
       size: size,
       clearable: clearable,
       placeholder: placeholder,
       // @ts-ignore
       displayRender: displayRender,
-      suffix: menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null),
+      prefix: prefix,
+      suffix: [menuVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null), suffix],
       focused: menuVisible,
       appearance: appearance,
       value: value,
@@ -212,7 +224,7 @@ var CheckCascader = /*#__PURE__*/forwardRef(function (_a, ref) {
       onChange: proxyOnChange,
       data: flattedData,
       invalid: invalid
-    }))
+    })))
   }), isArrayNonEmpty(selectProps.data) ? ( /*#__PURE__*/React.createElement(CheckCascaderMenuList, {
     disabled: disabled,
     value: value,

package/lib/types/CheckCascader.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { CheckCascaderDataItem, CheckCascaderExpandTriggerEnum, CheckCascaderItemEventData, FlattedCheckCascaderDataItem } from './types';
 import { PickerProps } from '@hi-ui/picker';
 import { TagInputMockProps } from '@hi-ui/tag-input';
-import { HiBaseAppearanceEnum, HiBaseSizeEnum } from '@hi-ui/core';
+import { HiBaseAppearanceEnum, HiBaseFieldNames, HiBaseSizeEnum } from '@hi-ui/core';
 /**
  * 多项级联选择器
  */
@@ -12,6 +12,10 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
      * 设置选择项数据源
      */
     data: CheckCascaderDataItem[];
+    /**
+     * 设置 data 中字段对应的 key
+     */
+    fieldNames?: HiBaseFieldNames;
     /**
      * 设置当前多选值
      */
@@ -108,6 +112,14 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
      * 设置尺寸
      */
     size?: HiBaseSizeEnum;
+    /**
+     * 选择框前置内容
+     */
+    prefix?: React.ReactNode;
+    /**
+     * 选择框后置内容
+     */
+    suffix?: React.ReactNode;
     /**
      * 自定义下拉菜单底部渲染
      */
@@ -116,4 +128,8 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
      * 自定义下拉菜单每列渲染
      */
     dropdownColumnRender?: (menu: React.ReactElement, level: number) => React.ReactNode;
+    /**
+     * 自定义触发器
+     */
+    customRender?: React.ReactNode | ((selectItems: (FlattedCheckCascaderDataItem | undefined)[]) => React.ReactNode);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-cascader",
-  "version": "4.2.7",
+  "version": "4.3.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",