[TGUI] Input List (#23281)

* TGUI Input List

* Formatting

* TGUI re-build

* Holopad & Drop Bomb

* Update tgui.bundle.js

* if

* linter

* Mistake

* TGUI input - Barsign

* Review changes

code/game/machinery/hologram.dm

@@ -233,7 +233,7 @@ GLOBAL_LIST_EMPTY(holopads)
 			callnames -= get_area(src)
 			var/list/sorted_callnames = sortAtom(callnames)
 			dialling_input = TRUE
-			var/result = input(usr, "Choose an area to call", "Holocall") as null|anything in sorted_callnames
+			var/result = tgui_input_list(usr, "Choose an area to call", "Holocall", sorted_callnames)
 			dialling_input = FALSE
 			if(QDELETED(usr) || !result || outgoing_call)
 				return

code/game/objects/structures/barsign.dm

@@ -142,7 +142,7 @@
 	req_access = list(ACCESS_SYNDICATE)
 
 /obj/structure/sign/barsign/proc/pick_sign()
-	var/picked_name = input("Available Signage", "Bar Sign") as null|anything in barsigns
+	var/picked_name = tgui_input_list(usr, "Available Signage", "Bar Sign", barsigns)
 	if(!picked_name)
 		return
 	set_sign(picked_name)

code/modules/admin/admin_verbs.dm

@@ -537,7 +537,7 @@ GLOBAL_LIST_INIT(view_runtimes_verbs, list(
 
 	var/turf/epicenter = mob.loc
 	var/list/choices = list("Small Bomb", "Medium Bomb", "Big Bomb", "Custom Bomb")
-	var/choice = input("What size explosion would you like to produce?") as null|anything in choices
+	var/choice = tgui_input_list(src, "What size explosion would you like to produce?", "Drop Bomb", choices)
 	switch(choice)
 		if(null)
 			return 0

code/modules/tgui/modules/tgui_input_list.dm

@@ -0,0 +1,180 @@
+/**
+ * Creates a TGUI input list window and returns the user's response.
+ *
+ * This proc should be used to create alerts that the caller will wait for a response from.
+ * Arguments:
+ * * user - The user to show the input box to.
+ * * message - The content of the input box, shown in the body of the TGUI window.
+ * * title - The title of the input box, shown on the top of the TGUI window.
+ * * buttons - The options that can be chosen by the user, each string is assigned a button on the UI.
+ * * timeout - The timeout of the input box, after which the input box will close and qdel itself. Set to zero for no timeout.
+ */
+/proc/tgui_input_list(mob/user, message, title, list/buttons, timeout = 0)
+	if(!user)
+		user = usr
+	if(!length(buttons))
+		return
+	if(!istype(user))
+		if(!isclient(user))
+			return
+		var/client/client = user
+		user = client.mob
+	var/datum/tgui_list_input/input = new(user, message, title, buttons, timeout)
+	input.ui_interact(user)
+	input.wait()
+	if(input)
+		. = input.choice
+		qdel(input)
+
+/**
+ * Creates an asynchronous TGUI input list window with an associated callback.
+ *
+ * This proc should be used to create inputs that invoke a callback with the user's chosen option.
+ * Arguments:
+ * * user - The user to show the input box to.
+ * * message - The content of the input box, shown in the body of the TGUI window.
+ * * title - The title of the input box, shown on the top of the TGUI window.
+ * * buttons - The options that can be chosen by the user, each string is assigned a button on the UI.
+ * * callback - The callback to be invoked when a choice is made.
+ * * timeout - The timeout of the input box, after which the menu will close and qdel itself. Set to zero for no timeout.
+ */
+/proc/tgui_input_list_async(mob/user, message, title, list/buttons, datum/callback/callback, timeout = 60 SECONDS)
+	if(!user)
+		user = usr
+	if(!length(buttons))
+		return
+	if(!istype(user))
+		if(!isclient(user))
+			return
+		var/client/client = user
+		user = client.mob
+	var/datum/tgui_list_input/async/input = new(user, message, title, buttons, timeout, callback)
+	input.ui_interact(user)
+
+/**
+ * # tgui_list_input
+ *
+ * Datum used for instantiating and using a TGUI-controlled list input that prompts the user with
+ * a message and shows a list of selectable options
+ */
+/datum/tgui_list_input
+	/// The title of the TGUI window
+	var/title
+	/// The textual body of the TGUI window
+	var/message
+	/// The list of buttons (responses) provided on the TGUI window
+	var/list/buttons
+	/// Buttons (strings specifically) mapped to the actual value (e.g. a mob or a verb)
+	var/list/buttons_map
+	/// The button that the user has pressed, null if no selection has been made
+	var/choice
+	/// The time at which the tgui_list_input was created, for displaying timeout progress.
+	var/start_time
+	/// The lifespan of the tgui_list_input, after which the window will close and delete itself.
+	var/timeout
+	/// Boolean field describing if the tgui_list_input was closed by the user.
+	var/closed
+
+/datum/tgui_list_input/New(mob/user, message, title, list/buttons, timeout)
+	src.title = title
+	src.message = message
+	src.buttons = list()
+	src.buttons_map = list()
+
+	// Gets rid of illegal characters
+	var/static/regex/whitelistedWords = regex(@{"([^\u0020-\u8000]+)"})
+
+	for(var/i in buttons)
+		var/string_key = whitelistedWords.Replace("[i]", "")
+
+		src.buttons += string_key
+		src.buttons_map[string_key] = i
+
+
+	if(timeout)
+		src.timeout = timeout
+		start_time = world.time
+		QDEL_IN(src, timeout)
+
+/datum/tgui_list_input/Destroy(force, ...)
+	SStgui.close_uis(src)
+	QDEL_NULL(buttons)
+	. = ..()
+
+/**
+ * Waits for a user's response to the tgui_list_input's prompt before returning. Returns early if
+ * the window was closed by the user.
+ */
+/datum/tgui_list_input/proc/wait()
+	while(!choice && !closed)
+		stoplag(1)
+
+/datum/tgui_list_input/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = FALSE, datum/tgui/master_ui = null, datum/ui_state/state = GLOB.always_state)
+	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
+	if(!ui)
+		ui = new(user, src, ui_key, "ListInput", title, 325, 330, master_ui, state)
+		ui.set_autoupdate(FALSE)
+		ui.open()
+
+/datum/tgui_list_input/ui_close(mob/user)
+	. = ..()
+	closed = TRUE
+
+/datum/tgui_list_input/ui_static_data(mob/user)
+	var/list/data = list()
+	data["title"] = title
+	data["message"] = message
+	data["buttons"] = buttons
+	return data
+
+/datum/tgui_list_input/ui_data(mob/user)
+	var/list/data = list()
+	if(timeout)
+		data["timeout"] = clamp((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS), 0, 1)
+
+/datum/tgui_list_input/ui_act(action, list/params)
+	if(..())
+		return
+
+	. = TRUE
+
+	switch(action)
+		if("choose")
+			if(!(params["choice"] in buttons))
+				return
+			choice = buttons_map[params["choice"]]
+			SStgui.close_uis(src)
+		if("cancel")
+			SStgui.close_uis(src)
+			closed = TRUE
+
+/**
+ * # async tgui_list_input
+ *
+ * An asynchronous version of tgui_list_input to be used with callbacks instead of waiting on user responses.
+ */
+/datum/tgui_list_input/async
+	/// The callback to be invoked by the tgui_list_input upon having a choice made.
+	var/datum/callback/callback
+
+/datum/tgui_list_input/async/New(mob/user, message, title, list/buttons, timeout, callback)
+	..()
+	src.callback = callback
+
+/datum/tgui_list_input/async/Destroy(force, ...)
+	QDEL_NULL(callback)
+	. = ..()
+
+/datum/tgui_list_input/async/ui_close(mob/user)
+	. = ..()
+	qdel(src)
+
+/datum/tgui_list_input/async/ui_act(action, list/params)
+	. = ..()
+	if(!. || choice == null)
+		return
+	callback.InvokeAsync(choice)
+	qdel(src)
+
+/datum/tgui_list_input/async/wait()
+	return

paradise.dme

@@ -2725,6 +2725,7 @@
 #include "code\modules\tgui\modules\module_base.dm"
 #include "code\modules\tgui\modules\power_monitor.dm"
 #include "code\modules\tgui\modules\robot_self_diagnosis.dm"
+#include "code\modules\tgui\modules\tgui_input_list.dm"
 #include "code\modules\tgui\modules\volume_mixer.dm"
 #include "code\modules\tgui\plugins\modal.dm"
 #include "code\modules\tgui\plugins\tgui_login.dm"

tgui/packages/tgui/components/Autofocus.js

@@ -0,0 +1,19 @@
+import { Component, createRef } from 'inferno';
+
+export class Autofocus extends Component {
+  ref = createRef();
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.ref.current?.focus();
+    }, 1);
+  }
+
+  render() {
+    return (
+      <div ref={this.ref} tabIndex={-1}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

tgui/packages/tgui/components/Input.js

@@ -76,11 +76,16 @@ export class Input extends Component {
     const input = this.inputRef.current;
     if (input) {
       input.value = toInputValue(nextValue);
-      if (this.props.autofocus) {
+    }
+
+    if (this.props.autoFocus || this.props.autoSelect) {
+      setTimeout(() => {
         input.focus();
-        input.selectionStart = 0;
-        input.selectionEnd = input.value.length;
-      }
+
+        if (this.props.autoSelect) {
+          input.select();
+        }
+      }, 1);
     }
   }
 

tgui/packages/tgui/components/index.js

@@ -1,4 +1,5 @@
 export { AnimatedNumber } from './AnimatedNumber';
+export { Autofocus } from './Autofocus';
 export { BlockQuote } from './BlockQuote';
 export { Box } from './Box';
 export { Button } from './Button';

tgui/packages/tgui/hotkeys.js

@@ -12,6 +12,8 @@ export const KEY_CTRL = 17;
 export const KEY_ALT = 18;
 export const KEY_ESCAPE = 27;
 export const KEY_SPACE = 32;
+export const ARROW_KEY_UP = 38;
+export const ARROW_KEY_DOWN = 40;
 export const KEY_0 = 48;
 export const KEY_1 = 49;
 export const KEY_2 = 50;

tgui/packages/tgui/interfaces/ListInput.js

@@ -0,0 +1,232 @@
+/**
+ * @file
+ * @copyright 2020 watermelon914 (https://github.com/watermelon914)
+ * @license MIT
+ */
+
+import { clamp01 } from 'common/math';
+import { useBackend, useLocalState } from '../backend';
+import { Box, Button, Flex, Section, Input } from '../components';
+import { Window } from '../layouts';
+import { ARROW_KEY_UP, ARROW_KEY_DOWN } from '../hotkeys';
+
+let lastScrollTime = 0;
+
+export const ListInput = (props, context) => {
+  const { act, data } = useBackend(context);
+  const { title, message, buttons, timeout } = data;
+
+  // Search
+  const [showSearchBar, setShowSearchBar] = useLocalState(
+    context,
+    'search_bar',
+    false
+  );
+  const [displayedArray, setDisplayedArray] = useLocalState(
+    context,
+    'displayed_array',
+    buttons
+  );
+
+  // KeyPress
+  const [searchArray, setSearchArray] = useLocalState(
+    context,
+    'search_array',
+    []
+  );
+  const [searchIndex, setSearchIndex] = useLocalState(
+    context,
+    'search_index',
+    0
+  );
+  const [lastCharCode, setLastCharCode] = useLocalState(
+    context,
+    'last_char_code',
+    null
+  );
+
+  // Selected Button
+  const [selectedButton, setSelectedButton] = useLocalState(
+    context,
+    'selected_button',
+    buttons[0]
+  );
+  return (
+    <Window title={title}>
+      {timeout !== undefined && <Loader value={timeout} />}
+      <Window.Content>
+        <Flex direction="column" height="100%">
+          <Flex.Item
+            className="Layout__content--flexColumn"
+            height="100%"
+            mb="7px"
+          >
+            <Section
+              className="ListInput__Section"
+              flexGrow="1"
+              scrollable
+              fill
+              title={message}
+              tabIndex={1}
+              onKeyDown={(e) => {
+                e.preventDefault();
+                if (lastScrollTime > performance.now()) {
+                  return;
+                }
+                lastScrollTime = performance.now() + 125;
+
+                if (
+                  e.keyCode === ARROW_KEY_UP ||
+                  e.keyCode === ARROW_KEY_DOWN
+                ) {
+                  let direction = 1;
+                  if (e.keyCode === ARROW_KEY_UP) {
+                    direction = -1;
+                  }
+
+                  let index = 0;
+                  for (index; index < buttons.length; index++) {
+                    if (buttons[index] === selectedButton) {
+                      break;
+                    }
+                  }
+                  index += direction;
+                  if (index < 0) {
+                    index = buttons.length - 1;
+                  } else if (index >= buttons.length) {
+                    index = 0;
+                  }
+                  setSelectedButton(buttons[index]);
+                  setLastCharCode(null);
+                  document.getElementById(buttons[index]).focus();
+                  return;
+                }
+
+                const charCode = String.fromCharCode(e.keyCode).toLowerCase();
+                if (!charCode) {
+                  return;
+                }
+
+                let foundValue;
+                if (charCode === lastCharCode && searchArray.length > 0) {
+                  const nextIndex = searchIndex + 1;
+
+                  if (nextIndex < searchArray.length) {
+                    foundValue = searchArray[nextIndex];
+                    setSearchIndex(nextIndex);
+                  } else {
+                    foundValue = searchArray[0];
+                    setSearchIndex(0);
+                  }
+                } else {
+                  const resultArray = displayedArray.filter(
+                    (value) => value.substring(0, 1).toLowerCase() === charCode
+                  );
+
+                  if (resultArray.length > 0) {
+                    setSearchArray(resultArray);
+                    setSearchIndex(0);
+                    foundValue = resultArray[0];
+                  }
+                }
+
+                if (foundValue) {
+                  setLastCharCode(charCode);
+                  setSelectedButton(foundValue);
+                  document.getElementById(foundValue).focus();
+                }
+              }}
+              buttons={
+                <Button
+                  icon="search"
+                  color="transparent"
+                  selected={showSearchBar}
+                  tooltip="Search..."
+                  tooltipPosition="left"
+                  onClick={() => {
+                    setShowSearchBar(!showSearchBar);
+                    setDisplayedArray(buttons);
+                  }}
+                  compact
+                />
+              }
+            >
+              <Flex wrap="wrap">
+                {displayedArray.map((button) => (
+                  <Flex.Item key={button} basis="100%">
+                    <Button
+                      color="transparent"
+                      content={button}
+                      id={button}
+                      width="100%"
+                      selected={selectedButton === button}
+                      onClick={() => {
+                        if (selectedButton === button) {
+                          act('choose', { choice: button });
+                        } else {
+                          setSelectedButton(button);
+                        }
+                        setLastCharCode(null);
+                      }}
+                    />
+                  </Flex.Item>
+                ))}
+              </Flex>
+            </Section>
+          </Flex.Item>
+          {showSearchBar && (
+            <Flex.Item basis={2.5}>
+              <Input
+                width="100%"
+                autoFocus
+                onInput={(e, value) =>
+                  setDisplayedArray(
+                    buttons.filter(
+                      (val) =>
+                        val.toLowerCase().search(value.toLowerCase()) !== -1
+                    )
+                  )
+                }
+              />
+            </Flex.Item>
+          )}
+          <Flex.Item>
+            <Flex textAlign="center">
+              <Flex.Item grow={1} basis={0} ml={1} mx="5px">
+                <Button
+                  fluid
+                  color="good"
+                  content="Confirm"
+                  disabled={selectedButton === null}
+                  onClick={() => act('choose', { choice: selectedButton })}
+                />
+              </Flex.Item>
+              <Flex.Item grow={1} basis={0} mr={1} mx="5px">
+                <Button
+                  fluid
+                  color="bad"
+                  content="Cancel"
+                  onClick={() => act('cancel')}
+                />
+              </Flex.Item>
+            </Flex>
+          </Flex.Item>
+        </Flex>
+      </Window.Content>
+    </Window>
+  );
+};
+
+const Loader = (props) => {
+  const { value } = props;
+  return (
+    <div className="ListInput__Loader">
+      <Box
+        className="ListInput__LoaderProgress"
+        style={{
+          width: clamp01(value) * 100 + '%',
+        }}
+      />
+    </div>
+  );
+};

tgui/packages/tgui/styles/interfaces/ListInput.scss

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2020 bobbahbrown (https://github.com/bobbahbrown)
+ * SPDX-License-Identifier: MIT
+ */
+
+ @use '../colors.scss';
+ @use '../base.scss';
+
+
+.ListInput__Section .Section__title{
+  flex-shrink: 0;
+}
+
+.ListInput__Section .Section__titleText {
+  font-size: 12px;
+}
+
+ .ListInput__Loader {
+   width: 100%;
+   position: relative;
+   height: 4px;
+ }
+
+ .ListInput__LoaderProgress {
+   position: absolute;
+   transition: background-color 500ms, width 500ms;
+   background-color: colors.bg(colors.$primary);
+   height: 100%;
+ }

tgui/packages/tgui/styles/main.scss

@@ -46,6 +46,7 @@
 @include meta.load-css('./interfaces/ExosuitFabricator.scss');
 @include meta.load-css('./interfaces/KitchenMachine.scss');
 @include meta.load-css('./interfaces/LibraryComputer.scss');
+@include meta.load-css('./interfaces/ListInput.scss');
 @include meta.load-css('./interfaces/Newscaster.scss');
 @include meta.load-css('./interfaces/NuclearBomb.scss');
 @include meta.load-css('./interfaces/OreRedemption.scss');