diff --git a/src/result/Result.tsx b/src/result/Result.tsx new file mode 100644 index 000000000..caf4316b5 --- /dev/null +++ b/src/result/Result.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import classNames from 'classnames'; +import { InfoCircleIcon, CheckCircleIcon, CloseCircleIcon } from 'tdesign-icons-react'; +import {TdResultProps} from './type'; +import {resultDefaultProps} from './defaultProps'; +import withNativeProps, { NativeProps } from '../_util/withNativeProps'; +import useConfig from '../_util/useConfig'; +import useDefaultProps from '../hooks/useDefaultProps'; + +export interface ResultProps extends TdResultProps, NativeProps {} + +const Result:React.FC = (props) => { + const { + description, + image, + theme, + title, + } = useDefaultProps(props, resultDefaultProps); + const { classPrefix } = useConfig(); + const rootClassName = `${classPrefix}-result`; + const resultClassName = classNames(rootClassName, `${rootClassName}--theme-${theme || 'default'}`); + + const renderIcon = () => { + const defaultIcons = { + default: InfoCircleIcon, + success: CheckCircleIcon, + warning: InfoCircleIcon, + error: CloseCircleIcon, + }; + const RenderIcon = defaultIcons[theme]; + return RenderIcon ? : null; + }; + const renderImage = () => { + if (!image) { + return null; + } + if (typeof image === 'string') { + return + } + return image; + }; + + const renderThumb = () => { + const image = renderImage(); + const icon = renderIcon(); + return ( +
+ {image || icon} +
+ ); + }; + + const renderTitle = () => { + if (!title) { + return null; + } + return ( +
+ {title} +
+ ); + }; + + const renderDescription = () => { + if (!description) { + return null; + } + return ( +
+ {description} +
+ ); + }; + return withNativeProps( + props, +
+ {renderThumb()} + {renderTitle()} + {renderDescription()} +
, + ); +}; +Result.displayName = 'Result'; +Result.defaultProps = resultDefaultProps; +export default Result; diff --git a/src/result/defaultProps.ts b/src/result/defaultProps.ts new file mode 100644 index 000000000..549475835 --- /dev/null +++ b/src/result/defaultProps.ts @@ -0,0 +1,7 @@ +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import { TdResultProps } from './type'; + +export const resultDefaultProps: TdResultProps = { theme: 'default', title: '' }; diff --git a/src/result/index.ts b/src/result/index.ts new file mode 100644 index 000000000..35b31092c --- /dev/null +++ b/src/result/index.ts @@ -0,0 +1,8 @@ +import _Result from './Result'; +import './style/index.js'; + +export type { ResultProps } from './Result'; +export * from './type'; + +export const Result = _Result; +export default Result; diff --git a/src/result/result.en-US.md b/src/result/result.en-US.md new file mode 100644 index 000000000..5f794397a --- /dev/null +++ b/src/result/result.en-US.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + + +### Result Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N +description | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +image | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +theme | String | default | options: default/success/warning/error | N +title | TNode | '' | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/result/result.md b/src/result/result.md new file mode 100644 index 000000000..a04ca97b3 --- /dev/null +++ b/src/result/result.md @@ -0,0 +1,15 @@ +:: BASE_DOC :: + +## API + + +### Result Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式,TS 类型:`React.CSSProperties` | N +description | TNode | - | 描述文字。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +image | TNode | - | 图片地址。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +theme | String | default | 内置主题。可选项:default/success/warning/error | N +title | TNode | '' | 标题。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/result/style/css.js b/src/result/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/result/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/result/style/index.js b/src/result/style/index.js new file mode 100644 index 000000000..6102c35f5 --- /dev/null +++ b/src/result/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/mobile/components/result/v2/_index.less'; diff --git a/src/result/type.ts b/src/result/type.ts new file mode 100644 index 000000000..8e0de1258 --- /dev/null +++ b/src/result/type.ts @@ -0,0 +1,28 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdResultProps { + /** + * 描述文字 + */ + description?: TNode; + /** + * 图片地址 + */ + image?: TNode; + /** + * 内置主题 + * @default default + */ + theme?: 'default' | 'success' | 'warning' | 'error'; + /** + * 标题 + * @default '' + */ + title?: TNode; +}