From b8424ffa546b53c17fa25e9508d91573caafd5d6 Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Tue, 2 Sep 2025 09:53:15 +0200 Subject: [PATCH] typing (#18402) * typing * remove warns * cleaner * use effect --- tgui/packages/tgui/interfaces/Changelog.tsx | 3 +- .../tgui/interfaces/ColorPickerModal.tsx | 3 +- .../tgui/interfaces/ICAssembly/Plane.tsx | 3 +- .../tgui/interfaces/SecurityRecords/types.ts | 3 +- .../tgui/interfaces/common/ComplexModal.tsx | 93 +++++++++++-------- 5 files changed, 60 insertions(+), 45 deletions(-) diff --git a/tgui/packages/tgui/interfaces/Changelog.tsx b/tgui/packages/tgui/interfaces/Changelog.tsx index 5c55a99c6c9..5ab64c34710 100644 --- a/tgui/packages/tgui/interfaces/Changelog.tsx +++ b/tgui/packages/tgui/interfaces/Changelog.tsx @@ -44,8 +44,7 @@ const icons = { type Data = { dates: string[] }; -// biome-ignore lint/complexity/noBannedTypes:Ingored here -type ChangelogProps = {}; +type ChangelogProps = Record; interface ChangelogState { data: string | { date: string; authors: { name: string; changes: string[] } }; diff --git a/tgui/packages/tgui/interfaces/ColorPickerModal.tsx b/tgui/packages/tgui/interfaces/ColorPickerModal.tsx index 5ddcc7e0c36..ec5b9ad5c8f 100644 --- a/tgui/packages/tgui/interfaces/ColorPickerModal.tsx +++ b/tgui/packages/tgui/interfaces/ColorPickerModal.tsx @@ -46,8 +46,7 @@ interface ColorPickerData { presets: string; } -// biome-ignore lint/complexity/noBannedTypes:Ingored here -type ColorPickerModalProps = {}; +type ColorPickerModalProps = Record; export const ColorPickerModal: React.FC = () => { const { act, data } = useBackend(); diff --git a/tgui/packages/tgui/interfaces/ICAssembly/Plane.tsx b/tgui/packages/tgui/interfaces/ICAssembly/Plane.tsx index c9024d5a293..1c6e4cab410 100644 --- a/tgui/packages/tgui/interfaces/ICAssembly/Plane.tsx +++ b/tgui/packages/tgui/interfaces/ICAssembly/Plane.tsx @@ -17,8 +17,7 @@ import { PortTypesToColor, } from './types'; -// biome-ignore lint/complexity/noBannedTypes:Ingored here -export type PlaneProps = {}; +export type PlaneProps = Record; type PlaneState = { locations: Record; diff --git a/tgui/packages/tgui/interfaces/SecurityRecords/types.ts b/tgui/packages/tgui/interfaces/SecurityRecords/types.ts index b4a16d48f4e..50a8e6a16fa 100644 --- a/tgui/packages/tgui/interfaces/SecurityRecords/types.ts +++ b/tgui/packages/tgui/interfaces/SecurityRecords/types.ts @@ -41,7 +41,6 @@ type record = { export type modalData = { id: string; text: string; - // biome-ignore lint/complexity/noBannedTypes: In this case we got any type of Object - args: {}; + args: Record; type: string; }; diff --git a/tgui/packages/tgui/interfaces/common/ComplexModal.tsx b/tgui/packages/tgui/interfaces/common/ComplexModal.tsx index b072a11e606..5e40c4219ee 100644 --- a/tgui/packages/tgui/interfaces/common/ComplexModal.tsx +++ b/tgui/packages/tgui/interfaces/common/ComplexModal.tsx @@ -1,4 +1,4 @@ -import { type KeyboardEvent, useRef, useState } from 'react'; +import { type KeyboardEvent, useEffect, useState } from 'react'; import { useBackend } from 'tgui/backend'; import { Box, @@ -10,8 +10,16 @@ import { Stack, } from 'tgui-core/components'; -// biome-ignore lint/complexity/noBannedTypes: In this case, we got any type of Object -type Data = { modal: { id: string; args: {}; text: string; type: string } }; +type ModalData> = { + id: string; + args: TArgs; + text: string; + type: string; +}; + +type Data> = { + modal: ModalData | null; +}; const bodyOverrides = {}; /** @@ -38,27 +46,32 @@ export const modalOpen = (id, args = {}) => { * @param {function} bodyOverride The override function that returns the * modal contents */ + +type ModalOverrideData> = { + id: string; + text: string; + args: TArgs; + type: string; +}; + export const modalRegisterBodyOverride = ( id: string, - bodyOverride: (modal: { - id: string; - text: string; - // biome-ignore lint/complexity/noBannedTypes: In this case, we got any type of Object - args: {}; - type: string; - }) => React.JSX.Element, + bodyOverride: (modal: ModalOverrideData) => React.JSX.Element, ) => { bodyOverrides[id] = bodyOverride; }; -// biome-ignore lint/complexity/noBannedTypes: In this case, we got any type of Object -const modalAnswer = (id: string, answer: string, args: {}) => { +const modalAnswer = ( + id: string, + answer: string | undefined, + args: Record, +) => { const { act, data } = useBackend(); const { modal } = data; if (!modal) { - return; + return null; } const newArgs = Object.assign(modal.args || {}, args || {}); @@ -76,16 +89,18 @@ const modalClose = (id: string | null) => { }); }; -type complexData = Data & +type ExtendedModalData> = ModalData & Partial<{ - modal: { - value: string; - choices: string[]; - no_text: string; - yes_text: string; - }; + value: string; + choices: string[]; + no_text: string; + yes_text: string; }>; +type ComplexData> = { + modal: ExtendedModalData | null; +}; + /** * Displays a modal and its actions. Passed data must have a valid modal field * @@ -102,16 +117,24 @@ type complexData = Data & * Defaults to `message` if not found * @param {object} props */ -export const ComplexModal = (props) => { - const { data } = useBackend(); +export const ComplexModal = (props: { + maxWidth?: string; + maxHeight?: string; +}) => { + const { data } = useBackend(); const { modal } = data; - const lastValue = useRef(modal.value); - const [curValue, setCurValue] = useState(modal.value); + const [curValue, setCurValue] = useState(modal?.value); + + useEffect(() => { + if (modal?.type === 'input') { + setCurValue(modal.value); + } + }, [modal?.value, modal?.type]); if (!modal) { - return; + return null; } const { id, text, type } = modal; @@ -131,11 +154,6 @@ export const ComplexModal = (props) => { if (bodyOverrides[id]) { modalBody = bodyOverrides[id](modal); } else if (type === 'input') { - if (lastValue.current !== modal.value) { - lastValue.current = modal.value; - setCurValue(modal.value); - } - modalOnEnter = (e) => modalAnswer(id, curValue, {}); modalBody = ( { ); } else if (type === 'choice') { + const { choices = [] } = modal; const realChoices = - typeof modal.choices === 'object' - ? Object.values(modal.choices) - : modal.choices; + typeof modal.choices === 'object' ? Object.values(choices) : choices; modalBody = ( { /> ); } else if (type === 'bento') { + const { choices = [], value = '' } = modal; modalBody = ( - {modal.choices.map((c, i) => ( + {choices.map((c, i) => (