feat(tree-select): add size api

XiaoMi · Sep 20, 2023 · 556049d · 556049d
1 parent 3e105a5
commit 556049d
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 1 deletion.
diff --git a/.changeset/nasty-geckos-push.md b/.changeset/nasty-geckos-push.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/tree-select": minor
+---
+
+feat: add size api
diff --git a/.changeset/tricky-impalas-notice.md b/.changeset/tricky-impalas-notice.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+TreeSelect feat: add size api
diff --git a/packages/ui/tree-select/src/TreeSelect.tsx b/packages/ui/tree-select/src/TreeSelect.tsx
@@ -12,7 +12,7 @@ import { uniqBy } from '@hi-ui/array-utils'
 import { Highlighter } from '@hi-ui/highlighter'
 import { MockInput } from '@hi-ui/input'
 import { DownOutlined, UpOutlined } from '@hi-ui/icons'
-import { HiBaseAppearanceEnum, useLocaleContext } from '@hi-ui/core'
+import { HiBaseAppearanceEnum, HiBaseSizeEnum, useLocaleContext } from '@hi-ui/core'
 
 import { callAllFuncs } from '@hi-ui/func-utils'
 import { UseDataSource } from '@hi-ui/use-data-source'
@@ -74,6 +74,7 @@ export const TreeSelect = forwardRef<HTMLDivElement | null, TreeSelectProps>(
       virtual,
       itemHeight,
       height,
+      size = 'md',
       ...rest
     },
     ref
@@ -245,6 +246,7 @@ export const TreeSelect = forwardRef<HTMLDivElement | null, TreeSelectProps>(
         trigger={
           <MockInput
             // disabled={disabled}
+            size={size}
             clearable={clearable}
             placeholder={placeholder}
             displayRender={displayRenderProp}
@@ -393,6 +395,10 @@ export interface TreeSelectProps
    * 	设置 `true` 开启虚拟滚动
    */
   virtual?: boolean
+  /**
+   * 设置尺寸
+   */
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {

diff --git a/packages/ui/tree-select/stories/index.stories.tsx b/packages/ui/tree-select/stories/index.stories.tsx
@@ -5,6 +5,7 @@ export * from './basic.stories'
 export * from './controlled.stories'
 export * from './uncontrolled.stories'
 export * from './appearance.stories'
+export * from './size.stories'
 export * from './clearable.stories'
 export * from './searchable.stories'
 // export * from './field-names.stories'

diff --git a/packages/ui/tree-select/stories/size.stories.tsx b/packages/ui/tree-select/stories/size.stories.tsx
@@ -0,0 +1,119 @@
+import React from 'react'
+import TreeSelect from '../src'
+
+/**
+ * @title 不同尺寸
+ */
+export const Size = () => {
+  const [data] = React.useState([
+    {
+      title: '手机类',
+      id: '0',
+      disabled: true,
+      children: [
+        {
+          title: 'Redmi系列',
+          id: '0-0',
+          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>Size</h1>
+      <div className="tree-select-size__wrap">
+        <h2>sm</h2>
+        <TreeSelect
+          size="sm"
+          data={data}
+          onChange={(checkedIds, selectItem) => {
+            console.log('TreeSelect onChange: ', checkedIds, selectItem)
+          }}
+        />
+        <h2>md</h2>
+        <TreeSelect
+          size="md"
+          data={data}
+          onChange={(checkedIds, selectItem) => {
+            console.log('TreeSelect onChange: ', checkedIds, selectItem)
+          }}
+        />
+        <h2>lg</h2>
+        <TreeSelect
+          size="lg"
+          data={data}
+          onChange={(checkedIds, selectItem) => {
+            console.log('TreeSelect onChange: ', checkedIds, selectItem)
+          }}
+        />
+      </div>
+    </>
+  )
+}