You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.7 KiB
122 lines
3.7 KiB
import classNames from 'classnames';
|
|
import React, { useCallback } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { useSelect } from 'App/SelectContext';
|
|
import ArtistIndexTableOptions from 'Artist/Index/Table/ArtistIndexTableOptions';
|
|
import IconButton from 'Components/Link/IconButton';
|
|
import Column from 'Components/Table/Column';
|
|
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
|
|
import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
|
|
import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
|
|
import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
|
|
import { icons } from 'Helpers/Props';
|
|
import SortDirection from 'Helpers/Props/SortDirection';
|
|
import {
|
|
setArtistSort,
|
|
setArtistTableOption,
|
|
} from 'Store/Actions/artistIndexActions';
|
|
import { CheckInputChanged } from 'typings/inputs';
|
|
import hasGrowableColumns from './hasGrowableColumns';
|
|
import styles from './ArtistIndexTableHeader.css';
|
|
|
|
interface ArtistIndexTableHeaderProps {
|
|
showBanners: boolean;
|
|
columns: Column[];
|
|
sortKey?: string;
|
|
sortDirection?: SortDirection;
|
|
isSelectMode: boolean;
|
|
}
|
|
|
|
function ArtistIndexTableHeader(props: ArtistIndexTableHeaderProps) {
|
|
const { showBanners, columns, sortKey, sortDirection, isSelectMode } = props;
|
|
const dispatch = useDispatch();
|
|
const [selectState, selectDispatch] = useSelect();
|
|
|
|
const onSortPress = useCallback(
|
|
(value: string) => {
|
|
dispatch(setArtistSort({ sortKey: value }));
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const onTableOptionChange = useCallback(
|
|
(payload: unknown) => {
|
|
dispatch(setArtistTableOption(payload));
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const onSelectAllChange = useCallback(
|
|
({ value }: CheckInputChanged) => {
|
|
selectDispatch({
|
|
type: value ? 'selectAll' : 'unselectAll',
|
|
});
|
|
},
|
|
[selectDispatch]
|
|
);
|
|
|
|
return (
|
|
<VirtualTableHeader>
|
|
{isSelectMode ? (
|
|
<VirtualTableSelectAllHeaderCell
|
|
allSelected={selectState.allSelected}
|
|
allUnselected={selectState.allUnselected}
|
|
onSelectAllChange={onSelectAllChange}
|
|
/>
|
|
) : null}
|
|
|
|
{columns.map((column) => {
|
|
const { name, label, isSortable, isVisible } = column;
|
|
|
|
if (!isVisible) {
|
|
return null;
|
|
}
|
|
|
|
if (name === 'actions') {
|
|
return (
|
|
<VirtualTableHeaderCell
|
|
key={name}
|
|
className={styles[name]}
|
|
name={name}
|
|
isSortable={false}
|
|
>
|
|
<TableOptionsModalWrapper
|
|
columns={columns}
|
|
optionsComponent={ArtistIndexTableOptions}
|
|
onTableOptionChange={onTableOptionChange}
|
|
>
|
|
<IconButton name={icons.ADVANCED_SETTINGS} />
|
|
</TableOptionsModalWrapper>
|
|
</VirtualTableHeaderCell>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<VirtualTableHeaderCell
|
|
key={name}
|
|
className={classNames(
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
styles[name],
|
|
name === 'sortName' && showBanners && styles.banner,
|
|
name === 'sortName' &&
|
|
showBanners &&
|
|
!hasGrowableColumns(columns) &&
|
|
styles.bannerGrow
|
|
)}
|
|
name={name}
|
|
sortKey={sortKey}
|
|
sortDirection={sortDirection}
|
|
isSortable={isSortable}
|
|
onSortPress={onSortPress}
|
|
>
|
|
{typeof label === 'function' ? label() : label}
|
|
</VirtualTableHeaderCell>
|
|
);
|
|
})}
|
|
</VirtualTableHeader>
|
|
);
|
|
}
|
|
|
|
export default ArtistIndexTableHeader;
|