{
{...computeFlexItemProps(rest)}
/>
);
-};
+}
Stack.Item = StackItem;
@@ -70,8 +81,9 @@ type StackDividerProps = FlexItemProps &
hidden: boolean;
}>;
-const StackDivider = (props: StackDividerProps) => {
+function StackDivider(props: StackDividerProps) {
const { className, hidden, ...rest } = props;
+
return (
{
{...computeFlexItemProps(rest)}
/>
);
-};
+}
Stack.Divider = StackDivider;
diff --git a/tgui/packages/tgui/interfaces/AlertModal.tsx b/tgui/packages/tgui/interfaces/AlertModal.tsx
index d5b931dc08c..62b6e8bbbc3 100644
--- a/tgui/packages/tgui/interfaces/AlertModal.tsx
+++ b/tgui/packages/tgui/interfaces/AlertModal.tsx
@@ -1,33 +1,29 @@
-import { useState } from 'react';
-
-import {
- KEY_ENTER,
- KEY_ESCAPE,
- KEY_LEFT,
- KEY_RIGHT,
- KEY_SPACE,
- KEY_TAB,
-} from '../../common/keycodes';
+import { KEY } from 'common/keys';
+import { BooleanLike } from 'common/react';
+import { KeyboardEvent, useState } from 'react';
+
import { useBackend } from '../backend';
-import { Autofocus, Box, Button, Flex, Section, Stack } from '../components';
+import { Autofocus, Box, Button, Section, Stack } from '../components';
import { Window } from '../layouts';
import { Loader } from './common/Loader';
-type AlertModalData = {
- autofocus: boolean;
+type Data = {
+ autofocus: BooleanLike;
buttons: string[];
- large_buttons: boolean;
+ large_buttons: BooleanLike;
message: string;
- swapped_buttons: boolean;
+ swapped_buttons: BooleanLike;
timeout: number;
title: string;
};
-const KEY_DECREMENT = -1;
-const KEY_INCREMENT = 1;
+enum DIRECTION {
+ Increment = 1,
+ Decrement = -1,
+}
-export const AlertModal = (props) => {
- const { act, data } = useBackend
();
+export function AlertModal(props) {
+ const { act, data } = useBackend();
const {
autofocus,
buttons = [],
@@ -36,128 +32,148 @@ export const AlertModal = (props) => {
timeout,
title,
} = data;
+
const [selected, setSelected] = useState(0);
+
+ // At least one of the buttons has a long text message
+ const isVerbose = buttons.some((button) => button.length > 10);
+ const largeSpacing = isVerbose && large_buttons ? 20 : 15;
+
// Dynamically sets window dimensions
const windowHeight =
- 115 +
+ 120 +
+ (isVerbose ? largeSpacing * buttons.length : 0) +
(message.length > 30 ? Math.ceil(message.length / 4) : 0) +
(message.length && large_buttons ? 5 : 0);
- const windowWidth = 325 + (buttons.length > 2 ? 55 : 0);
- const onKey = (direction: number) => {
- if (selected === 0 && direction === KEY_DECREMENT) {
- setSelected(buttons.length - 1);
- } else if (selected === buttons.length - 1 && direction === KEY_INCREMENT) {
- setSelected(0);
- } else {
- setSelected(selected + direction);
+
+ const windowWidth = 345 + (buttons.length > 2 ? 55 : 0);
+
+ /** Changes button selection, etc */
+ function keyDownHandler(event: KeyboardEvent) {
+ switch (event.key) {
+ case KEY.Space:
+ case KEY.Enter:
+ act('choose', { choice: buttons[selected] });
+ return;
+ case KEY.Escape:
+ act('cancel');
+ return;
+ case KEY.Left:
+ event.preventDefault();
+ onKey(DIRECTION.Decrement);
+ return;
+ case KEY.Tab:
+ case KEY.Right:
+ event.preventDefault();
+ onKey(DIRECTION.Increment);
+ return;
}
- };
+ }
+
+ /** Manages iterating through the buttons */
+ function onKey(direction: DIRECTION) {
+ const newIndex = (selected + direction + buttons.length) % buttons.length;
+ setSelected(newIndex);
+ }
return (
{!!timeout && }
- {
- const keyCode = window.event ? e.which : e.keyCode;
- /**
- * Simulate a click when pressing space or enter,
- * allow keyboard navigation, override tab behavior
- */
- if (keyCode === KEY_SPACE || keyCode === KEY_ENTER) {
- act('choose', { choice: buttons[selected] });
- } else if (keyCode === KEY_ESCAPE) {
- act('cancel');
- } else if (keyCode === KEY_LEFT) {
- e.preventDefault();
- onKey(KEY_DECREMENT);
- } else if (keyCode === KEY_TAB || keyCode === KEY_RIGHT) {
- e.preventDefault();
- onKey(KEY_INCREMENT);
- }
- }}
- >
+
-
+
{message}
-
+
{!!autofocus && }
-
+ {isVerbose ? (
+
+ ) : (
+
+ )}
);
+}
+
+type ButtonDisplayProps = {
+ selected: number;
};
/**
* Displays a list of buttons ordered by user prefs.
- * Technically this handles more than 2 buttons, but you
- * should just be using a list input in that case.
*/
-const ButtonDisplay = (props) => {
- const { data } = useBackend();
+function HorizontalButtons(props: ButtonDisplayProps) {
+ const { act, data } = useBackend();
const { buttons = [], large_buttons, swapped_buttons } = data;
const { selected } = props;
return (
-
- {buttons?.map((button, index) =>
- !!large_buttons && buttons.length < 3 ? (
-
-
-
- ) : (
-
-
-
- ),
- )}
-
+
+ {buttons.map((button, index) => (
+
+
+
+ ))}
+
);
-};
+}
/**
- * Displays a button with variable sizing.
+ * Technically the parent handles more than 2 buttons, but you
+ * should just be using a list input in that case.
*/
-const AlertButton = (props) => {
- const { act, data } = useBackend();
- const { large_buttons } = data;
- const { button, selected } = props;
- const buttonWidth = button.length > 7 ? button.length : 7;
+function VerticalButtons(props: ButtonDisplayProps) {
+ const { act, data } = useBackend();
+ const { buttons = [], large_buttons, swapped_buttons } = data;
+ const { selected } = props;
return (
-
+ {buttons.map((button, index) => (
+
+
+
+ ))}
+
);
-};
+}
diff --git a/tgui/packages/tgui/styles/components/Stack.scss b/tgui/packages/tgui/styles/components/Stack.scss
index 02d0e8bbe24..3529c700183 100644
--- a/tgui/packages/tgui/styles/components/Stack.scss
+++ b/tgui/packages/tgui/styles/components/Stack.scss
@@ -28,6 +28,24 @@ $zebra-background-color: base.$color-bg-section !default;
}
}
+.Stack--reverse > .Stack__item {
+ margin-left: 0;
+ margin-right: 0.5em;
+
+ &:first-child {
+ margin-right: 0;
+ }
+}
+
+.Stack--reverse--vertical > .Stack__item {
+ margin-top: 0;
+ margin-bottom: 0.5em;
+
+ &:first-child {
+ margin-bottom: 0;
+ }
+}
+
.Stack--zebra > .Stack__item:nth-child(even) {
background-color: $zebra-background-color;
}