From 4a993e8c362b0e4eadfa773a37d8de545665ec4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Thu, 2 Jul 2020 17:05:02 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=B2=20boss=20:compatible=20layout=20pr?=
 =?UTF-8?q?ops=20(#528)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ?? :compatible layout props

* fix test

* bugfix
---
 docs/demo/base.tsx                            |  1 +
 src/BasicLayout.tsx                           |  9 +++--
 src/utils/compatibleLayout.ts                 | 14 ++++++++
 .../__snapshots__/settingDrawer.test.tsx.snap | 12 +++----
 tests/__tests__/compatible.test.tsx           | 33 +++++++++++++++++++
 5 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/compatibleLayout.ts
 create mode 100644 tests/__tests__/compatible.test.tsx

diff --git a/docs/demo/base.tsx b/docs/demo/base.tsx
index 32876604..e3844740 100644
--- 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
index 28de5f98..9bd3feb0 100644
--- 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
new file mode 100644
index 00000000..388c093c
--- /dev/null
+++ 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
index 3b3ce053..3654d863 100644
--- 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
new file mode 100644
index 00000000..8b58da56
--- /dev/null
+++ 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();
+});