Fix table loading (#4401)

* fix: table loading 状态，不显示空状态图标和文字

* fix: table loading 状态，不显示空状态图标和文字 2

* fix: table loading 状态，不显示空状态图标和文字 3

* fix: table loading 状态，不显示空状态图标和文字，去掉 emptyIcon

Co-authored-by: liuzedong02 <liuzedong02@baidu.com>

docs/zh-CN/components/table.md

@@ -72,21 +72,7 @@ order: 67
                     "label": "Version"
                 }
             ],
-            "placeholder": {
-              "type": "container",
-              "body": [
-                {
-                  "type": "tpl",
-                  "tpl": "您还没有创建任何实例",
-                  "inline": true
-                },
-                {
-                  "type": "link",
-                  "body": "点击创建>",
-                  "href": "https://baidu.com"
-                }
-              ]
-            }
+            "placeholder": "您还没有创建任何实例"
         }
     ]
 }
@@ -1841,7 +1827,6 @@ popOver 的其它配置请参考 [popover](./popover)
 | affixHeader      | `boolean`                                | `true`                    | 是否固定表头                                                              |
 | columnsTogglable | `auto` 或者 `boolean`                    | `auto`                    | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启                   |
 | placeholder      | `string` 或者 `SchemaTpl`                 | `暂无数据`                | 当没数据的时候的文字提示                                                  |
-| emptyIcon        | `string` 或者 `SchemaIcon`                |                          | 当没数据的时候的图标显示                                                   |
 | className        | `string`                                 | `panel-default`           | 外层 CSS 类名                                                             |
 | tableClassName   | `string`                                 | `table-db table-striped`  | 表格 CSS 类名                                                             |
 | headerClassName  | `string`                                 | `Action.md-table-header`  | 顶部外层 CSS 类名                                                         |

src/renderers/CRUD.tsx

@@ -2154,7 +2154,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             onSearchableFromInit: this.handleFilterInit,
             headerToolbarRender: this.renderHeaderToolbar,
             footerToolbarRender: this.renderFooterToolbar,
-            data: store.mergedData
+            data: store.mergedData,
+            loading: store.loading
           }
         )}
 

src/renderers/Service.tsx

@@ -559,6 +559,7 @@ export default class Service extends React.Component<ServiceProps> {
 
     return render('body', store.schema || schema, {
       key: store.schemaKey || 'body',
+      loading: store.loading,
       onQuery: this.handleQuery,
       onAction: this.handleAction,
       onChange: this.handleChange

src/renderers/Table/TableContent.tsx

@@ -7,8 +7,7 @@ import {LocaleProps} from '../../locale';
 import {observer} from 'mobx-react';
 import {ActionSchema} from '../Action';
 import ItemActionsWrapper from './ItemActionsWrapper';
-import {SchemaTpl, SchemaIcon} from '../../Schema';
-import {generateIcon} from '../../utils/icon';
+import {SchemaTpl} from '../../Schema';
 import {Icon} from '../../components/icons';
 import {OnEventProps} from '../../utils/renderer-event';
 
@@ -26,7 +25,6 @@ export interface TableContentProps extends LocaleProps {
   }>;
   rows: Array<IRow>;
   placeholder?: string | SchemaTpl;
-  emptyIcon?: SchemaIcon;
   render: (region: string, node: SchemaNode, props?: any) => JSX.Element;
   onMouseMove: (event: React.MouseEvent) => void;
   onScroll: (event: React.UIEvent) => void;
@@ -61,7 +59,8 @@ export interface TableContentProps extends LocaleProps {
   itemActions?: Array<Action>;
   store: ITableStore;
   dispatchEvent?: Function;
-  onEvent?: OnEventProps
+  onEvent?: OnEventProps;
+  loading?: boolean;
 }
 
 @observer
@@ -131,22 +130,14 @@ export class TableContent extends React.Component<TableContentProps> {
       itemAction,
       affixRow,
       store,
-      emptyIcon,
       dispatchEvent,
-      onEvent
+      onEvent,
+      loading
     } = this.props;
 
     const tableClassName = cx('Table-table', this.props.tableClassName);
     const hideHeader = columns.every(column => !column.label);
 
-    let iconElement = null;
-    if (emptyIcon) {
-      iconElement =
-        typeof emptyIcon === 'string'
-          ? generateIcon(cx, emptyIcon, 'Icon')
-          : render('icon', emptyIcon);
-    }
-
     return (
       <div
         onMouseMove={onMouseMove}
@@ -185,26 +176,23 @@ export class TableContent extends React.Component<TableContentProps> {
           {!rows.length ? (
             <tbody>
               <tr className={cx('Table-placeholder')}>
-                <td colSpan={columns.length}>
-                  {iconElement ? (
-                    React.cloneElement(iconElement, {
-                      className: cx(
-                        iconElement?.props?.className ?? '',
-                        'Table-placeholder-empty-icon',
-                        'icon'
-                      )
-                    })
-                  ) : (
-                    <Icon
-                      icon="desk-empty"
-                      className={cx('Table-placeholder-empty-icon', 'icon')}
-                    />
-                  )}
-                  {render(
-                    'placeholder',
-                    translate(placeholder || 'placeholder.noData')
-                  )}
-                </td>
+                {
+                  !loading ? (
+                    <td colSpan={columns.length}>
+                      {
+                        typeof placeholder === 'string' ? (
+                          <>
+                            <Icon
+                              icon="desk-empty"
+                              className={cx('Table-placeholder-empty-icon', 'icon')}
+                            />
+                            {translate(placeholder || 'placeholder.noData')}
+                          </>
+                        ) : render('placeholder', translate(placeholder || 'placeholder.noData'))
+                      }
+                    </td>
+                  ) : null
+                }
               </tr>
             </tbody>
           ) : (

src/renderers/Table/index.tsx

@@ -223,11 +223,6 @@ export interface TableSchema extends BaseSchema {
    */
   placeholder?: string | SchemaTpl;
 
-  /**
-   * 无数据展示 icon
-   */
-  emptyIcon?: string | SchemaIcon;
-
   /**
    * 是否显示底部
    */
@@ -365,6 +360,7 @@ export interface TableProps extends RendererProps {
   canAccessSuperData?: boolean;
   reUseRow?: boolean;
   itemBadge?: BadgeSchema;
+  loading?: boolean;
 }
 
 export type ExportExcelToolbar = SchemaNode & {
@@ -2638,9 +2634,9 @@ export default class Table extends React.Component<TableProps, object> {
       prefixRowClassName,
       autoFillHeight,
       itemActions,
-      emptyIcon,
       dispatchEvent,
-      onEvent
+      onEvent,
+      loading
     } = this.props;
 
     // 理论上来说 store.rows 应该也行啊
@@ -2663,7 +2659,6 @@ export default class Table extends React.Component<TableProps, object> {
         columnsGroup={store.columnGroup}
         rows={store.rows}
         placeholder={placeholder}
-        emptyIcon={emptyIcon}
         render={render}
         onMouseMove={this.handleMouseMove}
         onScroll={this.handleOutterScroll}
@@ -2688,6 +2683,7 @@ export default class Table extends React.Component<TableProps, object> {
         translate={translate}
         dispatchEvent={dispatchEvent}
         onEvent={onEvent}
+        loading={loading}
       />
     );
   }