refactor: menu

2021-05-20 15:24:32 +08:00 · 2021-05-20 15:24:32 +08:00 · 8862f604e2
parent 24efefe16d
commit 8862f604e2
7 changed files with 114 additions and 95 deletions
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@ -10,6 +10,7 @@ import {
  watch,
  reactive,
  onMounted,
+  toRaw,
 } from 'vue';
 import shallowEqual from '../../_util/shallowequal';
 import useProvideMenu, { StoreMenuInfo, useProvideFirstLevel } from './hooks/useMenuContext';
@ -24,6 +25,7 @@ import {
 } from './interface';
 import devWarning from 'ant-design-vue/es/vc-util/devWarning';
 import { collapseMotion, CSSMotionProps } from 'ant-design-vue/es/_util/transition';
+import uniq from 'lodash-es/uniq';

 export const menuProps = {
  prefixCls: String,
@ -32,8 +34,8 @@ export const menuProps = {
  overflowDisabled: Boolean,
  openKeys: Array,
  selectedKeys: Array,
-  selectable: Boolean,
-  multiple: Boolean,
+  selectable: { type: Boolean, default: true },
+  multiple: { type: Boolean, default: false },

  motion: Object as PropType<CSSMotionProps>,

@ -56,7 +58,7 @@ export type MenuProps = Partial<ExtractPropTypes<typeof menuProps>>;
 export default defineComponent({
  name: 'AMenu',
  props: menuProps,
-  emits: ['update:openKeys', 'openChange', 'select', 'deselect', 'update:selectedKeys'],
+  emits: ['update:openKeys', 'openChange', 'select', 'deselect', 'update:selectedKeys', 'click'],
  setup(props, { slots, emit }) {
    const { prefixCls, direction } = useConfigInject('menu', props);
    const store = reactive<Record<string, StoreMenuInfo>>({});
@ -78,13 +80,13 @@ export default defineComponent({
    });
    watchEffect(() => {
      devWarning(
-        !('inlineCollapsed' in props && props.mode !== 'inline'),
+        !(props.inlineCollapsed === true && props.mode !== 'inline'),
        'Menu',
        '`inlineCollapsed` should only be used when `mode` is inline.',
      );

      devWarning(
-        !(siderCollapsed.value !== undefined && 'inlineCollapsed' in props),
+        !(siderCollapsed.value !== undefined && props.inlineCollapsed === true),
        'Menu',
        '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
      );
@ -101,18 +103,37 @@ export default defineComponent({
      { immediate: true },
    );

+    const selectedSubMenuEventKeys = ref([]);
+
+    watch(
+      [store, mergedSelectedKeys],
+      () => {
+        let subMenuParentEventKeys = [];
+        (Object.values(toRaw(store)) as any).forEach((menuInfo: StoreMenuInfo) => {
+          if (mergedSelectedKeys.value.includes(menuInfo.key)) {
+            subMenuParentEventKeys.push(...menuInfo.parentEventKeys.value);
+          }
+        });
+
+        subMenuParentEventKeys = uniq(subMenuParentEventKeys);
+        if (!shallowEqual(selectedSubMenuEventKeys.value, subMenuParentEventKeys)) {
+          selectedSubMenuEventKeys.value = subMenuParentEventKeys;
+        }
+      },
+      { immediate: true },
+    );
+
    // >>>>> Trigger select
    const triggerSelection = (info: MenuInfo) => {
      if (!props.selectable) {
        return;
      }
-
      // Insert or Remove
      const { key: targetKey } = info;
      const exist = mergedSelectedKeys.value.includes(targetKey);
      let newSelectedKeys: Key[];

-      if (exist) {
+      if (exist && props.multiple) {
        newSelectedKeys = mergedSelectedKeys.value.filter(key => key !== targetKey);
      } else if (props.multiple) {
        newSelectedKeys = [...mergedSelectedKeys.value, targetKey];
@ -120,17 +141,21 @@ export default defineComponent({
        newSelectedKeys = [targetKey];
      }

-      mergedSelectedKeys.value = newSelectedKeys;
      // Trigger event
      const selectInfo: SelectInfo = {
        ...info,
        selectedKeys: newSelectedKeys,
      };
-
-      if (exist) {
-        emit('deselect', selectInfo);
-      } else {
-        emit('select', selectInfo);
+      if (!('selectedKeys' in props)) {
+        mergedSelectedKeys.value = newSelectedKeys;
+      }
+      if (!shallowEqual(newSelectedKeys, mergedSelectedKeys.value)) {
+        emit('update:selectedKeys', newSelectedKeys);
+        if (exist && props.multiple) {
+          emit('deselect', selectInfo);
+        } else {
+          emit('select', selectInfo);
+        }
      }
    };

@ -212,7 +237,7 @@ export default defineComponent({

    useProvideFirstLevel(true);

-    const getChildrenKeys = (eventKeys: string[]): Key[] => {
+    const getChildrenKeys = (eventKeys: string[] = []): Key[] => {
      const keys = [];
      eventKeys.forEach(eventKey => {
        const { key, childrenEventKeys } = store[eventKey] as any;
@ -221,6 +246,15 @@ export default defineComponent({
      return keys;
    };

+    // ========================= Open =========================
+    /**
+     * Click for item. SubMenu do not have selection status
+     */
+    const onInternalClick = (info: MenuInfo) => {
+      emit('click', info);
+      triggerSelection(info);
+    };
+
    const onInternalOpenChange = (eventKey: Key, open: boolean) => {
      const { key, childrenEventKeys } = store[eventKey] as any;
      let newOpenKeys = mergedOpenKeys.value.filter(k => k !== key);
@ -270,9 +304,10 @@ export default defineComponent({
      motion: computed(() => (isMounted.value ? props.motion : null)),
      overflowDisabled: computed(() => props.overflowDisabled),
      onOpenChange: onInternalOpenChange,
-      onItemClick: triggerSelection,
+      onItemClick: onInternalClick,
      registerMenuInfo,
      unRegisterMenuInfo,
+      selectedSubMenuEventKeys,
    });
    return () => {
      return <ul class={className.value}>{slots.default?.()}</ul>;
--- a/components/menu/src/MenuItem.tsx
+++ b/components/menu/src/MenuItem.tsx
@ -1,6 +1,6 @@
 import { flattenChildren, getPropsSlot, isValidElement } from '../../_util/props-util';
 import PropTypes from '../../_util/vue-types';
-import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
+import { computed, defineComponent, getCurrentInstance, onBeforeUnmount, ref, watch } from 'vue';
 import { useInjectKeyPath } from './hooks/useKeyPath';
 import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
 import { cloneElement } from '../../_util/vnode';
@ -26,7 +26,6 @@ export default defineComponent({
    const key = instance.vnode.key;
    const eventKey = `menu_item_${++indexGuid}_$$_${key}`;
    const { parentEventKeys } = useInjectKeyPath();
-    console.log(parentEventKeys.value);
    const {
      prefixCls,
      activeKeys,
@ -36,9 +35,30 @@ export default defineComponent({
      inlineCollapsed,
      siderCollapsed,
      onItemClick,
+      selectedKeys,
+      store,
+      registerMenuInfo,
+      unRegisterMenuInfo,
    } = useInjectMenu();
    const firstLevel = useInjectFirstLevel();
    const isActive = ref(false);
+    const keyPath = computed(() => {
+      return [...parentEventKeys.value.map(eK => store[eK].key), key];
+    });
+
+    const menuInfo = {
+      eventKey,
+      key,
+      parentEventKeys,
+      isLeaf: true,
+    };
+
+    registerMenuInfo(eventKey, menuInfo);
+
+    onBeforeUnmount(() => {
+      unRegisterMenuInfo(eventKey);
+    });
+
    watch(
      activeKeys,
      () => {
@ -47,7 +67,7 @@ export default defineComponent({
      { immediate: true },
    );
    const mergedDisabled = computed(() => disabled.value || props.disabled);
-    const selected = computed(() => false);
+    const selected = computed(() => selectedKeys.value.includes(key));
    const classNames = computed(() => {
      const itemCls = `${prefixCls.value}-item`;
      return {
@ -63,7 +83,8 @@ export default defineComponent({
      return {
        key: key,
        eventKey: eventKey,
-        eventKeyPath: [...parentEventKeys.value, key],
+        keyPath: keyPath.value,
+        eventKeyPath: [...parentEventKeys.value, eventKey],
        domEvent: e,
      };
    };
--- a/components/menu/src/SubMenu.tsx
+++ b/components/menu/src/SubMenu.tsx
@ -74,6 +74,7 @@ export default defineComponent({
      onOpenChange,
      registerMenuInfo,
      unRegisterMenuInfo,
+      selectedSubMenuEventKeys,
    } = useInjectMenu();

    registerMenuInfo(eventKey, menuInfo);
@ -96,7 +97,9 @@ export default defineComponent({
    const open = computed(() => !overflowDisabled.value && originOpen.value);

    // =============================== Select ===============================
-    const childrenSelected = ref(true); // isSubPathKey(selectedKeys, eventKey);
+    const childrenSelected = computed(() => {
+      return selectedSubMenuEventKeys.value.includes(eventKey);
+    });

    const isActive = ref(false);
    watch(
@ -225,8 +228,6 @@ export default defineComponent({
      if (!overflowDisabled.value) {
        const triggerMode = triggerModeRef.value;

-        // Still wrap with Trigger here since we need avoid react re-mount dom node
-        // Which makes motion failed
        titleNode = (
          <PopupTrigger
            mode={triggerMode}
--- a/components/menu/src/hooks/useMenuContext.ts
+++ b/components/menu/src/hooks/useMenuContext.ts
@ -22,7 +22,7 @@ export interface StoreMenuInfo {
  eventKey: string;
  key: Key;
  parentEventKeys: ComputedRef<Key[]>;
-  childrenEventKeys: Ref<Key[]>;
+  childrenEventKeys?: Ref<Key[]>;
  isLeaf?: boolean;
 }
 export interface MenuContextProps {
@ -32,6 +32,8 @@ export interface MenuContextProps {
  prefixCls: ComputedRef<string>;
  openKeys: Ref<Key[]>;
  selectedKeys: Ref<Key[]>;
+
+  selectedSubMenuEventKeys: Ref<string[]>;
  rtl?: ComputedRef<boolean>;

  locked?: Ref<boolean>;
--- a/components/menu/src/interface.ts
+++ b/components/menu/src/interface.ts
@ -21,7 +21,7 @@ export type RenderIconType = (props: RenderIconInfo) => any;
 export interface MenuInfo {
  key: Key;
  eventKey: string;
-  keyPath?: string[];
+  keyPath?: Key[];
  eventKeyPath: Key[];
  domEvent: MouseEvent | KeyboardEvent;
 }
--- a/examples/App.vue
+++ b/examples/App.vue
@ -1,89 +1,49 @@
 <template>
-  <a-menu
-    id="dddddd"
-    v-model:openKeys="openKeys"
-    v-model:selectedKeys="selectedKeys"
-    style="width: 256px"
-    mode="inline"
-    @click="handleClick"
-  >
-    <a-menu-item key="0">Option 0</a-menu-item>
-    <a-sub-menu key="sub1" @titleClick="titleClick">
+  <a-menu v-model:selectedKeys="current" mode="horizontal">
+    <a-menu-item key="mail">
+      <mail-outlined />
+      Navigation One
+    </a-menu-item>
+    <a-menu-item key="app" disabled>
+      <appstore-outlined />
+      Navigation Two
+    </a-menu-item>
+    <a-sub-menu>
      <template #title>
-        <span>
-          <MailOutlined />
-          <span>Navigation One</span>
+        <span class="submenu-title-wrapper">
+          <setting-outlined />
+          Navigation Three - Submenu
        </span>
      </template>
-      <a-menu-item key="1">
-        <template #icon><QqOutlined /></template>
-        Option 1
-      </a-menu-item>
-      <a-menu-item key="2">Option 2</a-menu-item>
-      <a-menu-item-group key="g2" title="Item 2">
-        <a-menu-item key="3">Option 3</a-menu-item>
-        <a-menu-item key="4">Option 4</a-menu-item>
+      <a-menu-item-group title="Item 1">
+        <a-menu-item key="setting:1">Option 1</a-menu-item>
+        <a-menu-item key="setting:2">Option 2</a-menu-item>
+      </a-menu-item-group>
+      <a-menu-item-group title="Item 2">
+        <a-menu-item key="setting:3">Option 3</a-menu-item>
+        <a-menu-item key="setting:4">Option 4</a-menu-item>
      </a-menu-item-group>
    </a-sub-menu>
-    <!-- <a-sub-menu key="sub2" @titleClick="titleClick">
-      <template #title>
-        <span>
-          <AppstoreOutlined />
-          <span>Navigation Two</span>
-        </span>
-      </template>
-      <a-menu-item key="5">Option 5</a-menu-item>
-      <a-menu-item key="6">Option 6</a-menu-item>
-      <a-sub-menu key="sub3" title="Submenu">
-        <a-menu-item key="7">Option 7</a-menu-item>
-        <a-menu-item key="8">Option 8</a-menu-item>
-      </a-sub-menu>
-    </a-sub-menu>
-    <a-sub-menu key="sub4">
-      <template #title>
-        <span>
-          <SettingOutlined />
-          <span>Navigation Three</span>
-        </span>
-      </template>
-      <a-menu-item key="9">Option 9</a-menu-item>
-      <a-menu-item key="10">Option 10</a-menu-item>
-      <a-menu-item key="11">Option 11</a-menu-item>
-      <a-menu-item key="12">Option 12</a-menu-item>
-    </a-sub-menu> -->
+    <a-menu-item key="alipay">
+      <a href="https://antdv.com" target="_blank" rel="noopener noreferrer">
+        Navigation Four - Link
+      </a>
+    </a-menu-item>
  </a-menu>
 </template>
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
-import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
+<script>
+import { defineComponent, ref } from 'vue';
+import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
  components: {
    MailOutlined,
-    QqOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
  setup() {
-    const selectedKeys = ref<string[]>(['1']);
-    const openKeys = ref<string[]>(['sub1']);
-    const handleClick = (e: Event) => {
-      // console.log('click', e);
-    };
-    const titleClick = (e: Event) => {
-      // console.log('titleClick', e);
-    };
-    watch(
-      () => openKeys,
-      val => {
-        // console.log('openKeys', val);
-      },
-    );
+    const current = ref(['mail']);
    return {
-      selectedKeys,
-      openKeys,
-
-      handleClick,
-      titleClick,
+      current,
    };
  },
 });
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2
+Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557