File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import type {BoardArticleSearchParams} from "../type/boardArticle.types.ts";
import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
type BoardArticleListTableHeaderProps = {
params: BoardArticleSearchParams;
onChange: (params: BoardArticleSearchParams) => void;
checked: boolean;
indeterminate: boolean;
onCheckAll: (checked: boolean) => void;
}
export const BoardArticleListTableHeader = ({
params,
onChange,
checked,
indeterminate,
onCheckAll,
}: BoardArticleListTableHeaderProps) => {
const handleSort = (field: string) => {
const nextOrder =
params.searchSortCnd === field &&
params.searchSortOrd === 'ASC'
? 'DESC'
: 'ASC';
onChange({
...params,
searchSortCnd: field,
searchSortOrd: nextOrder,
pageIndex: 1,
});
};
const getSortIcon = (field: string) => {
if (params.searchSortCnd !== field) {
return '-';
}
return params.searchSortOrd === 'ASC'
? '▲'
: '▼';
};
return (
<>
<colgroup>
<col style={{width: "40px"}}/>
<col style={{width: "6%"}}/>
<col style={{width: "auto"}}/>
<col style={{width: "15%"}}/>
<col style={{width: "15%"}}/>
<col style={{width: "10%"}}/>
<col style={{width: "12%"}}/>
<col style={{width: "8%"}}/>
</colgroup>
<thead>
<tr>
<th>
<CheckBox
id="checkAll"
name="checkAll"
checked={checked}
indeterminate={indeterminate}
onChange={onCheckAll}
/>
</th>
<th>번호</th>
<th scope={"col"}>
제목
</th>
<th scope={"col"}>
첨부파일
</th>
<th scope={"col"}>
공개여부
</th>
<th scope="col">작성자</th>
<th scope="col">작성일
<button
className={`sort sortBtn ${params.searchSortCnd === 'FRST_REGIST_PNTTM' ? 'active' : ''}`}
onClick={() => handleSort('FRST_REGIST_PNTTM')}
>
{getSortIcon('FRST_REGIST_PNTTM')}
</button>
</th>
<th scope="col">조회수</th>
</tr>
</thead>
</>
)
}