Fix options sliders not sliding

This commit is contained in:
nickofolas 2022-05-09 19:32:32 -05:00
parent b46718d188
commit 8baafe438d
2 changed files with 17 additions and 10 deletions

@ -70,7 +70,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
<> <>
<OptionsSlider <OptionsSlider
label=".script exec time (ms)" label=".script exec time (ms)"
value={execTime} initialValue={execTime}
callback={handleExecTimeChange} callback={handleExecTimeChange}
step={1} step={1}
min={5} min={5}
@ -84,7 +84,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
/> />
<OptionsSlider <OptionsSlider
label="Recently killed scripts size" label="Recently killed scripts size"
value={recentScriptsSize} initialValue={recentScriptsSize}
callback={handleRecentScriptsSizeChange} callback={handleRecentScriptsSizeChange}
step={25} step={25}
min={0} min={0}
@ -98,7 +98,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
/> />
<OptionsSlider <OptionsSlider
label="Netscript log size" label="Netscript log size"
value={logSize} initialValue={logSize}
callback={handleLogSizeChange} callback={handleLogSizeChange}
step={20} step={20}
min={20} min={20}
@ -112,7 +112,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
/> />
<OptionsSlider <OptionsSlider
label="Netscript port size" label="Netscript port size"
value={portSize} initialValue={portSize}
callback={handlePortSizeChange} callback={handlePortSizeChange}
step={1} step={1}
min={20} min={20}
@ -126,7 +126,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
/> />
<OptionsSlider <OptionsSlider
label="Terminal capacity" label="Terminal capacity"
value={terminalSize} initialValue={terminalSize}
callback={handleTerminalSizeChange} callback={handleTerminalSizeChange}
step={50} step={50}
min={50} min={50}
@ -141,7 +141,7 @@ export const CurrentOptionsPage = (props: IProps): React.ReactElement => {
/> />
<OptionsSlider <OptionsSlider
label="Autosave interval (s)" label="Autosave interval (s)"
value={autosaveInterval} initialValue={autosaveInterval}
callback={handleAutosaveIntervalChange} callback={handleAutosaveIntervalChange}
step={30} step={30}
min={0} min={0}

@ -1,8 +1,8 @@
import { Slider, Tooltip, Typography, Box } from "@mui/material"; import { Slider, Tooltip, Typography, Box } from "@mui/material";
import React from "react"; import React, { useState } from "react";
interface IProps { interface IProps {
value: any; initialValue: any;
callback: (event: any, newValue: number | number[]) => void; callback: (event: any, newValue: number | number[]) => void;
step: number; step: number;
min: number; min: number;
@ -13,14 +13,21 @@ interface IProps {
} }
export const OptionsSlider = (props: IProps): React.ReactElement => { export const OptionsSlider = (props: IProps): React.ReactElement => {
const [value, setValue] = useState(props.initialValue);
const onChange = (_evt: Event, newValue: number | Array<number>): void => {
setValue(newValue);
};
return ( return (
<Box> <Box>
<Tooltip title={<Typography>{props.tooltip}</Typography>}> <Tooltip title={<Typography>{props.tooltip}</Typography>}>
<Typography>{props.label}</Typography> <Typography>{props.label}</Typography>
</Tooltip> </Tooltip>
<Slider <Slider
value={props.value} value={value}
onChange={props.callback} onChange={onChange}
onChangeCommitted={(evt) => props.callback(evt, value)}
step={props.step} step={props.step}
min={props.min} min={props.min}
max={props.max} max={props.max}