2022-03-12 01:56:32 +00:00
|
|
|
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
|
|
|
|
import { defineComponent, ref } from 'vue';
|
2020-03-24 08:58:53 +00:00
|
|
|
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
|
|
|
|
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
|
|
|
|
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
|
|
|
|
import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
|
|
|
|
import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
|
|
|
|
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
|
|
|
|
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
|
|
|
|
import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled';
|
|
|
|
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
2020-08-31 08:53:19 +00:00
|
|
|
import classNames from '../_util/classNames';
|
2019-01-12 03:33:27 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
2020-10-22 14:45:21 +00:00
|
|
|
import { getTransitionProps, Transition } from '../_util/transition';
|
2021-04-11 13:35:33 +00:00
|
|
|
import { isValidElement, getPropsSlot } from '../_util/props-util';
|
2020-11-01 07:03:33 +00:00
|
|
|
import { tuple, withInstall } from '../_util/type';
|
2021-09-25 08:51:32 +00:00
|
|
|
import { cloneElement } from '../_util/vnode';
|
2022-03-12 01:56:32 +00:00
|
|
|
import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
|
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2020-03-24 08:58:53 +00:00
|
|
|
const iconMapFilled = {
|
|
|
|
success: CheckCircleFilled,
|
|
|
|
info: InfoCircleFilled,
|
|
|
|
error: CloseCircleFilled,
|
|
|
|
warning: ExclamationCircleFilled,
|
|
|
|
};
|
|
|
|
|
|
|
|
const iconMapOutlined = {
|
|
|
|
success: CheckCircleOutlined,
|
|
|
|
info: InfoCircleOutlined,
|
|
|
|
error: CloseCircleOutlined,
|
|
|
|
warning: ExclamationCircleOutlined,
|
|
|
|
};
|
|
|
|
|
2021-02-06 09:59:04 +00:00
|
|
|
const AlertTypes = tuple('success', 'info', 'warning', 'error');
|
|
|
|
|
|
|
|
export type AlertType = typeof AlertTypes[number];
|
|
|
|
|
2022-03-12 01:56:32 +00:00
|
|
|
export const alertProps = () => ({
|
2018-03-07 13:36:15 +00:00
|
|
|
/**
|
2020-11-13 02:51:12 +00:00
|
|
|
* Type of Alert styles, options: `success`, `info`, `warning`, `error`
|
2018-03-07 13:36:15 +00:00
|
|
|
*/
|
2021-02-06 09:59:04 +00:00
|
|
|
type: PropTypes.oneOf(AlertTypes),
|
2018-03-07 13:36:15 +00:00
|
|
|
/** Whether Alert can be closed */
|
2022-03-26 14:52:54 +00:00
|
|
|
closable: { type: Boolean, default: undefined },
|
2018-03-07 13:36:15 +00:00
|
|
|
/** Close text to show */
|
2021-12-16 09:20:18 +00:00
|
|
|
closeText: PropTypes.any,
|
2018-03-07 13:36:15 +00:00
|
|
|
/** Content of Alert */
|
2021-12-16 09:20:18 +00:00
|
|
|
message: PropTypes.any,
|
2018-03-07 13:36:15 +00:00
|
|
|
/** Additional content of Alert */
|
2021-12-16 09:20:18 +00:00
|
|
|
description: PropTypes.any,
|
2018-04-06 12:56:19 +00:00
|
|
|
/** Trigger when animation ending of Alert */
|
2022-03-26 14:52:54 +00:00
|
|
|
afterClose: Function as PropType<() => void>,
|
2018-03-07 13:36:15 +00:00
|
|
|
/** Whether to show icon */
|
2022-03-26 14:52:54 +00:00
|
|
|
showIcon: { type: Boolean, default: undefined },
|
|
|
|
prefixCls: String,
|
|
|
|
banner: { type: Boolean, default: undefined },
|
2021-12-16 09:20:18 +00:00
|
|
|
icon: PropTypes.any,
|
2022-03-12 01:56:32 +00:00
|
|
|
closeIcon: PropTypes.any,
|
|
|
|
onClose: Function as PropType<NodeMouseEventHandler>,
|
|
|
|
});
|
2021-02-06 09:59:04 +00:00
|
|
|
|
2022-03-12 01:56:32 +00:00
|
|
|
export type AlertProps = Partial<ExtractPropTypes<ReturnType<typeof alertProps>>>;
|
2018-03-07 13:36:15 +00:00
|
|
|
|
2020-10-12 08:06:49 +00:00
|
|
|
const Alert = defineComponent({
|
2019-03-11 06:43:23 +00:00
|
|
|
name: 'AAlert',
|
2020-10-22 15:27:18 +00:00
|
|
|
inheritAttrs: false,
|
2022-03-12 01:56:32 +00:00
|
|
|
props: alertProps(),
|
2021-02-06 13:26:46 +00:00
|
|
|
setup(props, { slots, emit, attrs, expose }) {
|
2022-03-12 01:56:32 +00:00
|
|
|
const { prefixCls, direction } = useConfigInject('alert', props);
|
2021-02-06 09:59:04 +00:00
|
|
|
const closing = ref(false);
|
|
|
|
const closed = ref(false);
|
|
|
|
const alertNode = ref();
|
|
|
|
|
|
|
|
const handleClose = (e: MouseEvent) => {
|
2019-01-12 03:33:27 +00:00
|
|
|
e.preventDefault();
|
2021-02-06 09:59:04 +00:00
|
|
|
|
|
|
|
const dom = alertNode.value;
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
dom.style.height = `${dom.offsetHeight}px`;
|
2018-03-07 13:36:15 +00:00
|
|
|
// Magic code
|
|
|
|
// 重复一次后才能正确设置 height
|
2019-01-12 03:33:27 +00:00
|
|
|
dom.style.height = `${dom.offsetHeight}px`;
|
2018-03-07 13:36:15 +00:00
|
|
|
|
2021-02-06 09:59:04 +00:00
|
|
|
closing.value = true;
|
|
|
|
emit('close', e);
|
|
|
|
};
|
|
|
|
|
|
|
|
const animationEnd = () => {
|
|
|
|
closing.value = false;
|
|
|
|
closed.value = true;
|
|
|
|
props.afterClose?.();
|
|
|
|
};
|
|
|
|
|
2021-02-06 13:26:46 +00:00
|
|
|
expose({ animationEnd });
|
2022-03-12 01:56:32 +00:00
|
|
|
const motionStyle = ref<CSSProperties>({});
|
2021-02-06 09:59:04 +00:00
|
|
|
return () => {
|
2022-03-12 01:56:32 +00:00
|
|
|
const { banner, closeIcon: customCloseIcon = slots.closeIcon?.() } = props;
|
2021-02-06 09:59:04 +00:00
|
|
|
|
|
|
|
let { closable, type, showIcon } = props;
|
|
|
|
|
2021-04-11 13:35:33 +00:00
|
|
|
const closeText = getPropsSlot(slots, props, 'closeText');
|
|
|
|
const description = getPropsSlot(slots, props, 'description');
|
|
|
|
const message = getPropsSlot(slots, props, 'message');
|
|
|
|
const icon = getPropsSlot(slots, props, 'icon');
|
2021-02-06 09:59:04 +00:00
|
|
|
|
|
|
|
// banner模式默认有 Icon
|
|
|
|
showIcon = banner && showIcon === undefined ? true : showIcon;
|
|
|
|
// banner模式默认为警告
|
|
|
|
type = banner && type === undefined ? 'warning' : type || 'info';
|
|
|
|
|
|
|
|
const IconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
|
|
|
|
|
|
|
|
// closeable when closeText is assigned
|
|
|
|
if (closeText) {
|
|
|
|
closable = true;
|
|
|
|
}
|
2022-03-12 01:56:32 +00:00
|
|
|
const prefixClsValue = prefixCls.value;
|
|
|
|
const alertCls = classNames(prefixClsValue, {
|
|
|
|
[`${prefixClsValue}-${type}`]: true,
|
|
|
|
[`${prefixClsValue}-closing`]: closing.value,
|
|
|
|
[`${prefixClsValue}-with-description`]: !!description,
|
|
|
|
[`${prefixClsValue}-no-icon`]: !showIcon,
|
|
|
|
[`${prefixClsValue}-banner`]: !!banner,
|
|
|
|
[`${prefixClsValue}-closable`]: closable,
|
|
|
|
[`${prefixClsValue}-rtl`]: direction.value === 'rtl',
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-03-07 13:36:15 +00:00
|
|
|
|
2021-02-06 09:59:04 +00:00
|
|
|
const closeIcon = closable ? (
|
2022-03-12 01:56:32 +00:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
onClick={handleClose}
|
|
|
|
class={`${prefixClsValue}-close-icon`}
|
|
|
|
tabindex={0}
|
|
|
|
>
|
2021-02-06 09:59:04 +00:00
|
|
|
{closeText ? (
|
2022-03-12 01:56:32 +00:00
|
|
|
<span class={`${prefixClsValue}-close-text`}>{closeText}</span>
|
|
|
|
) : customCloseIcon === undefined ? (
|
2021-02-06 09:59:04 +00:00
|
|
|
<CloseOutlined />
|
2022-03-12 01:56:32 +00:00
|
|
|
) : (
|
|
|
|
customCloseIcon
|
2021-02-06 09:59:04 +00:00
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const iconNode = (icon &&
|
|
|
|
(isValidElement(icon) ? (
|
2021-09-25 08:51:32 +00:00
|
|
|
cloneElement(icon, {
|
2022-03-12 01:56:32 +00:00
|
|
|
class: `${prefixClsValue}-icon`,
|
2021-02-06 09:59:04 +00:00
|
|
|
})
|
|
|
|
) : (
|
2022-03-12 01:56:32 +00:00
|
|
|
<span class={`${prefixClsValue}-icon`}>{icon}</span>
|
|
|
|
))) || <IconType class={`${prefixClsValue}-icon`} />;
|
2021-02-06 09:59:04 +00:00
|
|
|
|
2022-03-12 01:56:32 +00:00
|
|
|
const transitionProps = getTransitionProps(`${prefixClsValue}-motion`, {
|
2021-02-06 09:59:04 +00:00
|
|
|
appear: false,
|
2022-03-12 01:56:32 +00:00
|
|
|
css: true,
|
2021-02-06 09:59:04 +00:00
|
|
|
onAfterLeave: animationEnd,
|
2022-03-12 01:56:32 +00:00
|
|
|
onBeforeLeave: (node: HTMLDivElement) => {
|
|
|
|
node.style.maxHeight = `${node.offsetHeight}px`;
|
|
|
|
},
|
|
|
|
onLeave: (node: HTMLDivElement) => {
|
|
|
|
node.style.maxHeight = '0px';
|
|
|
|
},
|
2021-02-06 09:59:04 +00:00
|
|
|
});
|
|
|
|
return closed.value ? null : (
|
|
|
|
<Transition {...transitionProps}>
|
|
|
|
<div
|
2022-03-12 01:56:32 +00:00
|
|
|
role="alert"
|
2021-02-06 09:59:04 +00:00
|
|
|
{...attrs}
|
2022-03-12 01:56:32 +00:00
|
|
|
style={{ ...(attrs.style as Object), ...motionStyle.value }}
|
2021-02-06 09:59:04 +00:00
|
|
|
v-show={!closing.value}
|
|
|
|
class={[attrs.class, alertCls]}
|
|
|
|
data-show={!closing.value}
|
|
|
|
ref={alertNode}
|
|
|
|
>
|
|
|
|
{showIcon ? iconNode : null}
|
2022-03-12 01:56:32 +00:00
|
|
|
<div class={`${prefixClsValue}-content`}>
|
|
|
|
{message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
|
|
|
|
{description ? (
|
|
|
|
<div class={`${prefixClsValue}-description`}>{description}</div>
|
|
|
|
) : null}
|
2021-02-25 05:36:31 +00:00
|
|
|
</div>
|
2021-02-06 09:59:04 +00:00
|
|
|
{closeIcon}
|
|
|
|
</div>
|
|
|
|
</Transition>
|
|
|
|
);
|
|
|
|
};
|
2018-03-07 13:36:15 +00:00
|
|
|
},
|
2020-10-12 08:06:49 +00:00
|
|
|
});
|
2018-03-07 13:36:15 +00:00
|
|
|
|
2020-11-01 07:03:33 +00:00
|
|
|
export default withInstall(Alert);
|