aaaadebfb3
* Added a useLocalStorageReducer funtion This is mostly a refactor of ChapterOptions to simplify it with a reducer function Also moved a lot of function used in ChaperList to a utility file * Added UseCallback where needed * renamed utility folder to util to follow the convention throughout the app * Refactor: Moved Resume FAB to seperate file * Renamed Types and Function for chapter filtering and sorting with the chapterOption prefix * more renaming
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
/*
|
|
* Copyright (C) Contributors to the Suwayomi project
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
import { Checkbox, createSvgIcon } from '@mui/material';
|
|
import React, {
|
|
useEffect, useState,
|
|
} from 'react';
|
|
|
|
export interface IThreeStateCheckboxProps {
|
|
name: string
|
|
checked: boolean | undefined | null
|
|
onChange: (change: boolean | undefined | null, name: string) => void
|
|
}
|
|
|
|
enum CheckState {
|
|
SELECTED, INTERMEDIATE, UNSELECTED,
|
|
}
|
|
|
|
function checkedToState(checked: boolean | undefined | null): CheckState {
|
|
switch (checked) {
|
|
case true:
|
|
return CheckState.SELECTED;
|
|
case false:
|
|
return CheckState.INTERMEDIATE;
|
|
default:
|
|
return CheckState.UNSELECTED;
|
|
}
|
|
}
|
|
function stateToChecked(state: CheckState): boolean | undefined {
|
|
switch (state) {
|
|
case CheckState.SELECTED:
|
|
return true;
|
|
case CheckState.INTERMEDIATE:
|
|
return false;
|
|
default:
|
|
case CheckState.UNSELECTED:
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
function stateTransition(state: CheckState): CheckState {
|
|
switch (state) {
|
|
case CheckState.SELECTED:
|
|
return CheckState.INTERMEDIATE;
|
|
case CheckState.INTERMEDIATE:
|
|
return CheckState.UNSELECTED;
|
|
case CheckState.UNSELECTED:
|
|
default:
|
|
return CheckState.SELECTED;
|
|
}
|
|
}
|
|
|
|
const ThreeStateCheckbox = (props: IThreeStateCheckboxProps) => {
|
|
const {
|
|
name, checked, onChange,
|
|
} = props;
|
|
const [localChecked, setLocalChecked] = useState(checkedToState(checked));
|
|
useEffect(() => setLocalChecked(checkedToState(checked)), [checked]);
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setLocalChecked(stateTransition(localChecked));
|
|
if (onChange) {
|
|
onChange(stateToChecked(stateTransition(localChecked)), e.currentTarget.name);
|
|
}
|
|
};
|
|
const CancelBox = createSvgIcon(
|
|
<>
|
|
<path
|
|
d="M 19 6.41 L 13.41 12 L 19 17.59 L 17.59 19 L 12 13.41 L 6.41 19 V 19 H 6.41 L 5 17.59 L 11 12 L 5 6.41 L 6.41 5 L 12 10.59 L 17.59 5 L 19 6.41 M 5 5 m 0 -2 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 z "
|
|
/>
|
|
</>,
|
|
'CancelBox',
|
|
);
|
|
|
|
return (
|
|
<Checkbox
|
|
name={name}
|
|
checked={localChecked === CheckState.SELECTED}
|
|
indeterminate={localChecked === CheckState.INTERMEDIATE}
|
|
indeterminateIcon={<CancelBox />}
|
|
onChange={handleChange}
|
|
className={`${localChecked}`}
|
|
/>
|
|
);
|
|
};
|
|
export default ThreeStateCheckbox;
|