fix: change dropdownbutton divider

Signed-off-by: fan-mengwen <fan.mengwen@xsky.com>
xsky-fe · May 19, 2023 · 8419ea0 · 8419ea0
1 parent ea084cc
commit 8419ea0
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 10 deletions.
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -9,10 +9,12 @@ const defaultProps: DropdownDefaultProps = {
 };
 
 const Dropdown = (props: DropdownProps) => {
-  const { customToggle, align, className, id, title, children } = props;
+  const { customToggle, className, id, title, children, align } = props;
   return (
     <BootstrapDropdown id={id} className={className} align={align}>
-      {customToggle && title}
+      {customToggle && title && (
+        <BootstrapDropdown.Toggle variant="default" as={title as React.ElementType} />
+      )}
       {!customToggle && title && (
         <BootstrapDropdown.Toggle variant="default">{title}</BootstrapDropdown.Toggle>
       )}
@@ -27,9 +29,9 @@ Dropdown.propTypes = {
    **/
   className: PropTypes.string,
   /**
-   * 下拉框收起时展示内容 string
+   * 下拉框收起时展示内容 node
    **/
-  title: PropTypes.string,
+  title: PropTypes.node,
   /**
    * 元素 id，默认为 CustomDropdown string
    **/
@@ -42,4 +44,11 @@ Dropdown.propTypes = {
 
 Dropdown.defaultProps = defaultProps;
 
-export default Dropdown;
+export default Object.assign(Dropdown, {
+  Toggle: BootstrapDropdown.Toggle,
+  Menu: BootstrapDropdown.Menu,
+  Item: BootstrapDropdown.Item,
+  ItemText: BootstrapDropdown.ItemText,
+  Divider: BootstrapDropdown.Divider,
+  Header: BootstrapDropdown.Header,
+});
diff --git a/src/components/DropdownButton/index.tsx b/src/components/DropdownButton/index.tsx
@@ -66,13 +66,17 @@ function renderMenu(
       </SubMenu>
     );
   }
+  if (item.divider) {
+    return <Dropdown.Divider key={item.key} />;
+  }
   const handleItemSelect = (eventKey: any) => {
     const { onSelect } = item;
     setButtonShow(!!show);
     // 如果有传入 onSelect 回调函数，会继续执行传入的回调函数
     if (onSelect) onSelect(eventKey);
   };
-  const menuProps = omit(item, 'toolTip');
+  const menuProps = omit(item, ['toolTip', 'divider']);
+
   return (
     <Dropdown.Item {...menuProps} onSelect={handleItemSelect}>
       {item.toolTip ? (

diff --git a/src/components/SubMenu/index.tsx b/src/components/SubMenu/index.tsx
@@ -8,10 +8,10 @@ const SubMenu = (props: SubMenuProps) => {
   const { title, children, name } = props;
   return (
     <div className="SubMenu" data-name={`SubMenu-${name}`}>
-      <Dropdown.Item bsPrefix="dropdown-header dropdown-submenu dropdown-submenu-header">
+      <Dropdown.Header bsPrefix="dropdown-submenu dropdown-submenu-header">
         <span>{title}</span>
         <ul className="dropdown-menu">{children}</ul>
-      </Dropdown.Item>
+      </Dropdown.Header>
     </div>
   );
 };

diff --git a/src/interface.tsx b/src/interface.tsx
@@ -211,6 +211,7 @@ export type DropdownButtonMenuItem =
       onSelect?: Function;
       disabled?: boolean;
       toolTip?: TooltipProps;
+      divider?: boolean;
     }
   | string;
 
@@ -306,7 +307,7 @@ export interface DropdownAlignProps {
 }
 export interface DropdownProps extends DropdownDefaultProps, DropdownAlignProps {
   className?: string;
-  title?: string;
+  title?: React.ReactNode;
   children?: React.ReactNode;
   customToggle?: boolean;
   pullRight?: boolean;

diff --git a/src/style/variables.scss b/src/style/variables.scss
@@ -204,7 +204,8 @@ $progress-height: 8px;
 $progress-legend-height: 8px;
 
 /* PingFang font */
-$pingfang-font: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Helvetica", "Arial", "PingFangSC-Regular", "San Francisco", "Noto Sans", "Roboto", "Microsoft Yahei", "微软雅黑", "Segoe UI", "sans-serif";
+$pingfang-font: '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC',
+'San Francisco', 'Noto Sans', 'Roboto', 'Microsoft Yahei', '微软雅黑', 'Segoe UI', 'sans-serif';
 
 /* Font weight */
 $font-weight-regular: 400;