diff --git a/src/ScriptEditor/NetscriptDefinitions.d.ts b/src/ScriptEditor/NetscriptDefinitions.d.ts index 108900077..d46b1b0f6 100644 --- a/src/ScriptEditor/NetscriptDefinitions.d.ts +++ b/src/ScriptEditor/NetscriptDefinitions.d.ts @@ -5999,7 +5999,10 @@ export interface NS extends Singularity { * @param options - Options to modify the prompt the player is shown. * @returns True if the player click “Yes”; false if the player clicks “No”; or the value entered by the player. */ - prompt(txt: string, options?: { type?: "boolean"|"text"|"select"|undefined; choices?: string[] | { [key: string]: string | number } }): Promise; + prompt( + txt: string, + options?: { type?: "boolean" | "text" | "select" | undefined; choices?: string[] }, + ): Promise; /** * Open up a message box. @@ -6389,12 +6392,12 @@ export interface WarehouseAPI { */ buyMaterial(divisionName: string, cityName: string, materialName: string, amt: number): void; /** - * Set material to bulk buy - * @param divisionName - Name of the division - * @param cityName - Name of the city - * @param materialName - Name of the material - * @param amt - Amount of material to buy - */ + * Set material to bulk buy + * @param divisionName - Name of the division + * @param cityName - Name of the city + * @param materialName - Name of the material + * @param amt - Amount of material to buy + */ bulkPurchase(divisionName: string, cityName: string, materialName: string, amt: number): void; /** * Get warehouse data diff --git a/src/ui/React/PromptManager.tsx b/src/ui/React/PromptManager.tsx index a4fc5a7b4..e8ab1c50e 100644 --- a/src/ui/React/PromptManager.tsx +++ b/src/ui/React/PromptManager.tsx @@ -1,136 +1,113 @@ -import React, { useState, useEffect, Dispatch, SetStateAction } from "react"; +import React, { useState, useEffect } from "react"; import { EventEmitter } from "../../utils/EventEmitter"; import { Modal } from "./Modal"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import Select, { SelectChangeEvent } from "@mui/material/Select"; -import TextField from '@mui/material/TextField'; -import { KEY } from '../../utils/helpers/keyCodes'; -import MenuItem from '@mui/material/MenuItem'; +import TextField from "@mui/material/TextField"; +import MenuItem from "@mui/material/MenuItem"; export const PromptEvent = new EventEmitter<[Prompt]>(); interface Prompt { txt: string; - options?: { type?: string; choices?: string[] | { [key: string]: string | number } }; + options?: { type?: string; choices?: string[] }; resolve: (result: boolean | string) => void; } export function PromptManager(): React.ReactElement { const [prompt, setPrompt] = useState(null); - useEffect( - () => - PromptEvent.subscribe((p: Prompt) => { - setPrompt(p); - }), - [], - ); + useEffect(() => { + return PromptEvent.subscribe((p: Prompt) => { + setPrompt(p); + }); + }, []); - const valueState = useState('') + if (prompt === null) { + return <>; + } function close(): void { if (prompt === null) return; - prompt.resolve(false); - valueState[1]('') + if (["text", "select"].includes(prompt?.options?.type ?? "")) { + prompt.resolve(""); + } else { + prompt.resolve(false); + } setPrompt(null); } - let promptRenderer; - switch (prompt?.options?.type) { - case 'text': { - promptRenderer = promptMenuText; - break; - } + const types: { [key: string]: any } = { + text: PromptMenuText, + select: PromptMenuSelect, + }; - case 'select': { - promptRenderer = promptMenuSelect; - break; - } + let PromptContent = PromptMenuBoolean; + if (prompt?.options?.type) PromptContent = types[prompt?.options?.type]; - default: { - promptRenderer = promptMenuBoolean; - } - } + const resolve = (value: boolean | string): void => { + prompt.resolve(value); + setPrompt(null); + }; return ( - <> - {prompt != null && ( - - {prompt.txt} - {promptRenderer(prompt, setPrompt, valueState)} - - )} - + + {prompt.txt} + + ); } -function promptMenuBoolean(prompt: Prompt | null, setPrompt: Dispatch>): React.ReactElement { - const yes = (): void => { - if (prompt !== null) { - prompt.resolve(true); - setPrompt(null); - } - } - const no = (): void => { - if (prompt !== null) { - prompt.resolve(false); - setPrompt(null); - } - } +interface IContentProps { + prompt: Prompt; + resolve: (value: boolean | string) => void; +} + +function PromptMenuBoolean({ resolve }: IContentProps): React.ReactElement { + const yes = (): void => resolve(true); + const no = (): void => resolve(false); return ( <> -
- +
+
); } -function promptMenuText(prompt: Prompt | null, setPrompt: Dispatch>, valueState: [string, Dispatch>]): React.ReactElement { - const [value, setValue] = valueState +function PromptMenuText({ resolve }: IContentProps): React.ReactElement { + const [value, setValue] = useState(""); - const submit = (): void => { - if (prompt !== null) { - prompt.resolve(value); - setValue('') - setPrompt(null); - } - } + const submit = (): void => resolve(value); const onInput = (event: React.ChangeEvent): void => { setValue(event.target.value); - } + }; const onKeyDown = (event: React.KeyboardEvent): void => { event.stopPropagation(); - if (prompt !== null && event.keyCode === KEY.ENTER) { + if (event.key === "Enter") { event.preventDefault(); submit(); } - } + }; return ( <> -
+
{ - submit(); - }} - > - Confirm - - ), + endAdornment: , }} />
@@ -138,37 +115,37 @@ function promptMenuText(prompt: Prompt | null, setPrompt: Dispatch>, valueState: [string, Dispatch>]): React.ReactElement { - const [value, setValue] = valueState +function PromptMenuSelect({ prompt, resolve }: IContentProps): React.ReactElement { + const [value, setValue] = useState(""); - const submit = (): void => { - if (prompt !== null) { - prompt.resolve(value); - setValue(''); - setPrompt(null); - } - } + const submit = (): void => resolve(value); const onChange = (event: SelectChangeEvent): void => { setValue(event.target.value); - } + }; - const getItems = (choices: string[] | { [key: string]: string | number }) : React.ReactElement[] => { + const getItems = (choices: string[]): React.ReactElement[] => { const content = []; - for (const i in choices) { + for (const i of choices) { // @ts-ignore - content.push({choices[i]}); + content.push( + + {i} + , + ); } return content; - } + }; return ( <> -
- {getItems(prompt?.options?.choices || [])} - +
);