chore: models list re-render

src/components/echarts/bar-chart.tsx

@@ -8,8 +8,9 @@ import {
   xAxis,
   yAxis
 } from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { ChartProps } from './types';
 
 const BarChart: React.FC<ChartProps> = (props) => {
@@ -22,7 +23,10 @@ const BarChart: React.FC<ChartProps> = (props) => {
     legendData,
     title
   } = props;
-  const [dataOptions, setDataOptions] = useState({});
+
+  if (!seriesData.length) {
+    return <EmptyData height={height} title={title}></EmptyData>;
+  }
 
   const options = {
     title: {
@@ -51,8 +55,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
 
     series: []
   };
-
-  useEffect(() => {
+  const setDataOptions = () => {
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -63,7 +66,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
         }
       };
     });
-    const optionsConfig = {
+    return {
       ...options,
       animation: false,
       title: {
@@ -79,9 +82,10 @@ const BarChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-    console.log('optionsConfig=========', optionsConfig);
-    setDataOptions(optionsConfig);
-  }, [seriesData, xAxisData, title]);
+  };
+
+  const dataOptions: any = setDataOptions();
+
   return (
     <Chart
       height={height}

src/components/echarts/h-bar.tsx

@@ -7,8 +7,9 @@ import {
   xAxis,
   yAxis
 } from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { ChartProps } from './types';
 
 const BarChart: React.FC<ChartProps> = (props) => {
@@ -21,7 +22,9 @@ const BarChart: React.FC<ChartProps> = (props) => {
     legendData,
     title
   } = props;
-  const [dataOptions, setDataOptions] = useState({});
+  if (!seriesData.length) {
+    return <EmptyData height={height} title={title}></EmptyData>;
+  }
 
   const options = {
     title: titleConfig,
@@ -45,7 +48,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
     series: []
   };
 
-  useEffect(() => {
+  const setDataOptions = () => {
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -60,9 +63,8 @@ const BarChart: React.FC<ChartProps> = (props) => {
           color: item.color
         }
       };
-      return item;
     });
-    const optionsConfig = {
+    return {
       ...options,
       animation: false,
       title: {
@@ -101,9 +103,10 @@ const BarChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-    console.log('optionsConfig========h=', optionsConfig);
-    setDataOptions(optionsConfig);
-  }, [seriesData, xAxisData, title]);
+  };
+
+  const dataOptions: any = setDataOptions();
+
   return (
     <Chart
       height={height}

src/components/echarts/line-chart.tsx

@@ -8,6 +8,7 @@ import {
   xAxis,
   yAxis
 } from '@/components/echarts/config';
+import EmptyData from '@/components/empty-data';
 import _ from 'lodash';
 import { memo } from 'react';
 import { ChartProps } from './types';
@@ -19,10 +20,13 @@ const LineChart: React.FC<ChartProps> = (props) => {
     height,
     width,
     labelFormatter,
-    legendData,
+    legendData = [],
     smooth,
     title
   } = props;
+  if (!seriesData.length) {
+    return <EmptyData height={height} title={title}></EmptyData>;
+  }
 
   const options = {
     title: {
@@ -42,7 +46,7 @@ const LineChart: React.FC<ChartProps> = (props) => {
     yAxis,
     legend: {
       ...legend,
-      data: []
+      data: legendData
     },
 
     series: []

src/components/empty-data/index.tsx

@@ -15,8 +15,8 @@ const EmptyData: React.FC<{
     >
       {title && (
         <h3
-          className="justify-center"
-          style={{ padding: '16px 0', marginBottom: 0 }}
+          className="justify-center font-size-12"
+          style={{ padding: '4px 0', marginBottom: 0 }}
         >
           {title}
         </h3>
@@ -25,7 +25,7 @@ const EmptyData: React.FC<{
         className="flex-center justify-center flex-column"
         style={{ height: '100%' }}
       >
-        <Empty />
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       </div>
     </div>
   );

src/components/logs-viewer/index.tsx

@@ -8,14 +8,14 @@ import './index.less';
 
 interface LogsViewerProps {
   height: number;
-  content: string;
+  content?: string;
   url: string;
   params?: object;
 }
 const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const { height, content, url } = props;
   const [nowrap, setNowrap] = useState(false);
-  const [logsContent, setLogsContent] = useState(content);
+  const [logsContent, setLogsContent] = useState(content || '');
   const { setChunkRequest } = useSetChunkRequest();
   const chunkRequedtRef = useRef<any>(null);
   const scroller = useRef<any>(null);

src/components/progress-bar/index.tsx

@@ -14,6 +14,7 @@ const RenderProgress = memo(
       if (download) {
         return 'var(--ant-color-primary)';
       }
+
       if (percent <= 50) {
         return 'var(--color-progress-green)';
       }

src/components/seal-form/auto-complete.tsx

@@ -1,4 +1,4 @@
-import { AutoComplete, Form } from 'antd';
+import { AutoComplete, Form, Spin } from 'antd';
 import type { AutoCompleteProps } from 'antd/lib';
 import { useEffect, useRef, useState } from 'react';
 import Wrapper from './components/wrapper';
@@ -17,6 +17,7 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
     extra,
     style,
     addAfter,
+    loading,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -63,6 +64,12 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
   const handleOnSelect = (value: any, option: any) => {
     onSelect?.(value, option);
   };
+  const renderAfter = () => {
+    if (loading) {
+      return <Spin size="small"></Spin>;
+    }
+    return addAfter;
+  };
 
   return (
     <Wrapper
@@ -73,12 +80,19 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
       required={required}
       description={description}
       disabled={props.disabled}
-      addAfter={addAfter}
+      addAfter={renderAfter()}
       onClick={handleClickWrapper}
     >
       <AutoComplete
         {...rest}
         ref={inputRef}
+        placeholder={
+          isFocus ? (
+            <span style={{ paddingLeft: '12px' }}>{placeholder}</span>
+          ) : (
+            ''
+          )
+        }
         onSelect={handleOnSelect}
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}

src/components/seal-form/types.ts

@@ -7,4 +7,5 @@ export interface SealFormItemProps {
   description?: React.ReactNode;
   extra?: React.ReactNode;
   addAfter?: React.ReactNode;
+  loading?: React.ReactNode;
 }

src/components/seal-table/components/table-row.tsx

@@ -33,8 +33,8 @@ const TableRow: React.FC<
   const [loading, setLoading] = useState(false);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
-  const childrenRendered = useRef<any>(null);
 
+  console.log('table row====');
   const { updateChunkedList } = useUpdateChunkedList(childrenData, {
     setDataList: setChildrenData
   });
@@ -228,7 +228,11 @@ const TableRow: React.FC<
         {expanded && (
           <div className="expanded-row">
             <Spin spinning={loading}>
-              {childrenData.length ? renderChildrenData() : <Empty></Empty>}
+              {childrenData.length ? (
+                renderChildrenData()
+              ) : (
+                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
+              )}
             </Spin>
           </div>
         )}

src/components/seal-table/index.tsx

@@ -1,7 +1,7 @@
 import { RightOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Col, Empty, Row, Spin } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import TableHeader from './components/table-header';
 import TableRow from './components/table-row';
 import './styles/index.less';
@@ -21,9 +21,10 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     loadChildren,
     loadChildrenAPI
   } = props;
-
+  console.log('sealtable====');
   const [selectAll, setSelectAll] = useState(false);
   const [indeterminate, setIndeterminate] = useState(false);
+  const tableContent = useRef(null);
 
   useEffect(() => {
     if (rowSelection) {
@@ -121,12 +122,12 @@ const SealTable: React.FC<SealTableProps> = (props) => {
     if (!props.dataSource.length) {
       return (
         <div className="empty-wrapper">
-          <Empty></Empty>
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
         </div>
       );
     }
     return (
-      <div className="seal-table-content">
+      <div className="seal-table-content" ref={tableContent}>
         {props.dataSource.map((item, index) => {
           return (
             <TableRow
@@ -163,4 +164,4 @@ const SealTable: React.FC<SealTableProps> = (props) => {
   );
 };
 
-export default SealTable;
+export default React.memo(SealTable);

src/components/seal-table/types.ts

@@ -36,6 +36,7 @@ export interface SealTableProps {
   renderChildren?: (data: any) => React.ReactNode;
   loadChildren?: (record: any) => Promise<any[]>;
   loadChildrenAPI?: (record: any) => string;
+  contentRendered?: () => void;
   rowKey: string;
 }