feat(result): achieve result

achieve result component

feat Tencent#397

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<ResultProps> = (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 ? <RenderIcon className={`${rootClassName}__icon`}/> : null;
+  };
+  const renderImage = () => {
+    if (!image) {
+      return null;
+    }
+    if (typeof image === 'string') {
+      return <img src={image} alt="" />
+    }
+    return image;
+  };
+
+  const renderThumb = () => {
+    const image = renderImage();
+    const icon = renderIcon();
+    return (
+      <div className={`${rootClassName}__thumb`}>
+        {image || icon}
+      </div>
+    );
+  };
+
+  const renderTitle = () => {
+    if (!title) {
+      return null;
+    }
+    return (
+      <div className={`${rootClassName}__title`}>
+        {title}
+      </div>
+    );
+  };
+
+  const renderDescription = () => {
+    if (!description) {
+      return null;
+    }
+    return (
+      <div className={`${rootClassName}__description`}>
+        {description}
+      </div>
+    );
+  };
+  return withNativeProps(
+    props,
+    <div className={resultClassName}>
+      {renderThumb()}
+      {renderTitle()}
+      {renderDescription()}
+    </div>,
+  );
+};
+Result.displayName = 'Result';
+Result.defaultProps = resultDefaultProps;
+export default Result;

src/result/defaultProps.ts

@@ -0,0 +1,7 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdResultProps } from './type';
+
+export const resultDefaultProps: TdResultProps = { theme: 'default', title: '' };

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;

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

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

src/result/style/css.js

@@ -0,0 +1 @@
+import './index.css';

src/result/style/index.js

@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/result/v2/_index.less';

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;
+}