(cherry picked from commit 815a16d5cfced17ca4db7f1b66991c5cc9f3b719)pull/4254/head
Mark McDowall
1 year ago
committed by
Bogdan
parent
d31c323f3c
commit
84d5f2bcee
@ -0,0 +1,170 @@
|
|||||||
|
import { cloneDeep } from 'lodash';
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import areAllSelected from 'Utilities/Table/areAllSelected';
|
||||||
|
import selectAll from 'Utilities/Table/selectAll';
|
||||||
|
import toggleSelected from 'Utilities/Table/toggleSelected';
|
||||||
|
import ModelBase from './ModelBase';
|
||||||
|
|
||||||
|
export enum SelectActionType {
|
||||||
|
Reset,
|
||||||
|
SelectAll,
|
||||||
|
UnselectAll,
|
||||||
|
ToggleSelected,
|
||||||
|
RemoveItem,
|
||||||
|
UpdateItems,
|
||||||
|
}
|
||||||
|
|
||||||
|
type SelectedState = Record<number, boolean>;
|
||||||
|
|
||||||
|
interface SelectState {
|
||||||
|
selectedState: SelectedState;
|
||||||
|
lastToggled: number | null;
|
||||||
|
allSelected: boolean;
|
||||||
|
allUnselected: boolean;
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
items: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
type SelectAction =
|
||||||
|
| { type: SelectActionType.Reset }
|
||||||
|
| { type: SelectActionType.SelectAll }
|
||||||
|
| { type: SelectActionType.UnselectAll }
|
||||||
|
| {
|
||||||
|
type: SelectActionType.ToggleSelected;
|
||||||
|
id: number;
|
||||||
|
isSelected: boolean;
|
||||||
|
shiftKey: boolean;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: SelectActionType.RemoveItem;
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: SelectActionType.UpdateItems;
|
||||||
|
items: ModelBase[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type Dispatch = (action: SelectAction) => void;
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
selectedState: {},
|
||||||
|
lastToggled: null,
|
||||||
|
allSelected: false,
|
||||||
|
allUnselected: true,
|
||||||
|
items: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
interface SelectProviderOptions<T extends ModelBase> {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
children: any;
|
||||||
|
isSelectMode: boolean;
|
||||||
|
items: Array<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSelectedState(items: ModelBase[], existingState: SelectedState) {
|
||||||
|
return items.reduce((acc: SelectedState, item) => {
|
||||||
|
const id = item.id;
|
||||||
|
|
||||||
|
acc[id] = existingState[id] ?? false;
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Can this be reused?
|
||||||
|
|
||||||
|
const SelectContext = React.createContext<[SelectState, Dispatch] | undefined>(
|
||||||
|
cloneDeep(undefined)
|
||||||
|
);
|
||||||
|
|
||||||
|
function selectReducer(state: SelectState, action: SelectAction): SelectState {
|
||||||
|
const { items, selectedState } = state;
|
||||||
|
|
||||||
|
switch (action.type) {
|
||||||
|
case SelectActionType.Reset: {
|
||||||
|
return cloneDeep(initialState);
|
||||||
|
}
|
||||||
|
case SelectActionType.SelectAll: {
|
||||||
|
return {
|
||||||
|
items,
|
||||||
|
...selectAll(selectedState, true),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case SelectActionType.UnselectAll: {
|
||||||
|
return {
|
||||||
|
items,
|
||||||
|
...selectAll(selectedState, false),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case SelectActionType.ToggleSelected: {
|
||||||
|
var result = {
|
||||||
|
items,
|
||||||
|
...toggleSelected(
|
||||||
|
state,
|
||||||
|
items,
|
||||||
|
action.id,
|
||||||
|
action.isSelected,
|
||||||
|
action.shiftKey
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
case SelectActionType.UpdateItems: {
|
||||||
|
const nextSelectedState = getSelectedState(action.items, selectedState);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
...areAllSelected(nextSelectedState),
|
||||||
|
selectedState: nextSelectedState,
|
||||||
|
items,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
throw new Error(`Unhandled action type: ${action.type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SelectProvider<T extends ModelBase>(
|
||||||
|
props: SelectProviderOptions<T>
|
||||||
|
) {
|
||||||
|
const { isSelectMode, items } = props;
|
||||||
|
const selectedState = getSelectedState(items, {});
|
||||||
|
|
||||||
|
const [state, dispatch] = React.useReducer(selectReducer, {
|
||||||
|
selectedState,
|
||||||
|
lastToggled: null,
|
||||||
|
allSelected: false,
|
||||||
|
allUnselected: true,
|
||||||
|
items,
|
||||||
|
});
|
||||||
|
|
||||||
|
const value: [SelectState, Dispatch] = [state, dispatch];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isSelectMode) {
|
||||||
|
dispatch({ type: SelectActionType.Reset });
|
||||||
|
}
|
||||||
|
}, [isSelectMode]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch({ type: SelectActionType.UpdateItems, items });
|
||||||
|
}, [items]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SelectContext.Provider value={value}>
|
||||||
|
{props.children}
|
||||||
|
</SelectContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSelect() {
|
||||||
|
const context = React.useContext(SelectContext);
|
||||||
|
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useSelect must be used within a SelectProvider');
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
.checkContainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 3;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--defaultColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
composes: icon;
|
||||||
|
|
||||||
|
color: var(--lidarrGreen);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.unselected {
|
||||||
|
composes: icon;
|
||||||
|
|
||||||
|
color: var(--white);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--lidarrGreen);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
// This file is automatically generated.
|
||||||
|
// Please do not change this file!
|
||||||
|
interface CssExports {
|
||||||
|
'checkContainer': string;
|
||||||
|
'icon': string;
|
||||||
|
'selected': string;
|
||||||
|
'unselected': string;
|
||||||
|
}
|
||||||
|
export const cssExports: CssExports;
|
||||||
|
export default cssExports;
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import { SelectActionType, 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: SelectActionType.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;
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import { SelectActionType, useSelect } from 'App/SelectContext';
|
||||||
|
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
|
||||||
|
function ArtistIndexSelectAllButton() {
|
||||||
|
const [selectState, selectDispatch] = useSelect();
|
||||||
|
const { allSelected, allUnselected } = selectState;
|
||||||
|
|
||||||
|
let icon = icons.SQUARE_MINUS;
|
||||||
|
|
||||||
|
if (allSelected) {
|
||||||
|
icon = icons.CHECK_SQUARE;
|
||||||
|
} else if (allUnselected) {
|
||||||
|
icon = icons.SQUARE;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPress = useCallback(() => {
|
||||||
|
selectDispatch({
|
||||||
|
type: allSelected
|
||||||
|
? SelectActionType.UnselectAll
|
||||||
|
: SelectActionType.SelectAll,
|
||||||
|
});
|
||||||
|
}, [allSelected, selectDispatch]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageToolbarButton
|
||||||
|
label={allSelected ? 'Unselect All' : 'Select All'}
|
||||||
|
iconName={icon}
|
||||||
|
onPress={onPress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ArtistIndexSelectAllButton;
|
||||||
Loading…
Reference in new issue