feat(check-cascader): 新增自定义触发器(#2896)

.changeset/hot-ways-knock.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(check-cascader): 新增自定义触发器

.changeset/warm-zebras-sip.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-cascader": minor
+---
+
+feat: 新增自定义触发器

packages/ui/check-cascader/src/CheckCascader.tsx

@@ -24,7 +24,12 @@ import { flattenTreeData } from './utils'
 import { getNodeAncestorsWithMe, getTopDownAncestors } from '@hi-ui/tree-utils'
 import { useLatestCallback } from '@hi-ui/use-latest'
 import { isArrayNonEmpty, isFunction, isUndef } from '@hi-ui/type-assertion'
-import { HiBaseAppearanceEnum, HiBaseFieldNames, HiBaseSizeEnum, useLocaleContext } from '@hi-ui/core'
+import {
+  HiBaseAppearanceEnum,
+  HiBaseFieldNames,
+  HiBaseSizeEnum,
+  useLocaleContext,
+} from '@hi-ui/core'
 
 import { callAllFuncs } from '@hi-ui/func-utils'
 
@@ -74,6 +79,7 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
       suffix,
       renderExtraFooter,
       dropdownColumnRender,
+      customRender,
       fieldNames,
       ...rest
     },
@@ -213,6 +219,12 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
 
     const cls = cx(prefixCls, className, `${prefixCls}--${menuVisible ? 'open' : 'closed'}`)
 
+    const selectedItems = useMemo(() => {
+      return value.map((selectedId) => {
+        return flattedData.find((item) => item.id === selectedId)
+      })
+    }, [value, flattedData])
+
     return (
       <Picker
         ref={ref}
@@ -233,27 +245,35 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
         footer={isFunction(renderExtraFooter) && renderExtraFooter()}
         onSearch={callAllFuncs(onSearchProp, onSearch)}
         trigger={
-          <TagInputMock
-            {...tagInputProps}
-            size={size}
-            clearable={clearable}
-            placeholder={placeholder}
-            // @ts-ignore
-            displayRender={displayRender}
-            prefix={prefix}
-            suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
-            focused={menuVisible}
-            appearance={appearance}
-            value={value}
-            // @ts-ignore
-            onChange={proxyOnChange}
-            data={flattedData}
-            invalid={invalid}
-            // onExpand={() => {
-            //   // setViewSelected(true)
-            //   menuVisibleAction.on()
-            // }}
-          />
+          customRender ? (
+            typeof customRender === 'function' ? (
+              customRender(selectedItems)
+            ) : (
+              customRender
+            )
+          ) : (
+            <TagInputMock
+              {...tagInputProps}
+              size={size}
+              clearable={clearable}
+              placeholder={placeholder}
+              // @ts-ignore
+              displayRender={displayRender}
+              prefix={prefix}
+              suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
+              focused={menuVisible}
+              appearance={appearance}
+              value={value}
+              // @ts-ignore
+              onChange={proxyOnChange}
+              data={flattedData}
+              invalid={invalid}
+              // onExpand={() => {
+              //   // setViewSelected(true)
+              //   menuVisibleAction.on()
+              // }}
+            />
+          )
         }
       >
         {isArrayNonEmpty(selectProps.data) ? (
@@ -406,6 +426,12 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
    * 自定义下拉菜单每列渲染
    */
   dropdownColumnRender?: (menu: React.ReactElement, level: number) => React.ReactNode
+  /**
+   * 自定义触发器
+   */
+  customRender?:
+    | React.ReactNode
+    | ((selectItems: (FlattedCheckCascaderDataItem | undefined)[]) => React.ReactNode)
 }
 
 if (__DEV__) {

packages/ui/check-cascader/stories/custom-render.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import CheckCascader from '../src'
+import Input from '@hi-ui/input'
+
+/**
+ * @title 自定义触发器
+ */
+export const CusotmRender = () => {
+  const [dataOnlyLeafCheckable] = React.useState(() => {
+    const data = [
+      {
+        id: '手机',
+        title: '手机t',
+        children: [
+          {
+            id: '小米',
+            title: '小米t',
+            children: [
+              {
+                id: '小米3',
+                title: '小米3t',
+              },
+              {
+                id: '小米4',
+                title: '小米4t',
+              },
+            ],
+          },
+          {
+            id: '红米',
+            title: '红米t',
+            children: [
+              {
+                id: '红米3',
+                title: '红米3t',
+              },
+              {
+                id: '红米4',
+                title: '红米4t',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: '电视',
+        title: '电视t',
+        children: [
+          {
+            id: '小米电视4A',
+            title: '小米电视4At',
+          },
+          {
+            id: '小米电视4C',
+            title: '小米电视4Ct',
+          },
+        ],
+      },
+    ]
+
+    const getDataOnlyLeafCheckable = (data: any) => {
+      return data.map((item: any) => {
+        if (item.children) {
+          item.checkable = item.checkable ?? false
+          item.children = getDataOnlyLeafCheckable(item.children)
+        }
+
+        return item
+      })
+    }
+
+    const dataOnlyLeafCheckable = getDataOnlyLeafCheckable(data)
+
+    return dataOnlyLeafCheckable
+  })
+
+  return (
+    <>
+      <h1>CusotmRender</h1>
+      <div className="check-cascader-custom-render__wrap">
+        <CheckCascader
+          style={{ width: 240 }}
+          searchable={false}
+          placeholder="请选择品类"
+          changeOnSelect
+          data={dataOnlyLeafCheckable}
+          onChange={console.log}
+          customRender={(data) => {
+            let value = []
+            if (data) {
+              value = data.map((item) => item.title)
+            }
+            return <Input value={!value ? '' : value} placeholder="请选择" />
+          }}
+        ></CheckCascader>
+      </div>
+    </>
+  )
+}

packages/ui/check-cascader/stories/index.stories.tsx

@@ -13,6 +13,7 @@ export * from './display-render.stories'
 export * from './footer.stories'
 export * from './dropdown-column-render.stories'
 export * from './addon.stories'
+export * from './custom-render.stories'
 // export * from './flatted.stories'
 
 export default {