feat(cascader): 支持前缀后缀内容 (XiaoMi#2824)

* feat(cascader): 支持前置后置内容(XiaoMi#2821) * chore(cascader): 生成变更记录文件 * feat(check-cascader): 支持前置后置内容(XiaoMi#2821) * chore(check-cascader): 生成变更记录文件 --------- Co-authored-by: xiamiao <[email protected]>
yang-x20 · Jun 28, 2024 · 5473ef4 · 5473ef4
1 parent 6e140e8
commit 5473ef4
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 2 deletions.
diff --git a/.changeset/fresh-waves-act.md b/.changeset/fresh-waves-act.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(cascader): 支持前置后置内容
diff --git a/.changeset/lovely-queens-sing.md b/.changeset/lovely-queens-sing.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(check-cascader): 支持前置后置内容
diff --git a/.changeset/pretty-queens-dress.md b/.changeset/pretty-queens-dress.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-cascader": minor
+---
+
+feat: 支持前置后置内容
diff --git a/.changeset/thin-sheep-leave.md b/.changeset/thin-sheep-leave.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/cascader": minor
+---
+
+feat: 支持前置后置内容
diff --git a/packages/ui/cascader/src/Cascader.tsx b/packages/ui/cascader/src/Cascader.tsx
@@ -53,6 +53,8 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
     flattedSearchResult = true,
     visible,
     size = 'md',
+    prefix,
+    suffix,
     onOpen,
     onClose,
     renderExtraFooter,
@@ -248,7 +250,8 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
               clearable={clearable}
               placeholder={placeholder}
               displayRender={displayRender as any}
-              suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
+              prefix={prefix}
+              suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
               focused={menuVisible}
               value={value[value.length - 1]}
               onChange={() => {
@@ -344,6 +347,14 @@ export interface CascaderProps
    * 自定义触发器
    */
   customRender?: React.ReactNode | ((selectedItem: CascaderItemEventData | null) => React.ReactNode)
+  /*
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
+  /**
+   * 选择框后置内容
+   */
+  suffix?: React.ReactNode
 }
 
 if (__DEV__) {

diff --git a/packages/ui/check-cascader/src/CheckCascader.tsx b/packages/ui/check-cascader/src/CheckCascader.tsx
@@ -70,6 +70,8 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
       onClose,
       tagInputProps,
       size = 'md',
+      prefix,
+      suffix,
       renderExtraFooter,
       dropdownColumnRender,
       fieldNames,
@@ -238,7 +240,8 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
             placeholder={placeholder}
             // @ts-ignore
             displayRender={displayRender}
-            suffix={menuVisible ? <UpOutlined /> : <DownOutlined />}
+            prefix={prefix}
+            suffix={[menuVisible ? <UpOutlined /> : <DownOutlined />, suffix]}
             focused={menuVisible}
             appearance={appearance}
             value={value}
@@ -387,6 +390,14 @@ export interface CheckCascaderProps extends Omit<PickerProps, 'trigger' | 'scrol
    * 设置尺寸
    */
   size?: HiBaseSizeEnum
+  /**
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
+  /**
+   * 选择框后置内容
+   */
+  suffix?: React.ReactNode
   /**
    * 自定义下拉菜单底部渲染
    */

diff --git a/packages/ui/check-cascader/stories/addon.stories.tsx b/packages/ui/check-cascader/stories/addon.stories.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import CheckCascader from '../src'
+import { AppStoreOutlined, InfoCircleOutlined } from '@hi-ui/icons'
+/**
+ * @title 前后内置元素
+ * @desc 将选择框与内置的其他元素组合使用
+ */
+export const Addon = () => {
+  const [dataOnlyLeafCheckable] = React.useState(() => {
+    const data = [
+      {
+        id: '手机',
+        title: '手机t',
+        children: [
+          {
+            id: '小米',
+            title: '小米t',
+            children: [
+              {
+                id: '小米3',
+                title: '小米3t',
+              },
+              {
+                id: '小米4',
+                title: '小米4t',
+              },
+            ],
+          },
+          {
+            id: '红米',
+            title: '红米t',
+            children: [
+              {
+                id: '红米3',
+                title: '红米3t',
+              },
+              {
+                id: '红米4',
+                title: '红米4t',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: '电视',
+        title: '电视t',
+        children: [
+          {
+            id: '小米电视4A',
+            title: '小米电视4At',
+          },
+          {
+            id: '小米电视4C',
+            title: '小米电视4Ct',
+          },
+        ],
+      },
+    ]
+
+    const getDataOnlyLeafCheckable = (data: any) => {
+      return data.map((item: any) => {
+        if (item.children) {
+          item.checkable = item.checkable ?? false
+          item.children = getDataOnlyLeafCheckable(item.children)
+        }
+
+        return item
+      })
+    }
+
+    const dataOnlyLeafCheckable = getDataOnlyLeafCheckable(data)
+
+    return dataOnlyLeafCheckable
+  })
+
+  return (
+    <>
+      <h1>Addon</h1>
+      <div className="cascader-basic__wrap">
+        <CheckCascader
+          style={{ width: 240 }}
+          searchable={false}
+          // clearable
+          placeholder="请选择品类"
+          defaultValue={[['手机', '红米', '红米4']]}
+          tagInputProps={{ wrap: true }}
+          prefix={<AppStoreOutlined style={{ color: '#333' }} />}
+          suffix={<InfoCircleOutlined style={{ color: '#333' }} />}
+          changeOnSelect
+          data={dataOnlyLeafCheckable}
+          onChange={console.log}
+        ></CheckCascader>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/check-cascader/stories/index.stories.tsx b/packages/ui/check-cascader/stories/index.stories.tsx
@@ -12,6 +12,7 @@ export * from './dynamic.stories'
 export * from './display-render.stories'
 export * from './footer.stories'
 export * from './dropdown-column-render.stories'
+export * from './addon.stories'
 // export * from './flatted.stories'
 
 export default {