🐲 boss :compatible layout props (#528)

* ?? :compatible layout props * fix test * bugfix
ant-design · Jul 2, 2020 · 4a993e8 · 4a993e8
1 parent 6d965c1
commit 4a993e8
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 9 deletions.
diff --git a/docs/demo/base.tsx b/docs/demo/base.tsx
@@ -24,6 +24,7 @@ export default () => {
         {...defaultProps}
         style={{
           height: 800,
+          maxHeight: '100vh',
         }}
         location={{
           pathname,

diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx
@@ -33,6 +33,7 @@ import PageLoading from './PageLoading';
 import MenuCounter from './SiderMenu/Counter';
 import WrapContent from './WrapContent';
 import { useDocumentTitle } from './utils/hooks';
+import compatibleLayout from './utils/compatibleLayout';
 
 export type BasicLayoutProps = Partial<RouterTypes<Route>> &
   SiderMenuProps &
@@ -197,10 +198,10 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     fixSiderbar,
     navTheme,
     contentStyle,
-    layout: PropsLayout,
     route = {
       routes: [],
     },
+    layout: defaultPropsLayout,
     style,
     disableContentMargin,
     siderWidth = 208,
@@ -210,6 +211,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     loading,
     ...rest
   } = props;
+  const propsLayout = compatibleLayout(defaultPropsLayout);
   const { prefixCls } = rest;
   const formatMessage = ({
     id,
@@ -290,7 +292,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 
   // If it is a fix menu, calculate padding
   // don't need padding in phone mode
-  const hasLeftPadding = fixSiderbar && PropsLayout !== 'top' && !isMobile;
+  const hasLeftPadding = fixSiderbar && propsLayout !== 'top' && !isMobile;
 
   const [collapsed, onCollapse] = useMergeValue<boolean>(false, {
     value: props.collapsed,
@@ -303,6 +305,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       ...props,
       formatMessage,
       breadcrumb,
+      layout: compatibleLayout(props.layout) as 'side',
     },
     ['className', 'style'],
   );
@@ -373,7 +376,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     baseClassName,
     {
       [`screen-${colSize}`]: colSize,
-      [`${baseClassName}-top-menu`]: PropsLayout === 'top',
+      [`${baseClassName}-top-menu`]: propsLayout === 'top',
       [`${baseClassName}-is-children`]: isChildrenLayout,
       [`${baseClassName}-fix-siderbar`]: fixSiderbar,
       [`${baseClassName}-mobile`]: isMobile,

diff --git a/src/utils/compatibleLayout.ts b/src/utils/compatibleLayout.ts
@@ -0,0 +1,14 @@
+const compatibleLayout = (
+  layout?: 'side' | 'top' | 'mix' | 'sidemenu' | 'topmenu',
+) => {
+  if (!layout) {
+    return layout;
+  }
+  const layoutEnum = ['sidemenu', 'topmenu'];
+  if (layoutEnum.includes(layout)) {
+    return layout.replace('menu', '');
+  }
+  return layout;
+};
+
+export default compatibleLayout;
diff --git a/tests/__tests__/__snapshots__/settingDrawer.test.tsx.snap b/tests/__tests__/__snapshots__/settingDrawer.test.tsx.snap
@@ -189,7 +189,7 @@ exports[`settingDrawer.test base user 1`] = `
                               >
                                 <span
                                   aria-label="down"
-                                  class="anticon anticon-down"
+                                  class="anticon anticon-down ant-select-suffix"
                                   role="img"
                                 >
                                   <svg
@@ -750,7 +750,7 @@ exports[`settingDrawer.test hideColors = true 1`] = `
                               >
                                 <span
                                   aria-label="down"
-                                  class="anticon anticon-down"
+                                  class="anticon anticon-down ant-select-suffix"
                                   role="img"
                                 >
                                   <svg
@@ -1349,7 +1349,7 @@ exports[`settingDrawer.test hideCopyButton = true 1`] = `
                               >
                                 <span
                                   aria-label="down"
-                                  class="anticon anticon-down"
+                                  class="anticon anticon-down ant-select-suffix"
                                   role="img"
                                 >
                                   <svg
@@ -1920,7 +1920,7 @@ exports[`settingDrawer.test hideHintAlert = true 1`] = `
                               >
                                 <span
                                   aria-label="down"
-                                  class="anticon anticon-down"
+                                  class="anticon anticon-down ant-select-suffix"
                                   role="img"
                                 >
                                   <svg
@@ -2485,7 +2485,7 @@ exports[`settingDrawer.test hideLoading = true 1`] = `
                               >
                                 <span
                                   aria-label="down"
-                                  class="anticon anticon-down"
+                                  class="anticon anticon-down ant-select-suffix"
                                   role="img"
                                 >
                                   <svg
@@ -3084,7 +3084,7 @@ exports[`settingDrawer.test settings = undefined 1`] = `
                               >
                                 <span
                                   aria-label="down"
-                                  class="anticon anticon-down"
+                                  class="anticon anticon-down ant-select-suffix"
                                   role="img"
                                 >
                                   <svg

diff --git a/tests/__tests__/compatible.test.tsx b/tests/__tests__/compatible.test.tsx
@@ -0,0 +1,33 @@
+import { mount, render } from 'enzyme';
+
+import React from 'react';
+import BasicLayout from '../../src/BasicLayout';
+import { waitForComponentToPaint } from './util';
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    value: jest.fn(() => ({
+      matches: false,
+      addListener() {},
+      removeListener() {},
+    })),
+  });
+});
+
+it('🐲 layout=sidemenu', async () => {
+  // @ts-expect-error
+  const wrapper = mount(<BasicLayout layout="sidemenu" />);
+  await waitForComponentToPaint(wrapper);
+  const menu = wrapper.find('.ant-pro-sider-menu');
+  expect(menu.exists()).toBe(true);
+  wrapper.unmount();
+});
+
+it('🐲 layout=topmenu', async () => {
+  // @ts-expect-error
+  const wrapper = mount(<BasicLayout layout="topmenu" />);
+  await waitForComponentToPaint(wrapper);
+  const menu = wrapper.find('.ant-pro-sider-menu');
+  expect(menu.exists()).toBe(false);
+  wrapper.unmount();
+});