[MIRROR] ports and fixes TG's keycombo input (#11747)

Co-authored-by: Kashargul <144968721+Kashargul@users.noreply.github.com>

code/modules/tgui_input/keycombo.dm

@@ -0,0 +1,126 @@
+/**
+ * Creates a TGUI window with a key input. Returns the user's response as a full key with modifiers, eg ShiftK.
+ *
+ * This proc should be used to create windows for key entry that the caller will wait for a response from.
+ * If tgui fancy chat is turned off: Will return a normal input.
+ *
+ * Arguments:
+ * * user - The user to show the number input to.
+ * * message - The content of the number input, shown in the body of the TGUI window.
+ * * title - The title of the number input modal, shown on the top of the TGUI window.
+ * * default - The default (or current) key, shown as a placeholder.
+ */
+/proc/tgui_input_keycombo(mob/user = usr, message, title = "Key Input", default = 0, timeout = 0, ui_state = GLOB.tgui_always_state)
+	if (!istype(user))
+		if (istype(user, /client))
+			var/client/client = user
+			user = client.mob
+		else
+			return null
+
+	if (isnull(user.client))
+		return null
+
+	// Client does NOT have tgui_input on: Returns regular input
+	if(!user.read_preference(/datum/preference/toggle/tgui_input_mode))
+		var/input_key = input(user, message, title + "(Modifiers are TGUI only, sorry!)", default) as null|text
+		return input_key[1]
+	var/datum/tgui_input_keycombo/key_input = new(user, message, title, default, timeout, ui_state)
+	key_input.tgui_interact(user)
+	key_input.wait()
+	if (key_input)
+		. = key_input.entry
+		qdel(key_input)
+
+/**
+ * # tgui_input_keycombo
+ *
+ * Datum used for instantiating and using a TGUI-controlled key input that prompts the user with
+ * a message and listens for key presses.
+ */
+/datum/tgui_input_keycombo
+	/// Boolean field describing if the tgui_input_number was closed by the user.
+	var/closed
+	/// The default (or current) value, shown as a default. Users can press reset with this.
+	var/default
+	/// The entry that the user has return_typed in.
+	var/entry
+	/// The prompt's body, if any, of the TGUI window.
+	var/message
+	/// The time at which the number input was created, for displaying timeout progress.
+	var/start_time
+	/// The lifespan of the number input, after which the window will close and delete itself.
+	var/timeout
+	/// The title of the TGUI window
+	var/title
+	/// The TGUI UI state that will be returned in ui_state(). Default: always_state
+	var/datum/tgui_state/state
+
+/datum/tgui_input_keycombo/New(mob/user, message, title, default, timeout, ui_state)
+	src.default = default
+	src.message = message
+	src.title = title
+	src.state = ui_state
+	if (timeout)
+		src.timeout = timeout
+		start_time = world.time
+		QDEL_IN(src, timeout)
+
+/datum/tgui_input_keycombo/Destroy(force)
+	SStgui.close_uis(src)
+	state = null
+	return ..()
+
+/**
+ * Waits for a user's response to the tgui_input_keycombo's prompt before returning. Returns early if
+ * the window was closed by the user.
+ */
+/datum/tgui_input_keycombo/proc/wait()
+	while (!entry && !closed && !QDELETED(src))
+		stoplag(1)
+
+/datum/tgui_input_keycombo/tgui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "KeyComboModal")
+		ui.open()
+
+/datum/tgui_input_keycombo/tgui_close(mob/user)
+	. = ..()
+	closed = TRUE
+
+/datum/tgui_input_keycombo/tgui_state(mob/user)
+	return state
+
+/datum/tgui_input_keycombo/tgui_static_data(mob/user)
+	var/list/data = list()
+	data["init_value"] = default // Default is a reserved keyword
+	data["large_buttons"] = !user.client?.prefs || user.client.prefs.read_preference(/datum/preference/toggle/tgui_large_buttons)
+	data["message"] = message
+	data["swapped_buttons"] = !user.client?.prefs || user.client.prefs.read_preference(/datum/preference/toggle/tgui_swapped_buttons)
+	data["title"] = title
+	return data
+
+/datum/tgui_input_keycombo/tgui_data(mob/user)
+	var/list/data = list()
+	if(timeout)
+		data["timeout"] = CLAMP01((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS))
+	return data
+
+/datum/tgui_input_keycombo/tgui_act(action, list/params, datum/tgui/ui, datum/tgui_state/state)
+	. = ..()
+	if (.)
+		return
+	switch(action)
+		if("submit")
+			set_entry(params["entry"])
+			closed = TRUE
+			SStgui.close_uis(src)
+			return TRUE
+		if("cancel")
+			closed = TRUE
+			SStgui.close_uis(src)
+			return TRUE
+
+/datum/tgui_input_keycombo/proc/set_entry(entry)
+	src.entry = entry

tgui/packages/tgui/interfaces/KeyComboModal.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useRef, useState } from 'react';
+import { useBackend } from 'tgui/backend';
+import { Window } from 'tgui/layouts';
+import { Box, Button, Section, Stack } from 'tgui-core/components';
+import { isEscape, KEY } from 'tgui-core/keys';
+import type { BooleanLike } from 'tgui-core/react';
+import { InputButtons } from './common/InputButtons';
+import { Loader } from './common/Loader';
+
+type KeyInputData = {
+  init_value: string;
+  large_buttons: BooleanLike;
+  message: string;
+  timeout: number;
+  title: string;
+};
+
+function isStandardKey(event: React.KeyboardEvent<HTMLDivElement>): boolean {
+  return (
+    event.key !== KEY.Alt &&
+    event.key !== KEY.Control &&
+    event.key !== KEY.Shift &&
+    !isEscape(event.key)
+  );
+}
+
+const KEY_CODE_TO_BYOND: Record<string, string> = {
+  DEL: 'Delete',
+  DOWN: 'South',
+  END: 'Southwest',
+  HOME: 'Northwest',
+  INSERT: 'Insert',
+  LEFT: 'West',
+  PAGEDOWN: 'Southeast',
+  PAGEUP: 'Northeast',
+  RIGHT: 'East',
+  ' ': 'Space',
+  UP: 'North',
+};
+
+const DOM_KEY_LOCATION_NUMPAD = 3;
+
+function formatKeyboardEvent(
+  event: React.KeyboardEvent<HTMLDivElement>,
+): string {
+  let text = '';
+
+  if (event.altKey) {
+    text += 'Alt';
+  }
+
+  if (event.ctrlKey) {
+    text += 'Ctrl';
+  }
+
+  if (event.shiftKey) {
+    text += 'Shift';
+  }
+
+  if (event.location === DOM_KEY_LOCATION_NUMPAD) {
+    text += 'Numpad';
+  }
+
+  if (isStandardKey(event)) {
+    const key = event.key.toUpperCase();
+    text += KEY_CODE_TO_BYOND[key] || key;
+  }
+
+  return text;
+}
+
+export function KeyComboModal(props) {
+  const { act, data } = useBackend<KeyInputData>();
+  const { init_value, large_buttons, message = '', title, timeout } = data;
+  const [input, setInput] = useState(init_value);
+  const [binding, setBinding] = useState(true);
+  const focusRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (binding && focusRef.current) {
+      focusRef.current.focus();
+    }
+  }, [binding]);
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (!binding) {
+      if (event.key === KEY.Enter) {
+        act('submit', { entry: input });
+      }
+      if (isEscape(event.key)) {
+        act('cancel');
+      }
+      return;
+    }
+
+    event.preventDefault();
+
+    if (isStandardKey(event)) {
+      setValue(formatKeyboardEvent(event));
+      setBinding(false);
+      return;
+    }
+
+    if (isEscape(event.key)) {
+      setValue(init_value);
+      setBinding(false);
+      return;
+    }
+  }
+
+  function setValue(value: string) {
+    if (value === input) {
+      return;
+    }
+    setInput(value);
+  }
+
+  // Dynamically changes the window height based on the message.
+  const windowHeight =
+    130 +
+    (message.length > 30 ? Math.ceil(message.length / 3) : 0) +
+    (message.length && large_buttons ? 5 : 0);
+
+  return (
+    <Window title={title} width={240} height={windowHeight}>
+      {timeout && <Loader value={timeout} />}
+      <Window.Content onKeyDown={handleKeyDown}>
+        <Section fill>
+          <div ref={focusRef} tabIndex={-1} />
+          <Stack fill vertical>
+            <Stack.Item grow>
+              <Box color="label">{message}</Box>
+            </Stack.Item>
+            <Stack.Item>
+              <Button
+                disabled={binding}
+                fluid
+                textAlign="center"
+                onClick={() => {
+                  setValue(init_value);
+                  setBinding(true);
+                }}
+              >
+                {binding ? 'Awaiting input...' : `${input}`}
+              </Button>
+            </Stack.Item>
+            <Stack.Item>
+              <InputButtons input={input} />
+            </Stack.Item>
+          </Stack>
+        </Section>
+      </Window.Content>
+    </Window>
+  );
+}

vorestation.dme

@@ -4768,6 +4768,7 @@
 #include "code\modules\tgui_input\alert.dm"
 #include "code\modules\tgui_input\checkboxes.dm"
 #include "code\modules\tgui_input\color.dm"
+#include "code\modules\tgui_input\keycombo.dm"
 #include "code\modules\tgui_input\list.dm"
 #include "code\modules\tgui_input\matrix.dm"
 #include "code\modules\tgui_input\number.dm"