, default: 'light' },
mode: { type: String as PropType
, default: 'vertical' },
+
+ inlineIndent: { type: Number, default: 24 },
+ subMenuOpenDelay: { type: Number, default: 0.1 },
+ subMenuCloseDelay: { type: Number, default: 0.1 },
+
+ builtinPlacements: { type: Object as PropType },
+
+ triggerSubMenuAction: { type: String as PropType, default: 'hover' },
+
+ getPopupContainer: Function as PropType<(node: HTMLElement) => HTMLElement>,
};
export type MenuProps = Partial>;
@@ -18,6 +40,33 @@ export default defineComponent({
props: menuProps,
setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('menu', props);
+
+ const siderCollapsed = inject(
+ 'layoutSiderCollapsed',
+ computed(() => undefined),
+ );
+ const inlineCollapsed = computed(() => {
+ const { inlineCollapsed } = props;
+ if (siderCollapsed.value !== undefined) {
+ return siderCollapsed.value;
+ }
+ return inlineCollapsed;
+ });
+
+ watchEffect(() => {
+ devWarning(
+ !('inlineCollapsed' in props && props.mode !== 'inline'),
+ 'Menu',
+ '`inlineCollapsed` should only be used when `mode` is inline.',
+ );
+
+ devWarning(
+ !(siderCollapsed.value !== undefined && 'inlineCollapsed' in props),
+ 'Menu',
+ '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
+ );
+ });
+
const activeKeys = ref([]);
const openKeys = ref([]);
const selectedKeys = ref([]);
@@ -25,10 +74,18 @@ export default defineComponent({
activeKeys.value = keys;
};
const disabled = computed(() => !!props.disabled);
- useProvideMenu({ prefixCls, activeKeys, openKeys, selectedKeys, changeActiveKeys, disabled });
const isRtl = computed(() => direction.value === 'rtl');
- const mergedMode = ref('vertical');
+ const mergedMode = ref('vertical');
const mergedInlineCollapsed = ref(false);
+ watchEffect(() => {
+ if (props.mode === 'inline' && inlineCollapsed.value) {
+ mergedMode.value = 'vertical';
+ mergedInlineCollapsed.value = inlineCollapsed.value;
+ }
+ mergedMode.value = props.mode;
+ mergedInlineCollapsed.value = false;
+ });
+
const className = computed(() => {
return {
[`${prefixCls.value}`]: true,
@@ -39,6 +96,35 @@ export default defineComponent({
[`${prefixCls.value}-${props.theme}`]: true,
};
});
+
+ const defaultMotions = {
+ horizontal: { motionName: `ant-slide-up` },
+ inline: collapseMotion,
+ other: { motionName: `ant-zoom-big` },
+ };
+
+ useProvideFirstLevel(true);
+
+ useProvideMenu({
+ prefixCls,
+ activeKeys,
+ openKeys,
+ selectedKeys,
+ changeActiveKeys,
+ disabled,
+ rtl: isRtl,
+ mode: mergedMode,
+ inlineIndent: computed(() => props.inlineIndent),
+ subMenuCloseDelay: computed(() => props.subMenuCloseDelay),
+ subMenuOpenDelay: computed(() => props.subMenuOpenDelay),
+ builtinPlacements: computed(() => props.builtinPlacements),
+ triggerSubMenuAction: computed(() => props.triggerSubMenuAction),
+ getPopupContainer: computed(() => props.getPopupContainer),
+ inlineCollapsed: mergedInlineCollapsed,
+ antdMenuTheme: computed(() => props.theme),
+ siderCollapsed,
+ defaultMotions,
+ });
return () => {
return ;
};
diff --git a/components/menu/src/MenuItem.tsx b/components/menu/src/MenuItem.tsx
index 415b32b1d2..3c1bf23c11 100644
--- a/components/menu/src/MenuItem.tsx
+++ b/components/menu/src/MenuItem.tsx
@@ -1,6 +1,10 @@
+import { flattenChildren, getPropsSlot, isValidElement } from '../../_util/props-util';
+import PropTypes from '../../_util/vue-types';
import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
import { useInjectKeyPath } from './hooks/useKeyPath';
-import { useInjectMenu } from './hooks/useMenuContext';
+import { useInjectFirstLevel, useInjectMenu } from './hooks/useMenuContext';
+import { cloneElement } from '../../_util/vnode';
+import Tooltip from '../../tooltip';
let indexGuid = 0;
@@ -9,15 +13,29 @@ export default defineComponent({
props: {
role: String,
disabled: Boolean,
+ danger: Boolean,
+ title: { type: [String, Boolean] },
+ icon: PropTypes.VNodeChild,
},
emits: ['mouseenter', 'mouseleave'],
- setup(props, { slots, emit }) {
+ slots: ['icon'],
+ inheritAttrs: false,
+ setup(props, { slots, emit, attrs }) {
const instance = getCurrentInstance();
const key = instance.vnode.key;
const uniKey = `menu_item_${++indexGuid}`;
const parentKeys = useInjectKeyPath();
console.log(parentKeys.value);
- const { prefixCls, activeKeys, disabled, changeActiveKeys } = useInjectMenu();
+ const {
+ prefixCls,
+ activeKeys,
+ disabled,
+ changeActiveKeys,
+ rtl,
+ inlineCollapsed,
+ siderCollapsed,
+ } = useInjectMenu();
+ const firstLevel = useInjectFirstLevel();
const isActive = ref(false);
watch(
activeKeys,
@@ -32,6 +50,7 @@ export default defineComponent({
const itemCls = `${prefixCls.value}-item`;
return {
[`${itemCls}`]: true,
+ [`${itemCls}-danger`]: props.danger,
[`${itemCls}-active`]: isActive.value,
[`${itemCls}-selected`]: selected.value,
[`${itemCls}-disabled`]: mergedDisabled.value,
@@ -50,26 +69,80 @@ export default defineComponent({
}
};
+ const renderItemChildren = (icon: any, children: any) => {
+ // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
+ // ref: https://github.com/ant-design/ant-design/pull/23456
+ if (!icon || (isValidElement(children) && children.type === 'span')) {
+ if (children && inlineCollapsed.value && firstLevel && typeof children === 'string') {
+ return (
+ {children.charAt(0)}
+ );
+ }
+ return children;
+ }
+ return {children};
+ };
+
return () => {
+ const { title } = props;
+ const children = flattenChildren(slots.default?.());
+ const childrenLength = children.length;
+ let tooltipTitle: any = title;
+ if (typeof title === 'undefined') {
+ tooltipTitle = firstLevel ? children : '';
+ } else if (title === false) {
+ tooltipTitle = '';
+ }
+ const tooltipProps: any = {
+ title: tooltipTitle,
+ };
+
+ if (!siderCollapsed.value && !inlineCollapsed.value) {
+ tooltipProps.title = null;
+ // Reset `visible` to fix control mode tooltip display not correct
+ // ref: https://github.com/ant-design/ant-design/issues/16742
+ tooltipProps.visible = false;
+ }
+
// ============================ Render ============================
const optionRoleProps = {};
if (props.role === 'option') {
optionRoleProps['aria-selected'] = selected.value;
}
+
+ const icon = getPropsSlot(slots, props, 'icon');
return (
-
- {slots.default?.()}
-
+
+ {cloneElement(icon, {
+ class: `${prefixCls.value}-item-icon`,
+ })}
+ {renderItemChildren(icon, children)}
+
+
);
};
},
diff --git a/components/menu/src/PopupTrigger.tsx b/components/menu/src/PopupTrigger.tsx
new file mode 100644
index 0000000000..ac291d5c1a
--- /dev/null
+++ b/components/menu/src/PopupTrigger.tsx
@@ -0,0 +1,96 @@
+import Trigger from '../../vc-trigger';
+import { computed, defineComponent, onBeforeUnmount, PropType, ref, watch } from 'vue';
+import { MenuMode } from './interface';
+import { useInjectMenu } from './hooks/useMenuContext';
+import { placements, placementsRtl } from './placements';
+import raf from '../../_util/raf';
+import classNames from '../../_util/classNames';
+
+const popupPlacementMap = {
+ horizontal: 'bottomLeft',
+ vertical: 'rightTop',
+ 'vertical-left': 'rightTop',
+ 'vertical-right': 'leftTop',
+};
+export default defineComponent({
+ name: 'PopupTrigger',
+ props: {
+ prefixCls: String,
+ mode: String as PropType,
+ visible: Boolean,
+ // popup: React.ReactNode;
+ popupClassName: String,
+ popupOffset: Array as PropType,
+ disabled: Boolean,
+ onVisibleChange: Function as PropType<(visible: boolean) => void>,
+ },
+ slots: ['popup'],
+ emits: ['visibleChange'],
+ inheritAttrs: false,
+ setup(props, { slots, emit }) {
+ const innerVisible = ref(false);
+ const {
+ getPopupContainer,
+ rtl,
+ subMenuOpenDelay,
+ subMenuCloseDelay,
+ builtinPlacements,
+ triggerSubMenuAction,
+ } = useInjectMenu();
+
+ const placement = computed(() =>
+ rtl
+ ? { ...placementsRtl, ...builtinPlacements.value }
+ : { ...placements, ...builtinPlacements.value },
+ );
+
+ const popupPlacement = computed(() => popupPlacementMap[props.mode]);
+
+ const visibleRef = ref();
+ watch(
+ () => props.visible,
+ visible => {
+ raf.cancel(visibleRef.value);
+ visibleRef.value = raf(() => {
+ innerVisible.value = visible;
+ });
+ },
+ { immediate: true },
+ );
+ onBeforeUnmount(() => {
+ raf.cancel(visibleRef.value);
+ });
+
+ const onVisibleChange = (visible: boolean) => {
+ emit('visibleChange', visible);
+ };
+ return () => {
+ const { prefixCls, popupClassName, mode, popupOffset, disabled } = props;
+ return (
+
+ );
+ };
+ },
+});
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
index 51e186a944..09ac845f26 100644
--- a/components/menu/src/SubMenu.tsx
+++ b/components/menu/src/SubMenu.tsx
@@ -1,12 +1,74 @@
-import { defineComponent } from 'vue';
-import useProvideKeyPath from './hooks/useKeyPath';
+import PropTypes from '../../_util/vue-types';
+import { computed, defineComponent } from 'vue';
+import useProvideKeyPath, { useInjectKeyPath } from './hooks/useKeyPath';
+import { useInjectMenu, useProvideFirstLevel } from './hooks/useMenuContext';
+import { getPropsSlot, isValidElement } from 'ant-design-vue/es/_util/props-util';
+import classNames from 'ant-design-vue/es/_util/classNames';
export default defineComponent({
name: 'ASubMenu',
- setup(props, { slots }) {
+ props: {
+ icon: PropTypes.VNodeChild,
+ title: PropTypes.VNodeChild,
+ disabled: Boolean,
+ level: Number,
+ popupClassName: String,
+ popupOffset: [Number, Number],
+ },
+ slots: ['icon', 'title'],
+ inheritAttrs: false,
+ setup(props, { slots, attrs }) {
useProvideKeyPath();
+ useProvideFirstLevel(false);
+ const keyPath = useInjectKeyPath();
+ const {
+ prefixCls,
+ activeKeys,
+ disabled,
+ changeActiveKeys,
+ rtl,
+ mode,
+ inlineCollapsed,
+ antdMenuTheme,
+ } = useInjectMenu();
+
+ const popupClassName = computed(() =>
+ classNames(prefixCls, `${prefixCls.value}-${antdMenuTheme.value}`, props.popupClassName),
+ );
+ const renderTitle = (title: any, icon: any) => {
+ if (!icon) {
+ return inlineCollapsed.value && props.level === 1 && title && typeof title === 'string' ? (
+ {title.charAt(0)}
+ ) : (
+ title
+ );
+ }
+ // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
+ // ref: https://github.com/ant-design/ant-design/pull/23456
+ const titleIsSpan = isValidElement(title) && title.type === 'span';
+ return (
+ <>
+ {icon}
+ {titleIsSpan ? title : {title}}
+
+ );
+ };
+
+ const className = computed(() =>
+ classNames(
+ prefixCls.value,
+ `${prefixCls.value}-sub`,
+ `${prefixCls.value}-${mode.value === 'inline' ? 'inline' : 'vertical'}`,
+ ),
+ );
return () => {
- return ;
+ const icon = getPropsSlot(slots, props, 'icon');
+ const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
+ return (
+
+ );
};
},
});
diff --git a/components/menu/src/SubMenuList.tsx b/components/menu/src/SubMenuList.tsx
new file mode 100644
index 0000000000..d98343d6f1
--- /dev/null
+++ b/components/menu/src/SubMenuList.tsx
@@ -0,0 +1,23 @@
+import classNames from '../../_util/classNames';
+import { FunctionalComponent, provide } from 'vue';
+import { useInjectMenu } from './hooks/useMenuContext';
+const InternalSubMenuList: FunctionalComponent = (_props, { slots, attrs }) => {
+ const { prefixCls, mode } = useInjectMenu();
+ return (
+
+ );
+};
+
+InternalSubMenuList.displayName = 'SubMenuList';
+
+export default InternalSubMenuList;
diff --git a/components/menu/src/hooks/useDirectionStyle.ts b/components/menu/src/hooks/useDirectionStyle.ts
new file mode 100644
index 0000000000..9721fc16d0
--- /dev/null
+++ b/components/menu/src/hooks/useDirectionStyle.ts
@@ -0,0 +1,14 @@
+import { computed, ComputedRef, CSSProperties } from 'vue';
+import { useInjectMenu } from './useMenuContext';
+
+export default function useDirectionStyle(level: ComputedRef): ComputedRef {
+ const { mode, rtl, inlineIndent } = useInjectMenu();
+
+ return computed(() =>
+ mode.value !== 'inline'
+ ? null
+ : rtl.value
+ ? { paddingRight: level.value * inlineIndent.value }
+ : { paddingLeft: level.value * inlineIndent.value },
+ );
+}
diff --git a/components/menu/src/hooks/useMenuContext.ts b/components/menu/src/hooks/useMenuContext.ts
index 76c9596311..060d70e598 100644
--- a/components/menu/src/hooks/useMenuContext.ts
+++ b/components/menu/src/hooks/useMenuContext.ts
@@ -1,22 +1,22 @@
import { Key } from '../../../_util/type';
-import { ComputedRef, inject, InjectionKey, provide, Ref } from 'vue';
-
-// import {
-// BuiltinPlacements,
-// MenuClickEventHandler,
-// MenuMode,
-// RenderIconType,
-// TriggerSubMenuAction,
-// } from '../interface';
+import { ComputedRef, FunctionalComponent, inject, InjectionKey, provide, Ref } from 'vue';
+import { BuiltinPlacements, MenuMode, MenuTheme, TriggerSubMenuAction } from '../interface';
export interface MenuContextProps {
prefixCls: ComputedRef;
openKeys: Ref;
selectedKeys: Ref;
- // rtl?: boolean;
+ rtl?: ComputedRef;
+
+ locked?: Ref;
+
+ inlineCollapsed: Ref;
+ antdMenuTheme?: ComputedRef;
+
+ siderCollapsed?: ComputedRef;
// // Mode
- // mode: MenuMode;
+ mode: Ref;
// // Disabled
disabled?: ComputedRef;
@@ -33,18 +33,18 @@ export interface MenuContextProps {
// selectedKeys: string[];
// // Level
- // inlineIndent: number;
+ inlineIndent: ComputedRef;
// // Motion
- // // motion?: CSSMotionProps;
- // // defaultMotions?: Partial<{ [key in MenuMode | 'other']: CSSMotionProps }>;
+ motion?: any;
+ defaultMotions?: Partial<{ [key in MenuMode | 'other']: any }>;
// // Popup
- // subMenuOpenDelay: number;
- // subMenuCloseDelay: number;
+ subMenuOpenDelay: ComputedRef;
+ subMenuCloseDelay: ComputedRef;
// forceSubMenuRender?: boolean;
- // builtinPlacements?: BuiltinPlacements;
- // triggerSubMenuAction?: TriggerSubMenuAction;
+ builtinPlacements?: ComputedRef;
+ triggerSubMenuAction?: ComputedRef;
// // Icon
// itemIcon?: RenderIconType;
@@ -53,7 +53,7 @@ export interface MenuContextProps {
// // Function
// onItemClick: MenuClickEventHandler;
// onOpenChange: (key: string, open: boolean) => void;
- // getPopupContainer: (node: HTMLElement) => HTMLElement;
+ getPopupContainer: ComputedRef<(node: HTMLElement) => HTMLElement>;
}
const MenuContextKey: InjectionKey = Symbol('menuContextKey');
@@ -66,6 +66,34 @@ const useInjectMenu = () => {
return inject(MenuContextKey);
};
-export { useProvideMenu, MenuContextKey, useInjectMenu };
+const MenuFirstLevelContextKey: InjectionKey = Symbol('menuFirstLevelContextKey');
+const useProvideFirstLevel = (firstLevel: Boolean) => {
+ provide(MenuFirstLevelContextKey, firstLevel);
+};
+
+const useInjectFirstLevel = () => {
+ return inject(MenuFirstLevelContextKey, true);
+};
+
+const MenuContextProvider: FunctionalComponent<{ props: Record }> = (
+ props,
+ { slots },
+) => {
+ useProvideMenu({ ...useInjectMenu(), ...props });
+ return slots.default?.();
+};
+MenuContextProvider.props = { props: Object };
+MenuContextProvider.inheritAttrs = false;
+MenuContextProvider.displayName = 'MenuContextProvider';
+
+export {
+ useProvideMenu,
+ MenuContextKey,
+ useInjectMenu,
+ MenuFirstLevelContextKey,
+ useProvideFirstLevel,
+ useInjectFirstLevel,
+ MenuContextProvider,
+};
export default useProvideMenu;
diff --git a/components/vc-trigger/Trigger.jsx b/components/vc-trigger/Trigger.jsx
index d97f417aa4..1fcfbedd21 100644
--- a/components/vc-trigger/Trigger.jsx
+++ b/components/vc-trigger/Trigger.jsx
@@ -47,7 +47,7 @@ export default defineComponent({
showAction: PropTypes.any.def([]),
hideAction: PropTypes.any.def([]),
getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
- // onPopupVisibleChange: PropTypes.func.def(noop),
+ onPopupVisibleChange: PropTypes.func.def(noop),
afterPopupVisibleChange: PropTypes.func.def(noop),
popup: PropTypes.any,
popupStyle: PropTypes.object.def(() => ({})),
@@ -443,7 +443,7 @@ export default defineComponent({
},
setPopupVisible(sPopupVisible, event) {
- const { alignPoint, sPopupVisible: prevPopupVisible, $attrs } = this;
+ const { alignPoint, sPopupVisible: prevPopupVisible, onPopupVisibleChange } = this;
this.clearDelayTimer();
if (prevPopupVisible !== sPopupVisible) {
if (!hasProp(this, 'popupVisible')) {
@@ -452,7 +452,7 @@ export default defineComponent({
prevPopupVisible,
});
}
- $attrs.onPopupVisibleChange && $attrs.onPopupVisibleChange(sPopupVisible);
+ onPopupVisibleChange && onPopupVisibleChange(sPopupVisible);
}
// Always record the point position since mouseEnterDelay will delay the show
if (alignPoint && event) {
diff --git a/components/vc-util/devWarning.ts b/components/vc-util/devWarning.ts
new file mode 100644
index 0000000000..17f72748b5
--- /dev/null
+++ b/components/vc-util/devWarning.ts
@@ -0,0 +1,7 @@
+import devWarning, { resetWarned } from './warning';
+
+export { resetWarned };
+
+export default (valid: boolean, component: string, message: string): void => {
+ devWarning(valid, `[ant-design-vue: ${component}] ${message}`);
+};
diff --git a/examples/App.vue b/examples/App.vue
index 3caf71cb9c..cd9ce1dfc6 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -15,14 +15,11 @@
Navigation One
-
-
-
- Item 1
-
- Option 1
- Option 2
-
+
+
+ Option 1
+
+ Option 2
Option 3
Option 4
From aa8dc1a0c271832906be8e0412c50ef61936de08 Mon Sep 17 00:00:00 2001
From: tanjinzhou <415800467@qq.com>
Date: Mon, 17 May 2021 18:15:50 +0800
Subject: [PATCH 05/20] refactor: menu
---
components/menu/src/SubMenu.tsx | 21 ++++++-
components/vc-overflow/Item.tsx | 105 ++++++++++++++++++++++++++++++++
components/vc-overflow/index.ts | 5 ++
v2-doc | 2 +-
4 files changed, 130 insertions(+), 3 deletions(-)
create mode 100644 components/vc-overflow/Item.tsx
create mode 100644 components/vc-overflow/index.ts
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
index 09ac845f26..84ee6e242a 100644
--- a/components/menu/src/SubMenu.tsx
+++ b/components/menu/src/SubMenu.tsx
@@ -1,5 +1,5 @@
import PropTypes from '../../_util/vue-types';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
import useProvideKeyPath, { useInjectKeyPath } from './hooks/useKeyPath';
import { useInjectMenu, useProvideFirstLevel } from './hooks/useMenuContext';
import { getPropsSlot, isValidElement } from 'ant-design-vue/es/_util/props-util';
@@ -20,18 +20,35 @@ export default defineComponent({
setup(props, { slots, attrs }) {
useProvideKeyPath();
useProvideFirstLevel(false);
+ const instance = getCurrentInstance();
+ const key = instance.vnode.key;
const keyPath = useInjectKeyPath();
const {
prefixCls,
activeKeys,
- disabled,
+ disabled: contextDisabled,
changeActiveKeys,
rtl,
mode,
inlineCollapsed,
antdMenuTheme,
+ openKeys,
+ overflowDisabled,
} = useInjectMenu();
+ const subMenuPrefixCls = computed(() => `${prefixCls}-submenu`);
+ const mergedDisabled = computed(() => contextDisabled.value || props.disabled);
+ const elementRef = ref();
+ const popupRef = ref();
+
+ // // ================================ Icon ================================
+ // const mergedItemIcon = itemIcon || contextItemIcon;
+ // const mergedExpandIcon = expandIcon || contextExpandIcon;
+
+ // ================================ Open ================================
+ const originOpen = computed(() => openKeys.value.includes(key));
+ const open = computed(() => !overflowDisabled.value && originOpen.value);
+
const popupClassName = computed(() =>
classNames(prefixCls, `${prefixCls.value}-${antdMenuTheme.value}`, props.popupClassName),
);
diff --git a/components/vc-overflow/Item.tsx b/components/vc-overflow/Item.tsx
new file mode 100644
index 0000000000..e8045ccb8f
--- /dev/null
+++ b/components/vc-overflow/Item.tsx
@@ -0,0 +1,105 @@
+import {
+ computed,
+ CSSProperties,
+ defineComponent,
+ HTMLAttributes,
+ onUnmounted,
+ PropType,
+ ref,
+} from 'vue';
+import ResizeObserver from '../vc-resize-observer';
+import classNames from '../_util/classNames';
+import { Key, VueNode } from '../_util/type';
+import PropTypes from '../_util/vue-types';
+
+export default defineComponent({
+ name: 'InternalItem',
+ props: {
+ prefixCls: String,
+ item: PropTypes.any,
+ renderItem: Function as PropType<(item: any) => VueNode>,
+ responsive: Boolean,
+ itemKey: [String, Number],
+ registerSize: Function as PropType<(key: Key, width: number | null) => void>,
+ display: Boolean,
+ order: Number,
+ component: PropTypes.any,
+ invalidate: Boolean,
+ },
+ setup(props, { slots, expose }) {
+ const mergedHidden = computed(() => props.responsive && !props.display);
+ const itemNodeRef = ref();
+
+ expose({ itemNodeRef });
+
+ // ================================ Effect ================================
+ function internalRegisterSize(width: number | null) {
+ props.registerSize(props.itemKey!, width);
+ }
+
+ onUnmounted(() => {
+ internalRegisterSize(null);
+ });
+
+ return () => {
+ const {
+ prefixCls,
+ invalidate,
+ item,
+ renderItem,
+ responsive,
+ registerSize,
+ itemKey,
+ display,
+ order,
+ component: Component = 'div',
+ ...restProps
+ } = props;
+ const children = slots.default?.();
+ // ================================ Render ================================
+ const childNode = renderItem && item !== undefined ? renderItem(item) : children;
+
+ let overflowStyle: CSSProperties | undefined;
+ if (!invalidate) {
+ overflowStyle = {
+ opacity: mergedHidden.value ? 0 : 1,
+ height: mergedHidden.value ? 0 : undefined,
+ overflowY: mergedHidden.value ? 'hidden' : undefined,
+ order: responsive ? order : undefined,
+ pointerEvents: mergedHidden.value ? 'none' : undefined,
+ };
+ }
+
+ const overflowProps: HTMLAttributes = {};
+ if (mergedHidden.value) {
+ overflowProps['aria-hidden'] = true;
+ }
+
+ let itemNode = (
+
+ {childNode}
+
+ );
+
+ if (responsive) {
+ itemNode = (
+ {
+ internalRegisterSize(offsetWidth);
+ }}
+ >
+ {itemNode}
+
+ );
+ }
+
+ return itemNode;
+ };
+ },
+});
diff --git a/components/vc-overflow/index.ts b/components/vc-overflow/index.ts
new file mode 100644
index 0000000000..0d37249788
--- /dev/null
+++ b/components/vc-overflow/index.ts
@@ -0,0 +1,5 @@
+// import Overflow, { OverflowProps } from './Overflow';
+
+// export { OverflowProps };
+
+// export default Overflow;
diff --git a/v2-doc b/v2-doc
index d197053285..a7013ae87f 160000
--- a/v2-doc
+++ b/v2-doc
@@ -1 +1 @@
-Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2
+Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557
From f0baa6118bac6eed68b99199123020591d419528 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Mon, 17 May 2021 23:17:27 +0800
Subject: [PATCH 06/20] refactor: menu
---
components/menu/src/Menu.tsx | 11 +-
components/menu/src/SubMenu.tsx | 183 ++++++++++++++++++--
components/menu/src/SubMenuList.tsx | 6 +-
components/menu/src/hooks/useMenuContext.ts | 27 +--
v2-doc | 2 +-
5 files changed, 200 insertions(+), 29 deletions(-)
diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index 49cbd8ff3d..0ed4d8f3ef 100644
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@@ -18,6 +18,7 @@ export const menuProps = {
prefixCls: String,
disabled: Boolean,
inlineCollapsed: Boolean,
+ overflowDisabled: Boolean,
theme: { type: String as PropType, default: 'light' },
mode: { type: String as PropType, default: 'vertical' },
@@ -38,7 +39,8 @@ export type MenuProps = Partial>;
export default defineComponent({
name: 'AMenu',
props: menuProps,
- setup(props, { slots }) {
+ emits: ['update:openKeys', 'openChange'],
+ setup(props, { slots, emit }) {
const { prefixCls, direction } = useConfigInject('menu', props);
const siderCollapsed = inject(
@@ -105,6 +107,11 @@ export default defineComponent({
useProvideFirstLevel(true);
+ const onOpenChange = (key: Key, open: boolean) => {
+ // emit('update:openKeys', openKeys);
+ emit('openChange', open);
+ };
+
useProvideMenu({
prefixCls,
activeKeys,
@@ -124,6 +131,8 @@ export default defineComponent({
antdMenuTheme: computed(() => props.theme),
siderCollapsed,
defaultMotions,
+ overflowDisabled: computed(() => props.overflowDisabled),
+ onOpenChange,
});
return () => {
return ;
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
index 84ee6e242a..98627c5bd2 100644
--- a/components/menu/src/SubMenu.tsx
+++ b/components/menu/src/SubMenu.tsx
@@ -1,9 +1,13 @@
import PropTypes from '../../_util/vue-types';
-import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
+import { computed, defineComponent, getCurrentInstance, ref, watch, PropType } from 'vue';
import useProvideKeyPath, { useInjectKeyPath } from './hooks/useKeyPath';
-import { useInjectMenu, useProvideFirstLevel } from './hooks/useMenuContext';
+import { useInjectMenu, useProvideFirstLevel, MenuContextProvider } from './hooks/useMenuContext';
import { getPropsSlot, isValidElement } from 'ant-design-vue/es/_util/props-util';
import classNames from 'ant-design-vue/es/_util/classNames';
+import useDirectionStyle from './hooks/useDirectionStyle';
+import PopupTrigger from './PopupTrigger';
+import SubMenuList from './SubMenuList';
+import InlineSubMenuList from './InlineSubMenuList';
export default defineComponent({
name: 'ASubMenu',
@@ -13,30 +17,32 @@ export default defineComponent({
disabled: Boolean,
level: Number,
popupClassName: String,
- popupOffset: [Number, Number],
+ popupOffset: Array as PropType,
+ internalPopupClose: Boolean,
},
slots: ['icon', 'title'],
+ emits: ['titleClick', 'titleMouseenter', 'titleMouseleave'],
inheritAttrs: false,
- setup(props, { slots, attrs }) {
+ setup(props, { slots, attrs, emit }) {
useProvideKeyPath();
useProvideFirstLevel(false);
const instance = getCurrentInstance();
const key = instance.vnode.key;
- const keyPath = useInjectKeyPath();
+ const parentKeys = useInjectKeyPath();
const {
prefixCls,
activeKeys,
disabled: contextDisabled,
changeActiveKeys,
- rtl,
mode,
inlineCollapsed,
antdMenuTheme,
openKeys,
overflowDisabled,
+ onOpenChange,
} = useInjectMenu();
- const subMenuPrefixCls = computed(() => `${prefixCls}-submenu`);
+ const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);
const mergedDisabled = computed(() => contextDisabled.value || props.disabled);
const elementRef = ref();
const popupRef = ref();
@@ -49,8 +55,73 @@ export default defineComponent({
const originOpen = computed(() => openKeys.value.includes(key));
const open = computed(() => !overflowDisabled.value && originOpen.value);
+ // =============================== Select ===============================
+ const childrenSelected = ref(true); // isSubPathKey(selectedKeys, eventKey);
+
+ const isActive = ref(false);
+ watch(
+ activeKeys,
+ () => {
+ isActive.value = !!activeKeys.value.find(val => val === key);
+ },
+ { immediate: true },
+ );
+
+ // =============================== Events ===============================
+ // >>>> Title click
+ const onInternalTitleClick = (e: Event) => {
+ // Skip if disabled
+ if (mergedDisabled) {
+ return;
+ }
+ emit('titleClick', e, key);
+
+ // Trigger open by click when mode is `inline`
+ if (mode.value === 'inline') {
+ onOpenChange(key, !originOpen);
+ }
+ };
+
+ const onMouseEnter = (event: MouseEvent) => {
+ if (!mergedDisabled.value) {
+ changeActiveKeys([...parentKeys.value, key]);
+ emit('titleMouseenter', event);
+ }
+ };
+ const onMouseLeave = (event: MouseEvent) => {
+ if (!mergedDisabled.value) {
+ changeActiveKeys([]);
+ emit('titleMouseleave', event);
+ }
+ };
+
+ // ========================== DirectionStyle ==========================
+ const directionStyle = useDirectionStyle(computed(() => parentKeys.value.length));
+
+ // >>>>> Visible change
+ const onPopupVisibleChange = (newVisible: boolean) => {
+ if (mode.value !== 'inline') {
+ onOpenChange(key, newVisible);
+ }
+ };
+
+ /**
+ * Used for accessibility. Helper will focus element without key board.
+ * We should manually trigger an active
+ */
+ const onInternalFocus = () => {
+ changeActiveKeys([...parentKeys.value, key]);
+ };
+
+ // =============================== Render ===============================
+ const popupId = key && `${key}-popup`;
+
const popupClassName = computed(() =>
- classNames(prefixCls, `${prefixCls.value}-${antdMenuTheme.value}`, props.popupClassName),
+ classNames(
+ prefixCls.value,
+ `${prefixCls.value}-${antdMenuTheme.value}`,
+ props.popupClassName,
+ ),
);
const renderTitle = (title: any, icon: any) => {
if (!icon) {
@@ -78,13 +149,103 @@ export default defineComponent({
`${prefixCls.value}-${mode.value === 'inline' ? 'inline' : 'vertical'}`,
),
);
+
+ // Cache mode if it change to `inline` which do not have popup motion
+ const triggerModeRef = computed(() => {
+ return mode.value !== 'inline' && parentKeys.value.length > 1 ? 'vertical' : mode.value;
+ });
+
+ const renderMode = computed(() => (mode.value === 'horizontal' ? 'vertical' : mode.value));
+
return () => {
const icon = getPropsSlot(slots, props, 'icon');
const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);
+ const subMenuPrefixClsValue = subMenuPrefixCls.value;
+ let titleNode = (
+
+ );
+
+ 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 = (
+ (
+
+
+
+ ),
+ }}
+ >
+ {titleNode}
+
+ );
+ }
return (
-
+
+
+ {titleNode}
+
+ {/* Inline mode */}
+ {!overflowDisabled.value && (
+
+ )}
+
+
);
};
},
diff --git a/components/menu/src/SubMenuList.tsx b/components/menu/src/SubMenuList.tsx
index d98343d6f1..a5d9040091 100644
--- a/components/menu/src/SubMenuList.tsx
+++ b/components/menu/src/SubMenuList.tsx
@@ -7,9 +7,9 @@ const InternalSubMenuList: FunctionalComponent = (_props, { slots, attrs })
diff --git a/components/menu/src/hooks/useMenuContext.ts b/components/menu/src/hooks/useMenuContext.ts
index 060d70e598..097aea7a5e 100644
--- a/components/menu/src/hooks/useMenuContext.ts
+++ b/components/menu/src/hooks/useMenuContext.ts
@@ -1,5 +1,5 @@
import { Key } from '../../../_util/type';
-import { ComputedRef, FunctionalComponent, inject, InjectionKey, provide, Ref } from 'vue';
+import { ComputedRef, defineComponent, inject, InjectionKey, provide, Ref } from 'vue';
import { BuiltinPlacements, MenuMode, MenuTheme, TriggerSubMenuAction } from '../interface';
export interface MenuContextProps {
@@ -21,7 +21,7 @@ export interface MenuContextProps {
// // Disabled
disabled?: ComputedRef;
// // Used for overflow only. Prevent hidden node trigger open
- // overflowDisabled?: boolean;
+ overflowDisabled?: ComputedRef;
// // Active
activeKeys: Ref;
@@ -52,7 +52,7 @@ export interface MenuContextProps {
// // Function
// onItemClick: MenuClickEventHandler;
- // onOpenChange: (key: string, open: boolean) => void;
+ onOpenChange: (key: Key, open: boolean) => void;
getPopupContainer: ComputedRef<(node: HTMLElement) => HTMLElement>;
}
@@ -75,16 +75,17 @@ const useInjectFirstLevel = () => {
return inject(MenuFirstLevelContextKey, true);
};
-const MenuContextProvider: FunctionalComponent<{ props: Record }> = (
- props,
- { slots },
-) => {
- useProvideMenu({ ...useInjectMenu(), ...props });
- return slots.default?.();
-};
-MenuContextProvider.props = { props: Object };
-MenuContextProvider.inheritAttrs = false;
-MenuContextProvider.displayName = 'MenuContextProvider';
+const MenuContextProvider = defineComponent({
+ name: 'MenuContextProvider',
+ inheritAttrs: false,
+ props: {
+ props: Object,
+ },
+ setup(props, { slots }) {
+ useProvideMenu({ ...useInjectMenu(), ...props });
+ return () => slots.default?.();
+ },
+});
export {
useProvideMenu,
diff --git a/v2-doc b/v2-doc
index a7013ae87f..d197053285 160000
--- a/v2-doc
+++ b/v2-doc
@@ -1 +1 @@
-Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557
+Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2
From 8dd74a99771bf5273787d026444ed9ceec632274 Mon Sep 17 00:00:00 2001
From: tanjinzhou <415800467@qq.com>
Date: Tue, 18 May 2021 18:56:33 +0800
Subject: [PATCH 07/20] refactor: menu
---
components/menu/src/Menu.tsx | 64 ++++++++++++++++++---
components/menu/src/MenuItem.tsx | 8 +--
components/menu/src/SubMenu.tsx | 64 +++++++++++++++++----
components/menu/src/hooks/useKeyPath.ts | 25 ++++----
components/menu/src/hooks/useMenuContext.ts | 12 +++-
v2-doc | 2 +-
6 files changed, 138 insertions(+), 37 deletions(-)
diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index 0ed4d8f3ef..9e412969f7 100644
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@@ -7,8 +7,11 @@ import {
PropType,
inject,
watchEffect,
+ watch,
+ reactive,
} from 'vue';
-import useProvideMenu, { useProvideFirstLevel } from './hooks/useMenuContext';
+import shallowEqual from '../../_util/shallowequal';
+import useProvideMenu, { StoreMenuInfo, useProvideFirstLevel } from './hooks/useMenuContext';
import useConfigInject from '../../_util/hooks/useConfigInject';
import { MenuTheme, MenuMode, BuiltinPlacements, TriggerSubMenuAction } from './interface';
import devWarning from 'ant-design-vue/es/vc-util/devWarning';
@@ -19,6 +22,7 @@ export const menuProps = {
disabled: Boolean,
inlineCollapsed: Boolean,
overflowDisabled: Boolean,
+ openKeys: Array,
theme: { type: String as PropType, default: 'light' },
mode: { type: String as PropType, default: 'vertical' },
@@ -42,7 +46,7 @@ export default defineComponent({
emits: ['update:openKeys', 'openChange'],
setup(props, { slots, emit }) {
const { prefixCls, direction } = useConfigInject('menu', props);
-
+ const store = reactive>({});
const siderCollapsed = inject(
'layoutSiderCollapsed',
computed(() => undefined),
@@ -70,8 +74,19 @@ export default defineComponent({
});
const activeKeys = ref([]);
- const openKeys = ref([]);
const selectedKeys = ref([]);
+
+ const mergedOpenKeys = ref([]);
+
+ watch(
+ () => props.openKeys,
+ (openKeys = mergedOpenKeys.value) => {
+ console.log('mergedOpenKeys', openKeys);
+ mergedOpenKeys.value = openKeys;
+ },
+ { immediate: true },
+ );
+
const changeActiveKeys = (keys: Key[]) => {
activeKeys.value = keys;
};
@@ -107,15 +122,46 @@ export default defineComponent({
useProvideFirstLevel(true);
- const onOpenChange = (key: Key, open: boolean) => {
- // emit('update:openKeys', openKeys);
- emit('openChange', open);
+ const getChildrenKeys = (eventKeys: string[]): Key[] => {
+ const keys = [];
+ eventKeys.forEach(eventKey => {
+ const { key, childrenEventKeys } = store[eventKey] as any;
+ keys.push(key, ...getChildrenKeys(childrenEventKeys.value));
+ });
+ return keys;
+ };
+
+ const onInternalOpenChange = (eventKey: Key, open: boolean) => {
+ const { key, childrenEventKeys } = store[eventKey] as any;
+ let newOpenKeys = mergedOpenKeys.value.filter(k => k !== key);
+
+ if (open) {
+ newOpenKeys.push(key);
+ } else if (mergedMode.value !== 'inline') {
+ // We need find all related popup to close
+ const subPathKeys = getChildrenKeys(childrenEventKeys.value);
+ newOpenKeys = newOpenKeys.filter(k => !subPathKeys.includes(k));
+ }
+
+ if (!shallowEqual(mergedOpenKeys, newOpenKeys)) {
+ mergedOpenKeys.value = newOpenKeys;
+ emit('update:openKeys', newOpenKeys);
+ emit('openChange', key, open);
+ }
+ };
+
+ const registerMenuInfo = (key: string, info: StoreMenuInfo) => {
+ store[key] = info as any;
+ };
+ const unRegisterMenuInfo = (key: string) => {
+ delete store[key];
};
useProvideMenu({
+ store,
prefixCls,
activeKeys,
- openKeys,
+ openKeys: mergedOpenKeys,
selectedKeys,
changeActiveKeys,
disabled,
@@ -132,7 +178,9 @@ export default defineComponent({
siderCollapsed,
defaultMotions,
overflowDisabled: computed(() => props.overflowDisabled),
- onOpenChange,
+ onOpenChange: onInternalOpenChange,
+ registerMenuInfo,
+ unRegisterMenuInfo,
});
return () => {
return ;
diff --git a/components/menu/src/MenuItem.tsx b/components/menu/src/MenuItem.tsx
index 3c1bf23c11..5fbaeef493 100644
--- a/components/menu/src/MenuItem.tsx
+++ b/components/menu/src/MenuItem.tsx
@@ -23,9 +23,9 @@ export default defineComponent({
setup(props, { slots, emit, attrs }) {
const instance = getCurrentInstance();
const key = instance.vnode.key;
- const uniKey = `menu_item_${++indexGuid}`;
- const parentKeys = useInjectKeyPath();
- console.log(parentKeys.value);
+ const eventKey = `menu_item_${++indexGuid}_$$_${key}`;
+ const { parentEventKeys } = useInjectKeyPath();
+ console.log(parentEventKeys.value);
const {
prefixCls,
activeKeys,
@@ -58,7 +58,7 @@ export default defineComponent({
});
const onMouseEnter = (event: MouseEvent) => {
if (!mergedDisabled.value) {
- changeActiveKeys([...parentKeys.value, key]);
+ changeActiveKeys([...parentEventKeys.value, key]);
emit('mouseenter', event);
}
};
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
index 98627c5bd2..ea5ed37634 100644
--- a/components/menu/src/SubMenu.tsx
+++ b/components/menu/src/SubMenu.tsx
@@ -1,5 +1,13 @@
import PropTypes from '../../_util/vue-types';
-import { computed, defineComponent, getCurrentInstance, ref, watch, PropType } from 'vue';
+import {
+ computed,
+ defineComponent,
+ getCurrentInstance,
+ ref,
+ watch,
+ PropType,
+ onBeforeUnmount,
+} from 'vue';
import useProvideKeyPath, { useInjectKeyPath } from './hooks/useKeyPath';
import { useInjectMenu, useProvideFirstLevel, MenuContextProvider } from './hooks/useMenuContext';
import { getPropsSlot, isValidElement } from 'ant-design-vue/es/_util/props-util';
@@ -9,6 +17,7 @@ import PopupTrigger from './PopupTrigger';
import SubMenuList from './SubMenuList';
import InlineSubMenuList from './InlineSubMenuList';
+let indexGuid = 0;
export default defineComponent({
name: 'ASubMenu',
props: {
@@ -24,11 +33,34 @@ export default defineComponent({
emits: ['titleClick', 'titleMouseenter', 'titleMouseleave'],
inheritAttrs: false,
setup(props, { slots, attrs, emit }) {
- useProvideKeyPath();
useProvideFirstLevel(false);
+
const instance = getCurrentInstance();
const key = instance.vnode.key;
- const parentKeys = useInjectKeyPath();
+
+ const eventKey = `sub_menu_${++indexGuid}_$$_${key}`;
+ const { parentEventKeys, parentInfo } = useInjectKeyPath();
+ const keysPath = computed(() => [...parentEventKeys.value, eventKey]);
+
+ const childrenEventKeys = ref([]);
+ const menuInfo = {
+ eventKey,
+ key,
+ parentEventKeys,
+ childrenEventKeys,
+ };
+
+ parentInfo.childrenEventKeys?.value.push(eventKey);
+ onBeforeUnmount(() => {
+ if (parentInfo.childrenEventKeys) {
+ parentInfo.childrenEventKeys.value = parentInfo.childrenEventKeys?.value.filter(
+ k => k != eventKey,
+ );
+ }
+ });
+
+ useProvideKeyPath(eventKey, menuInfo);
+
const {
prefixCls,
activeKeys,
@@ -40,8 +72,16 @@ export default defineComponent({
openKeys,
overflowDisabled,
onOpenChange,
+ registerMenuInfo,
+ unRegisterMenuInfo,
} = useInjectMenu();
+ registerMenuInfo(eventKey, menuInfo);
+
+ onBeforeUnmount(() => {
+ unRegisterMenuInfo(eventKey);
+ });
+
const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);
const mergedDisabled = computed(() => contextDisabled.value || props.disabled);
const elementRef = ref();
@@ -71,20 +111,20 @@ export default defineComponent({
// >>>> Title click
const onInternalTitleClick = (e: Event) => {
// Skip if disabled
- if (mergedDisabled) {
+ if (mergedDisabled.value) {
return;
}
emit('titleClick', e, key);
// Trigger open by click when mode is `inline`
if (mode.value === 'inline') {
- onOpenChange(key, !originOpen);
+ onOpenChange(eventKey, !originOpen.value);
}
};
const onMouseEnter = (event: MouseEvent) => {
if (!mergedDisabled.value) {
- changeActiveKeys([...parentKeys.value, key]);
+ changeActiveKeys(keysPath.value);
emit('titleMouseenter', event);
}
};
@@ -96,12 +136,12 @@ export default defineComponent({
};
// ========================== DirectionStyle ==========================
- const directionStyle = useDirectionStyle(computed(() => parentKeys.value.length));
+ const directionStyle = useDirectionStyle(computed(() => keysPath.value.length));
// >>>>> Visible change
const onPopupVisibleChange = (newVisible: boolean) => {
if (mode.value !== 'inline') {
- onOpenChange(key, newVisible);
+ onOpenChange(eventKey, newVisible);
}
};
@@ -110,11 +150,11 @@ export default defineComponent({
* We should manually trigger an active
*/
const onInternalFocus = () => {
- changeActiveKeys([...parentKeys.value, key]);
+ changeActiveKeys(keysPath.value);
};
// =============================== Render ===============================
- const popupId = key && `${key}-popup`;
+ const popupId = eventKey && `${eventKey}-popup`;
const popupClassName = computed(() =>
classNames(
@@ -152,7 +192,7 @@ export default defineComponent({
// Cache mode if it change to `inline` which do not have popup motion
const triggerModeRef = computed(() => {
- return mode.value !== 'inline' && parentKeys.value.length > 1 ? 'vertical' : mode.value;
+ return mode.value !== 'inline' && keysPath.value.length > 1 ? 'vertical' : mode.value;
});
const renderMode = computed(() => (mode.value === 'horizontal' ? 'vertical' : mode.value));
@@ -240,7 +280,7 @@ export default defineComponent({
{/* Inline mode */}
{!overflowDisabled.value && (
-