ant-design/components/notification/PurePanel.tsx
afc163 e8839ae48b
style: unify Modal and Drawer close icon style ()
* style: unify Modal and Drawer close icon style

* style: fix Drawer close icon style

* style: add focus style

* style: unify close btn style

* test: update snapshots

* style: tweak drawer close icon size
2024-03-16 23:21:09 +08:00

130 lines
3.9 KiB
TypeScript

import * as React from 'react';
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 { ConfigContext } from '../config-provider';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import type { IconType } from './interface';
import useStyle from './style';
import PurePanelStyle from './style/pure-panel';
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 || <CloseOutlined className={`${prefixCls}-close-icon`} />;
}
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,
className: notificationClassName,
...restProps
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = staticPrefixCls || getPrefixCls('notification');
const noticePrefixCls = `${prefixCls}-notice`;
const rootCls = useCSSVarCls(prefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return wrapCSSVar(
<div
className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className, cssVarCls, rootCls)}
>
<PurePanelStyle prefixCls={prefixCls} />
<Notice
{...restProps}
prefixCls={prefixCls}
eventKey="pure"
duration={null}
closable={closable}
className={classNames({
notificationClassName,
})}
closeIcon={getCloseIcon(prefixCls, closeIcon)}
content={
<PureContent
prefixCls={noticePrefixCls}
icon={icon}
type={type}
message={message}
description={description}
btn={btn}
/>
}
/>
</div>,
);
};
export default PurePanel;