81 lines
2.7 KiB
TypeScript
81 lines
2.7 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 React, { useState } from 'react';
|
||
|
|
import ListItem from '@mui/material/ListItem';
|
||
|
|
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';
|
||
|
|
|
||
|
|
export default function EditTextPreference(props: EditTextPreferenceProps) {
|
||
|
|
const {
|
||
|
|
title, summary, dialogTitle, dialogMessage, 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(internalCurrentValue);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<ListItem
|
||
|
|
button
|
||
|
|
onClick={() => setDialogOpen(true)}
|
||
|
|
>
|
||
|
|
<ListItemText
|
||
|
|
primary={title}
|
||
|
|
secondary={summary}
|
||
|
|
/>
|
||
|
|
</ListItem>
|
||
|
|
<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">
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button onClick={handleDialogSubmit} color="primary">
|
||
|
|
OK
|
||
|
|
</Button>
|
||
|
|
</DialogActions>
|
||
|
|
</Dialog>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|