From 9acf5bd821b37e4d8dad1c850497eeef79c0e7d8 Mon Sep 17 00:00:00 2001 From: Kyle Spier-Swenson Date: Mon, 22 Apr 2024 19:50:47 -0700 Subject: [PATCH] Revert "Converts ListInputModal to actually be a Modal | Adds ListInputWindow which uses it" (#82841) Reverts tgstation/tgstation#82792 --- code/modules/tgui_input/list.dm | 2 +- .../{ListInputWindow => }/ListInputModal.tsx | 172 ++++++++++-------- .../tgui/interfaces/ListInputWindow/index.tsx | 44 ----- .../tgui/interfaces/common/InputButtons.tsx | 23 +-- 4 files changed, 97 insertions(+), 144 deletions(-) rename tgui/packages/tgui/interfaces/{ListInputWindow => }/ListInputModal.tsx (57%) delete mode 100644 tgui/packages/tgui/interfaces/ListInputWindow/index.tsx diff --git a/code/modules/tgui_input/list.dm b/code/modules/tgui_input/list.dm index 22c6d48edfc..174f16fc7b5 100644 --- a/code/modules/tgui_input/list.dm +++ b/code/modules/tgui_input/list.dm @@ -111,7 +111,7 @@ /datum/tgui_list_input/ui_interact(mob/user, datum/tgui/ui) ui = SStgui.try_update_ui(user, src, ui) if(!ui) - ui = new(user, src, "ListInputWindow") + ui = new(user, src, "ListInputModal") ui.open() /datum/tgui_list_input/ui_close(mob/user) diff --git a/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx b/tgui/packages/tgui/interfaces/ListInputModal.tsx similarity index 57% rename from tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx rename to tgui/packages/tgui/interfaces/ListInputModal.tsx index a56363f2310..8695ac842f7 100644 --- a/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx +++ b/tgui/packages/tgui/interfaces/ListInputModal.tsx @@ -7,26 +7,35 @@ import { KEY_ESCAPE, KEY_UP, KEY_Z, -} from '../../../common/keycodes'; -import { useBackend } from '../../backend'; -import { Autofocus, Button, Input, Section, Stack } from '../../components'; -import { InputButtons } from '../common/InputButtons'; +} from '../../common/keycodes'; +import { useBackend } from '../backend'; +import { Autofocus, Button, Input, Section, Stack } from '../components'; +import { Window } from '../layouts'; +import { InputButtons } from './common/InputButtons'; +import { Loader } from './common/Loader'; -type ListInputModalProps = { +type ListInputData = { + init_value: string; items: string[]; - default_item: string; + large_buttons: boolean; message: string; - on_selected: (entry: string) => void; - on_cancel: () => void; + timeout: number; + title: string; }; -export const ListInputModal = (props: ListInputModalProps) => { - const { items = [], default_item, message, on_selected, on_cancel } = props; - - const [selected, setSelected] = useState(items.indexOf(default_item)); +export const ListInputModal = (props) => { + const { act, data } = useBackend(); + const { + items = [], + message = '', + init_value, + large_buttons, + timeout, + title, + } = data; + const [selected, setSelected] = useState(items.indexOf(init_value)); const [searchBarVisible, setSearchBarVisible] = useState(items.length > 9); const [searchQuery, setSearchQuery] = useState(''); - // User presses up or down on keyboard // Simulates clicking an item const onArrowKey = (key: number) => { @@ -90,77 +99,82 @@ export const ListInputModal = (props: ListInputModalProps) => { const filteredItems = items.filter((item) => item?.toLowerCase().includes(searchQuery.toLowerCase()), ); + // Dynamically changes the window height based on the message. + const windowHeight = + 325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0); // Grabs the cursor when no search bar is visible. if (!searchBarVisible) { setTimeout(() => document!.getElementById(selected.toString())?.focus(), 1); } return ( -
{ - const keyCode = window.event ? event.which : event.keyCode; - if (keyCode === KEY_DOWN || keyCode === KEY_UP) { - event.preventDefault(); - onArrowKey(keyCode); - } - if (keyCode === KEY_ENTER) { - event.preventDefault(); - on_selected(filteredItems[selected]); - } - if (!searchBarVisible && keyCode >= KEY_A && keyCode <= KEY_Z) { - event.preventDefault(); - onLetterSearch(keyCode); - } - if (keyCode === KEY_ESCAPE) { - event.preventDefault(); - on_cancel(); - } - }} - buttons={ -
+ if (keyCode === KEY_ENTER) { + event.preventDefault(); + act('submit', { entry: filteredItems[selected] }); + } + if (!searchBarVisible && keyCode >= KEY_A && keyCode <= KEY_Z) { + event.preventDefault(); + onLetterSearch(keyCode); + } + if (keyCode === KEY_ESCAPE) { + event.preventDefault(); + act('cancel'); + } + }} + > +
onSearchBarToggle()} + /> + } + className="ListInput__Section" + fill + title={message} + > + + + + + {searchBarVisible && ( + + )} + + + + +
+ + ); }; @@ -169,7 +183,7 @@ export const ListInputModal = (props: ListInputModalProps) => { * If a search query is provided, filters the items. */ const ListDisplay = (props) => { - const { act } = useBackend(); + const { act } = useBackend(); const { filteredItems, onClick, onFocusSearch, searchBarVisible, selected } = props; @@ -213,7 +227,7 @@ const ListDisplay = (props) => { * Closing the bar defaults input to an empty string. */ const SearchBar = (props) => { - const { act } = useBackend(); + const { act } = useBackend(); const { filteredItems, onSearch, searchQuery, selected } = props; return ( diff --git a/tgui/packages/tgui/interfaces/ListInputWindow/index.tsx b/tgui/packages/tgui/interfaces/ListInputWindow/index.tsx deleted file mode 100644 index 29355ff5d21..00000000000 --- a/tgui/packages/tgui/interfaces/ListInputWindow/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useBackend } from '../../backend'; -import { Window } from '../../layouts'; -import { Loader } from '../common/Loader'; -import { ListInputModal } from './ListInputModal'; - -type ListInputData = { - init_value: string; - items: string[]; - large_buttons: boolean; - message: string; - timeout: number; - title: string; -}; - -export const ListInputWindow = () => { - const { act, data } = useBackend(); - const { - items = [], - message = '', - init_value, - large_buttons, - timeout, - title, - } = data; - - // Dynamically changes the window height based on the message. - const windowHeight = - 325 + Math.ceil(message.length / 3) + (large_buttons ? 5 : 0); - - return ( - - {timeout && } - - act('submit', { entry })} - on_cancel={() => act('cancel')} - /> - - - ); -}; diff --git a/tgui/packages/tgui/interfaces/common/InputButtons.tsx b/tgui/packages/tgui/interfaces/common/InputButtons.tsx index aa74ff1fdc0..aad3d92f081 100644 --- a/tgui/packages/tgui/interfaces/common/InputButtons.tsx +++ b/tgui/packages/tgui/interfaces/common/InputButtons.tsx @@ -8,36 +8,19 @@ type InputButtonsData = { type InputButtonsProps = { input: string | number | string[]; - on_submit?: () => void; - on_cancel?: () => void; message?: string; }; export const InputButtons = (props: InputButtonsProps) => { const { act, data } = useBackend(); const { large_buttons, swapped_buttons } = data; - const { input, message, on_submit, on_cancel } = props; - - let on_submit_actual = on_submit; - if (!on_submit_actual) { - on_submit_actual = () => { - act('submit', { entry: input }); - }; - } - - let on_cancel_actual = on_cancel; - if (!on_cancel_actual) { - on_cancel_actual = () => { - act('cancel'); - }; - } - + const { input, message } = props; const submitButton = (