Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-19 12:45:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make a new InputComponent that can be re-used everywhere to make all text accept the same kind of input

Browse Source
This commit is contained in:
Olivier Gagnon 2022-05-27 20:41:14 -04:00
parent 605dd87e90
commit b8750d1058
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Faction/ui/DonateOption.tsx
View File

@ -20,7 +20,7 @@ import { MathJaxWrapper } from "../../MathJaxWrapper";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField"; import { NumberInput } from "../../ui/React/NumberInput";
type IProps = { type IProps = {
faction: Faction; faction: Faction;
@ -31,26 +31,20 @@ type IProps = {
}; };
export function DonateOption(props: IProps): React.ReactElement { export function DonateOption(props: IProps): React.ReactElement {
const [donateAmt, setDonateAmt] = useState<number | null>(null); const [donateAmt, setDonateAmt] = useState<number>(NaN);
const digits = (CONSTANTS.DonateMoneyToRepDivisor + "").length - 1; const digits = (CONSTANTS.DonateMoneyToRepDivisor + "").length - 1;
function canDonate(): boolean { function canDonate(): boolean {
if (donateAmt === null) return false; if (isNaN(donateAmt)) return false;
if (isNaN(donateAmt) || donateAmt <= 0) return false; if (isNaN(donateAmt) || donateAmt <= 0) return false;
if (props.p.money < donateAmt) return false; if (props.p.money < donateAmt) return false;
return true; return true;
} }
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
const amt = numeralWrapper.parseMoney(event.target.value);
if (event.target.value === "" || isNaN(amt)) setDonateAmt(null);
else setDonateAmt(amt);
}
function donate(): void { function donate(): void {
const fac = props.faction; const fac = props.faction;
const amt = donateAmt; const amt = donateAmt;
if (amt === null) return; if (isNaN(amt)) return;
if (!canDonate()) return; if (!canDonate()) return;
props.p.loseMoney(amt, "other"); props.p.loseMoney(amt, "other");
const repGain = repFromDonation(amt, props.p); const repGain = repFromDonation(amt, props.p);
@ -85,8 +79,8 @@ export function DonateOption(props: IProps): React.ReactElement {
</Typography> </Typography>
) : ( ) : (
<> <>
<TextField <NumberInput
onChange={onChange} onChange={setDonateAmt}
placeholder={"Donation amount"} placeholder={"Donation amount"}
disabled={props.disabled} disabled={props.disabled}
InputProps={{ InputProps={{

19
src/ui/React/NumberInput.tsx Normal file
View File

@ -0,0 +1,19 @@
import { TextField, StandardTextFieldProps } from "@mui/material";
import React from "react";
import { numeralWrapper } from "../numeralFormat";
interface IProps extends Omit<StandardTextFieldProps, "onChange"> {
onChange: (v: number) => void;
}
export function NumberInput(props: IProps): React.ReactElement {
const textProps = {
...props,
onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
const amt = numeralWrapper.parseMoney(event.target.value);
if (event.target.value === "" || isNaN(amt)) props.onChange(NaN);
else props.onChange(amt);
},
};
return <TextField {...textProps} />;
}