ant-design-vue/components/vc-dialog/Dialog.tsx
2022-01-07 21:41:00 +08:00

201 lines
5.9 KiB
Vue

import type { PropType } from 'vue';
import { defineComponent, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
import contains from '../vc-util/Dom/contains';
import type ScrollLocker from '../vc-util/Dom/scrollLocker';
import classNames from '../_util/classNames';
import type { MouseEventHandler } from '../_util/EventInterface';
import KeyCode from '../_util/KeyCode';
import omit from '../_util/omit';
import pickAttrs from '../_util/pickAttrs';
import { initDefaultProps } from '../_util/props-util';
import type { ContentRef } from './Content';
import Content from './Content';
import dialogPropTypes from './IDialogPropTypes';
import Mask from './Mask';
import { getMotionName, getUUID } from './util';
export default defineComponent({
name: 'Dialog',
inheritAttrs: false,
props: initDefaultProps(
{
...dialogPropTypes(),
getOpenCount: Function as PropType<() => number>,
scrollLocker: Object as PropType<ScrollLocker>,
},
{
mask: true,
visible: false,
keyboard: true,
closable: true,
maskClosable: true,
destroyOnClose: false,
prefixCls: 'rc-dialog',
getOpenCount: () => null,
focusTriggerAfterClose: true,
},
),
setup(props, { attrs, slots }) {
const lastOutSideActiveElementRef = ref<HTMLElement>();
const wrapperRef = ref<HTMLDivElement>();
const contentRef = ref<ContentRef>();
const animatedVisible = ref(props.visible);
const ariaIdRef = ref<string>(`vcDialogTitle${getUUID()}`);
// ========================= Events =========================
const onDialogVisibleChanged = (newVisible: boolean) => {
if (newVisible) {
// Try to focus
if (!contains(wrapperRef.value, document.activeElement as HTMLElement)) {
lastOutSideActiveElementRef.value = document.activeElement as HTMLElement;
contentRef.value?.focus();
}
} else {
const preAnimatedVisible = animatedVisible.value;
// Clean up scroll bar & focus back
animatedVisible.value = false;
if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
try {
lastOutSideActiveElementRef.value.focus({ preventScroll: true });
} catch (e) {
// Do nothing
}
lastOutSideActiveElementRef.value = null;
}
// Trigger afterClose only when change visible from true to false
if (preAnimatedVisible) {
props.afterClose?.();
}
}
};
const onInternalClose = (e: Event) => {
props.onClose?.(e);
};
// >>> Content
const contentClickRef = ref(false);
const contentTimeoutRef = ref<any>();
// We need record content click incase content popup out of dialog
const onContentMouseDown: MouseEventHandler = () => {
clearTimeout(contentTimeoutRef.value);
contentClickRef.value = true;
};
const onContentMouseUp: MouseEventHandler = () => {
contentTimeoutRef.value = setTimeout(() => {
contentClickRef.value = false;
});
};
const onWrapperClick = (e: MouseEvent) => {
if (!props.maskClosable) return null;
if (contentClickRef.value) {
contentClickRef.value = false;
} else if (wrapperRef.value === e.target) {
onInternalClose(e);
}
};
const onWrapperKeyDown = (e: KeyboardEvent) => {
if (props.keyboard && e.keyCode === KeyCode.ESC) {
e.stopPropagation();
onInternalClose(e);
return;
}
// keep focus inside dialog
if (props.visible) {
if (e.keyCode === KeyCode.TAB) {
contentRef.value.changeActive(!e.shiftKey);
}
}
};
watch(
() => props.visible,
() => {
if (props.visible) {
animatedVisible.value = true;
}
},
{ flush: 'post' },
);
onBeforeUnmount(() => {
clearTimeout(contentTimeoutRef.value);
props.scrollLocker?.unLock();
});
watchEffect(() => {
props.scrollLocker?.unLock();
if (animatedVisible.value) {
props.scrollLocker?.lock();
}
});
return () => {
const {
prefixCls,
mask,
visible,
maskTransitionName,
maskAnimation,
zIndex,
wrapClassName,
wrapStyle,
closable,
maskProps,
maskStyle,
transitionName,
animation,
wrapProps,
title = slots.title,
} = props;
const { style, class: className } = attrs;
return (
<div class={`${prefixCls}-root`} {...pickAttrs(props, { data: true })}>
<Mask
prefixCls={prefixCls}
visible={mask && visible}
motionName={getMotionName(prefixCls, maskTransitionName, maskAnimation)}
style={{
zIndex,
...maskStyle,
}}
maskProps={maskProps}
/>
<div
tabIndex={-1}
onKeydown={onWrapperKeyDown}
class={classNames(`${prefixCls}-wrap`, wrapClassName)}
ref={wrapperRef}
onClick={onWrapperClick}
role="dialog"
aria-labelledby={title ? ariaIdRef.value : null}
style={{ zIndex, ...wrapStyle, display: !animatedVisible.value ? 'none' : null }}
{...wrapProps}
>
<Content
{...omit(props, ['scrollLocker'])}
style={style}
class={className}
v-slots={slots}
onMousedown={onContentMouseDown}
onMouseup={onContentMouseUp}
ref={contentRef}
closable={closable}
ariaId={ariaIdRef.value}
prefixCls={prefixCls}
visible={visible}
onClose={onInternalClose}
onVisibleChanged={onDialogVisibleChanged}
motionName={getMotionName(prefixCls, transitionName, animation)}
/>
</div>
</div>
);
};
},
});