🐲 boss :compatible layout props

docs/demo/base.tsx

@@ -24,6 +24,7 @@ export default () => {
  {...defaultProps}
  style={{
  height: 800,
+ maxHeight: '100vh',
  }}
  location={{
  pathname,

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,

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;

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

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();
+});