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.
112 lines
3.3 KiB
112 lines
3.3 KiB
import classNames from 'classnames';
|
|
import React, { useCallback } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { useSelect } from 'App/SelectContext';
|
|
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 {
|
|
setIndexerSort,
|
|
setIndexerTableOption,
|
|
} from 'Store/Actions/indexerIndexActions';
|
|
import { SelectStateInputProps } from 'typings/props';
|
|
import IndexerIndexTableOptions from './IndexerIndexTableOptions';
|
|
import styles from './IndexerIndexTableHeader.css';
|
|
|
|
interface IndexerIndexTableHeaderProps {
|
|
showBanners: boolean;
|
|
columns: Column[];
|
|
sortKey?: string;
|
|
sortDirection?: SortDirection;
|
|
isSelectMode: boolean;
|
|
}
|
|
|
|
function IndexerIndexTableHeader(props: IndexerIndexTableHeaderProps) {
|
|
const { columns, sortKey, sortDirection, isSelectMode } = props;
|
|
const dispatch = useDispatch();
|
|
const [selectState, selectDispatch] = useSelect();
|
|
|
|
const onSortPress = useCallback(
|
|
(value) => {
|
|
dispatch(setIndexerSort({ sortKey: value }));
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const onTableOptionChange = useCallback(
|
|
(payload) => {
|
|
dispatch(setIndexerTableOption(payload));
|
|
},
|
|
[dispatch]
|
|
);
|
|
|
|
const onSelectAllChange = useCallback(
|
|
({ value }: SelectStateInputProps) => {
|
|
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={IndexerIndexTableOptions}
|
|
onTableOptionChange={onTableOptionChange}
|
|
>
|
|
<IconButton name={icons.ADVANCED_SETTINGS} />
|
|
</TableOptionsModalWrapper>
|
|
</VirtualTableHeaderCell>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<VirtualTableHeaderCell
|
|
key={name}
|
|
className={classNames(styles[name])}
|
|
name={name}
|
|
sortKey={sortKey}
|
|
sortDirection={sortDirection}
|
|
isSortable={isSortable}
|
|
onSortPress={onSortPress}
|
|
>
|
|
{label}
|
|
</VirtualTableHeaderCell>
|
|
);
|
|
})}
|
|
</VirtualTableHeader>
|
|
);
|
|
}
|
|
|
|
export default IndexerIndexTableHeader;
|