56 lines
1.6 KiB
React
56 lines
1.6 KiB
React
|
import { useState } from "react";
|
||
|
|
import Box from "@mui/material/Box";
|
||
|
|
import MenuItem from "@mui/material/MenuItem";
|
||
|
|
import TextField from "@mui/material/TextField";
|
||
|
|
|
||
|
|
const backupIntervalStepDisplay = ["Minutes", "Hours", "Days"];
|
||
|
|
export const backupIntervalDefault = "1d";
|
||
|
|
export const backupIntervalStepOptions = ["m", "h", "d"];
|
||
|
|
export default function BackupIntervalOption(props) {
|
||
|
|
const { onChange } = props;
|
||
|
|
const [interval, setInterval] = useState(1);
|
||
|
|
const [intervalStep, setIntervalStep] = useState(
|
||
|
|
backupIntervalStepOptions[2],
|
||
|
|
);
|
||
|
|
|
||
|
|
const changeStep = (e) => {
|
||
|
|
setIntervalStep(e.target.value);
|
||
|
|
onChange({ target: { value: `${interval}${e.target.value}` } });
|
||
|
|
};
|
||
|
|
|
||
|
|
const changeInterval = (e) => {
|
||
|
|
setInterval(e.target.value);
|
||
|
|
onChange({ target: { value: `${e.target.value}${intervalStep}` } });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<TextField
|
||
|
|
label="Backup Interval"
|
||
|
|
sx={{ width: "70%" }}
|
||
|
|
value={interval}
|
||
|
|
onChange={changeInterval}
|
||
|
|
helperText="Examples: 1m, 3h, 3.5d"
|
||
|
|
FormHelperTextProps={{ sx: { ml: 0 } }}
|
||
|
|
type="number"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
<TextField
|
||
|
|
label="Step"
|
||
|
|
sx={{ width: "30%", minWidth: "4rem" }}
|
||
|
|
onChange={onChange}
|
||
|
|
value={intervalStep}
|
||
|
|
select
|
||
|
|
required
|
||
|
|
SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
|
||
|
|
>
|
||
|
|
{backupIntervalStepOptions.map((o, i) => (
|
||
|
|
<MenuItem value={o} key={i}>
|
||
|
|
{backupIntervalStepDisplay[i]}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</TextField>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|