tgui-core 1.1.8 → 1.1.9

package/lib/components/Collapsible.tsx

@@ -0,0 +1,43 @@
+import { ReactNode, useState } from 'react';
+
+import { Box, BoxProps } from './Box';
+import { Button } from './Button';
+
+type Props = Partial<{
+  /** Buttons or other content to render inline with the button */
+  buttons: ReactNode;
+  /** Icon to display with the collapsible */
+  icon: string;
+  /** Whether the collapsible is open */
+  open: boolean;
+  /** Text to display on the button for collapsing */
+  title: ReactNode;
+}> &
+  BoxProps;
+
+export function Collapsible(props: Props) {
+  const { children, color, title, buttons, icon, ...rest } = props;
+  const [open, setOpen] = useState(props.open);
+
+  return (
+    <Box mb={1}>
+      <div className="Table">
+        <div className="Table__cell">
+          <Button
+            fluid
+            color={color}
+            icon={icon ? icon : open ? 'chevron-down' : 'chevron-right'}
+            onClick={() => setOpen(!open)}
+            {...rest}
+          >
+            {title}
+          </Button>
+        </div>
+        {buttons && (
+          <div className="Table__cell Table__cell--collapsing">{buttons}</div>
+        )}
+      </div>
+      {open && <Box mt={1}>{children}</Box>}
+    </Box>
+  );
+}

package/lib/components/ColorBox.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+import { classes } from '../common/react';
+import styles from '../styles/components/ColorBox.module.scss';
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  content?: ReactNode;
+} & BoxProps;
+
+export function ColorBox(props: Props) {
+  const { content, children, className, ...rest } = props;
+
+  rest.color = content ? null : 'default';
+  rest.backgroundColor = props.color || 'default';
+
+  return (
+    <div
+      className={classes([
+        styles.colorBox,
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...computeBoxProps(rest)}
+    >
+      {content || '.'}
+    </div>
+  );
+}

package/lib/components/Dialog.tsx

@@ -0,0 +1,81 @@
+import styles from '../styles/components/Dialog.module.scss';
+import { Box } from './Box';
+import { Button } from './Button';
+
+type DialogProps = {
+  children: any;
+  height?: string;
+  onClose: () => void;
+  title: any;
+  width?: string;
+};
+
+export function Dialog(props: DialogProps) {
+  const { title, onClose, children, width, height } = props;
+  return (
+    <div className={styles.dialog}>
+      <Box className={styles.content} width={width || '370px'} height={height}>
+        <div className={styles.header}>
+          <div className={styles.title}>{title}</div>
+          <Box mr={2}>
+            <Button
+              mr="-3px"
+              width="26px"
+              lineHeight="22px"
+              textAlign="center"
+              color="transparent"
+              icon="window-close-o"
+              tooltip="Close"
+              tooltipPosition="bottom-start"
+              onClick={onClose}
+            />
+          </Box>
+        </div>
+        {children}
+      </Box>
+    </div>
+  );
+}
+
+type DialogButtonProps = {
+  children: any;
+  onClick: () => void;
+};
+
+function DialogButton(props: DialogButtonProps) {
+  const { onClick, children } = props;
+  return (
+    <Button
+      onClick={onClick}
+      className={styles.button}
+      verticalAlignContent="middle"
+    >
+      {children}
+    </Button>
+  );
+}
+
+Dialog.Button = DialogButton;
+
+type UnsavedChangesDialogProps = {
+  documentName: string;
+  onClose: () => void;
+  onDiscard: () => void;
+  onSave: () => void;
+};
+
+export function UnsavedChangesDialog(props: UnsavedChangesDialogProps) {
+  const { documentName, onSave, onDiscard, onClose } = props;
+  return (
+    <Dialog title="Notepad" onClose={onClose}>
+      <div className={styles.body}>
+        Do you want to save changes to {documentName}?
+      </div>
+      <div className={styles.footer}>
+        <DialogButton onClick={onSave}>Save</DialogButton>
+        <DialogButton onClick={onDiscard}>Don&apos;t Save</DialogButton>
+        <DialogButton onClick={onClose}>Cancel</DialogButton>
+      </div>
+    </Dialog>
+  );
+}

package/lib/components/Dimmer.tsx

@@ -0,0 +1,13 @@
+import { classes } from '../common/react';
+import styles from '../styles/components/Dimmer.module.scss';
+import { Box, BoxProps } from './Box';
+
+export function Dimmer(props: BoxProps) {
+  const { className, children, ...rest } = props;
+
+  return (
+    <Box className={classes([styles.dimmer, className])} {...rest}>
+      <div className="Dimmer__inner">{children}</div>
+    </Box>
+  );
+}

package/lib/components/Divider.tsx

@@ -0,0 +1,20 @@
+import { classes } from '../common/react';
+import styles from '../styles/components/Divider.module.scss';
+
+type Props = Partial<{
+  hidden: boolean;
+  vertical: boolean;
+}>;
+
+export function Divider(props: Props) {
+  const { hidden, vertical } = props;
+
+  return (
+    <div
+      className={classes([
+        hidden && styles.hidden,
+        vertical ? styles.vertical : styles.horizontal,
+      ])}
+    />
+  );
+}

package/lib/components/DmIcon.tsx

@@ -0,0 +1,86 @@
+import { ReactNode, useEffect, useState } from 'react';
+
+import { resolveAsset } from '../common/assets';
+import { fetchRetry } from '../common/http';
+import { BooleanLike } from '../common/react';
+import { BoxProps } from './Box';
+import { Image } from './Image';
+
+enum Direction {
+  NORTH = 1,
+  SOUTH = 2,
+  EAST = 4,
+  WEST = 8,
+  NORTHEAST = NORTH | EAST,
+  NORTHWEST = NORTH | WEST,
+  SOUTHEAST = SOUTH | EAST,
+  SOUTHWEST = SOUTH | WEST,
+}
+
+type Props = {
+  /** Required: The path of the icon */
+  icon: string;
+  /** Required: The state of the icon */
+  icon_state: string;
+} & Partial<{
+  /** Facing direction. See direction enum. Default is South */
+  direction: Direction;
+  /** Fallback icon. */
+  fallback: ReactNode;
+  /** Frame number. Default is 1 */
+  frame: number;
+  /** Movement state. Default is false */
+  movement: BooleanLike;
+}> &
+  BoxProps;
+
+let refMap: Record<string, string> | undefined;
+
+export function DmIcon(props: Props) {
+  const {
+    className,
+    direction = Direction.SOUTH,
+    fallback,
+    frame = 1,
+    icon_state,
+    icon,
+    movement = false,
+    ...rest
+  } = props;
+
+  const [iconRef, setIconRef] = useState('');
+  const [toDisplay, setToDisplay] = useState('');
+
+  const query = `${iconRef}?state=${icon_state}&dir=${direction}&movement=${movement}&frame=${frame}`;
+
+  useEffect(() => {
+    if (refMap) {
+      setToDisplay(Object.keys(refMap).length.toString());
+      setIconRef(refMap[icon]);
+      return;
+    }
+
+    fetchRetry(resolveAsset('icon_ref_map.json'))
+      .then((response) => {
+        setToDisplay('!');
+        return response.json();
+      })
+      .then((data) => {
+        refMap = data;
+        setIconRef(data[icon]);
+        setToDisplay('!!');
+      })
+      .catch(() => {
+        // Ignore errors
+      });
+  }, []);
+
+  if (!iconRef) return fallback;
+
+  return (
+    <>
+      <Image fixErrors src={query} {...rest} />
+      {toDisplay}
+    </>
+  );
+}

package/lib/components/DraggableControl.jsx

@@ -0,0 +1,276 @@
+import { clamp } from '../common/math';
+import { Component, createRef } from 'react';
+
+import { AnimatedNumber } from './AnimatedNumber';
+
+const DEFAULT_UPDATE_RATE = 400;
+
+/**
+ * Reduces screen offset to a single number based on the matrix provided.
+ */
+function getScalarScreenOffset(e, matrix) {
+  return e.screenX * matrix[0] + e.screenY * matrix[1];
+}
+
+export class DraggableControl extends Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = createRef();
+    this.state = {
+      value: props.value,
+      dragging: false,
+      editing: false,
+      internalValue: null,
+      origin: null,
+      suppressingFlicker: false,
+    };
+
+    // Suppresses flickering while the value propagates through the backend
+    this.flickerTimer = null;
+    this.suppressFlicker = () => {
+      const { suppressFlicker } = this.props;
+      if (suppressFlicker > 0) {
+        this.setState({
+          suppressingFlicker: true,
+        });
+        clearTimeout(this.flickerTimer);
+        this.flickerTimer = setTimeout(() => {
+          this.setState({
+            suppressingFlicker: false,
+          });
+        }, suppressFlicker);
+      }
+    };
+
+    this.handleDragStart = (e) => {
+      const { value, dragMatrix } = this.props;
+      const { editing } = this.state;
+      if (editing) {
+        return;
+      }
+      document.body.style['pointer-events'] = 'none';
+      this.ref = e.target;
+      this.setState({
+        dragging: false,
+        origin: getScalarScreenOffset(e, dragMatrix),
+        value,
+        internalValue: value,
+      });
+      this.timer = setTimeout(() => {
+        this.setState({
+          dragging: true,
+        });
+      }, 250);
+      this.dragInterval = setInterval(() => {
+        const { dragging, value } = this.state;
+        const { onDrag } = this.props;
+        if (dragging && onDrag) {
+          onDrag(e, value);
+        }
+      }, this.props.updateRate || DEFAULT_UPDATE_RATE);
+      document.addEventListener('mousemove', this.handleDragMove);
+      document.addEventListener('mouseup', this.handleDragEnd);
+    };
+
+    this.handleDragMove = (e) => {
+      const { minValue, maxValue, step, stepPixelSize, dragMatrix } =
+        this.props;
+      this.setState((prevState) => {
+        const state = { ...prevState };
+        const offset = getScalarScreenOffset(e, dragMatrix) - state.origin;
+        if (prevState.dragging) {
+          const stepOffset = Number.isFinite(minValue) ? minValue % step : 0;
+          // Translate mouse movement to value
+          // Give it some headroom (by increasing clamp range by 1 step)
+          state.internalValue = clamp(
+            state.internalValue + (offset * step) / stepPixelSize,
+            minValue - step,
+            maxValue + step,
+          );
+          // Clamp the final value
+          state.value = clamp(
+            state.internalValue - (state.internalValue % step) + stepOffset,
+            minValue,
+            maxValue,
+          );
+          state.origin = getScalarScreenOffset(e, dragMatrix);
+        } else if (Math.abs(offset) > 4) {
+          state.dragging = true;
+        }
+        return state;
+      });
+    };
+
+    this.handleDragEnd = (e) => {
+      const { onChange, onDrag } = this.props;
+      const { dragging, value, internalValue } = this.state;
+      document.body.style['pointer-events'] = 'auto';
+      clearTimeout(this.timer);
+      clearInterval(this.dragInterval);
+      this.setState({
+        dragging: false,
+        editing: !dragging,
+        origin: null,
+      });
+      document.removeEventListener('mousemove', this.handleDragMove);
+      document.removeEventListener('mouseup', this.handleDragEnd);
+      if (dragging) {
+        this.suppressFlicker();
+        if (onChange) {
+          onChange(e, value);
+        }
+        if (onDrag) {
+          onDrag(e, value);
+        }
+      } else if (this.inputRef) {
+        const input = this.inputRef.current;
+        input.value = internalValue;
+        // IE8: Dies when trying to focus a hidden element
+        // (Error: Object does not support this action)
+        try {
+          input.focus();
+          input.select();
+        } catch {}
+      }
+    };
+  }
+
+  render() {
+    const {
+      dragging,
+      editing,
+      value: intermediateValue,
+      suppressingFlicker,
+    } = this.state;
+    const {
+      animated,
+      value,
+      unit,
+      minValue,
+      maxValue,
+      unclamped,
+      format,
+      onChange,
+      onDrag,
+      children,
+      // Input props
+      height,
+      lineHeight,
+      fontSize,
+    } = this.props;
+    let displayValue = value;
+    if (dragging || suppressingFlicker) {
+      displayValue = intermediateValue;
+    }
+
+    const displayElement = (
+      <>
+        {animated && !dragging && !suppressingFlicker ? (
+          <AnimatedNumber value={displayValue} format={format} />
+        ) : format ? (
+          format(displayValue)
+        ) : (
+          displayValue
+        )}
+
+        {unit ? ' ' + unit : ''}
+      </>
+    );
+
+    // Setup an input element
+    // Handles direct input via the keyboard
+    const inputElement = (
+      <input
+        ref={this.inputRef}
+        className="NumberInput__input"
+        style={{
+          display: !editing ? 'none' : undefined,
+          height: height,
+          lineHeight: lineHeight,
+          fontsize: fontSize,
+        }}
+        onBlur={(e) => {
+          if (!editing) {
+            return;
+          }
+          let value;
+          if (unclamped) {
+            value = parseFloat(e.target.value);
+          } else {
+            value = clamp(parseFloat(e.target.value), minValue, maxValue);
+          }
+          if (Number.isNaN(value)) {
+            this.setState({
+              editing: false,
+            });
+            return;
+          }
+          this.setState({
+            editing: false,
+            value,
+          });
+          this.suppressFlicker();
+          if (onChange) {
+            onChange(e, value);
+          }
+          if (onDrag) {
+            onDrag(e, value);
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.keyCode === 13) {
+            let value;
+            if (unclamped) {
+              value = parseFloat(e.target.value);
+            } else {
+              value = clamp(parseFloat(e.target.value), minValue, maxValue);
+            }
+            if (Number.isNaN(value)) {
+              this.setState({
+                editing: false,
+              });
+              return;
+            }
+            this.setState({
+              editing: false,
+              value,
+            });
+            this.suppressFlicker();
+            if (onChange) {
+              onChange(e, value);
+            }
+            if (onDrag) {
+              onDrag(e, value);
+            }
+            return;
+          }
+          if (e.keyCode === 27) {
+            this.setState({
+              editing: false,
+            });
+            return;
+          }
+        }}
+      />
+    );
+    // Return a part of the state for higher-level components to use.
+    return children({
+      dragging,
+      editing,
+      value,
+      displayValue,
+      displayElement,
+      inputElement,
+      handleDragStart: this.handleDragStart,
+    });
+  }
+}
+
+DraggableControl.defaultProps = {
+  minValue: -Infinity,
+  maxValue: +Infinity,
+  step: 1,
+  stepPixelSize: 1,
+  suppressFlicker: 50,
+  dragMatrix: [1, 0],
+};