-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(result): add component result (#2006)
* feat(result): add component result * feat(result): add component result * feat(result): add component result & replace page to result
- Loading branch information
Showing
34 changed files
with
2,794 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import React from 'react'; | ||
| import classnames from 'classnames'; | ||
| import { useLocale, usePrefixCls } from '@gio-design/utils'; | ||
| import { isUndefined } from 'lodash'; | ||
| import { ResultProps } from './interfaces'; | ||
| import { | ||
| Forbidden, | ||
| NotFound, | ||
| Deleted, | ||
| Locked, | ||
| InternalServerError, | ||
| EmptyChart, | ||
| Empty, | ||
| EmptyData, | ||
| EmptyResult, | ||
| } from './images'; | ||
| import Button from '../button'; | ||
| import defaultLocale from './locales/zh-CN'; | ||
| import { SizeContextProvider, SizeType } from '../utils/SizeContext'; | ||
|
|
||
|
|
||
| /** | ||
| * http status codes | ||
| */ | ||
| const ExceptionImageMap = { | ||
| '404': NotFound, | ||
| '403': Forbidden, | ||
| '500': InternalServerError, | ||
| '410': Deleted, | ||
| '423': Locked | ||
| } | ||
| /** | ||
| * empty states | ||
| */ | ||
| const EmptyImageMap = { | ||
| 'empty': Empty, | ||
| 'empty-chart': EmptyChart, | ||
| 'empty-data': EmptyData, | ||
| 'empty-result': EmptyResult, | ||
| } | ||
| const TYPE_IMAGE_MAP = { | ||
| ...EmptyImageMap, | ||
| ...ExceptionImageMap, | ||
| }; | ||
| function Result({ className: customizeClassName, style, children, extra, type = '404', image, title: propsTitle, description, cta, size = 'normal' }: ResultProps) { | ||
| const locale = useLocale('Result'); | ||
| const localeContent: { [key: string]: string } = { | ||
| ...defaultLocale, | ||
| ...locale, | ||
| }; | ||
| type TypeMapKey = keyof typeof TYPE_IMAGE_MAP; | ||
| const defaultTypeDescription: Record<TypeMapKey, string> = { | ||
| 'empty-chart': localeContent.emptyChart, | ||
| 'empty': localeContent.empty, | ||
| 'empty-data': localeContent.emptyData, | ||
| "empty-result": localeContent.emptyResult, | ||
| "403": localeContent['403'], | ||
| "404": localeContent['404'], | ||
| "410": localeContent['410'], | ||
| "423": localeContent['423'], | ||
| "500": localeContent['500'], | ||
| }; | ||
| const prefixCls = usePrefixCls('result'); | ||
| const cls = classnames(prefixCls, `${prefixCls}-${size}`, { [`${prefixCls}-empty`]: Object.keys(EmptyImageMap).includes(type) }, `${prefixCls}-${type}`, customizeClassName); | ||
| // description | ||
| const defaultDesc = Object.keys(EmptyImageMap).includes(type) ? defaultTypeDescription[type] : null | ||
| const desc = !isUndefined(description) ? description : defaultDesc; | ||
|
|
||
| const img = image || (TYPE_IMAGE_MAP[type] ? React.createElement(TYPE_IMAGE_MAP[type]) : React.createElement(TYPE_IMAGE_MAP.empty)); | ||
| // title | ||
| const defaultTitle = Object.keys(EmptyImageMap).includes(type) ? null : defaultTypeDescription[type]; | ||
| const title = !isUndefined(propsTitle) ? propsTitle : defaultTitle; | ||
| // extra | ||
| const renderExtra = () => { | ||
| if (cta) { | ||
| return (<Button size={size} onClick={cta.onClick}> | ||
| {cta.text} | ||
| </Button>) | ||
| } | ||
| if (extra) { | ||
|
|
||
| return extra; | ||
| } | ||
| return null | ||
| } | ||
| return ( | ||
| <div className={cls} style={style}> | ||
| <SizeContextProvider size={size as SizeType}> | ||
| <div className={`${prefixCls}__image ${prefixCls}__image-${type}`}>{img}</div> | ||
| <div className={`${prefixCls}__title ${prefixCls}__title-${size}`}>{title}</div> | ||
| <div className={classnames(`${prefixCls}__description`, `${prefixCls}__description-${size}`)}>{desc}</div> | ||
| <div className={`${prefixCls}__extra`}> | ||
| {renderExtra()} | ||
| </div> | ||
| {children && <div className={`${prefixCls}__content`}>{children}</div>} | ||
| </SizeContextProvider> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const ResultImage: { | ||
| ImgForbidden: React.ReactNode; | ||
| ImgNotFound: React.ReactNode; | ||
| ImgInternalServerError: React.ReactNode; | ||
| ImgDeleted: React.ReactNode; | ||
| ImgLocked: React.ReactNode; | ||
| ImgEmpty: React.ReactNode; | ||
| ImgEmptyChart: React.ReactNode; | ||
| ImgEmptyData: React.ReactNode; | ||
| ImgEmptyResult: React.ReactNode; | ||
| } = { | ||
| ImgForbidden: TYPE_IMAGE_MAP['403'], | ||
| ImgNotFound: TYPE_IMAGE_MAP['404'], | ||
| ImgInternalServerError: TYPE_IMAGE_MAP['500'], | ||
| ImgDeleted: TYPE_IMAGE_MAP['410'], | ||
| ImgLocked: TYPE_IMAGE_MAP['423'], | ||
| ImgEmpty: TYPE_IMAGE_MAP.empty, | ||
| ImgEmptyChart: TYPE_IMAGE_MAP['empty-chart'], | ||
| ImgEmptyData: TYPE_IMAGE_MAP['empty-data'], | ||
| ImgEmptyResult: TYPE_IMAGE_MAP['empty-result'] | ||
| }; | ||
| export { Result, ResultImage }; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { Meta, Story } from "@storybook/react/types-6-0"; | ||
| import { action } from '@storybook/addon-actions'; | ||
| import React from "react"; | ||
| import { ArrowsLeftOutlined, ErrorFilled, ErrorOutlined, ReloadOutlined } from "@gio-design/icons"; | ||
| import Result, { ResultProps } from ".."; | ||
| import { Button, Card, Link } from "../.."; | ||
| import Docs from './ResultPage' | ||
| import '../style' | ||
|
|
||
| export default { | ||
| title: 'upgraded/Result', | ||
| component: Result, | ||
| parameters: { | ||
| docs: { | ||
| page: Docs, | ||
| }, | ||
| argTypes: { | ||
| description: { | ||
| control: { type: 'text' }, | ||
| }, | ||
| }, | ||
| design: { | ||
| type: 'figma', | ||
| url: 'https://www.figma.com/file/kP3A6S2fLUGVVMBgDuUx0f/GIO-Design?node-id=4093%3A45839', | ||
| allowFullscreen: true, | ||
| }, | ||
| }, | ||
| } as Meta; | ||
| const DefaultTemplate: Story<ResultProps> = (args) => <Result {...args} />; | ||
| export const Default = DefaultTemplate.bind({}); | ||
| Default.args = { | ||
| type: 'empty', | ||
| extra: <Button type="primary" >返回首页</Button> | ||
| } | ||
|
|
||
| export const NotFound = () => <Result type="404" extra={<Button prefix={<ArrowsLeftOutlined />} type="primary">Back Home</Button>} />; | ||
|
|
||
| export const Unauthorized = () => <Result type="403" extra={<Button type="primary" >返回首页</Button>} />; | ||
|
|
||
| export const ServerError = () => <Result type="500" title="Oooops!!!" description="Sorry, something went wrong." extra={<Button type="primary" prefix={<ArrowsLeftOutlined />}>返回首页</Button>} />; | ||
|
|
||
| export const Error = () => <Result | ||
|
|
||
| image={<ErrorFilled color="#ff688f" size="64" />} | ||
| title="Submission Failed" | ||
| description="Please check and modify the following information before resubmitting." | ||
| extra={<><Button type="primary" >Submit Again</Button><Button type="secondary">Back to list</Button></>} | ||
| > | ||
| <div className="error-list"> | ||
| <div> | ||
| <h3 style={{ fontSize: '16px', lineHeight: '24px' }}> | ||
| The content you submitted has the following error: | ||
| </h3> | ||
| </div> | ||
| <p style={{ color: '#7b819c' }}> | ||
| <ErrorOutlined style={{ color: '#ff688f', marginRight: '8px' }} /> | ||
| Verification fails and does not meet the template specifications. Please refill the template. | ||
| <Link href="#;">Reselect ></Link> | ||
| </p> | ||
| <p style={{ color: '#7b819c' }}> | ||
| <ErrorOutlined style={{ color: '#ff688f', marginRight: '8px' }} /> | ||
| Verification fails and does not meet the template specifications. Please refill the template. | ||
| <Link href="#;">Reselect ></Link> | ||
| </p> | ||
| </div> | ||
| </Result> | ||
|
|
||
| export const Deleted: Story<ResultProps> = () => <Result type="410" title={<div>该单图已删除<Link style={{ marginLeft: '8px' }} href="#;" onClick={() => action('onClick:从当前看板中移除')}>从当前看板中移除</Link></div>} />; | ||
|
|
||
| export const Locked: Story<ResultProps> = () => <Result type="423" title="" extra={<div>此看板已取消与你共享<Link style={{ marginLeft: '8px' }} href="#;" onClick={() => action('onClick:取消订阅')}>取消订阅</Link></div>} />; | ||
|
|
||
| export const EmptyResult: Story<ResultProps> = () => <Result type="empty-result" description="没有搜索到相关结果" extra={<Button onClick={() => action('onClick:重新查询')}>重新查询</Button>} />; | ||
|
|
||
| export const Empty: Story<ResultProps> = () => <Result type="empty" description="你还没有创建内容，快去创建一个吧" extra={<Button onClick={() => action('onClick:新 建')}>新 建</Button>} />; | ||
|
|
||
| export const EmptyChart: Story<ResultProps> = () => <Result type="empty-chart" description="你还没有属于自己的看板，快去新建一个吧" extra={<Button onClick={() => action('onClick:新建看板')}>新建看板</Button>} />; | ||
|
|
||
| export const EmptyData: Story<ResultProps> = () => <Result type="empty-chart" description="当前查询条件下暂无数据" extra={<Button prefix={<ReloadOutlined />} onClick={() => action('onClick:刷新')}>刷新</Button>} />; | ||
|
|
||
| export const EmptySmallSize = () => <div> | ||
| <Card style={{ width: '320px' }}> | ||
| <Result type="empty" size="small" description="未创建相关内容" extra={<Button size="small" onClick={() => action('onClick:新 建')}>新 建</Button>} /> | ||
| </Card> | ||
| </div> | ||
| export const ErrorPageSmallSize = () => <div> | ||
| <Card style={{ width: '320px' }}> | ||
| <Result type="410" size="small" title description extra={<div>该单图已删除<Link style={{ marginLeft: '8px' }} href="#;" onClick={() => action('onClick:从当前看板中移除')}>从当前看板中移除</Link></div>} /> | ||
| </Card> | ||
| </div> |
Oops, something went wrong.
2d81a37There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
gio-design – ./
gio-design-growingio.vercel.app
gio-design.vercel.app
gio-design-git-master-growingio.vercel.app