feat(select): add customRender api (#2765)

XiaoMi · Mar 12, 2024 · 32b4c01 · 32b4c01
1 parent 1f88f9a
commit 32b4c01
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 22 deletions.
diff --git a/.changeset/hip-falcons-cry.md 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
@@ -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
@@ -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
@@ -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
@@ -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',