fix: layout mode of className (#403)

Author: zombieJ

src/SubMenu/index.tsx

@@ -300,7 +300,10 @@ const InternalSubMenu = (props: SubMenuProps) => {
         popupClassName={popupClassName}
         popupOffset={popupOffset}
         popup={
-          <MenuContextProvider mode={triggerMode}>
+          <MenuContextProvider
+            // Special handle of horizontal mode
+            mode={triggerMode === 'horizontal' ? 'vertical' : triggerMode}
+          >
             <SubMenuList id={popupId} ref={popupRef}>
               {children}
             </SubMenuList>

tests/SubMenu.spec.js

@@ -407,5 +407,37 @@ describe('SubMenu', () => {
     wrapper.find('div.rc-menu-submenu-title').last().simulate('click');
     expect(onOpenChange).toHaveBeenCalledWith(['light']);
   });
+
+  it('popup className should correct', () => {
+    jest.useFakeTimers();
+
+    const wrapper = mount(
+      <Menu mode="horizontal" openKeys={['light']} disabledOverflow>
+        <SubMenu key="light">
+          <SubMenu key="bamboo" />
+        </SubMenu>
+      </Menu>,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper
+        .find('li.rc-menu-submenu')
+        .first()
+        .hasClass('rc-menu-submenu-horizontal'),
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find('li.rc-menu-submenu')
+        .last()
+        .hasClass('rc-menu-submenu-vertical'),
+    ).toBeTruthy();
+
+    jest.useRealTimers();
+  });
 });
 /* eslint-enable */