86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { InputText } from 'primereact/inputtext';
|
|
import { SelectButton } from 'primereact/selectbutton';
|
|
import { Dispatch, SetStateAction } from 'react';
|
|
|
|
import Button from '../_V2/Button';
|
|
import { TSizeOptionValue } from '../../../types/DataTable.types';
|
|
|
|
interface HeaderProps {
|
|
size: any;
|
|
setSize: Dispatch<SetStateAction<TSizeOptionValue>>;
|
|
sizeOptions: { label: string; value: TSizeOptionValue }[];
|
|
globalFilterValue: string;
|
|
onGlobalFilterChange: (e: { target: { value: any } }) => void;
|
|
onRefresh: () => void;
|
|
clearFilter: () => void;
|
|
hasExpandButtons?: boolean;
|
|
setExpandedRows?: Dispatch<SetStateAction<any>>;
|
|
expandedData?: any[];
|
|
extraButtonsTemplate?: () => JSX.Element;
|
|
}
|
|
|
|
export const TableGroupHeader: React.FC<HeaderProps> = ({
|
|
size,
|
|
setSize,
|
|
sizeOptions,
|
|
globalFilterValue,
|
|
onGlobalFilterChange,
|
|
onRefresh,
|
|
clearFilter,
|
|
hasExpandButtons,
|
|
setExpandedRows,
|
|
expandedData,
|
|
extraButtonsTemplate,
|
|
}) => {
|
|
if (hasExpandButtons && (!setExpandedRows || !expandedData)) {
|
|
throw new Error(
|
|
'When hasExpandButtons is true, setExpandedRows and expandedData are required.'
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`flex items-center justify-between ${hasExpandButtons ? 'gap-4' : ''}`}>
|
|
<SelectButton
|
|
value={size}
|
|
onChange={(e) => setSize(e.value)}
|
|
options={sizeOptions}
|
|
style={{ textAlign: 'center' }}
|
|
/>
|
|
{hasExpandButtons ? (
|
|
<div className='flex flex-wrap gap-2 justify-content-end'>
|
|
<Button
|
|
icon='pi pi-plus'
|
|
label='Expand All'
|
|
onClick={() => {
|
|
// Set the expandedRows state with the new object
|
|
const elements = [];
|
|
expandedData.forEach((element) => {
|
|
elements.push(element);
|
|
});
|
|
setExpandedRows(elements);
|
|
}}
|
|
/>
|
|
<Button icon='pi pi-minus' label='Collapse All' onClick={() => setExpandedRows(null)} />
|
|
</div>
|
|
) : null}
|
|
<span className='w-full mx-auto p-input-icon-left md:w-auto'>
|
|
<i className='pi pi-search' />
|
|
<InputText
|
|
value={globalFilterValue}
|
|
onChange={onGlobalFilterChange}
|
|
placeholder='Search everything'
|
|
className='w-full'
|
|
/>
|
|
</span>
|
|
<div className='flex gap-4'>
|
|
<div className='flex items-center gap-2 '>
|
|
<Button type='button' label='Refresh' outlined onClick={onRefresh} />
|
|
<Button type='button' label='Clear Filters' outlined onClick={clearFilter} />
|
|
{extraButtonsTemplate ? extraButtonsTemplate() : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default TableGroupHeader;
|