flow-playform-react/src/pages/compositeCompLibrary/compGrid.tsx

import React, { useEffect, useState } from 'react';
import styles from './style/compGrid.module.less';
import CompNode from './compNode';
import { complexData } from './test/tempData';
import { Input, Grid, Pagination } from '@arco-design/web-react';
import { getMyFlowList, getPubFlowList } from '@/api/flow';

const InputSearch = Input.Search;
const Row = Grid.Row;
const Col = Grid.Col;

interface CompGridProps {
  componentType: 'minePage' | 'publicList';
}

const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
  const [compData, setCompData] = useState([]);
  const [paginationData, setPaginationData] = useState({ totalCount: 0, currPage: 1, pageSize: 11 });
  const [searchKeyword, setSearchKeyword] = useState('');
  useEffect(() => {
    if (componentType) getComponentData(componentType);

  }, [componentType]);

  const getComponentData = async (key: 'minePage' | 'publicList') => {
    const apiList = {
      minePage: getMyFlowList,
      publicList: getPubFlowList
    };
    const res: any = await apiList[key]({
      currPage: paginationData.currPage,
      pageSize: paginationData.pageSize,
      name: searchKeyword
    });

    if (res.code === 200) {
      setCompData(res.data.list);
      setPaginationData({
        totalCount: res.data.totalCount,
        currPage: res.data.currPage,
        pageSize: res.data.pageSize
      });
    }
  };


  useEffect(() => {
    getComponentData(componentType);
  }, [paginationData.currPage, searchKeyword]);

  const handleSearch = (value: string) => {
    setSearchKeyword(value);
    setPaginationData({
      ...paginationData,
      currPage: 1
    });
  };

  return (
    <>
      <div className={styles['comp-grid-container']}>
        <InputSearch
          searchButton="搜索"
          placeholder="请输入名字"
          style={{ width: 350 }}
          onSearch={handleSearch}
          allowClear
        />
        <Row style={{ marginBottom: 16 }}>
          {compData.map((v, i) => {
            return (
              <Col
                xs={12}
                sm={12}
                md={12}
                lg={6}
                xl={6}
                xxl={6}
                key={i}>
                <CompNode nodeData={v} />
              </Col>
            );
          })}
        </Row>
        <div className={styles['comp-grid-footer']}>
          <Pagination
            total={paginationData.totalCount}
            onChange={(number) => {
              setPaginationData({
                ...paginationData,
                currPage: number
              });
            }}
          />
        </div>
      </div>
    </>
  );
};

export default CompGrid;