From 32b4c01c303607a9169f0ce1ceb3a88f85d75b6c Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Tue, 12 Mar 2024 20:19:34 +0800
Subject: [PATCH] feat(select): add customRender api (#2765)

---
 .changeset/hip-falcons-cry.md                 |  5 ++
 .changeset/olive-goats-wink.md                |  5 ++
 packages/ui/select/src/Select.tsx             | 57 ++++++++++++-------
 .../select/stories/custom-render.stories.tsx  | 37 ++++++++++++
 packages/ui/select/stories/index.stories.tsx  |  1 +
 5 files changed, 83 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/hip-falcons-cry.md
 create mode 100644 .changeset/olive-goats-wink.md
 create mode 100644 packages/ui/select/stories/custom-render.stories.tsx

diff --git a/.changeset/hip-falcons-cry.md b/.changeset/hip-falcons-cry.md
new file mode 100644
index 000000000..5467bdfed
--- /dev/null
+++ b/.changeset/hip-falcons-cry.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(select): add customRender api
diff --git a/.changeset/olive-goats-wink.md b/.changeset/olive-goats-wink.md
new file mode 100644
index 000000000..932c6db8b
--- /dev/null
+++ b/.changeset/olive-goats-wink.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/select": minor
+---
+
+feat: add customRender api
diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx
index 8c62d8b74..1e5379334 100644
--- a/packages/ui/select/src/Select.tsx
+++ b/packages/ui/select/src/Select.tsx
@@ -77,6 +77,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       onSelect: onSelectProp,
       onSearch: onSearchProp,
       onKeyDown: onKeyDownProp,
+      customRender,
       ...rest
     },
     ref
@@ -241,28 +242,36 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
           footer={renderExtraFooter ? renderExtraFooter() : null}
           scrollable={!inVirtual}
           trigger={
-            <MockInput
-              clearable={clearable}
-              placeholder={placeholder}
-              displayRender={
-                displayRenderProp
-                  ? (item: any) => {
-                      return displayRenderProp(getSelectItemEventData(item))
-                    }
-                  : undefined
-              }
-              prefix={prefix}
-              suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
-              focused={menuVisible}
-              value={value}
-              onChange={(value, item) => {
-                tryChangeValue(value, item.raw)
-              }}
-              size={size}
-              data={mergedData}
-              invalid={invalid}
-              appearance={appearance}
-            />
+            customRender ? (
+              typeof customRender === 'function' ? (
+                customRender(showData.find((d: SelectDataItem) => d.id === value))
+              ) : (
+                customRender
+              )
+            ) : (
+              <MockInput
+                clearable={clearable}
+                placeholder={placeholder}
+                displayRender={
+                  displayRenderProp
+                    ? (item: any) => {
+                        return displayRenderProp(getSelectItemEventData(item))
+                      }
+                    : undefined
+                }
+                prefix={prefix}
+                suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
+                focused={menuVisible}
+                value={value}
+                onChange={(value, item) => {
+                  tryChangeValue(value, item.raw)
+                }}
+                size={size}
+                data={mergedData}
+                invalid={invalid}
+                appearance={appearance}
+              />
+            )
           }
         >
           {isArrayNonEmpty(showData) ? (
@@ -380,6 +389,10 @@ export interface SelectProps
    * 选择框后置内容
    */
   suffix?: React.ReactNode
+  /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((option: SelectItemEventData) => React.ReactNode)
 }
 
 ;(Select as any).HiName = 'Select'
diff --git a/packages/ui/select/stories/custom-render.stories.tsx b/packages/ui/select/stories/custom-render.stories.tsx
new file mode 100644
index 000000000..61c4d1482
--- /dev/null
+++ b/packages/ui/select/stories/custom-render.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import Input from '@hi-ui/input'
+import Select from '../src'
+
+/**
+ * @title 自定义触发器
+ */
+export const CustomRender = () => {
+  const [data] = React.useState([
+    { title: '电视', id: '3', disabled: false },
+    { title: '手机', id: '2' },
+    { title: '笔记本', id: '4', disabled: false },
+    {
+      title: '生活周边超长文案展示超长文案展示',
+      id: '5',
+    },
+    { title: '办公', id: '6' },
+    { title: '生活周边7', id: '7' },
+    { title: '办公8', id: '8' },
+  ])
+
+  return (
+    <>
+      <h1>CustomRender</h1>
+      <div className="select-custom-render__wrap">
+        <Select
+          style={{ width: 240 }}
+          clearable={false}
+          data={data}
+          customRender={(data) => {
+            return <Input value={!data ? '' : data.title + ''} readOnly placeholder="请选择" />
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/select/stories/index.stories.tsx b/packages/ui/select/stories/index.stories.tsx
index 0e6d16031..3e12a3841 100644
--- a/packages/ui/select/stories/index.stories.tsx
+++ b/packages/ui/select/stories/index.stories.tsx
@@ -21,6 +21,7 @@ export * from './virtual-list.stories'
 export * from './empty-content.stories'
 export * from './tip.stories'
 export * from './addon.stories'
+export * from './custom-render.stories'
 
 export default {
   title: 'Data Input/Select',