feat: add rootClassName

react-component · Apr 8, 2022 · 7e3dda9 · 7e3dda9
1 parent 1b5cbab
commit 7e3dda9
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 18 deletions.
diff --git a/src/Menu.tsx b/src/Menu.tsx
@@ -33,15 +33,18 @@ import { useImperativeHandle } from 'react';
 
 /**
  * Menu modify after refactor:
+ *
  * ## Add
- * - disabled
+ *
+ * - Disabled
  *
  * ## Remove
- * - openTransitionName
- * - openAnimation
- * - onDestroy
- * - siderCollapsed: Seems antd do not use this prop (Need test in antd)
- * - collapsedWidth: Seems this logic should be handle by antd Layout.Sider
+ *
+ * - OpenTransitionName
+ * - OpenAnimation
+ * - OnDestroy
+ * - SiderCollapsed: Seems antd do not use this prop (Need test in antd)
+ * - CollapsedWidth: Seems this logic should be handle by antd Layout.Sider
  */
 
 // optimize for render
@@ -54,15 +57,20 @@ export interface MenuProps
   > {
   prefixCls?: string;
 
+  rootClassName?: string;
+
   items?: ItemType[];
   /** @deprecated Please use `items` instead */
   children?: React.ReactNode;
 
   disabled?: boolean;
-  /** @private Disable auto overflow. Pls note the prop name may refactor since we do not final decided. */
+  /**
+   * @private Disable Auto overflow. Pls note the prop name may refactor since
+   *   we do not final decided.
+   */
   disabledOverflow?: boolean;
 
-  /** direction of menu */
+  /** Direction of menu */
   direction?: 'ltr' | 'rtl';
 
   // Mode
@@ -107,7 +115,7 @@ export interface MenuProps
   itemIcon?: RenderIconType;
   expandIcon?: RenderIconType;
   overflowedIndicator?: React.ReactNode;
-  /** @private Internal usage. Do not use in your production. */
+  /** @private Internal Usage. Do not use in your production. */
   overflowedIndicatorPopupClassName?: string;
 
   // >>>>> Function
@@ -118,9 +126,9 @@ export interface MenuProps
   onOpenChange?: (openKeys: string[]) => void;
 
   // >>>>> Internal
-  /***
-   * @private Only used for `pro-layout`. Do not use in your prod directly
-   * and we do not promise any compatibility for this.
+  /**
+   * @private Only Used for `pro-layout`. Do not use in your prod directly and
+   *   we do not promise any compatibility for this.
    */
   _internalRenderMenuItem?: (
     originNode: React.ReactElement,
@@ -129,9 +137,9 @@ export interface MenuProps
       selected: boolean;
     },
   ) => React.ReactElement;
-  /***
-   * @private Only used for `pro-layout`. Do not use in your prod directly
-   * and we do not promise any compatibility for this.
+  /**
+   * @private Only Used for `pro-layout`. Do not use in your prod directly and
+   *   we do not promise any compatibility for this.
    */
   _internalRenderSubMenuItem?: (
     originNode: React.ReactElement,
@@ -153,6 +161,7 @@ interface LegacyMenuProps extends MenuProps {
 const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   const {
     prefixCls = 'rc-menu',
+    rootClassName,
     style,
     className,
     tabIndex = 0,
@@ -421,9 +430,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   };
 
   // ========================= Open =========================
-  /**
-   * Click for item. SubMenu do not have selection status
-   */
+  /** Click for item. SubMenu do not have selection status */
   const onInternalClick = useMemoCallback((info: MenuInfo) => {
     onClick?.(warnItemProp(info));
     triggerSelection(info);
@@ -518,6 +525,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
           [`${prefixCls}-inline-collapsed`]: mergedInlineCollapsed,
           [`${prefixCls}-rtl`]: isRtl,
         },
+        rootClassName,
       )}
       dir={direction}
       style={style}
@@ -564,6 +572,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
       <IdContext.Provider value={uuid}>
         <MenuContextProvider
           prefixCls={prefixCls}
+          rootClassName={rootClassName}
           mode={mergedMode}
           openKeys={mergedOpenKeys}
           rtl={isRtl}

diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx
@@ -46,6 +46,7 @@ export default function PopupTrigger({
     builtinPlacements,
     triggerSubMenuAction,
     forceSubMenuRender,
+    rootClassName,
 
     // Motion
     motion,
@@ -90,6 +91,7 @@ export default function PopupTrigger({
           [`${prefixCls}-rtl`]: rtl,
         },
         popupClassName,
+        rootClassName,
       )}
       stretch={mode === 'horizontal' ? 'minWidth' : null}
       getPopupContainer={getPopupContainer}

diff --git a/src/context/MenuContext.tsx b/src/context/MenuContext.tsx
@@ -12,6 +12,7 @@ import type {
 
 export interface MenuContextProps {
   prefixCls: string;
+  rootClassName?: string;
   openKeys: string[];
   rtl?: boolean;
 

diff --git a/src/interface.ts b/src/interface.ts
@@ -15,6 +15,8 @@ export interface SubMenuType extends ItemSharedProps {
 
   key: string;
 
+  rootClassName?: string;
+
   // >>>>> Icon
   itemIcon?: RenderIconType;
   expandIcon?: RenderIconType;

diff --git a/tests/SubMenu.spec.js b/tests/SubMenu.spec.js
@@ -439,5 +439,48 @@ describe('SubMenu', () => {
 
     jest.useRealTimers();
   });
+
+  it('should support rootClassName', () => {
+    const wrapper = mount(
+      <Menu rootClassName="custom-className" defaultOpenKeys={['1', '1-1']}>
+        <SubMenu key="1" title="submenu1">
+          <MenuItem key="1-1" role="option">
+            submenu7
+          </MenuItem>
+        </SubMenu>
+        <MenuItem key="2" role="option">
+          2
+        </MenuItem>
+        <MenuItem key="3" role="option">
+          3
+        </MenuItem>
+      </Menu>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+
+    expect(
+      wrapper.find('ul.rc-menu-root').at(0).hasClass('custom-className'),
+    ).toBe(true);
+    expect(wrapper.find('.rc-menu-submenu-popup').length).toBe(0);
+
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // Enter
+    wrapper.find('.rc-menu-submenu-title').first().simulate('mouseEnter');
+
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper.find('.rc-menu-submenu-popup').at(0).hasClass('custom-className'),
+    ).toBe(true);
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });
 /* eslint-enable */
diff --git a/tests/__snapshots__/SubMenu.spec.js.snap b/tests/__snapshots__/SubMenu.spec.js.snap
@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubMenu should support rootClassName 1`] = `
+Array [
+  <ul
+    class="rc-menu rc-menu-root rc-menu-vertical custom-className"
+    data-menu-list="true"
+    role="menu"
+    tabindex="0"
+  >
+    <li
+      class="rc-menu-submenu rc-menu-submenu-vertical rc-menu-submenu-open"
+      role="none"
+    >
+      <div
+        aria-controls="rc-menu-uuid-test-1-popup"
+        aria-expanded="true"
+        aria-haspopup="true"
+        class="rc-menu-submenu-title"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        tabindex="-1"
+        title="submenu1"
+      >
+        submenu1
+        <i
+          class="rc-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-2"
+      role="option"
+      tabindex="-1"
+    >
+      2
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-3"
+      role="option"
+      tabindex="-1"
+    >
+      3
+    </li>
+  </ul>,
+  <div
+    aria-hidden="true"
+    style="display: none;"
+  />,
+]
+`;
+
+exports[`SubMenu should support rootClassName 2`] = `
+Array [
+  <ul
+    class="rc-menu rc-menu-root rc-menu-vertical custom-className"
+    data-menu-list="true"
+    role="menu"
+    tabindex="0"
+  >
+    <li
+      class="rc-menu-submenu rc-menu-submenu-vertical rc-menu-submenu-open rc-menu-submenu-active"
+      role="none"
+    >
+      <div
+        aria-controls="rc-menu-uuid-test-1-popup"
+        aria-expanded="true"
+        aria-haspopup="true"
+        class="rc-menu-submenu-title"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        tabindex="-1"
+        title="submenu1"
+      >
+        submenu1
+        <i
+          class="rc-menu-submenu-arrow"
+        />
+      </div>
+      <div>
+        <div
+          class="rc-menu-submenu rc-menu-submenu-popup custom-className"
+          style="opacity: 0; pointer-events: none;"
+        >
+          <ul
+            class="rc-menu rc-menu-sub rc-menu-vertical"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-1-popup"
+          >
+            <li
+              aria-selected="false"
+              class="rc-menu-item"
+              data-menu-id="rc-menu-uuid-test-1-1"
+              role="option"
+              tabindex="-1"
+            >
+              submenu7
+            </li>
+          </ul>
+        </div>
+      </div>
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-2"
+      role="option"
+      tabindex="-1"
+    >
+      2
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-3"
+      role="option"
+      tabindex="-1"
+    >
+      3
+    </li>
+  </ul>,
+  <div
+    aria-hidden="true"
+    style="display: none;"
+  />,
+]
+`;