Feature/result

site/mobile/mobile.config.js

@@ -212,5 +212,10 @@ export default {
       name: 'notice-bar',
       component: () => import('tdesign-mobile-react/notice-bar/_example/mobile.jsx'),
     },
+    {
+      title: 'Result 结果',
+      name: 'result',
+      component: () => import('tdesign-mobile-react/result/_example/index.tsx'),
+    }
   ],
 };

site/web/site.config.js

@@ -251,6 +251,12 @@ export default {
         //   path: '/mobile-react/components/image-viewer',
         //   component: () => import('tdesign-mobile-react/image-viewer/image-viewer.md'),
         // },
+        {
+          title: 'Result 结果',
+          name: 'result',
+          path: '/mobile-react/components/result',
+          component: () => import('tdesign-mobile-react/result/result.md'),
+        },
         {
           title: 'Skeleton 骨架屏',
           name: 'skeleton',

src/index.ts

@@ -45,6 +45,7 @@ export * from './sticky';
 export * from './swiper';
 export * from './swipe-cell';
 export * from './tag';
+export * from './result';
 
 /**
  * 消息提醒（7个）

src/result/Result.tsx

@@ -0,0 +1,68 @@
+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/_example/custom.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Image, Result } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function CustomResult() {
+  return (
+    <Result
+      image={<Image src="https://tdesign.gtimg.com/mobile/demos/result1.png" className="extra-class-image" />}
+      title="自定义结果"
+      description="描述文字"
+    />
+  );
+}

src/result/_example/index.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Button, Result } from 'tdesign-mobile-react';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import CustomResult from './custom';
+import ThemeResult from './theme';
+import './style/index.less';
+
+export default function ResultDemo() {
+  const [showResultPage, setShowResultPage] = useState(false);
+  return (
+    <>
+      {!showResultPage ? (
+        <div className="tdesign-mobile-demo">
+          <TDemoHeader title="Result 结果" summary="结果反馈" />
+          <TDemoBlock title="01类型" summary="不同结果反馈">
+            <ThemeResult />
+          </TDemoBlock>
+          <TDemoBlock title="" summary="自定义结果">
+            <CustomResult />
+          </TDemoBlock>
+          <TDemoBlock title="" summary="页面位置展示">
+            <div className="padding">
+              <Button block size="large" variant="outline" theme="primary" onClick={() => setShowResultPage(true)}>
+                页面位置展示
+              </Button>
+            </div>
+          </TDemoBlock>
+        </div>
+      ) : (
+        <div className="result-page">
+          <div className="demo-section__wrapper">
+            <Result theme="success" title="成功状态" description="描述文字" />
+          </div>
+          <div className="demo-section__wrapper">
+            <Button size="large" variant="outline" block theme="primary" onClick={() => setShowResultPage(false)}>
+              返回
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/result/_example/style/index.less

@@ -0,0 +1,24 @@
+.extra-class-image {
+  width: 108px;
+}
+
+.space {
+  margin-bottom: 48px;
+}
+
+.tdesign-mobile-demo {
+  background-color: var(--bg-color-demo, #fff);
+
+  .padding {
+    padding: 0 16px 16px;
+  }
+}
+
+.result-page {
+  height: calc(100vh - 50px);
+  background-color: var(--bg-color-demo, #fff);
+
+  .demo-section__wrapper {
+    padding: 24px 16px;
+  }
+}

src/result/_example/theme.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Result, ResultProps } from 'tdesign-mobile-react';
+import './style/index.less';
+
+export default function ThemeResult() {
+  const resultList: Array<ResultProps> = [
+    {
+      title: '成功状态',
+      theme: 'success',
+      description: '描述文字',
+    },
+    {
+      title: '失败状态',
+      theme: 'error',
+      description: '描述文字',
+    },
+    {
+      title: '警示状态',
+      theme: 'warning',
+      description: '描述文字',
+    },
+    {
+      title: '默认状态',
+      theme: 'default',
+      description: '描述文字',
+    },
+  ];
+  return (
+    <div>
+      {resultList.map((resultInfo) => (
+        <Result
+          className="space"
+          key={resultInfo.theme}
+          title={resultInfo.title}
+          description={resultInfo.description}
+          theme={resultInfo.theme}
+        />
+      ))}
+    </div>
+  );
+}

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