feat(select): add size api

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

Hide file tree

Showing 5 changed files with 52 additions and 1 deletion.
diff --git a/.changeset/dirty-snails-listen.md b/.changeset/dirty-snails-listen.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/select": minor
+---
+
+feat: add size api
diff --git a/.changeset/fast-beers-film.md b/.changeset/fast-beers-film.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Select feat: add size api
diff --git a/packages/ui/select/src/Select.tsx b/packages/ui/select/src/Select.tsx
@@ -29,7 +29,7 @@ import { useData, useFlattenData } from './hooks'
 import { SelectOption } from './SelectOption'
 import { SelectOptionGroup } from './SelectOptionGroup'
 import { uniqBy } from '@hi-ui/array-utils'
-import { HiBaseAppearanceEnum, useLocaleContext } from '@hi-ui/core'
+import { HiBaseAppearanceEnum, HiBaseSizeEnum, useLocaleContext } from '@hi-ui/core'
 import { callAllFuncs } from '@hi-ui/func-utils'
 import { mockDefaultHandlers } from '@hi-ui/dom-utils'
 
@@ -71,6 +71,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
       render: titleRender,
       data: dataProp,
       fieldNames,
+      size = 'md',
       onSelect: onSelectProp,
       onSearch: onSearchProp,
       onKeyDown: onKeyDownProp,
@@ -254,6 +255,7 @@ export const Select = forwardRef<HTMLDivElement | null, SelectProps>(
               onChange={(value, item) => {
                 tryChangeValue(value, item.raw)
               }}
+              size={size}
               data={mergedData}
               invalid={invalid}
               appearance={appearance}
@@ -363,6 +365,10 @@ export interface SelectProps
    * 搜索时触发
    */
   onSearch?: (keyword: string) => void
+  /**
+   * 设置大小
+   */
+  size?: HiBaseSizeEnum
 }
 
 ;(Select as any).HiName = 'Select'

diff --git a/packages/ui/select/stories/index.stories.tsx b/packages/ui/select/stories/index.stories.tsx
@@ -6,6 +6,7 @@ export * from './controlled.stories'
 export * from './uncontrolled.stories'
 export * from './clearable.stories'
 export * from './appearance.stories'
+export * from './size.stories'
 export * from './disabled.stories'
 export * from './group.stories'
 export * from './search.stories'

diff --git a/packages/ui/select/stories/size.stories.tsx b/packages/ui/select/stories/size.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import Select from '../src'
+
+/**
+ * @title 不同尺寸
+ */
+export const Size = () => {
+  const [data] = React.useState([
+    { title: '电视', id: '3', disabled: true },
+    { title: '手机', id: '2' },
+    { title: '笔记本', id: '4', disabled: true },
+    {
+      title: '生活周边超长文案展示超长文案展示',
+      id: '5',
+    },
+    { title: '办公', id: '6' },
+    { title: '生活周边7', id: '7' },
+    { title: '办公8', id: '8' },
+  ])
+
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="select-size__wrap">
+        <h2>sm</h2>
+        <Select style={{ width: 240 }} size="sm" clearable={false} data={data} />
+        <h2>md</h2>
+        <Select style={{ width: 240 }} size="md" clearable={false} data={data} />
+        <h2>lg</h2>
+        <Select style={{ width: 240 }} size="lg" clearable={false} data={data} />
+      </div>
+    </>
+  )
+}