You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
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';
|
|
|
|
const InputSearch = Input.Search;
|
|
const Row = Grid.Row;
|
|
const Col = Grid.Col;
|
|
|
|
interface CompGridProps {
|
|
componentType: 'myComplex' | 'publicComplex';
|
|
}
|
|
|
|
const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
|
|
const [currentComponentType, setCurrentComponentType] = useState('');
|
|
const [compData, setCompData] = useState([]);
|
|
useEffect(() => {
|
|
setCurrentComponentType(componentType);
|
|
setCompData(complexData[`${componentType}`]);
|
|
}, [componentType]);
|
|
|
|
return (
|
|
<>
|
|
<div className={styles['comp-grid-container']}>
|
|
<InputSearch
|
|
searchButton="搜索"
|
|
placeholder="请输入名字"
|
|
style={{ width: 350 }}
|
|
/>
|
|
<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={200} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CompGrid; |