mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-10 20:57:00 +08:00
165 lines
5.3 KiB
TypeScript
165 lines
5.3 KiB
TypeScript
import { inject, cloneVNode, defineComponent } from 'vue';
|
|
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';
|
|
import classNames from '../_util/classNames';
|
|
import BaseMixin from '../_util/BaseMixin';
|
|
import PropTypes from '../_util/vue-types';
|
|
import { getTransitionProps, Transition } from '../_util/transition';
|
|
import { getComponent, isValidElement, findDOMNode } from '../_util/props-util';
|
|
import { defaultConfigProvider } from '../config-provider';
|
|
import { tuple, withInstall } from '../_util/type';
|
|
|
|
function noop() {}
|
|
|
|
const iconMapFilled = {
|
|
success: CheckCircleFilled,
|
|
info: InfoCircleFilled,
|
|
error: CloseCircleFilled,
|
|
warning: ExclamationCircleFilled,
|
|
};
|
|
|
|
const iconMapOutlined = {
|
|
success: CheckCircleOutlined,
|
|
info: InfoCircleOutlined,
|
|
error: CloseCircleOutlined,
|
|
warning: ExclamationCircleOutlined,
|
|
};
|
|
|
|
export const AlertProps = {
|
|
/**
|
|
* Type of Alert styles, options:`success`, `info`, `warning`, `error`
|
|
*/
|
|
type: PropTypes.oneOf(tuple('success', 'info', 'warning', 'error')),
|
|
/** Whether Alert can be closed */
|
|
closable: PropTypes.looseBool,
|
|
/** Close text to show */
|
|
closeText: PropTypes.VNodeChild,
|
|
/** Content of Alert */
|
|
message: PropTypes.VNodeChild,
|
|
/** Additional content of Alert */
|
|
description: PropTypes.VNodeChild,
|
|
/** Callback when close Alert */
|
|
// onClose?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
/** Trigger when animation ending of Alert */
|
|
afterClose: PropTypes.func.def(noop),
|
|
/** Whether to show icon */
|
|
showIcon: PropTypes.looseBool,
|
|
prefixCls: PropTypes.string,
|
|
banner: PropTypes.looseBool,
|
|
icon: PropTypes.VNodeChild,
|
|
onClose: PropTypes.VNodeChild,
|
|
};
|
|
|
|
const Alert = defineComponent({
|
|
name: 'AAlert',
|
|
inheritAttrs: false,
|
|
props: AlertProps,
|
|
mixins: [BaseMixin],
|
|
emits: ['close'],
|
|
setup() {
|
|
return {
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
closing: false,
|
|
closed: false,
|
|
};
|
|
},
|
|
methods: {
|
|
handleClose(e: Event) {
|
|
e.preventDefault();
|
|
const dom = findDOMNode(this);
|
|
dom.style.height = `${dom.offsetHeight}px`;
|
|
// Magic code
|
|
// 重复一次后才能正确设置 height
|
|
dom.style.height = `${dom.offsetHeight}px`;
|
|
|
|
this.setState({
|
|
closing: true,
|
|
});
|
|
this.$emit('close', e);
|
|
},
|
|
animationEnd() {
|
|
this.setState({
|
|
closing: false,
|
|
closed: true,
|
|
});
|
|
this.afterClose();
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { prefixCls: customizePrefixCls, banner, closing, closed, $attrs } = this;
|
|
const { getPrefixCls } = this.configProvider;
|
|
const prefixCls = getPrefixCls('alert', customizePrefixCls);
|
|
|
|
let { closable, type, showIcon } = this;
|
|
const closeText = getComponent(this, 'closeText');
|
|
const description = getComponent(this, 'description');
|
|
const message = getComponent(this, 'message');
|
|
const icon = getComponent(this, 'icon');
|
|
// 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;
|
|
}
|
|
|
|
const alertCls = classNames(prefixCls, {
|
|
[`${prefixCls}-${type}`]: true,
|
|
[`${prefixCls}-closing`]: closing,
|
|
[`${prefixCls}-with-description`]: !!description,
|
|
[`${prefixCls}-no-icon`]: !showIcon,
|
|
[`${prefixCls}-banner`]: !!banner,
|
|
[`${prefixCls}-closable`]: closable,
|
|
});
|
|
|
|
const closeIcon = closable ? (
|
|
<a type="button" onClick={this.handleClose} class={`${prefixCls}-close-icon`} tabindex={0}>
|
|
{closeText ? <span class={`${prefixCls}-close-text`}>{closeText}</span> : <CloseOutlined />}
|
|
</a>
|
|
) : null;
|
|
|
|
const iconNode = (icon &&
|
|
(isValidElement(icon) ? (
|
|
cloneVNode(icon, {
|
|
class: `${prefixCls}-icon`,
|
|
})
|
|
) : (
|
|
<span class={`${prefixCls}-icon`}>{icon}</span>
|
|
))) || <IconType class={`${prefixCls}-icon`} />;
|
|
// h(iconType, { class: `${prefixCls}-icon` });
|
|
|
|
const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
|
|
appear: false,
|
|
onAfterLeave: this.animationEnd,
|
|
});
|
|
return closed ? null : (
|
|
<Transition {...transitionProps}>
|
|
<div {...$attrs} v-show={!closing} class={[$attrs.class, alertCls]} data-show={!closing}>
|
|
{showIcon ? iconNode : null}
|
|
<span class={`${prefixCls}-message`}>{message}</span>
|
|
<span class={`${prefixCls}-description`}>{description}</span>
|
|
{closeIcon}
|
|
</div>
|
|
</Transition>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default withInstall(Alert);
|