Options panels refactoring (#196)

* Refactor library options to match chapter options using shared component

* Disable some eslint rules

* Cleanup SourceOptions layout to use same components as other panels

src/components/atoms/CheckboxInput.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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, CheckboxProps, FormControlLabel } from '@mui/material';
+import React from 'react';
+
+interface IProps extends CheckboxProps {
+    label?: string
+}
+
+const CheckboxInput: React.FC<IProps> = ({
+    label, sx, ...rest
+}) => (
+    <FormControlLabel
+        control={(
+            <Checkbox {...rest} />
+        )}
+        label={label}
+        sx={sx}
+    />
+);
+
+export default CheckboxInput;

src/components/atoms/LoadingIconButton.tsx

@@ -18,7 +18,6 @@ const LoadingIconButton = ({
     };
 
     return (
-        // eslint-disable-next-line react/jsx-props-no-spreading
         <IconButton disabled={loading} {...rest} onClick={handleClick}>
             {loading ? (<CircularProgress size={24} />) : children}
         </IconButton>

src/components/atoms/RadioInput.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 { FormControlLabel, Radio, RadioProps } from '@mui/material';
+import React from 'react';
+
+export interface RadioInputProps extends RadioProps {
+    label?: string
+}
+
+const RadioInput: React.FC<RadioInputProps> = ({
+    label, sx, ...rest
+}) => (
+    <FormControlLabel
+        control={(
+            <Radio {...rest} />
+        )}
+        label={label}
+        sx={sx}
+    />
+);
+
+export default RadioInput;

src/components/atoms/SortRadioInput.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import React from 'react';
+import RadioInput, { RadioInputProps } from './RadioInput';
+
+interface IProps extends RadioInputProps {
+    sortDescending?: boolean | null | undefined
+}
+
+const SortRadioInput: React.FC<IProps> = ({
+    sortDescending, ...rest
+}) => (
+    <RadioInput
+        checkedIcon={sortDescending ? <ArrowDownward color="primary" /> : <ArrowUpward color="primary" />}
+        {...rest}
+    />
+);
+
+export default SortRadioInput;

src/components/atoms/ThreeStateCheckbox.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 { DisabledByDefaultRounded } from '@mui/icons-material';
+import { Checkbox, CheckboxProps } from '@mui/material';
+import React, { useCallback } from 'react';
+
+type CheckState = boolean | undefined | null;
+
+function nextState(state: CheckState): CheckState {
+    if (state === true) return false;
+    if (state === false) return undefined;
+    return true;
+}
+
+export interface ThreeStateCheckboxProps extends Omit<CheckboxProps, 'checked' | 'onChange'> {
+    checked?: boolean | undefined | null
+    onChange?: (checked: boolean | undefined | null) => void
+}
+
+/**
+ * When checked is true, checkbox contains checkmark
+ * When checked is false, checkbox contains cross
+ * When checked is null or undefined, checkbox is empty
+ */
+const ThreeStateCheckbox: React.FC<ThreeStateCheckboxProps> = ({ checked, onChange, ...rest }) => {
+    const handleChange = useCallback(() => {
+        if (onChange) {
+            const newState = nextState(checked);
+            onChange(newState);
+        }
+    }, [onChange]);
+
+    return (
+        <Checkbox
+            indeterminateIcon={<DisabledByDefaultRounded />}
+            checked={checked === true}
+            indeterminate={checked === false}
+            onChange={handleChange}
+            {...rest}
+        />
+    );
+};
+export default ThreeStateCheckbox;

src/components/atoms/ThreeStateCheckboxInput.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 { FormControlLabel } from '@mui/material';
+import React from 'react';
+import ThreeStateCheckbox, { ThreeStateCheckboxProps } from './ThreeStateCheckbox';
+
+interface IProps extends ThreeStateCheckboxProps {
+    label?: string
+}
+
+const ThreeStateCheckboxInput: React.FC<IProps> = ({
+    label, sx, ...rest
+}) => (
+    <FormControlLabel
+        control={(
+            <ThreeStateCheckbox {...rest} />
+        )}
+        label={label}
+        sx={sx}
+    />
+);
+
+export default ThreeStateCheckboxInput;