fix: layout test

gweiguo · Jan 7, 2021 · 2b55648 · 2b55648
1 parent 8a8fc81
commit 2b55648
Show file tree

Hide file tree

Showing 17 changed files with 643 additions and 248 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,12 +11,18 @@ module.exports = {
     '@vue/prettier/@typescript-eslint',
   ],
   parserOptions: {
-    // ecmaVersion: 2020,
-    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    // parser: '@typescript-eslint/parser',
   },
   rules: {
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-inferrable-types': 0,
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   },

diff --git a/.prettierrc b/.prettierrc
@@ -1,8 +1,11 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
+  "endOfLine" : "lf",
   "printWidth": 100,
   "proseWrap": "never",
+  "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "ignore",
   "overrides": [
     {
       "files": ".prettierrc",

diff --git a/examples/index.tsx b/examples/index.tsx
@@ -6,7 +6,6 @@ import { default as ProLayout } from '../src/';
 import { menus } from './menus';
 import * as Icon from '@ant-design/icons-vue';
 import { createRouteContext, RouteContextProps } from '../src/RouteContext';
-import { DemoBox } from './demoBox';
 
 const BasicLayout = defineComponent({
   name: 'BasicLayout',
@@ -29,20 +28,24 @@ const BasicLayout = defineComponent({
       hasHeader: true,
       hasFooterToolbar: false,
       setHasFooterToolbar: (has: boolean) => (state.hasFooterToolbar = has),
-    })
-    const [ RouteContextProvider ] = createRouteContext();
+    });
+    const [RouteContextProvider] = createRouteContext();
 
     const cacheOpenKeys = ref<string[]>([]);
     watch(
       () => state.collapsed,
       (collapsed: boolean) => {
+        console.log('post watch', collapsed, state.collapsed);
         if (collapsed) {
           cacheOpenKeys.value = state.openKeys;
           state.openKeys = [];
         } else {
           state.openKeys = cacheOpenKeys.value;
         }
-      }
+      },
+      {
+        flush: 'pre',
+      },
     );
 
     return () => (
@@ -63,15 +66,15 @@ const BasicLayout = defineComponent({
           v-slots={{
             rightContentRender: () => (
               <div style="color: #FFF;margin-right: 16px;">
-                <Avatar icon={(<Icon.UserOutlined />)} /> Sendya
+                <Avatar icon={<Icon.UserOutlined />} /> Sendya
               </div>
             ),
             menuHeaderRender: () => (
               <a>
                 <img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
-                {state.collapsed ? null : (<h1>Pro Layout</h1>)}
+                {state.collapsed ? null : <h1>Pro Layout</h1>}
               </a>
-            )
+            ),
           }}
         >
           <Button

diff --git a/package.json b/package.json
@@ -28,51 +28,51 @@
   },
   "devDependencies": {
     "@ant-design-vue/tools": "^3.0.4",
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/plugin-transform-object-assign": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
-    "@types/fs-extra": "^9.0.2",
+    "@babel/preset-env": "^7.12.11",
+    "@types/fs-extra": "^9.0.6",
     "@types/jest": "^24.0.17",
     "@types/node": "^13.13.15",
     "@types/rimraf": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
-    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
+    "@vue/babel-plugin-jsx": "^1.0.0-rc.5",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-0",
+    "@vue/compiler-sfc": "^3.0.3",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-beta.2",
     "babel-jest": "^26.6.3",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "cross-env": "^5.2.0",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-vue": "^7.3.0",
     "fs-extra": "^9.0.1",
     "jest": "^26.6.3",
     "jest-environment-jsdom-fifteen": "^1.0.2",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^26.4.4",
-    "ts-node": "^8.10.2",
+    "ts-node": "^9.1.1",
     "typescript": "~3.9.3",
     "vue": "^3.0.0-0",
     "vue-jest": "^5.0.0-alpha.3",
     "vue-router": "^4.0.0-beta.13"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "ant-design-vue": "^2.0.0-beta.10",
-    "lodash-es": "^4.17.15",
+    "ant-design-vue": "^2.0.0-rc.5",
+    "lodash-es": "^4.17.20",
     "vue-types": "^3.0.1"
   },
   "config": {

diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx
@@ -3,7 +3,6 @@ import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import { withInstall } from 'ant-design-vue/es/_util/type';
 import { default as ProProvider, ProProviderData } from './ProProvider';
-import { default as GlobalFooter } from './GlobalFooter';
 import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
 import { WrapContent } from './WrapContent';
 import { default as Header, HeaderViewProps } from './Header';
@@ -14,41 +13,42 @@ import './BasicLayout.less';
 
 const defaultI18nRender = (key: string) => key;
 
-export type BasicLayoutProps = SiderMenuWrapperProps & HeaderViewProps & {
-  pure?: boolean;
-  /**
-   *@name logo url
-   */
-  logo?: string | RenderVNodeType | WithFalse<string | RenderVNodeType>;
+export type BasicLayoutProps = SiderMenuWrapperProps &
+  HeaderViewProps & {
+    pure?: boolean;
+    /**
+     *@name logo url
+     */
+    logo?: string | RenderVNodeType | WithFalse<string | RenderVNodeType>;
 
-  loading?: boolean;
+    loading?: boolean;
 
-  i18n?: ProProviderData['i18n'];
+    i18n?: ProProviderData['i18n'];
 
-  defaultCollapsed?: boolean;
+    defaultCollapsed?: boolean;
 
-  onCollapse?: (collapsed: boolean) => void;
+    onCollapse?: (collapsed: boolean) => void;
 
-  footerRender?: WithFalse<
-    (props: any /* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
-  >;
+    footerRender?: WithFalse<
+      (props: any /* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
+    >;
 
-  headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
+    headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
 
-  colSize?: string;
-  /**
-   * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
-   */
-  disableMobile?: boolean;
+    colSize?: string;
+    /**
+     * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
+     */
+    disableMobile?: boolean;
 
-  isChildrenLayout?: boolean;
+    isChildrenLayout?: boolean;
 
-  contentStyle?: CSSProperties;
-  /**
-   * 兼用 content的 margin
-   */
-  disableContentMargin?: boolean;
-};
+    contentStyle?: CSSProperties;
+    /**
+     * 兼用 content的 margin
+     */
+    disableContentMargin?: boolean;
+  };
 
 const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots, attrs }) => {
   const {
@@ -102,28 +102,31 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
       customHeaderRender: VNodeChild | false;
       rightContentRender: VNodeChild | false;
     },
-    matchMenuKeys: string[]
+    matchMenuKeys: string[],
   ): RenderVNodeType => {
     if (props.headerRender === false || props.pure) {
       return null;
     }
     return <Header matchMenuKeys={matchMenuKeys} {...props} headerHeight={48} />;
-  }
+  };
   const rightContentRender = getComponentOrSlot(props, slots, 'rightContentRender');
-  const customHeaderRender = getComponentOrSlot(props, slots, 'headerRender');;
-  const headerDom = headerRender({
-    ...props,
-    hasSiderMenu: isTop.value,
-    menuData,
-    isMobile,
-    collapsed,
-    onCollapse,
-    onSelect: handleSelect,
-    onOpenChange: handleOpenChange,
-    customHeaderRender,
-    rightContentRender,
-    theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
-  }, matchMenuKeys);
+  const customHeaderRender = getComponentOrSlot(props, slots, 'headerRender');
+  const headerDom = headerRender(
+    {
+      ...props,
+      hasSiderMenu: isTop.value,
+      menuData,
+      isMobile,
+      collapsed,
+      onCollapse,
+      onSelect: handleSelect,
+      onOpenChange: handleOpenChange,
+      customHeaderRender,
+      rightContentRender,
+      theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
+    },
+    matchMenuKeys,
+  );
 
   const footerRender = getComponentOrSlot(props, slots, 'footerRender');
   const menuRender = getComponentOrSlot(props, slots, 'menuRender');
@@ -133,26 +136,28 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
 
   return (
     <ProProvider i18n={defaultI18nRender}>
-      { props.pure
-        ? (slots.default?.())
-        : (
-          <div class={className.value}>
-            <Layout class={baseClassName.value}>
-              { !isTop.value && (<SiderMenuWrapper
+      {props.pure ? (
+        slots.default?.()
+      ) : (
+        <div class={className.value}>
+          <Layout class={baseClassName.value}>
+            {!isTop.value && (
+              <SiderMenuWrapper
                 {...props}
-                menuHeaderRender={menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))}
+                menuHeaderRender={
+                  menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))
+                }
                 onCollapse={handleCollapse}
-              />)}
-              <Layout>
-                {headerDom}
-                <WrapContent style={props.contentStyle}>
-                  {slots.default?.()}
-                </WrapContent>
-                { footerRender !== false && (footerRender && footerRender)}
-              </Layout>
+              />
+            )}
+            <Layout>
+              {headerDom}
+              <WrapContent style={props.contentStyle}>{slots.default?.()}</WrapContent>
+              {footerRender !== false && footerRender && footerRender}
             </Layout>
-          </div>
-        )}
+          </Layout>
+        </div>
+      )}
     </ProProvider>
   );
 };

diff --git a/src/GlobalHeader/index.tsx b/src/GlobalHeader/index.tsx
@@ -1,7 +1,13 @@
-import { computed, CSSProperties, FunctionalComponent, toRefs } from 'vue';
+import { computed, CSSProperties, FunctionalComponent } from 'vue';
 import { PureSettings } from '../defaultSettings';
 import { RenderVNodeType, MenuDataItem, WithFalse } from '../typings';
-import { SiderMenuProps, PrivateSiderMenuProps, defaultRenderLogo, defaultRenderLogoAndTitle, defaultRenderCollapsedButton } from '../SiderMenu/SiderMenu';
+import {
+  SiderMenuProps,
+  PrivateSiderMenuProps,
+  defaultRenderLogo,
+  defaultRenderLogoAndTitle,
+  defaultRenderCollapsedButton,
+} from '../SiderMenu/SiderMenu';
 import { TopNavHeader } from '../TopNavHeader';
 import { clearMenuItem } from '../utils';
 import type { HeaderViewProps } from '../Header';
@@ -23,7 +29,7 @@ export interface GlobalHeaderProps extends Partial<PureSettings> {
   menuHeaderRender?: SiderMenuProps['menuHeaderRender'];
   collapsedButtonRender?: SiderMenuProps['collapsedButtonRender'];
   splitMenus?: boolean;
-};
+}
 
 const renderLogo = (
   menuHeaderRender: SiderMenuProps['menuHeaderRender'],
@@ -38,7 +44,10 @@ const renderLogo = (
   return logoDom;
 };
 
-export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderMenuProps> = (props, { slots }) => {
+export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderMenuProps> = (
+  props,
+  { slots },
+) => {
   const {
     isMobile,
     logo,
@@ -48,7 +57,7 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
     rightContentRender,
     menuHeaderRender,
     onMenuHeaderClick,
-    className: propClassName,
+    // className: propClassName,
     layout,
     headerTheme = 'dark',
     splitMenus,
@@ -62,10 +71,10 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
     return {
       [baseClassName.value]: true,
       [`${baseClassName.value}-layout-${layout}`]: layout && headerTheme === 'dark',
-    }
+    };
   });
   if (layout === 'mix' && !isMobile && splitMenus) {
-    const noChildrenMenuData = (menuData || []).map((item) => ({
+    const noChildrenMenuData = (menuData || []).map(item => ({
       ...item,
       children: undefined,
     }));
@@ -110,12 +119,11 @@ export const GlobalHeader: FunctionalComponent<GlobalHeaderProps & PrivateSiderM
         </>
       )}
       <div style={{ flex: 1 }}>{slots.default?.()}</div>
-      { rightContentRender && typeof rightContentRender === 'function'
+      {rightContentRender && typeof rightContentRender === 'function'
         ? rightContentRender(props)
-        : rightContentRender
-      }
+        : rightContentRender}
     </div>
   );
-}
+};
 
 export default GlobalHeader;