39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
|
import './list-proj.css'
|
||
|
|
import CardProj from "../card/CardProj.tsx";
|
||
|
|
import {useRef, MutableRefObject} from "react";
|
||
|
|
import {Input, Pagination} from 'antd';
|
||
|
|
import type {SearchProps} from 'antd/es/input/Search';
|
||
|
|
|
||
|
|
const {Search} = Input;
|
||
|
|
|
||
|
|
const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
|
||
|
|
|
||
|
|
export default function ListProj() {
|
||
|
|
|
||
|
|
const listProjRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||
|
|
const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||
|
|
|
||
|
|
const domHeight = window.innerHeight - 301;
|
||
|
|
console.log(domHeight)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="list-proj" ref={listProjRef}>
|
||
|
|
<div className="top">
|
||
|
|
<Search placeholder="按项目名搜索" onSearch={onSearch} style={{width: 200}}/>
|
||
|
|
</div>
|
||
|
|
<div className="body">
|
||
|
|
<div className="list" ref={listRef} style={{height: `${domHeight}px`}}>
|
||
|
|
<CardProj/>
|
||
|
|
<CardProj/>
|
||
|
|
<CardProj/>
|
||
|
|
<CardProj/>
|
||
|
|
<CardProj/>
|
||
|
|
<CardProj/>
|
||
|
|
</div>
|
||
|
|
<div className="page">
|
||
|
|
<Pagination defaultCurrent={1} total={50}/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|