feat(Empty): add empty component (#2817)

* feat(empty): add empty component * feat(empty): 增加 empty component 使用默认预设值,增加样式 * feat(empty): props className * fix: empty wrapper class * fix(empty): update name -> prefix * docs(empty): add empty example * docs(empty): update docs example * test(empty): update test snap * chore: update snapshot * chore: update site route * test: update test snapshot * chore(empty): update ConfigProvider and i18n * chore: update snapshot * docs(empty): update ConfigProvider * docs(config-provider): delete ConfigProvider attach message * chore(config-provider): delete attach message type * chore: add size api * chore(empty): update type and md * chore(empty): update _common * chore: update snapshot * chore: update common --------- Co-authored-by: HaixingOoO <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Heising <[email protected]> Co-authored-by: 黎伟杰 <[email protected]> Co-authored-by: Uyarn <[email protected]>
Tencent · Aug 22, 2024 · 6549d65 · 6549d65
1 parent 35bf309
commit 6549d65
Show file tree

Hide file tree

Showing 52 changed files with 1,587 additions and 158 deletions.
diff --git a/site/site.config.mjs b/site/site.config.mjs
@@ -473,6 +473,14 @@ export const docs = [
         component: () => import('tdesign-react/descriptions/descriptions.md'),
         componentEn: () => import('tdesign-react/descriptions/descriptions.en-US.md'),
       },
+      {
+        title: 'Empty 空状态',
+        titleEn: 'Empty',
+        name: 'Empty',
+        path: '/react/components/empty',
+        component: () => import('tdesign-react/empty/empty.md'),
+        componentEn: () => import('tdesign-react/empty/empty.en-US.md'),
+      },
       {
         title: 'Image 图片',
         titleEn: 'Image',

diff --git a/src/_common b/src/_common
diff --git a/src/auto-complete/_example/option.tsx b/src/auto-complete/_example/option.tsx
@@ -32,7 +32,7 @@ const TEXTS = ['第一个默认联想词', '第二个默认联想词', '第三
 const AutoCompleteOption = () => {
   const [value, setValue] = useState('');
 
-  const options = TEXTS.map(text => ({
+  const options = TEXTS.map((text) => ({
     text,
     label: (
       <div className="custom-option">
@@ -42,7 +42,7 @@ const AutoCompleteOption = () => {
           <small className="description">这是关于联想词的描述，使用 label 渲染</small>
         </div>
       </div>
-    )
+    ),
   }));
 
   useEffect(() => {

diff --git a/src/auto-complete/_example/size.tsx b/src/auto-complete/_example/size.tsx
@@ -9,20 +9,15 @@ const AutoCompleteSize = () => {
   const [value3, setValue3] = useState('');
 
   return (
-    <Space direction='vertical' style={{ width: '100%' }}>
+    <Space direction="vertical" style={{ width: '100%' }}>
       <AutoComplete
         value={value1}
         options={options}
         onChange={setValue1}
         size="small"
         inputProps={{ label: '小尺寸：' }}
       />
-      <AutoComplete
-        value={value2}
-        options={options}
-        onChange={setValue2}
-        inputProps={{ label: '中尺寸：' }}
-      />
+      <AutoComplete value={value2} options={options} onChange={setValue2} inputProps={{ label: '中尺寸：' }} />
       <AutoComplete
         value={value3}
         options={options}

diff --git a/src/auto-complete/_example/status.tsx b/src/auto-complete/_example/status.tsx
@@ -7,7 +7,7 @@ const AutoCompleteStatus = () => {
   const [value, setValue] = useState('');
 
   return (
-    <Space direction='vertical' style={{ width: '100%' }} size="32px">
+    <Space direction="vertical" style={{ width: '100%' }} size="32px">
       <AutoComplete
         value={value}
         options={options}

diff --git a/src/avatar/_example/size.tsx b/src/avatar/_example/size.tsx
@@ -33,14 +33,31 @@ export default function SizeAvatar() {
         </Avatar>
       </Space>
       <Space align="center">
-        <Avatar alt='test' image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="small" style={{ marginRight: '40px' }}>
-        </Avatar>
-        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="medium" style={{ marginRight: '40px' }}>
-        </Avatar>
-        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="large" style={{ marginRight: '40px' }}>
-        </Avatar>
-        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg" shape="round" size="100px" style={{ marginRight: '40px' }}>
-        </Avatar>
+        <Avatar
+          alt="test"
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="small"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
+        <Avatar
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="medium"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
+        <Avatar
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="large"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
+        <Avatar
+          image="https://tdesign.gtimg.com/site/avatar.jpg"
+          shape="round"
+          size="100px"
+          style={{ marginRight: '40px' }}
+        ></Avatar>
       </Space>
     </Space>
   );

diff --git a/src/collapse/_example/other.tsx b/src/collapse/_example/other.tsx
@@ -9,7 +9,13 @@ export default function CollapseExample() {
   const [showIcon, setShowIcon] = useState(true);
   return (
     <Space direction="vertical">
-      <Collapse expandIcon={showIcon} value={collapseValue} borderless={borderless} disabled={disabledAll} onChange={setCollapseValue}>
+      <Collapse
+        expandIcon={showIcon}
+        value={collapseValue}
+        borderless={borderless}
+        disabled={disabledAll}
+        onChange={setCollapseValue}
+      >
         <Panel header="这是一个折叠标题">
           这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
         </Panel>

diff --git a/src/comment/_example/reply-form.tsx b/src/comment/_example/reply-form.tsx
@@ -15,7 +15,9 @@ export default function BasicComment() {
   const replyForm = (
     <Space direction="vertical" align="end" style={{ width: '100%' }}>
       <Textarea placeholder="请输入内容" value={replyData} onChange={setReplayData} />
-      <Button style={{ float: 'right' }} onClick={submitReply}>回复</Button>
+      <Button style={{ float: 'right' }} onClick={submitReply}>
+        回复
+      </Button>
     </Space>
   );
 

diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
@@ -16,6 +16,7 @@ colorPicker | Object | - | ColorPicker global configs。Typescript：`ColorPicke
 datePicker | Object | - | DatePicker global configs。Typescript：`DatePickerConfig` | N
 dialog | Object | - | Dialog global configs。Typescript：`DialogConfig` | N
 drawer | Object | - | Drawer global configs。Typescript：`DrawerConfig` | N
+empty | Object | - | Empty global configs。Typescript：`EmptyConfig` | N
 form | Object | - | Form global configs。Typescript：`FormConfig` | N
 guide | Object | - | Guide global configs。Typescript：`GuideConfig` | N
 icon | Object | - | icon config。Typescript：`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
@@ -26,6 +27,7 @@ list | Object | - | List global configs。Typescript：`ListConfig` | N
 message | Object | - | Message Component global configs。Typescript：`MessageConfig` | N
 pagination | Object | - | Pagination global configs。Typescript：`PaginationConfig` | N
 popconfirm | Object | - | Popconfirm global configs。Typescript：`PopconfirmConfig` | N
+rate | Object | - | Rate global configs。Typescript：`RateConfig` | N
 select | Object | - | Select global configs。Typescript：`SelectConfig` | N
 steps | Object | - | Steps global configs。Typescript：`StepsConfig` | N
 table | Object | - | Table global configs。Typescript：`TableConfig` | N
@@ -34,6 +36,7 @@ timePicker | Object | - | TimePicker global configs。Typescript：`TimePickerCo
 transfer | Object | - | Transfer global configs。Typescript：`TransferConfig` | N
 tree | Object | - | Tree global configs。Typescript：`TreeConfig` | N
 treeSelect | Object | - | TreeSelect global configs。Typescript：`TreeSelectConfig` | N
+typography | Object | - | Typography global configs。Typescript：`TypographyConfig` | N
 upload | Object | - | Upload global configs。Typescript：`UploadConfig` | N
 
 ### InputConfig
@@ -59,7 +62,7 @@ name | type | default | description | required
 cellMonth | String | - | \- | N
 controllerConfig | Object | - | Typescript：`CalendarController`，[Calendar API Documents](./calendar?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 fillWithZero | Boolean | true | \- | N
-firstDayOfWeek | Number | 1 | options：1/2/3/4/5/6/7 | N
+firstDayOfWeek | Number | 1 | options: 1/2/3/4/5/6/7 | N
 hideWeekend | String | - | \- | N
 monthRadio | String | - | \- | N
 monthSelection | String | - | \- | N
@@ -112,7 +115,7 @@ confirm | String | - | confirm text | N
 dayAriaLabel | String | - | date text | N
 dayjsLocale | String | - | dayjs language international configuration | N
 direction | String | 'ltr' | range separator text | N
-firstDayOfWeek | Number | 7 | options：1/2/3/4/5/6/7 | N
+firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N
 format | String | 'YYYY-MM-DD' | date format rules | N
 monthAriaLabel | String | - | month text | N
 months | Array | - | Typescript：`string[]` | N
@@ -138,7 +141,7 @@ yearAriaLabel | String | - | year text | N
 name | type | default | description | required
 -- | -- | -- | -- | --
 cancel | Object | - | Typescript：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
-closeOnEscKeydown | Boolean | true | \- | N
+closeOnEscKeydown | Boolean | true | trigger dialog close on `ESC` keydown | N
 closeOnOverlayClick | Boolean | true | \- | N
 confirm | Object | - | Typescript：`string \| ButtonProps` | N
 confirmBtnTheme | Object | - | Typescript：`{ default: string; info: string; warning: string; danger: string; success: string; }` | N
@@ -148,7 +151,7 @@ confirmBtnTheme | Object | - | Typescript：`{ default: string; info: string; wa
 name | type | default | description | required
 -- | -- | -- | -- | --
 cancel | String | - | Typescript：`string \| ButtonProps` | N
-closeOnEscKeydown | Boolean | true | \- | N
+closeOnEscKeydown | Boolean | true | trigger drawer close event on `ESC` keydown | N
 closeOnOverlayClick | Boolean | true | \- | N
 confirm | String | - | Typescript：`string \| ButtonProps` | N
 size | String | 'small' | \- | N
@@ -180,6 +183,7 @@ loadingText | String | - | \- | N
 resetText | String | - | \- | N
 searchResultText | String | - | \- | N
 selectAllText | String | - | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 sortAscendingOperationText | String | - | \- | N
 sortCancelOperationText | String | - | \- | N
 sortDescendingOperationText | String | - | \- | N
@@ -260,6 +264,7 @@ fileStatusText | String | - | \- | N
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+colon | String | - | colon on the right of label ":" | N
 errorMessage | Object | - | Typescript：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 requiredMark | Boolean | true | \- | N
 
@@ -283,6 +288,12 @@ name | type | default | description | required
 collapseText | String | - | \- | N
 expandText | String | - | \- | N
 
+### DescriptionsConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+colon | String | - | colon on the right of label, ":" | N
+
 ### AnchorConfig
 
 name | type | default | description | required
@@ -322,10 +333,23 @@ nextButtonProps | Object | - | next step button. `{ content: 'Next Button', them
 prevButtonProps | Object | - | previous step button. `{ content: 'Previous Step', theme: 'default' }`。Typescript：`ButtonProps` | N
 skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' }`。Typescript：`ButtonProps` | N
 
+### RateConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+rateText | Array | - | Typescript：`Array<string>` | N
+
+### EmptyConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+image | Object | - | Typescript：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+titleText | Object | - | Typescript：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N
+
 ### TypographyConfig
 
-名称 | 类型 | 默认值 | 说明 | 必传
+name | type | default | description | required
 -- | -- | -- | -- | --
 collapseText | String | - | collapse text | N
+copiedText | String | - | copied text | N
 expandText | String | - | expand text | N
-copiedText | String | - | copied text | N
diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md
@@ -46,6 +46,7 @@ colorPicker | Object | - | 颜色选择器全局配置。TS 类型：`ColorPicke
 datePicker | Object | - | 日期选择器全局配置。TS 类型：`DatePickerConfig` | N
 dialog | Object | - | 对话框全局配置。TS 类型：`DialogConfig` | N
 drawer | Object | - | 抽屉全局配置。TS 类型：`DrawerConfig` | N
+empty | Object | - | 空状态全局配置。TS 类型：`EmptyConfig` | N
 form | Object | - | 表单组件全局配置。TS 类型：`FormConfig` | N
 guide | Object | - | 引导全局配置。TS 类型：`GuideConfig` | N
 icon | Object | - | 图标全局配置。TS 类型：`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
@@ -56,6 +57,7 @@ list | Object | - | 列表组件全局配置。TS 类型：`ListConfig` | N
 message | Object | - | 消息组件全局配置。TS 类型：`MessageConfig` | N
 pagination | Object | - | 分页组件全局配置。TS 类型：`PaginationConfig` | N
 popconfirm | Object | - | 气泡确认框全局配置。TS 类型：`PopconfirmConfig` | N
+rate | Object | - | 评分全局配置。TS 类型：`RateConfig` | N
 select | Object | - | 选择器组件全局配置。TS 类型：`SelectConfig` | N
 steps | Object | - | 步骤条组件全局配置。TS 类型：`StepsConfig` | N
 table | Object | - | 表格组件全局配置。TS 类型：`TableConfig` | N
@@ -211,6 +213,7 @@ loadingText | String | - | 语言配置，“正在加载中，请稍后” 描
 resetText | String | - | 语言配置，“重置” 描述文本 | N
 searchResultText | String | - | 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' | N
 selectAllText | String | - | 语言配置，'全选' 描述文本 | N
+size | String | medium | 全局表格尺寸配置。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 sortAscendingOperationText | String | - | 语言配置，'点击升序' 描述文本 | N
 sortCancelOperationText | String | - | 语言配置，'点击取消排序' 描述文本 | N
 sortDescendingOperationText | String | - | 语言配置，'点击降序' 描述文本 | N
@@ -291,6 +294,7 @@ fileStatusText | String | - | 语言配置，“状态” 描述文本 | N
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+colon | String | - | 字段旁边的冒号，中文为“：” | N
 errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/config-provider/type.ts) | N
 requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N
 
@@ -314,6 +318,12 @@ errorIcon | TElement | - | 错误步骤图标，【注意】使用渲染函数
 collapseText | String | - | 语言配置，“收起”描述文本 | N
 expandText | String | - | 语言配置，“展开更多”描述文本 | N
 
+### DescriptionsConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+colon | String | - | 字段旁边的冒号，中文为“：” | N
+
 ### AnchorConfig
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -353,10 +363,23 @@ nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步
 prevButtonProps | Object | - | 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`。TS 类型：`ButtonProps` | N
 skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`。TS 类型：`ButtonProps` | N
 
+### RateConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`Array<string>` | N
+
+### EmptyConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+image | Object | - | 空状态组件各类型的图片配置。TS 类型：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N
+
 ### TypographyConfig
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 collapseText | String | - | 语言配置，“收起”描述文本 | N
+copiedText | String | - | 语言配置，“复制成功”描述文本 | N
 expandText | String | - | 语言配置，“展开”描述文本 | N
-copiedText | String | - | 语言配置，“复制成功”描述文本 | N
+66 −0		docs/mobile/api/button.en-US.md
+34 −5		docs/mobile/api/button.md
+35 −0		docs/mobile/api/grid.en-US.md
+18 −2		docs/mobile/api/grid.md
+29 −0		docs/mobile/api/image.en-US.md
+11 −17		docs/mobile/api/image.md
+64 −0		docs/mobile/api/input.en-US.md
+40 −12		docs/mobile/api/input.md
+17 −0		docs/mobile/api/link.en-US.md
+15 −0		docs/mobile/api/link.md
+45 −0		docs/mobile/api/loading.en-US.md
+14 −12		docs/mobile/api/loading.md
+31 −0		docs/mobile/api/search.en-US.md
+19 −5		docs/mobile/api/search.md
+6 −6		style/mobile/components/_index.less
+40 −2		style/mobile/components/button/v2/_index.less
+8 −0		style/mobile/components/button/v2/_var.less
+44 −0		style/mobile/components/image/v2/_index.less
+10 −5		style/mobile/components/link/_index.less
+61 −15		style/mobile/components/link/_var.less
+8 −0		style/mobile/components/loading/_index.less
+1 −1		style/mobile/components/overlay/v2/_index.less
+15 −0		style/web/components/empty/_index.less
+3 −0		style/web/components/empty/_var.less