You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.1 KiB
108 lines
3.1 KiB
import * as React from 'react';
|
|
import classnames from 'classnames';
|
|
import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
|
|
import Icon from '../icon';
|
|
import noFound from './noFound';
|
|
import serverError from './serverError';
|
|
import unauthorized from './unauthorized';
|
|
|
|
export const IconMap = {
|
|
success: 'check-circle',
|
|
error: 'close-circle',
|
|
info: 'exclamation-circle',
|
|
warning: 'warning',
|
|
};
|
|
|
|
export const ExceptionMap = {
|
|
'404': noFound,
|
|
'500': serverError,
|
|
'403': unauthorized,
|
|
};
|
|
|
|
export type ExceptionStatusType = keyof typeof ExceptionMap;
|
|
export type ResultStatusType = ExceptionStatusType | keyof typeof IconMap;
|
|
|
|
export interface ResultProps {
|
|
icon?: React.ReactNode;
|
|
status?: ResultStatusType;
|
|
title?: React.ReactNode;
|
|
subTitle?: React.ReactNode;
|
|
extra?: React.ReactNode;
|
|
prefixCls?: string;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
// ExceptionImageMap keys
|
|
const ExceptionStatus = Object.keys(ExceptionMap);
|
|
|
|
/**
|
|
* render icon
|
|
* if ExceptionStatus includes ,render svg image
|
|
* else render iconNode
|
|
* @param prefixCls
|
|
* @param {status, icon}
|
|
*/
|
|
const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
|
|
const className = classnames(`${prefixCls}-icon`);
|
|
|
|
if (ExceptionStatus.includes(status as ResultStatusType)) {
|
|
const SVGComponent = ExceptionMap[status as ExceptionStatusType];
|
|
return (
|
|
<div className={`${className} ${prefixCls}-image`}>
|
|
<SVGComponent />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const iconString: string = IconMap[status as Exclude<ResultStatusType, ExceptionStatusType>];
|
|
const iconNode = icon || <Icon type={iconString} theme="filled" />;
|
|
|
|
return <div className={className}>{iconNode}</div>;
|
|
};
|
|
|
|
const renderExtra = (prefixCls: string, { extra }: ResultProps) =>
|
|
extra && <div className={`${prefixCls}-extra`}>{extra}</div>;
|
|
|
|
export interface ResultType extends React.SFC<ResultProps> {
|
|
PRESENTED_IMAGE_404: React.ReactNode;
|
|
PRESENTED_IMAGE_403: React.ReactNode;
|
|
PRESENTED_IMAGE_500: React.ReactNode;
|
|
}
|
|
|
|
const Result: ResultType = props => (
|
|
<ConfigConsumer>
|
|
{({ getPrefixCls }: ConfigConsumerProps) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
className: customizeClassName,
|
|
subTitle,
|
|
title,
|
|
style,
|
|
children,
|
|
status,
|
|
} = props;
|
|
const prefixCls = getPrefixCls('result', customizePrefixCls);
|
|
const className = classnames(prefixCls, `${prefixCls}-${status}`, customizeClassName);
|
|
return (
|
|
<div className={className} style={style}>
|
|
{renderIcon(prefixCls, props)}
|
|
<div className={`${prefixCls}-title`}>{title}</div>
|
|
{subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
|
|
{children && <div className={`${prefixCls}-content`}>{children}</div>}
|
|
{renderExtra(prefixCls, props)}
|
|
</div>
|
|
);
|
|
}}
|
|
</ConfigConsumer>
|
|
);
|
|
|
|
Result.defaultProps = {
|
|
status: 'info',
|
|
};
|
|
|
|
Result.PRESENTED_IMAGE_403 = ExceptionMap[403];
|
|
Result.PRESENTED_IMAGE_404 = ExceptionMap[404];
|
|
Result.PRESENTED_IMAGE_500 = ExceptionMap[500];
|
|
|
|
export default Result;
|
|
|