mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-19 14:13:48 +01:00
Make a new InputComponent that can be re-used everywhere to make all text accept the same kind of input
This commit is contained in:
parent
605dd87e90
commit
b8750d1058
@ -20,7 +20,7 @@ import { MathJaxWrapper } from "../../MathJaxWrapper";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Button from "@mui/material/Button";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import { NumberInput } from "../../ui/React/NumberInput";
|
||||
|
||||
type IProps = {
|
||||
faction: Faction;
|
||||
@ -31,26 +31,20 @@ type IProps = {
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
function canDonate(): boolean {
|
||||
if (donateAmt === null) return false;
|
||||
if (isNaN(donateAmt)) return false;
|
||||
if (isNaN(donateAmt) || donateAmt <= 0) return false;
|
||||
if (props.p.money < donateAmt) return false;
|
||||
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 {
|
||||
const fac = props.faction;
|
||||
const amt = donateAmt;
|
||||
if (amt === null) return;
|
||||
if (isNaN(amt)) return;
|
||||
if (!canDonate()) return;
|
||||
props.p.loseMoney(amt, "other");
|
||||
const repGain = repFromDonation(amt, props.p);
|
||||
@ -85,8 +79,8 @@ export function DonateOption(props: IProps): React.ReactElement {
|
||||
</Typography>
|
||||
) : (
|
||||
<>
|
||||
<TextField
|
||||
onChange={onChange}
|
||||
<NumberInput
|
||||
onChange={setDonateAmt}
|
||||
placeholder={"Donation amount"}
|
||||
disabled={props.disabled}
|
||||
InputProps={{
|
||||
|
19
src/ui/React/NumberInput.tsx
Normal file
19
src/ui/React/NumberInput.tsx
Normal 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} />;
|
||||
}
|
Loading…
Reference in New Issue
Block a user