fix: some bug

gweiguo · Jan 20, 2021 · bed5d17 · bed5d17
1 parent 1cb1789
commit bed5d17
Show file tree

Hide file tree

Showing 15 changed files with 251 additions and 72 deletions.
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', { mergeProps: false }],
+        '@vue/babel-plugin-jsx',
         '@babel/plugin-proposal-optional-chaining',
         '@babel/plugin-transform-object-assign',
         '@babel/plugin-proposal-object-rest-spread',

diff --git a/examples/demo/form.tsx b/examples/demo/form.tsx
@@ -1,7 +1,14 @@
 import { defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
   setup() {
-    return () => <div>Form1</div>;
+    const route = useRoute();
+    return () => (
+      <div>
+        <h1>Form: {route.meta.title}</h1>
+        <pre>{JSON.stringify(route.meta, null, 4)}</pre>
+      </div>
+    );
   },
 });
diff --git a/examples/demo/page1.tsx b/examples/demo/page1.tsx
@@ -1,7 +1,14 @@
 import { defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
 
 export default defineComponent({
   setup() {
-    return () => <div>Page1</div>;
+    const route = useRoute();
+    return () => (
+      <div>
+        <h1>Page: {route.meta.title}</h1>
+        <pre>{JSON.stringify(route.meta, null, 4)}</pre>
+      </div>
+    );
   },
 });
diff --git a/examples/demo/welcome.tsx b/examples/demo/welcome.tsx
@@ -1,7 +1,97 @@
 import { defineComponent } from 'vue';
+import { Button, Space, Select, Switch } from 'ant-design-vue';
+import { globalState as state } from '../state';
 
 export default defineComponent({
   setup() {
-    return () => <div>Welcome</div>;
+    return () => (
+      <div>
+        <div>Welcome</div>
+        <Space>
+          <Button
+            onClick={() => {
+              state.navTheme = state.navTheme === 'dark' ? 'light' : 'dark';
+            }}
+          >
+            Theme Switch
+          </Button>
+          <Select
+            value={state.layout}
+            onChange={val => {
+              state.layout = val;
+            }}
+            style={{ width: '150px' }}
+          >
+            <Select.Option value="side">Side</Select.Option>
+            <Select.Option value="top">Top</Select.Option>
+            <Select.Option value="mix">Mix</Select.Option>
+          </Select>
+          <Switch
+            checkedChildren="Fixed Header"
+            unCheckedChildren="UnFixed Header"
+            checked={state.fixedHeader}
+            onChange={() => {
+              state.fixedHeader = !state.fixedHeader;
+            }}
+          />
+          <Switch
+            checkedChildren="Fixed SideBar"
+            unCheckedChildren="UnFixed SideBar"
+            checked={state.fixSiderbar}
+            onChange={() => {
+              state.fixSiderbar = !state.fixSiderbar;
+            }}
+          />
+        </Space>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+        <p>
+          <p>block</p>
+          ...
+          <br />
+          long text..
+        </p>
+      </div>
+    );
   },
 });
diff --git a/examples/index.tsx b/examples/index.tsx
@@ -1,11 +1,12 @@
 import 'ant-design-vue/dist/antd.less';
-import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue';
-import { createRouter, createWebHashHistory } from 'vue-router';
-import { Button, Avatar, Space, message } from 'ant-design-vue';
+import { createApp, defineComponent, watch, ref } from 'vue';
+import { createRouter, createWebHashHistory, useRoute } from 'vue-router';
+import { Avatar } from 'ant-design-vue';
 import { UserOutlined } from '@ant-design/icons-vue';
 import { default as ProLayout } from '../src/';
-import { createRouteContext, RouteContextProps } from '../src/RouteContext';
-import { menus } from './menus';
+import { createRouteContext } from '../src/RouteContext';
+import { globalState as state } from './state';
+
 import registerIcons from './_util/icons';
 
 // demo pages
@@ -17,28 +18,7 @@ const BasicLayout = defineComponent({
   name: 'BasicLayout',
   inheritAttrs: false,
   setup() {
-    const state = reactive<RouteContextProps>({
-      collapsed: false,
-
-      openKeys: ['/dashboard'],
-      setOpenKeys: (keys: string[]) => (state.openKeys = keys),
-      selectedKeys: ['/welcome'],
-      setSelectedKeys: (keys: string[]) => {
-        console.log('keys', keys);
-        state.selectedKeys = keys;
-      },
-      navTheme: 'dark',
-      isMobile: false,
-      fixSiderbar: false,
-      fixedHeader: false,
-      menuData: menus,
-      sideWidth: 208,
-      splitMenus: true,
-      hasSideMenu: true,
-      hasHeader: true,
-      hasFooterToolbar: false,
-      setHasFooterToolbar: (has: boolean) => (state.hasFooterToolbar = has),
-    });
+    const route = useRoute();
     const [RouteContextProvider] = createRouteContext();
 
     const cacheOpenKeys = ref<string[]>([]);
@@ -61,8 +41,7 @@ const BasicLayout = defineComponent({
     return () => (
       <RouteContextProvider value={state}>
         <ProLayout
-          v-model={[state.collapsed, 'collapsed']}
-          layout={'mix'}
+          layout={state.layout}
           navTheme={state.navTheme}
           i18n={(key: string) => key}
           isMobile={state.isMobile}
@@ -73,16 +52,28 @@ const BasicLayout = defineComponent({
           contentStyle={{ minHeight: '300px' }}
           siderWidth={state.sideWidth}
           splitMenus={state.splitMenus}
+          collapsed={state.collapsed}
+          openKeys={state.openKeys}
+          selectedKeys={state.selectedKeys}
+          {...{
+            'onUpdate:collapsed': $event => (state.collapsed = $event),
+            'onUpdate:openKeys': $event => (state.openKeys = $event),
+            'onUpdate:selectedKeys': () => {
+              const matched = route.matched.concat().map(item => item.path);
+              matched.shift();
+              state.selectedKeys = matched;
+            },
+          }}
           v-slots={{
             rightContentRender: () => (
-              <div style="margin-right: 16px;">
+              <div style={{ marginRight: '16px' }}>
                 <Avatar icon={<UserOutlined />} /> Sendya
               </div>
             ),
             menuHeaderRender: () => (
               <a>
                 <img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
-                {state.collapsed ? null : <h1>Pro Preview</h1>}
+                {state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>}
               </a>
             ),
           }}

diff --git a/examples/state.ts b/examples/state.ts
@@ -0,0 +1,22 @@
+import { reactive } from 'vue';
+import { menus } from './menus';
+import { RouteContextProps } from '../src/RouteContext';
+
+export const globalState = reactive<RouteContextProps>({
+  collapsed: false,
+  openKeys: ['/dashboard'],
+  selectedKeys: ['/welcome'],
+
+  layout: 'mix',
+  navTheme: 'dark',
+  isMobile: false,
+  fixSiderbar: false,
+  fixedHeader: false,
+  menuData: menus,
+  sideWidth: 208,
+  splitMenus: true,
+  hasSideMenu: true,
+  hasHeader: true,
+  hasFooterToolbar: false,
+  setHasFooterToolbar: (has: boolean) => (globalState.hasFooterToolbar = has),
+});
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@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.5",
+    "@vue/babel-plugin-jsx": "^1.0.2",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
@@ -66,7 +66,7 @@
     "ts-jest": "^26.4.4",
     "ts-node": "^9.1.1",
     "typescript": "~3.9.3",
-    "vue": "^3.0.0-0",
+    "vue": "^3.0.5",
     "vue-jest": "^5.0.0-alpha.3",
     "vue-router": "^4.0.3"
   },

diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx
@@ -1,4 +1,4 @@
-import { computed, FunctionalComponent, CSSProperties, VNodeChild, VNode } from 'vue';
+import { computed, FunctionalComponent, CSSProperties, VNodeChild, VNode, ComputedRef } 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';
@@ -73,11 +73,11 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
   const handleCollapse = (collapsed: boolean) => {
     emit('update:collapsed', collapsed);
   };
-  const handleOpenChange = (openKeys: string[] | false): void => {
-    openKeys && emit('update:openKeys', openKeys);
+  const handleOpenKeys = (openKeys: string[] | false): void => {
+    openKeys && emit('update:open-keys', openKeys);
   };
   const handleSelect = (selectedKeys: string[] | false): void => {
-    selectedKeys && emit('update:selectedKeys', selectedKeys);
+    selectedKeys && emit('update:selected-keys', selectedKeys);
   };
   const baseClassName = computed(() => `${props.prefixCls}-basicLayout`);
   // gen className
@@ -116,13 +116,13 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
   const headerDom = headerRender(
     {
       ...props,
-      hasSiderMenu: isTop.value,
+      hasSiderMenu: !isTop.value,
       menuData,
       isMobile,
       collapsed,
       onCollapse,
-      // onSelect: handleSelect,
-      // onOpenChange: handleOpenChange,
+      onSelect: handleSelect,
+      onOpenKeys: handleOpenKeys,
       customHeaderRender,
       rightContentRender,
       headerTitleRender:
@@ -150,9 +150,11 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
                   menuHeaderRenderFunc || (menuHeaderRenderSlot && (() => menuHeaderRenderSlot()))
                 }
                 onCollapse={handleCollapse}
+                onSelect={handleSelect}
+                onOpenKeys={handleOpenKeys}
               />
             )}
-            <Layout>
+            <Layout style={contentStyle}>
               {headerDom}
               <WrapContent style={props.contentStyle}>{slots.default?.()}</WrapContent>
               {footerRender !== false && footerRender && footerRender}
@@ -166,7 +168,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots,
 
 ProLayout.inheritAttrs = false;
 ProLayout.displayName = 'ProLayout';
-ProLayout.emits = ['update:collapsed', 'update:openKeys', 'update:selectedKeys'];
+ProLayout.emits = ['update:collapsed', 'update:open-keys', 'update:selected-keys'];
 ProLayout.props = {
   prefixCls: PropTypes.string.def('ant-pro'),
   title: PropTypes.VNodeChild.def('Ant Design Pro'),

diff --git a/src/GlobalHeader/index.tsx b/src/GlobalHeader/index.tsx
@@ -29,6 +29,8 @@ export interface GlobalHeaderProps extends Partial<PureSettings> {
   menuHeaderRender?: SiderMenuProps['menuHeaderRender'];
   collapsedButtonRender?: SiderMenuProps['collapsedButtonRender'];
   splitMenus?: boolean;
+  onOpenKeys?: (openKeys: WithFalse<string[]>) => void;
+  onSelect?: (selectedKeys: WithFalse<string[]>) => void;
 }
 
 const renderLogo = (

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -75,7 +75,6 @@ export const HeaderView = defineComponent({
       navTheme,
       onCollapse,
     } = toRefs(props);
-    console.log('HeaderView', props);
     const context = useRouteContext();
     const isTop = computed(() => props.layout === 'top' || props.layout === 'mix');
     const needFixedHeader = computed(() => fixedHeader.value || layout.value === 'mix');
@@ -95,7 +94,6 @@ export const HeaderView = defineComponent({
           {headerContentRender && headerContentRender.value && headerContentRender.value(props)}
         </GlobalHeader>
       );
-      console.log('renderContent', isTop.value, clearMenuData.value);
       if (isTop.value && !isMobile.value) {
         defaultDom = (
           <TopNavHeader
@@ -127,7 +125,7 @@ export const HeaderView = defineComponent({
         {needFixedHeader.value && (
           <Header
             style={{
-              height: headerHeight.value,
+              height: `${headerHeight.value}px`,
               lineHeight: `${headerHeight.value}px`,
               background: 'transparent',
             }}

diff --git a/src/SiderMenu/BaseMenu.tsx b/src/SiderMenu/BaseMenu.tsx
@@ -143,7 +143,7 @@ const LazyIcon = (props: any) => {
   if (isVNode(icon)) {
     return icon;
   }
-  const LazyIcon = resolveComponent(icon);
+  const LazyIcon = resolveComponent(icon) as any;
   return (typeof LazyIcon === 'function' && <LazyIcon />) || null;
 };