feat(menu): menu组件添加offset控制子项偏移量

Yoshino-UI · Jun 15, 2018 · 4bb5b6f · 4bb5b6f
1 parent 15fbf79
commit 4bb5b6f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx
@@ -32,6 +32,10 @@ export interface IMenuProps extends IBaseComponent {
    * 展开回调
    */
   onOpenChange?: (openKeys: string[]) => void;
+  /**
+   * 偏移量
+   */
+  offset?: number;
 }
 
 export interface IMenuState {
@@ -49,6 +53,7 @@ export class Menu extends Component<IMenuProps, IMenuState> {
   static defaultProps = {
     defaultActiveKey: '',
     defaultOpenKeys: [],
+    offset: 24,
   };
 
   state = {
@@ -105,6 +110,7 @@ export class Menu extends Component<IMenuProps, IMenuState> {
       className, style, children,
       onSelect, defaultActiveKey,
       onOpenChange, defaultOpenKeys,
+      offset,
       ...otherProps} = this.props;
     const preCls = 'yoshino-menu';
     const clsName = classNames(
@@ -128,6 +134,7 @@ export class Menu extends Component<IMenuProps, IMenuState> {
               openKeys,
               onSelect: this.onSelect,
               onOpenChange: this.onOpenChange,
+              offset,
             });
           })
         }

diff --git a/components/Menu/MenuItem.tsx b/components/Menu/MenuItem.tsx
@@ -24,6 +24,10 @@ export interface IMenuItemProps extends IBaseComponent {
    * 禁用
    */
   disabled?: boolean;
+  /**
+   * 偏移量
+   */
+  offset?: number;
 }
 
 export interface IMenuItemState {
@@ -54,7 +58,7 @@ export class MenuItem extends Component<IMenuItemProps, IMenuItemState> {
   render() {
     const {
       className, style, children, deep,
-      activeKey, keyId, disabled,
+      activeKey, keyId, disabled, offset,
     } = this.props;
     const preCls = 'yoshino-menu-item';
     const clsName = classNames(
@@ -64,7 +68,7 @@ export class MenuItem extends Component<IMenuItemProps, IMenuItemState> {
         [`${preCls}-disabled`]: disabled,
       },
     );
-    const paddingLeft = `${deep as number * 24}px`;
+    const paddingLeft = `${deep as number * (offset as number)}px`;
     return (
       <li
         className={clsName}

diff --git a/components/Menu/MenuItemGroup.tsx b/components/Menu/MenuItemGroup.tsx
@@ -29,6 +29,10 @@ export interface IMenuItemGroupProps extends IBaseComponent {
    * 展开回调
    */
   onOpenChange?: (openKeys: string[]) => void;
+  /**
+   * 偏移量
+   */
+  offset?: number;
 }
 
 export interface IMenuItemGroupState {
@@ -45,14 +49,14 @@ export class MenuItemGroup extends Component<IMenuItemGroupProps, IMenuItemGroup
   render() {
     const {
       className, style, children, deep, title,
-      activeKey, onSelect,
+      activeKey, onSelect, offset,
     } = this.props;
     const preCls = 'yoshino-menu-item-group';
     const clsName = classNames(
       preCls, className,
     );
     const childrens = React.Children.toArray(children);
-    const paddingLeft = `${deep as number * 24}px`;
+    const paddingLeft = `${deep as number * (offset as number)}px`;
     return (
       <div
         className={clsName}
@@ -72,6 +76,7 @@ export class MenuItemGroup extends Component<IMenuItemGroupProps, IMenuItemGroup
                 deep: deep as number + 1,
                 activeKey,
                 onSelect,
+                offset,
               });
             })
           }

diff --git a/components/Menu/SubMenu.tsx b/components/Menu/SubMenu.tsx
@@ -39,6 +39,10 @@ export interface ISubMenuProps extends IBaseComponent {
    * 禁用
    */
   disabled?: boolean;
+  /**
+   * 偏移量
+   */
+  offset?: number;
 }
 
 export interface ISubMenuState {
@@ -72,7 +76,7 @@ export class SubMenu extends Component<ISubMenuProps, ISubMenuState> {
     const {
       className, style, children, title, deep,
       activeKey, onSelect, onOpenChange, openKeys = [],
-      keyId, disabled,
+      keyId, disabled, offset,
       ...otherProps,
     } = this.props;
     const preCls = 'yoshino-sub-menu';
@@ -85,7 +89,7 @@ export class SubMenu extends Component<ISubMenuProps, ISubMenuState> {
       },
     );
     const childrens = React.Children.toArray(children);
-    const paddingLeft = `${deep as number * 24}px`;
+    const paddingLeft = `${deep as number * (offset as number)}px`;
     return (
       <React.Fragment>
         <li
@@ -147,6 +151,7 @@ export class SubMenu extends Component<ISubMenuProps, ISubMenuState> {
                             openKeys,
                             onSelect,
                             onOpenChange,
+                            offset,
                           });
                         })
                       }

diff --git a/docs/pages/Menu/api.tsx b/docs/pages/Menu/api.tsx
@@ -38,6 +38,12 @@ export default [
         type: "(openKeys: string[]) => void",
         defaultValue: "-",
       },
+      {
+        props: "offset",
+        intro: "菜单子项偏移量",
+        type: "number",
+        defaultValue: "24",
+      },
     ]
   },
   {