feat(cascader): 新增自定义触发器(#2888)

* feat(cascader): 新增自定义触发器(#2888) * chore(cascader): 生成变更记录文件(#2888) --------- Co-authored-by: yangxuexue <[email protected]>
XiaoMi · Jun 28, 2024 · c6d9225 · c6d9225
1 parent ec38ee1
commit c6d9225
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 16 deletions.
diff --git a/.changeset/itchy-items-end.md b/.changeset/itchy-items-end.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/cascader": minor
+---
+
+feat: 新增自定义触发器
diff --git a/.changeset/smooth-pears-behave.md b/.changeset/smooth-pears-behave.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(cascader): 新增自定义触发器
diff --git a/packages/ui/cascader/src/Cascader.tsx b/packages/ui/cascader/src/Cascader.tsx
@@ -60,6 +60,7 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
     renderExtraFooter,
     dropdownColumnRender,
     closeOnSelect = true,
+    customRender,
     ...rest
   } = props
   const i18n = useLocaleContext()
@@ -237,22 +238,30 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
         footer={isFunction(renderExtraFooter) && renderExtraFooter()}
         onSearch={callAllFuncs(onSearchProp, onSearch)}
         trigger={
-          <MockInput
-            size={size}
-            clearable={clearable}
-            placeholder={placeholder}
-            displayRender={displayRender as any}
-            prefix={prefix}
-            suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
-            focused={menuVisible}
-            value={value[value.length - 1]}
-            onChange={() => {
-              tryChangeValue([])
-            }}
-            data={mergedData}
-            invalid={invalid}
-            appearance={appearance}
-          />
+          customRender ? (
+            typeof customRender === 'function' ? (
+              customRender(selectedItem)
+            ) : (
+              customRender
+            )
+          ) : (
+            <MockInput
+              size={size}
+              clearable={clearable}
+              placeholder={placeholder}
+              displayRender={displayRender as any}
+              prefix={prefix}
+              suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
+              focused={menuVisible}
+              value={value[value.length - 1]}
+              onChange={() => {
+                tryChangeValue([])
+              }}
+              data={mergedData}
+              invalid={invalid}
+              appearance={appearance}
+            />
+          )
         }
       >
         {isArrayNonEmpty(showData) ? <CascaderMenuList /> : null}
@@ -342,6 +351,10 @@ export interface CascaderProps
    * 选择框后置内容
    */
   suffix?: React.ReactNode
+  /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((selectedItem: CascaderItemEventData | null) => React.ReactNode)
 }
 
 if (__DEV__) {

diff --git a/packages/ui/cascader/stories/custom-render.stories.tsx b/packages/ui/cascader/stories/custom-render.stories.tsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import Cascader from '../src'
+import Input from '@hi-ui/input'
+
+/**
+ * @title 自定义触发器
+ */
+export const CustomRender = () => {
+  const [data] = React.useState([
+    {
+      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',
+        },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <h1>CustomRender</h1>
+      <div className="cascader-custom-render__wrap">
+        <Cascader
+          style={{ width: 240 }}
+          clearable
+          placeholder="请选择品类"
+          data={data}
+          customRender={(data) => {
+            return <Input value={!data ? '' : data.title + ''} placeholder="请选择" />
+          }}
+        ></Cascader>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/cascader/stories/index.stories.tsx b/packages/ui/cascader/stories/index.stories.tsx
@@ -16,6 +16,7 @@ export * from './footer.stories'
 export * from './dropdown-column-render.stories'
 export * from './field-names.stories'
 export * from './visible.stories'
+export * from './custom-render.stories'
 
 export default {
   title: 'Data Input/Cascader',