BLADEBURNER: Different solution for Enter key support in team member modal (#984)

This commit is contained in:
Snarling 2023-12-19 05:21:25 -05:00 committed by GitHub
parent 28d1610bac
commit 09b74a3868
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,49 +1,52 @@
import type { Action } from "../Action";
import type { Bladeburner } from "../Bladeburner";
import React, { useState } from "react";
import { dialogBoxCreate } from "../../ui/React/DialogBox";
import { Modal } from "../../ui/React/Modal";
import { Action } from "../Action";
import { Bladeburner } from "../Bladeburner";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import { Button, TextField, Typography } from "@mui/material";
interface IProps {
interface TeamSizeModalProps {
bladeburner: Bladeburner;
action: Action;
open: boolean;
onClose: () => void;
}
export function TeamSizeModal(props: IProps): React.ReactElement {
export function TeamSizeModal({ bladeburner, action, open, onClose }: TeamSizeModalProps): React.ReactElement {
const [teamSize, setTeamSize] = useState<number | undefined>();
function confirmTeamSize(): void {
function confirmTeamSize(event: React.FormEvent): void {
// Prevent reloading page when submitting form
event.preventDefault();
if (teamSize === undefined) return;
const num = Math.round(teamSize);
if (isNaN(num) || num < 0) {
dialogBoxCreate("Invalid value entered for number of Team Members (must be numeric, positive)");
dialogBoxCreate("Invalid value entered for number of Team Members (must be numeric and non-negative)");
} else {
props.action.teamCount = num;
action.teamCount = num;
}
props.onClose();
onClose();
}
function onTeamSize(event: React.ChangeEvent<HTMLInputElement>): void {
const x = parseFloat(event.target.value);
if (x > props.bladeburner.teamSize) setTeamSize(props.bladeburner.teamSize);
if (x > bladeburner.teamSize) setTeamSize(bladeburner.teamSize);
else setTeamSize(x);
}
return (
<Modal open={props.open} onClose={props.onClose}>
<Typography>
Enter the amount of team members you would like to take on this Op. If you do not have the specified number of
team members, then as many as possible will be used. Note that team members may be lost during operations.
</Typography>
<TextField autoFocus type="number" placeholder="Team size" value={teamSize} onChange={onTeamSize} />
<Button sx={{ mx: 2 }} onClick={confirmTeamSize}>
Confirm
</Button>
<Modal open={open} onClose={onClose}>
<form onSubmit={confirmTeamSize}>
<Typography>
Enter the amount of team members you would like to take on this Op. If you do not have the specified number of
team members, then as many as possible will be used. Note that team members may be lost during operations.
</Typography>
<TextField autoFocus type="number" placeholder="Team size" value={teamSize} onChange={onTeamSize} />
<Button sx={{ mx: 2 }} type={"submit"}>
Confirm
</Button>
</form>
</Modal>
);
}