2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2020-03-02 12:09:38 +08:00
|
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
|
|
|
import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
|
|
|
|
import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
|
|
|
|
import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
|
|
|
|
import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
|
|
|
|
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
|
|
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
|
|
|
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
|
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
2020-08-11 17:04:42 +08:00
|
|
|
import CSSMotion from 'rc-motion';
|
2015-11-29 16:55:43 +08:00
|
|
|
import classNames from 'classnames';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2018-06-15 03:08:51 +08:00
|
|
|
import getDataOrAriaProps from '../_util/getDataOrAriaProps';
|
2019-12-11 14:15:45 +08:00
|
|
|
import ErrorBoundary from './ErrorBoundary';
|
2020-05-14 20:54:49 +08:00
|
|
|
import { replaceElement } from '../_util/reactNode';
|
2015-07-27 20:53:08 +08:00
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface AlertProps {
|
2016-07-14 13:29:50 +08:00
|
|
|
/**
|
|
|
|
* Type of Alert styles, options:`success`, `info`, `warning`, `error`
|
|
|
|
*/
|
2016-08-03 14:54:10 +08:00
|
|
|
type?: 'success' | 'info' | 'warning' | 'error';
|
2016-07-14 13:29:50 +08:00
|
|
|
/** Whether Alert can be closed */
|
|
|
|
closable?: boolean;
|
|
|
|
/** Close text to show */
|
|
|
|
closeText?: React.ReactNode;
|
|
|
|
/** Content of Alert */
|
|
|
|
message: React.ReactNode;
|
|
|
|
/** Additional content of Alert */
|
|
|
|
description?: React.ReactNode;
|
|
|
|
/** Callback when close Alert */
|
2019-09-16 11:23:26 +08:00
|
|
|
onClose?: React.MouseEventHandler<HTMLButtonElement>;
|
2018-03-09 15:02:13 +08:00
|
|
|
/** Trigger when animation ending of Alert */
|
2018-03-13 11:40:11 +08:00
|
|
|
afterClose?: () => void;
|
2016-07-14 13:29:50 +08:00
|
|
|
/** Whether to show icon */
|
|
|
|
showIcon?: boolean;
|
2020-04-22 18:16:03 +08:00
|
|
|
/** https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute */
|
|
|
|
role?: string;
|
2016-07-14 13:29:50 +08:00
|
|
|
style?: React.CSSProperties;
|
|
|
|
prefixCls?: string;
|
2016-10-28 16:42:26 +08:00
|
|
|
className?: string;
|
2016-08-03 14:54:10 +08:00
|
|
|
banner?: boolean;
|
2018-09-14 23:54:54 +08:00
|
|
|
icon?: React.ReactNode;
|
2020-03-25 16:50:43 +08:00
|
|
|
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
|
|
|
|
onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
|
|
|
|
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
2019-08-13 14:07:17 +08:00
|
|
|
const iconMapFilled = {
|
|
|
|
success: CheckCircleFilled,
|
|
|
|
info: InfoCircleFilled,
|
|
|
|
error: CloseCircleFilled,
|
|
|
|
warning: ExclamationCircleFilled,
|
|
|
|
};
|
2019-08-02 22:50:11 +08:00
|
|
|
|
2019-08-13 14:07:17 +08:00
|
|
|
const iconMapOutlined = {
|
2019-11-28 12:34:33 +08:00
|
|
|
success: CheckCircleOutlined,
|
|
|
|
info: InfoCircleOutlined,
|
|
|
|
error: CloseCircleOutlined,
|
|
|
|
warning: ExclamationCircleOutlined,
|
2019-08-13 14:07:17 +08:00
|
|
|
};
|
2019-08-02 22:50:11 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
interface AlertInterface extends React.FC<AlertProps> {
|
|
|
|
ErrorBoundary: typeof ErrorBoundary;
|
|
|
|
}
|
2018-11-01 06:37:14 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
const Alert: AlertInterface = ({
|
|
|
|
description,
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
message,
|
|
|
|
banner,
|
|
|
|
className = '',
|
|
|
|
style,
|
|
|
|
onMouseEnter,
|
|
|
|
onMouseLeave,
|
|
|
|
onClick,
|
2020-08-11 17:04:42 +08:00
|
|
|
afterClose,
|
2020-05-19 20:18:13 +08:00
|
|
|
showIcon,
|
|
|
|
closable,
|
|
|
|
closeText,
|
|
|
|
...props
|
|
|
|
}) => {
|
|
|
|
const [closed, setClosed] = React.useState(false);
|
|
|
|
|
|
|
|
const ref = React.useRef<HTMLElement>();
|
|
|
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('alert', customizePrefixCls);
|
|
|
|
|
|
|
|
const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
|
|
setClosed(true);
|
2020-08-11 17:04:42 +08:00
|
|
|
props.onClose?.(e);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-11-01 06:37:14 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
const getType = () => {
|
|
|
|
const { type } = props;
|
2020-05-09 19:32:02 +08:00
|
|
|
if (type !== undefined) {
|
|
|
|
return type;
|
|
|
|
}
|
|
|
|
// banner 模式默认为警告
|
|
|
|
return banner ? 'warning' : 'info';
|
2020-05-19 20:18:13 +08:00
|
|
|
};
|
2020-05-09 19:32:02 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
// closeable when closeText is assigned
|
|
|
|
const isClosable = closeText ? true : closable;
|
|
|
|
const type = getType();
|
2020-05-09 19:32:02 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
const renderIconNode = () => {
|
|
|
|
const { icon } = props;
|
2020-05-09 19:32:02 +08:00
|
|
|
// use outline icon in alert with description
|
2020-05-19 20:18:13 +08:00
|
|
|
const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
|
2020-05-09 19:32:02 +08:00
|
|
|
if (icon) {
|
2020-05-14 20:54:49 +08:00
|
|
|
return replaceElement(icon, <span className={`${prefixCls}-icon`}>{icon}</span>, () => ({
|
|
|
|
className: classNames(`${prefixCls}-icon`, {
|
|
|
|
[(icon as any).props.className]: (icon as any).props.className,
|
|
|
|
}),
|
|
|
|
}));
|
2020-05-09 19:32:02 +08:00
|
|
|
}
|
|
|
|
return React.createElement(iconType, { className: `${prefixCls}-icon` });
|
2020-05-19 20:18:13 +08:00
|
|
|
};
|
2020-05-09 19:32:02 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
const renderCloseIcon = () => {
|
|
|
|
return isClosable ? (
|
2020-05-09 19:32:02 +08:00
|
|
|
<button
|
|
|
|
type="button"
|
2020-05-19 20:18:13 +08:00
|
|
|
onClick={handleClose}
|
2020-05-09 19:32:02 +08:00
|
|
|
className={`${prefixCls}-close-icon`}
|
|
|
|
tabIndex={0}
|
|
|
|
>
|
|
|
|
{closeText ? (
|
|
|
|
<span className={`${prefixCls}-close-text`}>{closeText}</span>
|
|
|
|
) : (
|
|
|
|
<CloseOutlined />
|
|
|
|
)}
|
|
|
|
</button>
|
|
|
|
) : null;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2020-05-19 20:18:13 +08:00
|
|
|
// banner 模式默认有 Icon
|
|
|
|
const isShowIcon = banner && showIcon === undefined ? true : showIcon;
|
|
|
|
|
|
|
|
const alertCls = classNames(
|
|
|
|
prefixCls,
|
|
|
|
`${prefixCls}-${type}`,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-with-description`]: !!description,
|
|
|
|
[`${prefixCls}-no-icon`]: !isShowIcon,
|
|
|
|
[`${prefixCls}-banner`]: !!banner,
|
|
|
|
[`${prefixCls}-closable`]: isClosable,
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
);
|
|
|
|
|
|
|
|
const dataOrAriaProps = getDataOrAriaProps(props);
|
|
|
|
|
2020-08-11 17:04:42 +08:00
|
|
|
return (
|
|
|
|
<CSSMotion
|
|
|
|
visible={!closed}
|
|
|
|
motionName={`${prefixCls}-motion`}
|
|
|
|
motionAppear={false}
|
|
|
|
motionEnter={false}
|
|
|
|
onLeaveStart={node => ({
|
|
|
|
maxHeight: node.offsetHeight,
|
|
|
|
})}
|
|
|
|
onLeaveEnd={afterClose}
|
2020-05-19 20:18:13 +08:00
|
|
|
>
|
2020-08-11 17:04:42 +08:00
|
|
|
{({ className: motionClassName, style: motionStyle }) => (
|
|
|
|
<div
|
|
|
|
ref={ref}
|
|
|
|
data-show={!closed}
|
|
|
|
className={classNames(alertCls, motionClassName)}
|
|
|
|
style={{ ...style, ...motionStyle }}
|
|
|
|
onMouseEnter={onMouseEnter}
|
|
|
|
onMouseLeave={onMouseLeave}
|
|
|
|
onClick={onClick}
|
|
|
|
role="alert"
|
|
|
|
{...dataOrAriaProps}
|
|
|
|
>
|
|
|
|
{isShowIcon ? renderIconNode() : null}
|
|
|
|
<span className={`${prefixCls}-message`}>{message}</span>
|
|
|
|
<span className={`${prefixCls}-description`}>{description}</span>
|
|
|
|
{renderCloseIcon()}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</CSSMotion>
|
2020-05-19 20:18:13 +08:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Alert.ErrorBoundary = ErrorBoundary;
|
|
|
|
|
|
|
|
export default Alert;
|