Move source files into new folder

2024-10-05 21:22:12 +02:00
parent 79341b7817
commit 64629fd979
29 changed files with 113 additions and 102 deletions
--- a/src/modules/source/components/sourceConfiguration/EditTextPreference.tsx
+++ b/src/modules/source/components/sourceConfiguration/EditTextPreference.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 { useState } from 'react';
+import ListItemText from '@mui/material/ListItemText';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import ListItemButton from '@mui/material/ListItemButton';
+
+import { EditTextPreferenceProps } from '@/modules/source/Source.types.ts';
+
+export function EditTextPreference(props: EditTextPreferenceProps) {
+    const { t } = useTranslation();
+
+    const {
+        EditTextPreferenceTitle: title,
+        summary,
+        dialogTitle,
+        dialogMessage,
+        EditTextPreferenceCurrentValue: currentValue,
+        updateValue,
+    } = props;
+
+    const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue ?? '');
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+    const handleDialogCancel = () => {
+        setDialogOpen(false);
+
+        // reset the dialog
+        setInternalCurrentValue(currentValue ?? '');
+    };
+
+    const handleDialogSubmit = () => {
+        setDialogOpen(false);
+
+        updateValue('editTextState', internalCurrentValue);
+    };
+
+    return (
+        <>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
+                <ListItemText primary={title} secondary={summary} />
+            </ListItemButton>
+            <Dialog open={dialogOpen} onClose={handleDialogCancel}>
+                <DialogTitle>{dialogTitle}</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>{dialogMessage}</DialogContentText>
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        type="text"
+                        fullWidth
+                        value={internalCurrentValue}
+                        onChange={(e) => setInternalCurrentValue(e.target.value)}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleDialogCancel} color="primary">
+                        {t('global.button.cancel')}
+                    </Button>
+                    <Button onClick={handleDialogSubmit} color="primary">
+                        {t('global.button.ok')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}
--- a/src/modules/source/components/sourceConfiguration/ListPreference.tsx
+++ b/src/modules/source/components/sourceConfiguration/ListPreference.tsx
@@ -0,0 +1,151 @@
+/*
+ * 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 React, { useState, useEffect } from 'react';
+import ListItemText from '@mui/material/ListItemText';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import ListItemButton from '@mui/material/ListItemButton';
+
+import { ListPreferenceProps } from '@/modules/source/Source.types.ts';
+
+interface IListDialogProps {
+    value: string;
+    open: boolean;
+    onClose: (arg0: string | null) => void;
+    options: string[];
+    title: string;
+}
+
+function ListDialog(props: IListDialogProps) {
+    const { t } = useTranslation();
+
+    const { value: valueProp, open, onClose, options, title } = props;
+    const [value, setValue] = React.useState(valueProp);
+    const radioGroupRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (!open) {
+            setValue(valueProp);
+        }
+    }, [valueProp, open]);
+
+    const handleEntering = () => {
+        if (radioGroupRef.current != null) {
+            radioGroupRef?.current.focus();
+        }
+    };
+
+    const handleCancel = () => {
+        onClose(null);
+    };
+
+    const handleOk = () => {
+        onClose(value);
+    };
+
+    const handleChange = (event: any) => {
+        setValue(event.target.value);
+    };
+
+    return (
+        <Dialog
+            sx={{ '& .MuiDialog-paper': { width: '80%', maxHeight: 435 } }}
+            maxWidth="xs"
+            TransitionProps={{ onEntering: handleEntering }}
+            open={open}
+        >
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent dividers>
+                <RadioGroup ref={radioGroupRef} value={value} onChange={handleChange}>
+                    {options.map((option) => (
+                        <FormControlLabel value={option} key={option} control={<Radio />} label={option} />
+                    ))}
+                </RadioGroup>
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={handleCancel}>
+                    {t('global.button.cancel')}
+                </Button>
+                <Button onClick={handleOk}>{t('global.button.ok')}</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export function ListPreference(props: ListPreferenceProps) {
+    const {
+        ListPreferenceTitle: title,
+        summary,
+        ListPreferenceCurrentValue: currentValue,
+        ListPreferenceDefault: defaultValue,
+        updateValue,
+        entryValues,
+        entries,
+    } = props;
+    const [internalCurrentValue, setInternalCurrentValue] = useState(currentValue ?? defaultValue ?? '');
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+        setInternalCurrentValue(currentValue ?? defaultValue ?? '');
+    }, [currentValue]);
+
+    const findEntryOf = (value: string) => {
+        const idx = entryValues.indexOf(value);
+        return entries[idx];
+    };
+
+    const findEntryValueOf = (value: string) => {
+        const idx = entries.indexOf(value);
+        return entryValues[idx];
+    };
+
+    const getSummary = () => {
+        if (currentValue == null) {
+            return '';
+        }
+
+        if (summary === '%s') {
+            return findEntryOf(currentValue);
+        }
+        return summary;
+    };
+
+    const handleDialogClose = (newValue: string | null) => {
+        if (newValue !== null) {
+            updateValue('listState', findEntryValueOf(newValue));
+
+            // appear smooth
+            setInternalCurrentValue(newValue);
+        }
+
+        setDialogOpen(false);
+    };
+
+    return (
+        <>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
+                <ListItemText primary={title} secondary={getSummary()} />
+            </ListItemButton>
+            <ListDialog
+                title={title ?? ''}
+                open={dialogOpen}
+                onClose={handleDialogClose}
+                value={findEntryOf(internalCurrentValue)}
+                options={entries}
+            />
+        </>
+    );
+}
--- a/src/modules/source/components/sourceConfiguration/MultiSelectListPreference.tsx
+++ b/src/modules/source/components/sourceConfiguration/MultiSelectListPreference.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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 React, { useState, useEffect } from 'react';
+import ListItemText from '@mui/material/ListItemText';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import FormGroup from '@mui/material/FormGroup';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import ListItemButton from '@mui/material/ListItemButton';
+import { cloneObject } from '@/util/cloneObject.tsx';
+import { MultiSelectListPreferenceProps } from '@/modules/source/Source.types.ts';
+
+interface IListDialogProps {
+    selectedValues: string[];
+    open: boolean;
+    onClose: (arg0: string[] | null) => void;
+    values: string[];
+    title: string;
+}
+
+function ListDialog(props: IListDialogProps) {
+    const { t } = useTranslation();
+
+    const { selectedValues: selectedValuesProp, open, onClose, values, title } = props;
+    const [selectedValues, setSelectedValues] = React.useState(selectedValuesProp);
+
+    React.useEffect(() => {
+        if (!open) {
+            setSelectedValues(selectedValuesProp);
+        }
+    }, [selectedValuesProp, open]);
+
+    const handleCancel = () => {
+        onClose(null);
+    };
+
+    const handleOk = () => {
+        onClose(selectedValues);
+    };
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>, value: string) => {
+        const { checked } = event.target as HTMLInputElement;
+
+        const hasEntry = selectedValues.some((selectedValue) => value === selectedValue);
+        if (checked) {
+            if (!hasEntry) {
+                const selectedValuesClone = cloneObject(selectedValues) as string[];
+                selectedValuesClone.push(value);
+                setSelectedValues(selectedValuesClone);
+            }
+        } else if (hasEntry) {
+            // not checked and has entry
+            const selectedValuesClone = cloneObject(selectedValues) as string[];
+            const index = selectedValuesClone.indexOf(value);
+            selectedValuesClone.splice(index, 1);
+            setSelectedValues(selectedValuesClone);
+        }
+    };
+
+    return (
+        <Dialog sx={{ '& .MuiDialog-paper': { width: '80%', maxHeight: 435 } }} maxWidth="xs" open={open}>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogContent dividers>
+                <FormGroup>
+                    {values.map((value) => (
+                        <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={selectedValues.some((selectedValue) => value === selectedValue)}
+                                    onChange={(e) => handleChange(e, value)}
+                                />
+                            }
+                            label={value}
+                            key={value}
+                        />
+                    ))}
+                </FormGroup>
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={handleCancel}>
+                    {t('global.button.cancel')}
+                </Button>
+                <Button onClick={handleOk}>{t('global.button.ok')}</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export function MultiSelectListPreference(props: MultiSelectListPreferenceProps) {
+    const {
+        MultiSelectListPreferenceTitle: title,
+        summary,
+        MultiSelectListPreferenceCurrentValue: currentValue,
+        MultiSelectListPreferenceDefault: defaultValue,
+        updateValue,
+        entryValues,
+        entries,
+    } = props;
+    const [internalCurrentValue, setInternalCurrentValue] = useState(currentValue ?? defaultValue);
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+        setInternalCurrentValue(currentValue);
+    }, [currentValue]);
+
+    const findEntriesOf = (values?: string[] | null) =>
+        values?.map((value) => {
+            const idx = entryValues.indexOf(value);
+            return entries[idx];
+        }) ?? [];
+
+    const findEntryValuesOf = (values?: string[] | null) =>
+        values?.map((value) => {
+            const idx = entries.indexOf(value);
+            return entryValues[idx];
+        }) ?? [];
+
+    const getSummary = () => summary;
+
+    const handleDialogClose = (newValue: string[] | null) => {
+        if (newValue !== null) {
+            // console.log(newValue);
+            updateValue('multiSelectState', findEntryValuesOf(newValue));
+
+            // appear smooth
+            setInternalCurrentValue(newValue);
+        }
+
+        setDialogOpen(false);
+    };
+
+    return (
+        <>
+            <ListItemButton onClick={() => setDialogOpen(true)}>
+                <ListItemText primary={title} secondary={getSummary()} />
+            </ListItemButton>
+            <ListDialog
+                title={title ?? ''}
+                open={dialogOpen}
+                onClose={handleDialogClose}
+                selectedValues={findEntriesOf(internalCurrentValue)}
+                values={entries}
+            />
+        </>
+    );
+}
--- a/src/modules/source/components/sourceConfiguration/TwoStatePreference.tsx
+++ b/src/modules/source/components/sourceConfiguration/TwoStatePreference.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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 { useState, useEffect, useMemo } from 'react';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import Checkbox from '@mui/material/Checkbox';
+import {
+    CheckBoxPreferenceProps,
+    SwitchPreferenceCompatProps,
+    TwoStatePreferenceProps,
+} from '@/modules/source/Source.types.ts';
+
+function getTwoStateType(type: TwoStatePreferenceProps['twoStateType']) {
+    if (type === 'Switch') {
+        return Switch;
+    }
+    return Checkbox;
+}
+
+const getTwoStateValues = (
+    props: TwoStatePreferenceProps,
+): {
+    title: string;
+    defaultValue: boolean;
+    currentValue?: boolean | null | undefined;
+} => {
+    if (props.type === 'CheckBoxPreference') {
+        return {
+            title: props.CheckBoxTitle,
+            defaultValue: props.CheckBoxDefault,
+            currentValue: props.CheckBoxCheckBoxCurrentValue,
+        };
+    }
+
+    return {
+        title: props.SwitchPreferenceTitle,
+        defaultValue: props.SwitchPreferenceDefault,
+        currentValue: props.SwitchPreferenceCurrentValue,
+    };
+};
+
+function TwoSatePreference(props: TwoStatePreferenceProps) {
+    const { title, defaultValue, currentValue, summary, updateValue, twoStateType } = {
+        ...props,
+        ...getTwoStateValues(props),
+    };
+    const [internalCurrentValue, setInternalCurrentValue] = useState(currentValue ?? defaultValue);
+
+    useEffect(() => {
+        setInternalCurrentValue(currentValue ?? defaultValue);
+    }, [currentValue]);
+
+    const TwoStateComponent = useMemo(() => getTwoStateType(twoStateType), [twoStateType]);
+
+    return (
+        <ListItem>
+            <ListItemText primary={title} secondary={summary} />
+            <TwoStateComponent
+                {...{
+                    edge: 'end',
+                    checked: internalCurrentValue,
+                    onChange: () => {
+                        updateValue(twoStateType === 'Switch' ? 'switchState' : 'checkBoxState', !currentValue);
+
+                        // appear smooth
+                        setInternalCurrentValue(!currentValue);
+                    },
+                }}
+            />
+        </ListItem>
+    );
+}
+
+export function CheckBoxPreference(props: CheckBoxPreferenceProps) {
+    return <TwoSatePreference {...props} twoStateType="Checkbox" />;
+}
+
+export function SwitchPreferenceCompat(props: SwitchPreferenceCompatProps) {
+    return <TwoSatePreference {...props} twoStateType="Switch" />;
+}