List empty style (#8190)

components/list/__tests__/__snapshots__/demo.test.js.snap

@@ -357,7 +357,13 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
         >
           <div
             class="ant-spin-container"
-          />
+          >
+            <div
+              class="ant-list-empty-text"
+            >
+              No data
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -375,7 +381,13 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
     >
       <div
         class="ant-spin-container"
-      />
+      >
+        <div
+          class="ant-list-empty-text"
+        >
+          No data
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -405,7 +417,13 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
       </div>
       <div
         class="ant-spin-container ant-spin-blur"
-      />
+      >
+        <div
+          class="ant-list-empty-text"
+        >
+          No data
+        </div>
+      </div>
     </div>
     <div
       style="text-align:center;margin-top:12px;height:32px;line-height:32px"

components/list/index.en-US.md

@@ -31,6 +31,7 @@ A list can be used to display content related to a single subject. The content c
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| size | Size of list | `default` \| `middle` \| `small` | `default` |
 | column | column of grid | number | - |
 | gutter | spacing between grid | number | 0 |
 | xs | `<576px` column of grid | number | - |

components/list/index.tsx

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import defaultLocale from '../locale-provider/default';
 
 import Spin from '../spin';
 import Pagination from '../pagination';
@@ -43,6 +45,7 @@ export interface ListProps {
   split?: boolean;
   header?: React.ReactNode;
   footer?: React.ReactNode;
+  locale?: Object;
 }
 
 export default class List extends Component<ListProps> {
@@ -52,6 +55,15 @@ export default class List extends Component<ListProps> {
     grid: PropTypes.any,
   };
 
+  static defaultProps = {
+    dataSource: [],
+    prefixCls: 'ant-list',
+    bordered: false,
+    split: true,
+    loading: false,
+    pagination: false,
+  };
+
   private keys = {};
 
   getChildContext() {
@@ -86,19 +98,24 @@ export default class List extends Component<ListProps> {
     return !!(loadMore || pagination || footer);
   }
 
+  renderEmpty = (contextLocale) => {
+    const locale = { ...contextLocale, ...this.props.locale };
+    return <div className={`${this.props.prefixCls}-empty-text`}>{locale.emptyText}</div>;
+  }
+
   render() {
     const {
-      bordered = false,
-      split = true,
+      bordered,
+      split,
       className,
       children,
-      loading = false,
+      loading,
       itemLayout,
       loadMore,
-      pagination = false,
-      prefixCls = 'ant-list',
+      pagination,
+      prefixCls,
       grid,
-      dataSource = [],
+      dataSource,
       size,
       rowKey,
       renderItem,
@@ -136,15 +153,27 @@ export default class List extends Component<ListProps> {
       </div>
     );
 
-    const childrenList = React.Children.map(dataSource.map((item: any, index) => this.renderItem(item, index)),
-      (child: any, index) => React.cloneElement(child, {
-        key: this.keys[index],
-      }),
-    );
+    let childrenContent;
+    if (dataSource.length > 0) {
+      const childrenList = React.Children.map(dataSource.map((item: any, index) => this.renderItem(item, index)),
+        (child: any, index) => React.cloneElement(child, {
+          key: this.keys[index],
+        }),
+      );
 
-    const childrenContent = grid ? (
-      <Row gutter={grid.gutter}>{childrenList}</Row>
-    ) : childrenList;
+      childrenContent = grid ? (
+        <Row gutter={grid.gutter}>{childrenList}</Row>
+      ) : childrenList;
+    } else if (!children) {
+      childrenContent = (
+        <LocaleReceiver
+          componentName="Table"
+          defaultLocale={defaultLocale.Table}
+        >
+          {this.renderEmpty}
+        </LocaleReceiver>
+      );
+    }
 
     const content = (
       <div>

components/list/index.zh-CN.md

@@ -18,6 +18,7 @@ cols: 1
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` |
 | bordered | 是否展示边框 | boolean | false |
 | footer | 列表底部 | string\|ReactNode | - |
 | grid | 列表栅格配置 | object | - |

components/list/style/index.less

@@ -25,6 +25,12 @@
     text-align: center;
     min-height: 40px;
   }
+  &-empty-text {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    padding: 16px;
+    text-align: center;
+  }
   &-item {
     align-items: center;
     display: flex;