Merge pull request #2592 from XiaoMi/feature/dropdown(add-size-api)

feat(dropdown): add size api
XiaoMi · Sep 19, 2023 · 7d325b4 · 7d325b4
2 parents e6e8427 + 4a903b3
commit 7d325b4
Show file tree

Hide file tree

Showing 7 changed files with 318 additions and 30 deletions.
diff --git a/.changeset/heavy-tools-itch.md b/.changeset/heavy-tools-itch.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Dropdown feat: add size api
diff --git a/.changeset/unlucky-scissors-tease.md b/.changeset/unlucky-scissors-tease.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/dropdown": minor
+---
+
+feat: add size api
diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx
@@ -1,7 +1,7 @@
 import React, { cloneElement, forwardRef } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
-import { HiBaseHTMLProps } from '@hi-ui/core'
+import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core'
 import { PopperOverlayProps, Popper, PopperProps } from '@hi-ui/popper'
 import { DropDownProvider, useDropDownContext } from './context'
 import { useDropdown, UseDropdownProps } from './use-dropdown'
@@ -30,6 +30,7 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
       onClick,
       onButtonClick,
       overlayClassName,
+      size = 'lg',
       ...rest
     },
     ref
@@ -43,7 +44,9 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
     const dig = (treeData: DropdownDataItem[]) => {
       return treeData.map((item: any) => {
         const menu = isArrayNonEmpty(item.children) ? (
-          <DropdownMenu overlay={{ gutterGap: 16 }}>{dig(item.children)}</DropdownMenu>
+          <DropdownMenu overlay={{ gutterGap: 16 }} size={size}>
+            {dig(item.children)}
+          </DropdownMenu>
         ) : null
 
         if (item.split) {
@@ -110,7 +113,13 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
 
           {isArrayNonEmpty(data) ? (
             <DropdownMenu
-              {...getMenuProps({ overlay: { disabledPortal: false, className: overlayClassName } })}
+              {...getMenuProps({
+                overlay: {
+                  disabledPortal: false,
+                  className: overlayClassName,
+                },
+              })}
+              size={size}
             >
               {dig(data)}
             </DropdownMenu>
@@ -163,6 +172,10 @@ export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>,
    * 自定义控制 下拉 popper 行为
    */
   overlay?: PopperOverlayProps
+  /**
+   * 设置大小
+   */
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {
@@ -180,11 +193,12 @@ const DropdownMenu = forwardRef<HTMLUListElement | null, DropdownMenuProps>(
       parents,
       className,
       children,
+      size = 'lg',
       ...rest
     },
     ref
   ) => {
-    const cls = cx(prefixCls, className)
+    const cls = cx(prefixCls, className, `${prefixCls}--size-${size}`)
 
     return (
       <Popper {...(overlay as PopperProps)}>
@@ -211,6 +225,10 @@ interface DropdownMenuProps extends HiBaseHTMLProps<'ul'> {
    * 祖先吸附元素DOM引用数组
    */
   parents?: React.RefObject<HTMLElement>[]
+  /**
+   * 设置大小
+   */
+  size?: HiBaseSizeEnum
 }
 
 if (__DEV__) {

diff --git a/packages/ui/dropdown/src/styles/dropdown.scss b/packages/ui/dropdown/src/styles/dropdown.scss
@@ -1,6 +1,6 @@
-@import "~@hi-ui/core-css/lib/index.scss";
+@import '~@hi-ui/core-css/lib/index.scss';
 
-$prefix: "#{$component-prefix}-dropdown" !default;
+$prefix: '#{$component-prefix}-dropdown' !default;
 
 .#{$prefix} {
   display: inline-block;
@@ -9,17 +9,17 @@ $prefix: "#{$component-prefix}-dropdown" !default;
 .#{$prefix}-menu {
   @include list-reset();
 
-  background-color: use-color-static("white");
-  border-radius: use-border-radius("normal");
-  font-size: use-text-size("normal");
+  background-color: use-color-static('white');
+  border-radius: use-border-radius('normal');
+  font-size: use-text-size('normal');
   padding: use-spacing(4);
-  color: use-color("gray", 700);
+  color: use-color('gray', 700);
   // max-height: 260px;
   // 影响计算，如果要支持需要换种方案，不利用内嵌的特性。
   // 而是手动计算每个下拉面板的非outside区域元素然后拦截防菜单操作时关闭收起
   // overflow-y: scroll;
 
-  $menu-width: var(with-prefix-var("dropdown-menu-width"), 180px);
+  $menu-width: var(with-prefix-var('dropdown-menu-width'), 180px);
 
   width: $menu-width;
 }
@@ -30,10 +30,9 @@ $prefix: "#{$component-prefix}-dropdown" !default;
   margin: 0;
   box-sizing: border-box;
   overflow: visible;
-  padding: use-spacing(2) 0;
 
   &__link {
-    color: use-color("gray", 700);
+    color: use-color('gray', 700);
     width: 100%;
     text-decoration: none;
     box-sizing: border-box;
@@ -50,31 +49,42 @@ $prefix: "#{$component-prefix}-dropdown" !default;
     width: 100%;
     height: 100%;
     cursor: pointer;
-    border-radius: use-border-radius("normal");
-    padding: use-spacing(4) use-spacing(6);
+    border-radius: use-border-radius('normal');
     display: flex;
     align-items: center;
     justify-content: space-between;
+
+    .#{$prefix}-menu--size-lg & {
+      padding: use-spacing(5) use-spacing(5);
+    }
+
+    .#{$prefix}-menu--size-md & {
+      padding: use-spacing(4) use-spacing(4);
+    }
+
+    .#{$prefix}-menu--size-sm & {
+      padding: use-spacing(3) use-spacing(3);
+    }
   }
 
   &:not(.#{$prefix}-menu-item--disabled) > &__trigger:hover {
-    background-color: use-color("gray", 100);
+    background-color: use-color('gray', 100);
   }
 
   &--active:not(.#{$prefix}-menu-item--disabled) > &__trigger {
-    background-color: use-color("gray", 100);
+    background-color: use-color('gray', 100);
   }
 
   &--disabled > &__trigger {
     cursor: not-allowed;
-    color: use-color("gray", 500);
+    color: use-color('gray', 500);
   }
 }
 
 .#{$prefix}-divider {
   @include list-item-reset();
 
-  background-color: use-color("gray", 200);
+  background-color: use-color('gray', 200);
   width: 100%;
   height: 1px;
   margin: use-spacing(4) 0;

diff --git a/packages/ui/dropdown/stories/icon.stories.tsx b/packages/ui/dropdown/stories/icon.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Dropdown from '../src'
-import { FileOutlined, FileExeOutlined, FileExcelOutlined } from '@hi-ui/icons'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@hi-ui/icons'
 
 /**
  * @title 带Icon
@@ -10,27 +10,27 @@ export const Icon = () => {
     {
       id: 0,
       title: (
-        <span>
-          <FileOutlined />
-          <span style={{ marginLeft: 4 }}>新建文件</span>
+        <span style={{ display: 'flex', alignItems: 'center' }}>
+          <PlusOutlined style={{ fontSize: 16, color: '#5f6a7a' }} />
+          <span style={{ marginLeft: 8 }}>添加</span>
         </span>
       ),
     },
     {
       id: 1,
       title: (
-        <span>
-          <FileExeOutlined />
-          <span style={{ marginLeft: 4 }}>复制文件</span>
+        <span style={{ display: 'flex', alignItems: 'center' }}>
+          <EditOutlined style={{ fontSize: 16, color: '#5f6a7a' }} />
+          <span style={{ marginLeft: 8 }}>编辑</span>
         </span>
       ),
     },
     {
       id: 2,
       title: (
-        <span>
-          <FileExcelOutlined />
-          <span style={{ marginLeft: 4 }}>删除文件</span>
+        <span style={{ display: 'flex', alignItems: 'center' }}>
+          <DeleteOutlined style={{ fontSize: 16, color: '#5f6a7a' }} />
+          <span style={{ marginLeft: 8 }}>删除</span>
         </span>
       ),
     },
@@ -40,7 +40,7 @@ export const Icon = () => {
     <>
       <h1>Icon</h1>
       <div className="dropdown-icon__wrap">
-        <Dropdown data={list} title="鼠标悬停" onClick={console.log} />
+        <Dropdown data={list} width={120} title="鼠标悬停" onClick={console.log} />
       </div>
     </>
   )

diff --git a/packages/ui/dropdown/stories/index.stories.tsx b/packages/ui/dropdown/stories/index.stories.tsx
@@ -10,6 +10,7 @@ export * from './placement.stories'
 export * from './type.stories'
 export * from './trigger-button.stories'
 export * from './icon.stories'
+export * from './size.stories'
 
 export default {
   title: 'Navigation/Dropdown',