mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
|
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
|
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
|
import classNames from 'classnames';
|
|
import { Notice } from 'rc-notification';
|
|
import type { NoticeProps } from 'rc-notification/lib/Notice';
|
|
import * as React from 'react';
|
|
import { ConfigContext } from '../config-provider';
|
|
import type { IconType } from './interface';
|
|
import useStyle from './style';
|
|
|
|
export const TypeIcon = {
|
|
info: <InfoCircleFilled />,
|
|
success: <CheckCircleFilled />,
|
|
error: <CloseCircleFilled />,
|
|
warning: <ExclamationCircleFilled />,
|
|
loading: <LoadingOutlined />,
|
|
};
|
|
|
|
export function getCloseIcon(prefixCls: string, closeIcon?: React.ReactNode): React.ReactNode {
|
|
if (closeIcon === null || closeIcon === false) {
|
|
return null;
|
|
}
|
|
return (
|
|
closeIcon || (
|
|
<span className={`${prefixCls}-close-x`}>
|
|
<CloseOutlined className={`${prefixCls}-close-icon`} />
|
|
</span>
|
|
)
|
|
);
|
|
}
|
|
|
|
export interface PureContentProps {
|
|
prefixCls: string;
|
|
icon?: React.ReactNode;
|
|
message?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
btn?: React.ReactNode;
|
|
type?: IconType;
|
|
role?: 'alert' | 'status';
|
|
}
|
|
|
|
const typeToIcon = {
|
|
success: CheckCircleFilled,
|
|
info: InfoCircleFilled,
|
|
error: CloseCircleFilled,
|
|
warning: ExclamationCircleFilled,
|
|
};
|
|
|
|
export const PureContent: React.FC<PureContentProps> = (props) => {
|
|
const { prefixCls, icon, type, message, description, btn, role = 'alert' } = props;
|
|
let iconNode: React.ReactNode = null;
|
|
if (icon) {
|
|
iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
|
|
} else if (type) {
|
|
iconNode = React.createElement(typeToIcon[type] || null, {
|
|
className: classNames(`${prefixCls}-icon`, `${prefixCls}-icon-${type}`),
|
|
});
|
|
}
|
|
return (
|
|
<div className={classNames({ [`${prefixCls}-with-icon`]: iconNode })} role={role}>
|
|
{iconNode}
|
|
<div className={`${prefixCls}-message`}>{message}</div>
|
|
<div className={`${prefixCls}-description`}>{description}</div>
|
|
{btn && <div className={`${prefixCls}-btn`}>{btn}</div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export interface PurePanelProps
|
|
extends Omit<NoticeProps, 'prefixCls' | 'eventKey'>,
|
|
Omit<PureContentProps, 'prefixCls' | 'children'> {
|
|
prefixCls?: string;
|
|
}
|
|
|
|
/** @private Internal Component. Do not use in your production. */
|
|
const PurePanel: React.FC<PurePanelProps> = (props) => {
|
|
const {
|
|
prefixCls: staticPrefixCls,
|
|
className,
|
|
icon,
|
|
type,
|
|
message,
|
|
description,
|
|
btn,
|
|
closable = true,
|
|
closeIcon,
|
|
...restProps
|
|
} = props;
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = staticPrefixCls || getPrefixCls('notification');
|
|
const noticePrefixCls = `${prefixCls}-notice`;
|
|
|
|
const [, hashId] = useStyle(prefixCls);
|
|
|
|
return (
|
|
<Notice
|
|
{...restProps}
|
|
prefixCls={prefixCls}
|
|
className={classNames(className, hashId, `${noticePrefixCls}-pure-panel`)}
|
|
eventKey="pure"
|
|
duration={null}
|
|
closable={closable}
|
|
closeIcon={getCloseIcon(prefixCls, closeIcon)}
|
|
content={
|
|
<PureContent
|
|
prefixCls={noticePrefixCls}
|
|
icon={icon}
|
|
type={type}
|
|
message={message}
|
|
description={description}
|
|
btn={btn}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default PurePanel;
|