ant-design-vue/components/vc-align/Align.tsx
Garret MH a2f7d6d062
feat: Vue 3 Migration Build support (#5973), close #5765
closes vueComponent/ant-design-vue#5765

Add `compatConfig: { MODE: 3 }` to all component definitions to signal to `@vue/compat` not to use any Vue 2 compatibility features.
2022-09-26 21:33:41 +08:00

209 lines
5.4 KiB
Vue

import type { PropType } from 'vue';
import {
nextTick,
defineComponent,
ref,
computed,
onMounted,
onUpdated,
watch,
onUnmounted,
} from 'vue';
import { alignElement, alignPoint } from 'dom-align';
import addEventListener from '../vc-util/Dom/addEventListener';
import { cloneElement } from '../_util/vnode';
import isVisible from '../vc-util/Dom/isVisible';
import { isSamePoint, restoreFocus, monitorResize } from './util';
import type { AlignType, AlignResult, TargetType, TargetPoint } from './interface';
import useBuffer from './hooks/useBuffer';
import isEqual from 'lodash-es/isEqual';
type OnAlign = (source: HTMLElement, result: AlignResult) => void;
export interface AlignProps {
align: AlignType;
target: TargetType;
onAlign?: OnAlign;
monitorBufferTime?: number;
monitorWindowResize?: boolean;
disabled?: boolean;
}
export const alignProps = {
align: Object as PropType<AlignType>,
target: [Object, Function] as PropType<TargetType>,
onAlign: Function as PropType<OnAlign>,
monitorBufferTime: Number,
monitorWindowResize: Boolean,
disabled: Boolean,
};
interface MonitorRef {
element?: HTMLElement;
cancel: () => void;
}
export interface RefAlign {
forceAlign: () => void;
}
function getElement(func: TargetType) {
if (typeof func !== 'function') return null;
return func();
}
function getPoint(point: TargetType) {
if (typeof point !== 'object' || !point) return null;
return point;
}
export default defineComponent({
compatConfig: { MODE: 3 },
name: 'Align',
props: alignProps,
emits: ['align'],
setup(props, { expose, slots }) {
const cacheRef = ref<{ element?: HTMLElement; point?: TargetPoint; align?: AlignType }>({});
const nodeRef = ref();
const [forceAlign, cancelForceAlign] = useBuffer(
() => {
const {
disabled: latestDisabled,
target: latestTarget,
align: latestAlign,
onAlign: latestOnAlign,
} = props;
if (!latestDisabled && latestTarget && nodeRef.value) {
const source = nodeRef.value;
let result: AlignResult;
const element = getElement(latestTarget);
const point = getPoint(latestTarget);
cacheRef.value.element = element;
cacheRef.value.point = point;
cacheRef.value.align = latestAlign;
// IE lose focus after element realign
// We should record activeElement and restore later
const { activeElement } = document;
// We only align when element is visible
if (element && isVisible(element)) {
result = alignElement(source, element, latestAlign);
} else if (point) {
result = alignPoint(source, point, latestAlign);
}
restoreFocus(activeElement, source);
if (latestOnAlign && result) {
latestOnAlign(source, result);
}
return true;
}
return false;
},
computed(() => props.monitorBufferTime),
);
// ===================== Effect =====================
// Listen for target updated
const resizeMonitor = ref<MonitorRef>({
cancel: () => {},
});
// Listen for source updated
const sourceResizeMonitor = ref<MonitorRef>({
cancel: () => {},
});
const goAlign = () => {
const target = props.target;
const element = getElement(target);
const point = getPoint(target);
if (nodeRef.value !== sourceResizeMonitor.value.element) {
sourceResizeMonitor.value.cancel();
sourceResizeMonitor.value.element = nodeRef.value;
sourceResizeMonitor.value.cancel = monitorResize(nodeRef.value, forceAlign);
}
if (
cacheRef.value.element !== element ||
!isSamePoint(cacheRef.value.point, point) ||
!isEqual(cacheRef.value.align, props.align)
) {
forceAlign();
// Add resize observer
if (resizeMonitor.value.element !== element) {
resizeMonitor.value.cancel();
resizeMonitor.value.element = element;
resizeMonitor.value.cancel = monitorResize(element, forceAlign);
}
}
};
onMounted(() => {
nextTick(() => {
goAlign();
});
});
onUpdated(() => {
nextTick(() => {
goAlign();
});
});
// Listen for disabled change
watch(
() => props.disabled,
disabled => {
if (!disabled) {
forceAlign();
} else {
cancelForceAlign();
}
},
{ immediate: true, flush: 'post' },
);
// Listen for window resize
const winResizeRef = ref<{ remove: Function }>(null);
watch(
() => props.monitorWindowResize,
monitorWindowResize => {
if (monitorWindowResize) {
if (!winResizeRef.value) {
winResizeRef.value = addEventListener(window, 'resize', forceAlign);
}
} else if (winResizeRef.value) {
winResizeRef.value.remove();
winResizeRef.value = null;
}
},
{ flush: 'post' },
);
onUnmounted(() => {
resizeMonitor.value.cancel();
sourceResizeMonitor.value.cancel();
if (winResizeRef.value) winResizeRef.value.remove();
cancelForceAlign();
});
expose({
forceAlign: () => forceAlign(true),
});
return () => {
const child = slots?.default();
if (child) {
return cloneElement(child[0], { ref: nodeRef }, true, true);
}
return null;
};
},
});