feat(check-tree-select): 新增前缀后缀内容扩展(#2877)

.changeset/rich-guests-check.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(check-tree-select): 新增前置后置内容扩展功能

.changeset/thirty-apricots-count.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-tree-select": minor
+---
+
+feat: 新增前置后置内容扩展功能

packages/ui/check-tree-select/src/CheckTreeSelect.tsx

@@ -91,6 +91,8 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
       tagInputProps,
       size = 'md',
       customRender,
+      prefix,
+      suffix,
       ...rest
     },
     ref
@@ -362,7 +364,8 @@ export const CheckTreeSelect = forwardRef<HTMLDivElement | null, CheckTreeSelect
               placeholder={placeholder}
               // @ts-ignore
               displayRender={displayRender}
-              suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
+              prefix={prefix}
+              suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
               focused={menuVisible}
               appearance={appearance}
               value={value}
@@ -551,6 +554,14 @@ export interface CheckTreeSelectProps
    * 自定义触发器
    */
   customRender?: React.ReactNode | ((option: CheckTreeSelectDataItem[]) => React.ReactNode)
+  /**
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
+  /**
+   * 选择框后置内容
+   */
+  suffix?: React.ReactNode
 }
 
 if (__DEV__) {

packages/ui/check-tree-select/stories/addon.stories.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import CheckTreeSelect from '../src'
+import { AppStoreOutlined, InfoCircleOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前置后置内容扩展
+ */
+export const Addon = () => {
+  const [data] = React.useState([
+    {
+      title: '手机类',
+      id: '0',
+      children: [
+        {
+          title: 'Redmi系列',
+          id: '0-0',
+          disabled: true,
+          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>Addon</h1>
+      <div className="check-tree-select-addon__wrap">
+        <CheckTreeSelect
+          style={{ width: 240 }}
+          data={data}
+          checkedMode="PARENT"
+          onChange={console.log}
+          tagInputProps={{ wrap: true }}
+          prefix={<AppStoreOutlined />}
+          suffix={<InfoCircleOutlined style={{ marginRight: 8 }} />}
+        />
+      </div>
+    </>
+  )
+}

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

@@ -15,6 +15,7 @@ export * from './check-all.stories'
 // export * from './async.stories'
 export * from './virtual-list.stories'
 export * from './custom-render.stories'
+export * from './addon.stories'
 
 export default {
   title: 'Data Input/CheckTreeSelect',