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.
42 lines
1.1 KiB
42 lines
1.1 KiB
import React, { useCallback } from 'react';
|
|
import { useSelect } from 'App/SelectContext';
|
|
import IconButton from 'Components/Link/IconButton';
|
|
import { icons } from 'Helpers/Props';
|
|
import styles from './ArtistIndexPosterSelect.css';
|
|
|
|
interface ArtistIndexPosterSelectProps {
|
|
artistId: number;
|
|
}
|
|
|
|
function ArtistIndexPosterSelect(props: ArtistIndexPosterSelectProps) {
|
|
const { artistId } = props;
|
|
const [selectState, selectDispatch] = useSelect();
|
|
const isSelected = selectState.selectedState[artistId];
|
|
|
|
const onSelectPress = useCallback(
|
|
(event) => {
|
|
const shiftKey = event.nativeEvent.shiftKey;
|
|
|
|
selectDispatch({
|
|
type: 'toggleSelected',
|
|
id: artistId,
|
|
isSelected: !isSelected,
|
|
shiftKey,
|
|
});
|
|
},
|
|
[artistId, isSelected, selectDispatch]
|
|
);
|
|
|
|
return (
|
|
<IconButton
|
|
className={styles.checkContainer}
|
|
iconClassName={isSelected ? styles.selected : styles.unselected}
|
|
name={isSelected ? icons.CHECK_CIRCLE : icons.CIRCLE_OUTLINE}
|
|
size={20}
|
|
onPress={onSelectPress}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default ArtistIndexPosterSelect;
|