2020-03-02 12:09:38 +08:00
|
|
|
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
|
|
|
|
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
|
|
|
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
|
|
|
import WarningFilled from '@ant-design/icons/WarningFilled';
|
2022-06-21 19:17:20 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import * as React from 'react';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2020-10-14 15:24:26 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2022-05-10 15:43:29 +08:00
|
|
|
import warning from '../_util/warning';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2019-06-30 20:15:44 +08:00
|
|
|
import noFound from './noFound';
|
|
|
|
import serverError from './serverError';
|
|
|
|
import unauthorized from './unauthorized';
|
|
|
|
|
|
|
|
export const IconMap = {
|
2019-08-13 14:07:17 +08:00
|
|
|
success: CheckCircleFilled,
|
|
|
|
error: CloseCircleFilled,
|
|
|
|
info: ExclamationCircleFilled,
|
|
|
|
warning: WarningFilled,
|
2019-06-30 20:15:44 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export const ExceptionMap = {
|
|
|
|
'404': noFound,
|
|
|
|
'500': serverError,
|
|
|
|
'403': unauthorized,
|
|
|
|
};
|
|
|
|
|
2020-02-28 23:41:20 +08:00
|
|
|
export type ExceptionStatusType = 403 | 404 | 500 | '403' | '404' | '500';
|
2019-06-30 20:15:44 +08:00
|
|
|
export type ResultStatusType = ExceptionStatusType | keyof typeof IconMap;
|
|
|
|
|
|
|
|
export interface ResultProps {
|
|
|
|
icon?: React.ReactNode;
|
2019-08-23 18:07:39 +08:00
|
|
|
status?: ResultStatusType;
|
2019-06-30 20:15:44 +08:00
|
|
|
title?: React.ReactNode;
|
|
|
|
subTitle?: React.ReactNode;
|
|
|
|
extra?: React.ReactNode;
|
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
|
|
|
style?: React.CSSProperties;
|
2022-04-08 22:55:42 +08:00
|
|
|
children?: React.ReactNode;
|
2019-06-30 20:15:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// ExceptionImageMap keys
|
|
|
|
const ExceptionStatus = Object.keys(ExceptionMap);
|
|
|
|
|
|
|
|
/**
|
2020-12-28 15:30:18 +08:00
|
|
|
* Render icon if ExceptionStatus includes ,render svg image else render iconNode
|
|
|
|
*
|
2019-06-30 20:15:44 +08:00
|
|
|
* @param prefixCls
|
|
|
|
* @param {status, icon}
|
|
|
|
*/
|
2022-06-21 19:17:20 +08:00
|
|
|
|
|
|
|
interface IconProps {
|
|
|
|
prefixCls: string;
|
|
|
|
icon: React.ReactNode;
|
|
|
|
status: ResultStatusType;
|
|
|
|
}
|
|
|
|
|
|
|
|
const Icon: React.FC<IconProps> = ({ prefixCls, icon, status }) => {
|
2020-07-20 13:41:05 +08:00
|
|
|
const className = classNames(`${prefixCls}-icon`);
|
2019-06-30 20:15:44 +08:00
|
|
|
|
2022-05-10 15:43:29 +08:00
|
|
|
warning(
|
2019-12-13 10:18:12 +08:00
|
|
|
!(typeof icon === 'string' && icon.length > 2),
|
|
|
|
'Result',
|
|
|
|
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
|
|
|
|
);
|
|
|
|
|
2020-02-28 23:41:20 +08:00
|
|
|
if (ExceptionStatus.includes(`${status}`)) {
|
2019-06-30 20:15:44 +08:00
|
|
|
const SVGComponent = ExceptionMap[status as ExceptionStatusType];
|
|
|
|
return (
|
|
|
|
<div className={`${className} ${prefixCls}-image`}>
|
|
|
|
<SVGComponent />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2019-08-13 14:07:17 +08:00
|
|
|
const iconNode = React.createElement(
|
|
|
|
IconMap[status as Exclude<ResultStatusType, ExceptionStatusType>],
|
|
|
|
);
|
2019-06-30 20:15:44 +08:00
|
|
|
|
2019-08-13 14:07:17 +08:00
|
|
|
return <div className={className}>{icon || iconNode}</div>;
|
2019-06-30 20:15:44 +08:00
|
|
|
};
|
|
|
|
|
2022-06-21 19:17:20 +08:00
|
|
|
interface ExtraProps {
|
|
|
|
prefixCls: string;
|
|
|
|
extra: React.ReactNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
const Extra: React.FC<ExtraProps> = ({ prefixCls, extra }) => {
|
|
|
|
if (!extra) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return <div className={`${prefixCls}-extra`}>{extra}</div>;
|
|
|
|
};
|
2019-06-30 20:15:44 +08:00
|
|
|
|
2020-03-28 11:56:57 +08:00
|
|
|
export interface ResultType extends React.FC<ResultProps> {
|
2022-04-08 22:55:42 +08:00
|
|
|
PRESENTED_IMAGE_404: React.FC;
|
|
|
|
PRESENTED_IMAGE_403: React.FC;
|
|
|
|
PRESENTED_IMAGE_500: React.FC;
|
2019-08-02 21:37:26 +08:00
|
|
|
}
|
|
|
|
|
2020-10-14 15:24:26 +08:00
|
|
|
const Result: ResultType = ({
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
className: customizeClassName,
|
|
|
|
subTitle,
|
|
|
|
title,
|
|
|
|
style,
|
|
|
|
children,
|
|
|
|
status = 'info',
|
|
|
|
icon,
|
|
|
|
extra,
|
|
|
|
}) => {
|
|
|
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
|
|
|
|
|
|
|
const prefixCls = getPrefixCls('result', customizePrefixCls);
|
|
|
|
const className = classNames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
});
|
|
|
|
return (
|
|
|
|
<div className={className} style={style}>
|
2022-06-21 19:17:20 +08:00
|
|
|
<Icon prefixCls={prefixCls} status={status} icon={icon} />
|
2020-10-14 15:24:26 +08:00
|
|
|
<div className={`${prefixCls}-title`}>{title}</div>
|
|
|
|
{subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
|
2022-06-21 19:17:20 +08:00
|
|
|
<Extra prefixCls={prefixCls} extra={extra} />
|
2020-10-14 15:24:26 +08:00
|
|
|
{children && <div className={`${prefixCls}-content`}>{children}</div>}
|
|
|
|
</div>
|
|
|
|
);
|
2019-06-30 20:15:44 +08:00
|
|
|
};
|
|
|
|
|
2020-10-14 15:24:26 +08:00
|
|
|
Result.PRESENTED_IMAGE_403 = ExceptionMap['403'];
|
|
|
|
Result.PRESENTED_IMAGE_404 = ExceptionMap['404'];
|
|
|
|
Result.PRESENTED_IMAGE_500 = ExceptionMap['500'];
|
2019-06-30 20:15:44 +08:00
|
|
|
|
|
|
|
export default Result;
|