feat(cascader): add size api

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

Hide file tree

Showing 5 changed files with 120 additions and 1 deletion.
diff --git a/.changeset/proud-turkeys-call.md b/.changeset/proud-turkeys-call.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/cascader": minor
+---
+
+feat: add size api
diff --git a/.changeset/spotty-tools-cross.md b/.changeset/spotty-tools-cross.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Cascader feat: add size api
diff --git a/packages/ui/cascader/src/Cascader.tsx b/packages/ui/cascader/src/Cascader.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, useState, useMemo, useEffect } from 'react'
-import type { HiBaseAppearanceEnum } from '@hi-ui/core'
+import type { HiBaseAppearanceEnum, HiBaseSizeEnum } from '@hi-ui/core'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { useUncontrolledToggle } from '@hi-ui/use-toggle'
@@ -52,6 +52,7 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
     data = NOOP_ARRAY,
     flattedSearchResult = true,
     visible,
+    size = 'md',
     onOpen,
     onClose,
     ...rest
@@ -221,6 +222,7 @@ export const Cascader = forwardRef<HTMLDivElement | null, CascaderProps>((props,
         onSearch={callAllFuncs(onSearchProp, onSearch)}
         trigger={
           <MockInput
+            size={size}
             clearable={clearable}
             placeholder={placeholder}
             displayRender={displayRender as any}
@@ -303,6 +305,10 @@ export interface CascaderProps
    * 搜索结果拍平展示
    */
   flattedSearchResult?: boolean
+  /**
+   * 设置尺寸
+   */
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {

diff --git a/packages/ui/cascader/stories/index.stories.tsx b/packages/ui/cascader/stories/index.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Cascader from '../src'
 
 export * from './basic.stories'
+export * from './size.stories'
 export * from './disabled.stories'
 export * from './search.stories'
 export * from './filter-options.stories'

diff --git a/packages/ui/cascader/stories/size.stories.tsx b/packages/ui/cascader/stories/size.stories.tsx
@@ -0,0 +1,102 @@
+import React from 'react'
+import Cascader from '../src'
+
+/**
+ * @title 不同尺寸
+ */
+export const Size = () => {
+  const [data] = React.useState([
+    {
+      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',
+        },
+      ],
+    },
+  ])
+
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="cascader-size__wrap">
+        <h2>sm</h2>
+        <Cascader
+          style={{ width: 240 }}
+          size="sm"
+          clearable
+          placeholder="请选择品类"
+          defaultValue={['手机', '红米', '红米4']}
+          data={data}
+          onChange={(...args) => {
+            console.log('onChange', ...args)
+          }}
+        ></Cascader>
+        <h2>md</h2>
+        <Cascader
+          style={{ width: 240 }}
+          size="md"
+          clearable
+          placeholder="请选择品类"
+          defaultValue={['手机', '红米', '红米4']}
+          data={data}
+          onChange={(...args) => {
+            console.log('onChange', ...args)
+          }}
+        ></Cascader>
+        <h2>lg</h2>
+        <Cascader
+          style={{ width: 240 }}
+          size="lg"
+          clearable
+          placeholder="请选择品类"
+          defaultValue={['手机', '红米', '红米4']}
+          data={data}
+          onChange={(...args) => {
+            console.log('onChange', ...args)
+          }}
+        ></Cascader>
+      </div>
+    </>
+  )
+}