feat(tree-select): 新增自定义触发器功能(XiaoMi#2844)

yang-x20 · Jun 13, 2024 · f5901b0 · f5901b0
1 parent 9416cd0
commit f5901b0
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 15 deletions.
diff --git a/packages/ui/tree-select/src/TreeSelect.tsx b/packages/ui/tree-select/src/TreeSelect.tsx
@@ -75,6 +75,7 @@ export const TreeSelect = forwardRef<HTMLDivElement | null, TreeSelectProps>(
       itemHeight,
       height,
       size = 'md',
+      customRender,
       ...rest
     },
     ref
@@ -244,21 +245,29 @@ 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}
-            suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
-            focused={menuVisible}
-            value={value}
-            onChange={tryChangeValue}
-            data={mergedData}
-            // @ts-ignore
-            invalid={invalid}
-            appearance={appearance}
-          />
+          customRender ? (
+            typeof customRender === 'function' ? (
+              customRender(selectedItem as TreeNodeEventData)
+            ) : (
+              customRender
+            )
+          ) : (
+            <MockInput
+              // disabled={disabled}
+              size={size}
+              clearable={clearable}
+              placeholder={placeholder}
+              displayRender={displayRenderProp}
+              suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
+              focused={menuVisible}
+              value={value}
+              onChange={tryChangeValue}
+              data={mergedData}
+              // @ts-ignore
+              invalid={invalid}
+              appearance={appearance}
+            />
+          )
         }
       >
         {isArrayNonEmpty(treeProps.data) ? (
@@ -400,6 +409,10 @@ export interface TreeSelectProps
    * 设置尺寸
    */
   size?: HiBaseSizeEnum
+  /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((option: TreeNodeEventData) => React.ReactNode)
 }
 
 if (__DEV__) {

diff --git a/packages/ui/tree-select/stories/custom-render.stories.tsx b/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 + ''} readOnly placeholder="请选择" />
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/tree-select/stories/index.stories.tsx b/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',