github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: menu

feat-new-menu
tangjinzhou 2021-05-18 23:39:47 +08:00
parent 0d318a324a
commit a887ec5b8f
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/_util/transition.tsx
View File

@ -92,23 +92,20 @@ export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
}; };
export declare type MotionEventHandler = ( export declare type MotionEventHandler = (
element: HTMLElement, element: Element,
done?: () => void, done?: () => void,
) => CSSProperties | void; ) => CSSProperties | void;
export declare type MotionEndEventHandler = ( export declare type MotionEndEventHandler = (element: Element, done?: () => void) => boolean | void;
element: HTMLElement,
done?: () => void,
) => boolean | void;
// ================== Collapse Motion ================== // ================== Collapse Motion ==================
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 }); const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 }); const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight }); const getCurrentHeight: MotionEventHandler = (node: any) => ({ height: node.offsetHeight });
// const skipOpacityTransition: MotionEndEventHandler = (_, event) => // const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
// (event as TransitionEvent).propertyName === 'height'; // (event as TransitionEvent).propertyName === 'height';
export interface CSSMotionProps extends Partial<BaseTransitionProps<HTMLElement>> { export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
name?: string; name?: string;
css?: boolean; css?: boolean;
} }
@ -116,7 +113,6 @@ export interface CSSMotionProps extends Partial<BaseTransitionProps<HTMLElement>
const collapseMotion: CSSMotionProps = { const collapseMotion: CSSMotionProps = {
name: 'ant-motion-collapse', name: 'ant-motion-collapse',
appear: true, appear: true,
css: false,
// onAppearStart: getCollapsedHeight, // onAppearStart: getCollapsedHeight,
onBeforeEnter: getCollapsedHeight, onBeforeEnter: getCollapsedHeight,
onEnter: getRealHeight, onEnter: getRealHeight,

20
components/menu/src/InlineSubMenuList.tsx
View File

@ -1,7 +1,9 @@
import { computed, defineComponent, ref, watch } from '@vue/runtime-core'; import { computed, defineComponent, ref, watch } from '@vue/runtime-core';
import Transition from 'ant-design-vue/es/_util/transition';
import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext'; import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
import { MenuMode } from './interface'; import { MenuMode } from './interface';
import SubMenuList from './SubMenuList'; import SubMenuList from './SubMenuList';
export default defineComponent({ export default defineComponent({
name: 'InlineSubMenuList', name: 'InlineSubMenuList',
inheritAttrs: false, inheritAttrs: false,
@ -12,10 +14,12 @@ export default defineComponent({
}, },
setup(props, { slots }) { setup(props, { slots }) {
const fixedMode: MenuMode = 'inline'; const fixedMode: MenuMode = 'inline';
const { prefixCls, forceSubMenuRender, motion, mode } = useInjectMenu(); const { prefixCls, forceSubMenuRender, motion, mode, defaultMotions } = useInjectMenu();
const sameModeRef = computed(() => mode.value === fixedMode); const sameModeRef = computed(() => mode.value === fixedMode);
const destroy = ref(!sameModeRef.value); const destroy = ref(!sameModeRef.value);
const mergedOpen = computed(() => (sameModeRef.value ? props.open : false));
// ================================= Effect ================================= // ================================= Effect =================================
// Reset destroy state when mode change back // Reset destroy state when mode change back
watch( watch(
@ -27,9 +31,11 @@ export default defineComponent({
}, },
{ flush: 'post' }, { flush: 'post' },
); );
let transitionProps = computed(() => {
return { appear: props.keyPath.length > 1, css: false }; const mergedMotion = computed(() => ({
}); ...(motion.value || defaultMotions.value?.[fixedMode]),
appear: props.keyPath.length <= 1,
}));
return () => { return () => {
if (destroy.value) { if (destroy.value) {
@ -42,7 +48,11 @@ export default defineComponent({
locked: !sameModeRef.value, locked: !sameModeRef.value,
}} }}
> >
<SubMenuList id={props.id}>{slots.default?.()}</SubMenuList> <Transition {...mergedMotion.value}>
<SubMenuList v-show={mergedOpen.value} id={props.id}>
{slots.default?.()}
</SubMenuList>
</Transition>
</MenuContextProvider> </MenuContextProvider>
); );
}; };