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

yang-x20 · Jun 28, 2024 · 4192796 · 4192796
1 parent 668c9c6
commit 4192796
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/packages/ui/tree-select/src/TreeSelect.tsx b/packages/ui/tree-select/src/TreeSelect.tsx
@@ -78,6 +78,7 @@ export const TreeSelect = forwardRef<HTMLDivElement | null, TreeSelectProps>(
       customRender,
       prefix,
       suffix,
+      customRender,
       ...rest
     },
     ref
@@ -247,22 +248,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 as TreeNodeEventData)
+            ) : (
+              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) ? (
@@ -416,6 +425,10 @@ export interface TreeSelectProps
    * 选择框后置内容
    */
   suffix?: React.ReactNode
+  /*
+   * 自定义触发器
+   */
+  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
@@ -95,7 +95,7 @@ export const CustomRender = () => {
             console.log('TreeSelect onChange: ', checkedIds, selectItem)
           }}
           customRender={(data) => {
-            return <Input value={!data ? '' : data.title + ''} placeholder="请选择" />
+            return <Input value={!data ? '' : data.title + ''} readOnly placeholder="请选择" />
           }}
         />
       </div>