ant-design-vue/components/form/ErrorList.tsx
2023-03-03 17:25:11 +08:00

68 lines
2.3 KiB
Vue

import { useInjectFormItemPrefix } from './context';
import type { VueNode } from '../_util/type';
import { computed, defineComponent, ref, Transition, watch, TransitionGroup } from 'vue';
import { getTransitionGroupProps, getTransitionProps } from '../_util/transition';
import collapseMotion from '../_util/collapseMotion';
import useStyle from './style';
export interface ErrorListProps {
errors?: VueNode[];
/** @private Internal Usage. Do not use in your production */
help?: VueNode;
onErrorVisibleChanged?: (visible: boolean) => void;
}
export default defineComponent({
compatConfig: { MODE: 3 },
name: 'ErrorList',
inheritAttrs: false,
props: ['errors', 'help', 'onErrorVisibleChanged', 'helpStatus', 'warnings'],
setup(props, { attrs }) {
const { prefixCls, status } = useInjectFormItemPrefix();
const baseClassName = computed(() => `${prefixCls.value}-item-explain`);
const visible = computed(() => !!(props.errors && props.errors.length));
const innerStatus = ref(status.value);
const [, hashId] = useStyle(prefixCls);
// Memo status in same visible
watch([visible, status], () => {
if (visible.value) {
innerStatus.value = status.value;
}
});
return () => {
const colMItem = collapseMotion(`${prefixCls.value}-show-help-item`);
const transitionGroupProps = getTransitionGroupProps(
`${prefixCls.value}-show-help-item`,
colMItem,
);
(transitionGroupProps as any).role = 'alert';
(transitionGroupProps as any).class = [
hashId.value,
baseClassName.value,
attrs.class,
`${prefixCls.value}-show-help`,
];
return (
<Transition
{...getTransitionProps(`${prefixCls.value}-show-help`)}
onAfterEnter={() => props.onErrorVisibleChanged(true)}
onAfterLeave={() => props.onErrorVisibleChanged(false)}
>
<TransitionGroup {...transitionGroupProps} tag="div" v-show={!!props.errors?.length}>
{props.errors?.map((error: any, index: number) => (
<div
key={index}
class={innerStatus.value ? `${baseClassName.value}-${innerStatus.value}` : ''}
>
{error}
</div>
))}
</TransitionGroup>
</Transition>
);
};
},
});