fix: change button size

Signed-off-by: fan-mengwen <fan.mengwen@xsky.com>
xsky-fe · May 15, 2023 · 7e94fef · 7e94fef
1 parent e7dcfa0
commit 7e94fef
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 115 deletions.
diff --git a/src/components/DropdownButton/index.test.tsx b/src/components/DropdownButton/index.test.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
 import DropdownButton from './index';
 import { mount } from 'enzyme';
-import { Sizes } from 'react-bootstrap';
-
+import { ButtonSizes } from '../../interface';
 describe('Dropdown', () => {
   it('should render corrent size', () => {
-    const sizes: Sizes[] = ['lg', 'sm', 'xs'];
+    const sizes: ButtonSizes[] = ['lg', 'sm', 'xs'];
     const classNames = [
       '.dropdown.btn-group.btn-group-lg',
       '.dropdown.btn-group.btn-group-sm',
       '.dropdown.btn-group.btn-group-xs',
     ];
     sizes.forEach((size, index) => {
-      const dropdown = mount(<DropdownButton id="a1" bsSize={size} title="size" />);
+      const dropdown = mount(<DropdownButton id="a1" size={size} title="size" />);
       expect(dropdown.find(classNames[index]).length).toBe(1);
     });
   });
@@ -27,7 +26,7 @@ describe('Dropdown', () => {
       '.dropdown.btn-group.btn-group-danger',
     ];
     styles.forEach((style, index) => {
-      const dropdown = mount(<DropdownButton id="a1" bsStyle={style} title="style" />);
+      const dropdown = mount(<DropdownButton id="a1" variant={style} title="style" />);
       expect(dropdown.find(classNames[index]).length).toBe(1);
     });
   });
@@ -45,7 +44,7 @@ describe('Dropdown', () => {
     expect(dropdown.find('span.caret').length).toBe(0);
   });
   it('should render corrent pullRight', () => {
-    const dropdown = mount(<DropdownButton id="a1" pullRight title="pullRight" />);
+    const dropdown = mount(<DropdownButton id="a1" align="end" title="pullRight" />);
     expect(dropdown.find('.dropdown-menu.dropdown-menu-right').length).toBe(1);
   });
 });
diff --git a/src/components/DropdownButton/index.tsx b/src/components/DropdownButton/index.tsx
@@ -1,16 +1,11 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { DropdownButton as BootstrapDropdownButton, Dropdown, ButtonGroup } from 'react-bootstrap';
-
-import SubMenu from '../SubMenu';
-import {
-  DropdownButtonMenuItem,
-  DropdownButtonProps,
-  DefaultDropdownButtonProps,
-} from '../../interface';
+import { DropdownButtonMenuItem, DropdownButtonProps } from '../../interface';
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
 import Tooltip from '../Tooltip';
+import SubMenu from '../SubMenu';
 import './style.scss';
 
 function randomId() {
@@ -21,12 +16,12 @@ function randomId() {
 
 function renderContent(
   menu: DropdownButtonMenuItem[] = [],
-  setButtonOpen: Function,
+  setButtonShow: Function,
   isDifferentMenu: boolean,
-  open?: boolean,
+  show?: boolean,
 ) {
   if (menu instanceof Array) {
-    return menu.map(m => renderMenu(m, setButtonOpen, isDifferentMenu, open));
+    return menu.map(m => renderMenu(m, setButtonShow, isDifferentMenu, show));
   }
   return menu;
 }
@@ -41,9 +36,9 @@ function usePrevious(value: any) {
 
 function renderMenu(
   menu: DropdownButtonMenuItem,
-  setButtonOpen: Function,
+  setButtonShow: Function,
   isDifferentMenu: boolean,
-  open?: boolean,
+  show?: boolean,
 ) {
   const item = cloneDeep(menu);
   if (!item) {
@@ -54,7 +49,7 @@ function renderMenu(
       <Dropdown.Item
         key={item}
         onClick={() => {
-          setButtonOpen(!!open);
+          setButtonShow(!!show);
         }}
       >
         {item}
@@ -67,13 +62,13 @@ function renderMenu(
   if (item.children && item.children.length) {
     return (
       <SubMenu key={item.key} title={item.title} name={item.children[0]['data-action']}>
-        {renderContent(item.children, setButtonOpen, isDifferentMenu, open)}
+        {renderContent(item.children, setButtonShow, isDifferentMenu, show)}
       </SubMenu>
     );
   }
   const handleItemSelect = (eventKey: any) => {
     const { onSelect } = item;
-    setButtonOpen(!!open);
+    setButtonShow(!!show);
     // 如果有传入 onSelect 回调函数，会继续执行传入的回调函数
     if (onSelect) onSelect(eventKey);
   };
@@ -103,55 +98,35 @@ const DropdownButton = (props: DropdownButtonProps) => {
     }
     return className;
   };
-  const getOnToggle = (isOpen: boolean) => {
+  const getOnToggle = (isShow: boolean) => {
     const { onToggle } = props;
-    // 没有传入 open 属性，下拉框点击 MenuItem 会合起；
-    if (!props.hasOwnProperty('open')) {
-      setButtonOpen(isOpen);
+    // 没有传入 show 属性，下拉框点击 MenuItem 会合起；
+    if (!props.hasOwnProperty('show')) {
+      setButtonShow(isShow);
     }
     // 如果有传入 onToggle 回调函数，会继续执行传入的回调函数
-    if (onToggle) onToggle(isOpen);
+    if (onToggle) onToggle(isShow);
   };
 
-  const {
-    bsStyle,
-    id,
-    dropup,
-    onSelect,
-    title,
-    menu,
-    children,
-    componentClass,
-    open,
-    bsSize,
-    disabled,
-    pullRight,
-  } = props;
-
+  const { id, variant, menu, children, show, title, size, ...rest } = props;
   const prevMenu = usePrevious(menu);
   const isDifferentMenu = prevMenu !== menu;
-  const [buttonOpen, setButtonOpen] = React.useState<boolean>(!!open);
 
+  const [buttonShow, setButtonShow] = React.useState<boolean>(!!show);
   const containerClassName = getContainerClass();
-  const drop = dropup ? 'up' : 'down';
-  const align = pullRight ? 'end' : undefined;
-  const show = props.hasOwnProperty('open') ? open : buttonOpen;
   return (
     <BootstrapDropdownButton
-      variant={bsStyle}
+      variant={variant || 'default'}
       id={id}
-      onSelect={onSelect}
       title={title}
-      size={bsSize}
-      disabled={disabled}
-      drop={drop}
-      align={align}
-      onToggle={(isOpen: boolean) => getOnToggle(isOpen)}
-      as={componentClass}
+      onToggle={(isShow: boolean) => getOnToggle(isShow)}
       className={containerClassName}
-      show={show}
+      show={props.hasOwnProperty('show') ? show : buttonShow}
+      /* @ts-ignore */
+      size={size}
+      {...rest}
     >
-      {menu ? renderContent(menu, setButtonOpen, isDifferentMenu, open) : children}
+      {menu ? renderContent(menu, setButtonShow, isDifferentMenu, show) : children}
     </BootstrapDropdownButton>
   );
 };
@@ -160,15 +135,15 @@ DropdownButton.propTypes = {
   /**
    * 样式 string，支持default，primary，success，info，warning，danger，默认为default
    **/
-  bsStyle: PropTypes.string,
+  variant: PropTypes.string,
   /**
    * 下拉框子元素 node，不能和menu同时使用
    **/
   children: PropTypes.node,
   /**
    * 元素类型 elementType
    **/
-  componentClass: PropTypes.any,
+  as: PropTypes.element,
   /**
    * 下拉框样式修改器 string，在一些场景中下拉框有些特殊样式，支持table-toolbar, list-toolbar, detail-toolbar
    **/
@@ -178,9 +153,9 @@ DropdownButton.propTypes = {
    **/
   disabled: PropTypes.bool,
   /**
-   * 下拉框是否向上弹出 bool
+   * 下拉框弹出方向
    **/
-  dropup: PropTypes.bool,
+  drop: PropTypes.oneOf(['up', 'up-centered', 'start', 'end', 'down', 'down-centered']),
   /**
    * html id属性 string
    **/
@@ -201,30 +176,28 @@ DropdownButton.propTypes = {
   onSelect: PropTypes.func,
   /**
    * 下拉框是否展开 bool；
-   * 使用组件如未传入open属性，点击任何一级的MenuItem都会默认关闭下拉框；
-   * 如有传入open属性，下拉框是否展开根据传入的open决定
+   * 使用组件如未传入show属性，点击任何一级的MenuItem都会默认关闭下拉框；
+   * 如有传入show属性，下拉框是否展开根据传入的show决定
    **/
-  open: PropTypes.bool,
+  show: PropTypes.bool,
   /**
-   * 下拉框展开状态更改时回调 function function(Boolean isOpen, Object event, { String source }) {}
+   * 下拉框展开状态更改时回调 function function(Boolean isShow, Object event, { String source }) {}
    **/
   onToggle: PropTypes.func,
   /**
-   * 下拉框是否右对齐 bool
+   * 下拉框对齐方向
    **/
-  pullRight: PropTypes.bool,
+  align: PropTypes.string,
   /**
    * 大小 string，支持large，default，small，xsmall，默认为default
    **/
-  bsSize: PropTypes.oneOf(['sm', 'lg']),
+  size: PropTypes.string,
   /**
    * 下拉框显示内容 string|element
    **/
   title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
 };
 
-const defaultProps: DefaultDropdownButtonProps = { componentClass: ButtonGroup };
-
-DropdownButton.defaultProps = defaultProps;
+DropdownButton.defaultProps = { as: ButtonGroup };
 
 export default DropdownButton;
diff --git a/src/components/DropdownButton/style.scss b/src/components/DropdownButton/style.scss
@@ -9,7 +9,7 @@
   min-width: auto;
   border: 1px solid $border-2;
   border-top: 3px solid $primary-normal;
-  box-shadow: 0 1px 8px rgba(black,0.12);
+  box-shadow: 0 1px 8px rgba(black, 0.12);
   &>a {
     text-decoration: none;
     line-height: 24px;
@@ -37,11 +37,10 @@
       cursor: not-allowed;
     }
     &:not(.disabled):hover {
-      color: #262626;
+      color: $text-1;
     }
     &:not(.disabled):focus {
-      color: #262626;
-      outline: 5px auto -webkit-focus-ring-color;
+      color: $text-1;
       outline-offset: -2px;
     }
   }

diff --git a/src/interface.tsx b/src/interface.tsx
@@ -2,11 +2,9 @@ import * as React from 'react';
 // import { SelectCallback, Sizes } from 'react-bootstrap';
 import { Moment } from 'moment';
 import {
-  ButtonProps as BsButtonProps,
-  DropdownButtonProps as BsDropdownButtonProps,
   ModalProps as BsModalProps,
+  DropdownButtonProps as BsDropdownButtonProps,
 } from 'react-bootstrap';
-import { ModalProps as BsModalProps } from 'react-bootstrap';
 import { ButtonProps as BaseButtonProps } from '@restart/ui/Button';
 import { ButtonVariant } from '../node_modules/react-bootstrap/esm/types';
 import CSS from 'csstype';
@@ -214,24 +212,15 @@ export type DropdownButtonMenuItem =
     }
   | string;
 
-export interface DefaultDropdownButtonProps {
-  componentClass: any;
-}
-export interface DropdownButtonProps
-  extends DefaultDropdownButtonProps,
-    Omit<BsDropdownButtonProps, 'children' | 'title'> {
-  bsStyle?: string;
-  onToggle?: (isOpen: boolean) => void;
-  // TODO @fmw
-  bsSize?: any;
-  title?: string | React.ReactNode;
+export type ButtonSizes = 'sm' | 'lg' | 'xs';
+
+export interface DropdownButtonProps extends Omit<BsDropdownButtonProps, 'children' | 'size'> {
+  onToggle?: (isShow: boolean) => void;
   menu?: DropdownButtonMenuItem[];
   children?: React.ReactNode;
   modifer?: string;
-  dropup?: boolean;
   noCaret?: boolean;
-  open?: boolean;
-  pullRight?: boolean;
+  size?: ButtonSizes;
 }
 
 export interface NavigationGroup {
@@ -450,9 +439,9 @@ export interface ButtonProps extends BaseButtonProps {
   block?: boolean;
   active?: boolean;
   variant?: ButtonVariant;
-  size?: 'sm' | 'lg' | 'xs';
+  size?: ButtonSizes;
 }
 
-export interface HeaderToggleProps{
-  eventKey: string
-}
+export interface HeaderToggleProps {
+  eventKey: string;
+}