fix: Menu, BasicLayout, VNodeType

k713927 · Feb 27, 2021 · 5bddea7 · 5bddea7
1 parent ec3c712
commit 5bddea7
Show file tree

Hide file tree

Showing 16 changed files with 243 additions and 105 deletions.
diff --git a/README.md b/README.md
@@ -13,9 +13,9 @@ Ant Design Pro Layout
 
 ```bash
 # yarn
-yarn add @ant-design-vue/pro-layout
+yarn add @ant-design-vue/pro-layout@next
 # npm
-npm i @ant-design-vue/pro-layout -S
+npm i @ant-design-vue/pro-layout@next -S
 ```
 
 ## Basic Usage
@@ -46,7 +46,7 @@ After that, you can use pro-layout in your Vue components as simply as this:
 
 <script>
 import { defineComponent, reactive } from 'vue';
-import ProLayout, { createRouteContext } from '@ant-design-vue/pro-layout';
+import { createRouteContext } from '@ant-design-vue/pro-layout';
 
 const [ RouteContextProvider ] = createRouteContext();
 
@@ -56,9 +56,7 @@ export default defineComponent({
       collapsed: false,
 
       openKeys: ['/dashboard'],
-      setOpenKeys: (keys) => (state.openKeys = keys),
       selectedKeys: ['/welcome'],
-      setSelectedKeys: (keys) => (state.selectedKeys = keys),
 
       isMobile: false,
       fixSiderbar: false,
@@ -76,7 +74,6 @@ export default defineComponent({
     }
   },
   components: {
-    ProLayout,
     RouteContextProvider,
   }
 });
@@ -95,9 +92,7 @@ export default defineComponent({
         collapsed: false,
 
         openKeys: ['/dashboard'],
-        setOpenKeys: (keys: string[]) => (state.openKeys = keys),
         selectedKeys: ['/welcome'],
-        setSelectedKeys: (keys: string[]) => (state.selectedKeys = keys),
 
         isMobile: false,
         fixSiderbar: false,

diff --git a/babel.config.js b/babel.config.js
@@ -3,7 +3,7 @@ module.exports = {
     test: {
       presets: [['@babel/preset-env', { targets: { node: true } }]],
       plugins: [
-        '@vue/babel-plugin-jsx',
+        ['@vue/babel-plugin-jsx', { mergeProps: false }],
         '@babel/plugin-proposal-optional-chaining',
         '@babel/plugin-transform-object-assign',
         '@babel/plugin-proposal-object-rest-spread',

diff --git a/examples/menus.ts b/examples/menus.ts
@@ -1,6 +1,4 @@
-import { RouteProps } from '../src/typings';
-
-export const menus: RouteProps[] = [
+export const menus = [
   {
     path: '/welcome',
     name: 'welcome',

diff --git a/examples/test.html b/examples/test.html
diff --git a/examples/test.tsx b/examples/test.tsx
@@ -0,0 +1,59 @@
+import { createApp, reactive } from 'vue';
+import { default as ProLayout, createRouteContext, RouteContextProps } from '../src/';
+
+import { RouterLink } from './mock-router';
+import { menus } from './menus';
+import registerIcons from './_util/icons';
+
+const SimpleDemo = {
+  setup() {
+    const [RouteContextProvider] = createRouteContext();
+
+    const appState = reactive<RouteContextProps>({
+      selectedKeys: [],
+      openKeys: [],
+      collapsed: true,
+      menuData: menus,
+    });
+    return () => (
+      <RouteContextProvider value={appState}>
+        <ProLayout
+          title="Pro Tests"
+          logo="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg"
+          layout="side"
+          navTheme="light"
+          contentWidth="Fluid"
+          contentStyle={{ minHeight: '300px' }}
+          collapsed={appState.collapsed}
+          onCollapse={collapsed => {
+            appState.collapsed = collapsed;
+          }}
+          onSelect={(selectedKeys: string[] | false) => {
+            selectedKeys && (appState.selectedKeys = selectedKeys);
+          }}
+          onOpenKeys={(openKeys: string[] | false) => {
+            console.log('onOpenKeys', openKeys);
+            openKeys && (appState.openKeys = openKeys);
+          }}
+          footerRender={() => <div>custom-footer</div>}
+          v-slots={{
+            rightContentRender: props => (
+              <div class="custom-header-right-content">
+                <span>custom-right-content</span>
+              </div>
+            ),
+          }}
+        >
+          <div>content</div>
+        </ProLayout>
+      </RouteContextProvider>
+    );
+  },
+};
+
+const app = createApp(SimpleDemo);
+
+app.use(ProLayout);
+app.use(RouterLink);
+app.use(registerIcons);
+app.mount('#__vue-content>div');
diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx
@@ -1,13 +1,13 @@
-import { computed, FunctionalComponent, CSSProperties, VNodeChild, VNode, unref } from 'vue';
+import { computed, FunctionalComponent, CSSProperties, unref } from 'vue';
 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 SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
 import { WrapContent } from './WrapContent';
 import { default as Header, HeaderViewProps } from './Header';
-import { RenderVNodeType, WithFalse } from './typings';
-import { getComponentOrSlot, PropRenderType, PropTypes } from './utils';
+import { VNodeType, CustomRender, WithFalse } from './typings';
+import { getCustomRender, PropRenderType, PropTypes } from './utils';
 import useMediaQuery from './hooks/useMediaQuery';
 import './BasicLayout.less';
 
@@ -19,7 +19,7 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
     /**
      *@name logo url
      */
-    logo?: string | RenderVNodeType | WithFalse<string | RenderVNodeType>;
+    logo?: VNodeType;
 
     loading?: boolean;
 
@@ -29,11 +29,9 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
 
     onCollapse?: (collapsed: boolean) => void;
 
-    footerRender?: WithFalse<
-      (props: any /* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
-    >;
+    footerRender?: WithFalse<(props: any /* FooterProps */) => VNodeType>;
 
-    headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
+    headerRender?: WithFalse<(props: any /* HeaderProps */) => VNodeType>;
 
     colSize?: string;
     /**
@@ -68,19 +66,16 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   const isTop = computed(() => layout === 'top');
   // const isSide = computed(() => layout === 'side');
   // const isMix = computed(() => layout === 'mix');
-
-  const handleCollapse = (collapsed: boolean) => {
-    propsOnCollapse && propsOnCollapse(collapsed);
-    emit('update:collapsed', collapsed);
-  };
-  const handleOpenKeys = (openKeys: string[] | false): void => {
-    propsOnOpenKeys && propsOnOpenKeys(openKeys);
-    emit('update:open-keys', openKeys);
-  };
-  const handleSelect = (selectedKeys: string[] | false): void => {
-    propsOnSelect && propsOnSelect(selectedKeys);
-    emit('update:selected-keys', selectedKeys);
-  };
+  // if on event and @event
+  const onCollapse =
+    (propsOnCollapse && propsOnCollapse) ||
+    ((collapsed: boolean) => emit('update:collapsed', collapsed));
+  const onOpenKeys =
+    (propsOnOpenKeys && propsOnOpenKeys) ||
+    ((openKeys: string[] | false) => emit('update:open-keys', openKeys));
+  const onSelect =
+    (propsOnSelect && propsOnSelect) ||
+    ((selectedKeys: string[] | false) => emit('update:selected-keys', selectedKeys));
   const colSize = useMediaQuery();
   const isMobile = computed(
     () => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile,
@@ -115,42 +110,39 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   const headerRender = (
     props: BasicLayoutProps & {
       hasSiderMenu: boolean;
-      customHeaderRender: VNodeChild | false;
-      rightContentRender: VNodeChild | VNode | false;
+      customHeaderRender: WithFalse<CustomRender>;
+      rightContentRender: WithFalse<CustomRender>;
     },
     matchMenuKeys: string[],
-  ): RenderVNodeType => {
+  ): VNodeType => {
     if (props.headerRender === false || props.pure) {
       return null;
     }
     return <Header matchMenuKeys={matchMenuKeys} {...props} headerHeight={48} />;
   };
-  const rightContentRender = getComponentOrSlot(props, slots, 'rightContentRender') as any;
-  const customHeaderRender = getComponentOrSlot(props, slots, 'headerRender');
-  const menuHeaderRenderFunc = props['menuHeaderRender'];
-  const menuHeaderRenderSlot = slots['menuHeaderRender'];
+  const rightContentRender = getCustomRender(props, slots, 'rightContentRender');
+  const customHeaderRender = getCustomRender(props, slots, 'headerRender');
+  const menuHeaderRender = getCustomRender(props, slots, 'menuHeaderRender');
+  const footerRender = getCustomRender(props, slots, 'footerRender');
+  // const menuRender = getCustomRender(props, slots, 'menuRender');
+
   const headerDom = headerRender(
     {
       ...props,
       hasSiderMenu: !isTop.value,
       menuData,
       isMobile: unref(isMobile),
-      onCollapse: handleCollapse,
-      onSelect: handleSelect,
-      onOpenKeys: handleOpenKeys,
+      onCollapse,
+      onOpenKeys,
+      onSelect,
       customHeaderRender,
       rightContentRender,
-      headerTitleRender:
-        menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot())),
+      headerTitleRender: menuHeaderRender,
       theme: (navTheme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light',
     },
     matchMenuKeys,
   );
 
-  const footerRender = getComponentOrSlot(props, slots, 'footerRender');
-  // const menuRender = getComponentOrSlot(props, slots, 'menuRender');
-  // const menuHeaderRender = getComponentOrSlot(props, slots, 'menuHeaderRender');
-
   return (
     <ProProvider i18n={defaultI18nRender}>
       {props.pure ? (
@@ -162,12 +154,10 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
               <SiderMenuWrapper
                 {...props}
                 isMobile={isMobile.value}
-                menuHeaderRender={
-                  menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))
-                }
-                onCollapse={handleCollapse}
-                onSelect={handleSelect}
-                onOpenKeys={handleOpenKeys}
+                menuHeaderRender={menuHeaderRender}
+                onCollapse={onCollapse}
+                onSelect={onSelect}
+                onOpenKeys={onOpenKeys}
               />
             )}
             <Layout style={genLayoutStyle}>
@@ -178,7 +168,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
               >
                 {slots.default?.()}
               </WrapContent>
-              {footerRender !== false && footerRender && footerRender}
+              {footerRender && footerRender(props)}
             </Layout>
           </Layout>
         </div>
@@ -266,6 +256,8 @@ ProLayout.props = {
   collapsed: PropTypes.bool,
   /* 菜单的折叠收起事件 (collapsed: boolean) => void */
   onCollapse: PropTypes.func,
+  onSelect: PropTypes.func,
+  onOpenKeys: PropTypes.func,
   // onPageChange // 请使用 vue-router 监听
   /* 禁止自动切换到移动页面 */
   disableMobile: PropTypes.bool,

diff --git a/src/GlobalHeader/index.tsx b/src/GlobalHeader/index.tsx
@@ -1,6 +1,6 @@
 import { computed, CSSProperties, FunctionalComponent } from 'vue';
 import { PureSettings } from '../defaultSettings';
-import { RenderVNodeType, MenuDataItem, WithFalse } from '../typings';
+import { VNodeType, MenuDataItem, WithFalse } from '../typings';
 import {
   SiderMenuProps,
   PrivateSiderMenuProps,
@@ -18,9 +18,9 @@ export interface GlobalHeaderProps extends Partial<PureSettings> {
   collapsed?: boolean;
   onCollapse?: (collapsed: boolean) => void;
   isMobile?: boolean;
-  logo?: RenderVNodeType;
-  menuRender?: WithFalse<(props: HeaderViewProps, defaultDom: RenderVNodeType) => RenderVNodeType>;
-  rightContentRender?: WithFalse<(props: HeaderViewProps) => RenderVNodeType>;
+  logo?: VNodeType;
+  menuRender?: WithFalse<(props: HeaderViewProps, defaultDom: VNodeType) => VNodeType>;
+  rightContentRender?: WithFalse<(props: HeaderViewProps) => VNodeType>;
   className?: string;
   prefixCls?: string;
   menuData?: MenuDataItem[];
@@ -33,10 +33,7 @@ export interface GlobalHeaderProps extends Partial<PureSettings> {
   onSelect?: (selectedKeys: WithFalse<string[]>) => void;
 }
 
-const renderLogo = (
-  menuHeaderRender: SiderMenuProps['menuHeaderRender'],
-  logoDom: RenderVNodeType,
-) => {
+const renderLogo = (menuHeaderRender: SiderMenuProps['menuHeaderRender'], logoDom: VNodeType) => {
   if (menuHeaderRender === false) {
     return null;
   }

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -5,7 +5,7 @@ import Layout from 'ant-design-vue/es/layout';
 import { GlobalHeader, GlobalHeaderProps } from './GlobalHeader';
 import { TopNavHeader } from './TopNavHeader';
 import { useRouteContext } from './RouteContext';
-import { RenderVNodeType, WithFalse } from './typings';
+import { VNodeType, WithFalse } from './typings';
 import { clearMenuItem } from './utils';
 import './Header.less';
 
@@ -18,15 +18,11 @@ interface HeaderViewState {
 export type HeaderViewProps = GlobalHeaderProps & {
   isMobile?: boolean;
   collapsed?: boolean;
-  logo?: RenderVNodeType;
+  logo?: VNodeType;
 
-  headerRender?: WithFalse<
-    (props: HeaderViewProps, defaultDom: RenderVNodeType) => RenderVNodeType
-  >;
-  headerTitleRender?: WithFalse<
-    (props: HeaderViewProps, defaultDom: RenderVNodeType) => RenderVNodeType
-  >;
-  headerContentRender?: WithFalse<(props: HeaderViewProps) => RenderVNodeType>;
+  headerRender?: WithFalse<(props: HeaderViewProps, defaultDom: VNodeType) => VNodeType>;
+  headerTitleRender?: WithFalse<(props: HeaderViewProps, defaultDom: VNodeType) => VNodeType>;
+  headerContentRender?: WithFalse<(props: HeaderViewProps) => VNodeType>;
   siderWidth?: number;
   hasSiderMenu?: boolean;
 };
@@ -66,8 +62,6 @@ export const HeaderView = defineComponent({
   setup(props: HeaderViewProps) {
     const {
       prefixCls,
-      headerRender,
-      headerContentRender,
       isMobile,
       fixedHeader,
       hasSiderMenu,
@@ -96,7 +90,7 @@ export const HeaderView = defineComponent({
     const renderContent = () => {
       let defaultDom = (
         <GlobalHeader {...props} onCollapse={onCollapse.value} menuData={clearMenuData.value}>
-          {headerContentRender && headerContentRender.value && headerContentRender.value(props)}
+          {props.headerContentRender && props.headerContentRender(props)}
         </GlobalHeader>
       );
       if (isTop.value && !isMobile.value) {
@@ -110,8 +104,8 @@ export const HeaderView = defineComponent({
           />
         );
       }
-      if (headerRender.value && typeof headerRender.value === 'function') {
-        return headerRender.value(props, defaultDom);
+      if (props.headerRender) {
+        return props.headerRender(props, defaultDom);
       }
       return defaultDom;
     };

diff --git a/src/SiderMenu/BaseMenu.tsx b/src/SiderMenu/BaseMenu.tsx
@@ -117,7 +117,6 @@ class MenuUtil {
 
   constructor(props: BaseMenuProps) {
     this.props = props;
-    console.log('MenuUtil constructor', new Date());
   }
 
   getNavMenuItems = (menusData: MenuDataItem[] = [], isChildren: boolean) => {