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 {ChangeEvent} from 'react'
import {SearchBar} from "./SearchBar.tsx";
import type {SearchParams} from "../../type/searchParams.ts";
import {PageSizeSelector} from "./pagination/PageSizeSelector.tsx";
interface ListSearchFormProps<T extends SearchParams> {
totalItems: number;
searchParams: T;
onChange: (params: T) => void;
searchOptions: { value: string; label: string; }[];
pageSizeOptions?: { value: string; label: string; }[];
totalLabel?: string;
}
export function ListSearchForm<T extends SearchParams>({
totalItems,
searchParams,
onChange,
searchOptions,
pageSizeOptions,
totalLabel,
}: ListSearchFormProps<T>) {
const handleChange = (
name: string,
value: string
) => {
onChange({
...searchParams,
[name]: value,
pageIndex: 1,
});
};
const handlePageChange = (event: ChangeEvent<HTMLSelectElement>) => {
const {name, value} = event.target
onChange({
...searchParams,
[name]: Number(value),
pageIndex: 1,
})
}
return (
<div className="search_area">
<div className="search_left">
<p className="total_number">
{totalLabel} <b>{totalItems}</b>
</p>
</div>
<div className="search_right">
<SearchBar
searchCnd={searchParams.searchCnd}
searchKeyword={searchParams.searchKeyword}
options={searchOptions}
onChange={handleChange}
/>
{
pageSizeOptions && pageSizeOptions.length > 0 && (
<PageSizeSelector
value={searchParams.pageUnit}
options={pageSizeOptions}
onChange={handlePageChange}
/>
)
}
</div>
</div>
)
}