feat(tree-select): 新增自定义触发器(#2884)

.changeset/orange-dolphins-arrive.md

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

.changeset/plenty-dodos-fold.md

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

packages/ui/tree-select/src/TreeSelect.tsx

@@ -77,6 +77,7 @@ export const TreeSelect = forwardRef<HTMLDivElement | null, TreeSelectProps>(
       size = 'md',
       prefix,
       suffix,
+      customRender,
       ...rest
     },
     ref
@@ -246,22 +247,30 @@ export const TreeSelect = forwardRef<HTMLDivElement | null, TreeSelectProps>(
         onSearch={callAllFuncs(onSearchProp, onSearch)}
         loading={rest.loading !== undefined ? rest.loading : loading}
         trigger={
-          <MockInput
-            // disabled={disabled}
-            size={size}
-            clearable={clearable}
-            placeholder={placeholder}
-            displayRender={displayRenderProp}
-            prefix={prefix}
-            suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
-            focused={menuVisible}
-            value={value}
-            onChange={tryChangeValue}
-            data={mergedData}
-            // @ts-ignore
-            invalid={invalid}
-            appearance={appearance}
-          />
+          customRender ? (
+            typeof customRender === 'function' ? (
+              customRender(selectedItem)
+            ) : (
+              customRender
+            )
+          ) : (
+            <MockInput
+              // disabled={disabled}
+              size={size}
+              clearable={clearable}
+              placeholder={placeholder}
+              displayRender={displayRenderProp}
+              prefix={prefix}
+              suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
+              focused={menuVisible}
+              value={value}
+              onChange={tryChangeValue}
+              data={mergedData}
+              // @ts-ignore
+              invalid={invalid}
+              appearance={appearance}
+            />
+          )
         }
       >
         {isArrayNonEmpty(treeProps.data) ? (
@@ -411,6 +420,10 @@ export interface TreeSelectProps
    * 选择框后置内容
    */
   suffix?: React.ReactNode
+  /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((selectedItem: TreeSelectDataItem | null) => React.ReactNode)
 }
 
 if (__DEV__) {

packages/ui/tree-select/stories/custom-render.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import TreeSelect from '../src'
+import Input from '@hi-ui/input'
+
+/**
+ * @title 自定义触发器
+ */
+export const CustomRender = () => {
+  const [data] = React.useState([
+    {
+      title: '手机类',
+      id: '0',
+      children: [
+        {
+          title: 'Redmi系列',
+          id: '0-0',
+          children: [
+            {
+              id: '0-0-1',
+              title: 'Redmi K30',
+            },
+            {
+              id: '0-0-2',
+              title: 'Redmi K30 Pro',
+            },
+            {
+              id: '0-0-3',
+              title: 'Redmi 10X 5G',
+            },
+            {
+              id: '0-0-4',
+              title: 'Redmi Note 8',
+            },
+            {
+              id: '0-0-5',
+              title: 'Redmi 9',
+            },
+            {
+              id: '0-0-6',
+              title: 'Redmi 9A',
+            },
+          ],
+        },
+        {
+          title: '小米手机',
+          id: '0-1',
+          children: [
+            {
+              id: '0-1-1',
+              title: '小米10 Pro',
+            },
+            {
+              id: '0-1-2',
+              title: '小米10',
+            },
+            {
+              id: '0-1-3',
+              title: '小米10 青春版 5G',
+            },
+            {
+              id: '0-1-4',
+              title: '小米MIX Alpha',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '电视',
+      id: '1',
+      children: [
+        {
+          title: '小米电视 大师 65英寸OLED',
+          id: '1-0',
+        },
+        {
+          title: 'Redmi 智能电视 MAX 98',
+          id: '1-1',
+        },
+        {
+          title: '小米电视4A 60英寸',
+          id: '1-2',
+        },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <h1>CustomRender</h1>
+      <div className="tree-select-custom-render__wrap">
+        <TreeSelect
+          data={data}
+          onChange={(checkedIds, selectItem) => {
+            console.log('TreeSelect onChange: ', checkedIds, selectItem)
+          }}
+          customRender={(data) => {
+            return <Input value={!data ? '' : data.title + ''} placeholder="请选择" />
+          }}
+        />
+      </div>
+    </>
+  )
+}

packages/ui/tree-select/stories/index.stories.tsx

@@ -12,6 +12,7 @@ export * from './searchable.stories'
 export * from './default-expand-all.stories'
 // export * from './async.stories'
 export * from './virtual-list.stories'
+export * from './custom-render.stories'
 
 export default {
   title: 'Data Input/TreeSelect',