tgui-core 1.1.7 → 1.1.9

package/lib/components/Dropdown.tsx

@@ -0,0 +1,246 @@
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+import { classes } from '../common/react';
+import { BoxProps, unit } from './Box';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Popper } from './Popper';
+
+export type DropdownEntry = {
+  displayText: ReactNode;
+  value: string | number;
+};
+
+type DropdownOption = string | DropdownEntry;
+
+type Props = {
+  /** Called when a value is picked from the list, `value` is the value that was picked */
+  onSelected: (value: any) => void;
+  /** An array of strings which will be displayed in the
+  dropdown when open. See Dropdown.tsx for more advanced usage with DropdownEntry */
+  options: DropdownOption[];
+  /** Currently selected entry to display. Can be left stateless to permanently display this value. */
+  selected: DropdownOption | null | undefined;
+} & Partial<{
+  /** Whether to scroll automatically on open. Defaults to true */
+  autoScroll: boolean;
+  /** Whether to display previous / next buttons */
+  buttons: boolean;
+  /** Whether to clip the selected text */
+  clipSelectedText: boolean;
+  /** Color of dropdown button */
+  color: string;
+  /** Disables the dropdown */
+  disabled: boolean;
+  /** Overwrites selection text with this. Good for objects etc. */
+  displayText: ReactNode;
+  /** Icon to display in dropdown button */
+  icon: string;
+  /** Angle of the icon */
+  iconRotation: number;
+  /** Whether or not the icon should spin */
+  iconSpin: boolean;
+  /** Width of the dropdown menu. Default: 15rem */
+  menuWidth: string;
+  /** Whether or not the arrow on the right hand side of the dropdown button is visible */
+  noChevron: boolean;
+  /** Called when dropdown button is clicked */
+  onClick: (event) => void;
+  /** Dropdown renders over instead of below */
+  over: boolean;
+  /** Text to show when nothing has been selected. */
+  placeholder: string;
+}> &
+  BoxProps;
+
+enum DIRECTION {
+  Current = 'current',
+  Next = 'next',
+  Previous = 'previous',
+}
+
+const NONE = -1;
+
+function getOptionValue(option: DropdownOption) {
+  return typeof option === 'string' ? option : option.value;
+}
+
+export function Dropdown(props: Props) {
+  const {
+    autoScroll = true,
+    buttons,
+    className,
+    clipSelectedText = true,
+    color = 'default',
+    disabled,
+    displayText,
+    icon,
+    iconRotation,
+    iconSpin,
+    menuWidth = '15rem',
+    noChevron,
+    onClick,
+    onSelected,
+    options = [],
+    over,
+    placeholder = 'Select...',
+    selected,
+    width = '15rem',
+  } = props;
+
+  const [open, setOpen] = useState(false);
+  const adjustedOpen = over ? !open : open;
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  const selectedIndex =
+    options.findIndex((option) => getOptionValue(option) === selected) || 0;
+
+  function scrollTo(position: number) {
+    let scrollPos = position;
+    if (position < selectedIndex) {
+      scrollPos = position < 2 ? 0 : position - 2;
+    } else {
+      scrollPos =
+        position > options.length - 3 ? options.length - 1 : position - 2;
+    }
+
+    const element = innerRef.current?.children[scrollPos];
+    element?.scrollIntoView({ block: 'nearest' });
+  }
+
+  /** Update the selected value when clicking the left/right buttons */
+  function updateSelected(direction: DIRECTION) {
+    if (options.length < 1 || disabled) {
+      return;
+    }
+
+    const startIndex = 0;
+    const endIndex = options.length - 1;
+
+    let newIndex: number;
+    if (selectedIndex < 0) {
+      newIndex = direction === 'next' ? endIndex : startIndex; // No selection yet
+    } else if (direction === 'next') {
+      newIndex = selectedIndex === endIndex ? startIndex : selectedIndex + 1; // Move to next option
+    } else {
+      newIndex = selectedIndex === startIndex ? endIndex : selectedIndex - 1; // Move to previous option
+    }
+
+    if (open && autoScroll) {
+      scrollTo(newIndex);
+    }
+    onSelected?.(getOptionValue(options[newIndex]));
+  }
+
+  /** Allows the menu to be scrollable on open */
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    if (autoScroll && selectedIndex !== NONE) {
+      scrollTo(selectedIndex);
+    }
+
+    innerRef.current?.focus();
+  }, [open]);
+
+  return (
+    <Popper
+      isOpen={open}
+      onClickOutside={() => setOpen(false)}
+      placement={over ? 'top-start' : 'bottom-start'}
+      content={
+        <div
+          className="Layout Dropdown__menu"
+          style={{ minWidth: menuWidth }}
+          ref={innerRef}
+        >
+          {options.length === 0 && (
+            <div className="Dropdown__menuentry">No options</div>
+          )}
+
+          {options.map((option, index) => {
+            const value = getOptionValue(option);
+
+            return (
+              <div
+                className={classes([
+                  'Dropdown__menuentry',
+                  selected === value && 'selected',
+                ])}
+                key={index}
+                onClick={() => {
+                  setOpen(false);
+                  onSelected?.(value);
+                }}
+              >
+                {typeof option === 'string' ? option : option.displayText}
+              </div>
+            );
+          })}
+        </div>
+      }
+    >
+      <div className="Dropdown" style={{ width: unit(width) }}>
+        <div
+          className={classes([
+            'Dropdown__control',
+            'Button',
+            'Button--dropdown',
+            'Button--color--' + color,
+            disabled && 'Button--disabled',
+            className,
+          ])}
+          onClick={(event) => {
+            if (disabled && !open) {
+              return;
+            }
+            setOpen(!open);
+            onClick?.(event);
+          }}
+        >
+          {icon && (
+            <Icon mr={1} name={icon} rotation={iconRotation} spin={iconSpin} />
+          )}
+          <span
+            className="Dropdown__selected-text"
+            style={{
+              overflow: clipSelectedText ? 'hidden' : 'visible',
+            }}
+          >
+            {displayText ||
+              (selected && getOptionValue(selected)) ||
+              placeholder}
+          </span>
+          {!noChevron && (
+            <span className="Dropdown__arrow-button">
+              <Icon name={adjustedOpen ? 'chevron-up' : 'chevron-down'} />
+            </span>
+          )}
+        </div>
+        {buttons && (
+          <>
+            <Button
+              disabled={disabled}
+              height={1.8}
+              icon="chevron-left"
+              onClick={() => {
+                updateSelected(DIRECTION.Previous);
+              }}
+            />
+
+            <Button
+              disabled={disabled}
+              height={1.8}
+              icon="chevron-right"
+              onClick={() => {
+                updateSelected(DIRECTION.Next);
+              }}
+            />
+          </>
+        )}
+      </div>
+    </Popper>
+  );
+}

package/lib/components/FakeTerminal.jsx

@@ -0,0 +1,52 @@
+import { Component, Fragment } from 'react';
+
+import { Box } from './Box';
+
+export class FakeTerminal extends Component {
+  constructor(props) {
+    super(props);
+    this.timer = null;
+    this.state = {
+      currentIndex: 0,
+      currentDisplay: [],
+    };
+  }
+
+  tick() {
+    const { props, state } = this;
+    if (state.currentIndex <= props.allMessages.length) {
+      this.setState((prevState) => {
+        return {
+          currentIndex: prevState.currentIndex + 1,
+        };
+      });
+      const { currentDisplay } = state;
+      currentDisplay.push(props.allMessages[state.currentIndex]);
+    } else {
+      clearTimeout(this.timer);
+      setTimeout(props.onFinished, props.finishedTimeout);
+    }
+  }
+
+  componentDidMount() {
+    const { linesPerSecond = 2.5 } = this.props;
+    this.timer = setInterval(() => this.tick(), 1000 / linesPerSecond);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    return (
+      <Box m={1}>
+        {this.state.currentDisplay.map((value) => (
+          <Fragment key={value}>
+            {value}
+            <br />
+          </Fragment>
+        ))}
+      </Box>
+    );
+  }
+}

package/lib/components/FitText.tsx

@@ -0,0 +1,99 @@
+import {
+  Component,
+  createRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  RefObject,
+} from 'react';
+
+const DEFAULT_ACCEPTABLE_DIFFERENCE = 5;
+
+type Props = {
+  acceptableDifference?: number;
+  maxFontSize: number;
+  maxWidth: number;
+  native?: HTMLAttributes<HTMLDivElement>;
+} & PropsWithChildren;
+
+type State = {
+  fontSize: number;
+};
+
+export class FitText extends Component<Props, State> {
+  ref: RefObject<HTMLDivElement> = createRef();
+  state: State = {
+    fontSize: 0,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.resize = this.resize.bind(this);
+
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.children !== this.props.children) {
+      this.resize();
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize() {
+    const element = this.ref.current;
+    if (!element) {
+      return;
+    }
+
+    const maxWidth = this.props.maxWidth;
+
+    let start = 0;
+    let end = this.props.maxFontSize;
+
+    for (let _ = 0; _ < 10; _++) {
+      const middle = Math.round((start + end) / 2);
+      element.style.fontSize = `${middle}px`;
+
+      const difference = element.offsetWidth - maxWidth;
+
+      if (difference > 0) {
+        end = middle;
+      } else if (
+        difference <
+        (this.props.acceptableDifference ?? DEFAULT_ACCEPTABLE_DIFFERENCE)
+      ) {
+        start = middle;
+      } else {
+        break;
+      }
+    }
+
+    this.setState({
+      fontSize: Math.round((start + end) / 2),
+    });
+  }
+
+  componentDidMount() {
+    this.resize();
+  }
+
+  render() {
+    return (
+      <span
+        ref={this.ref}
+        style={{
+          fontSize: `${this.state.fontSize}px`,
+          ...(typeof this.props.native?.style === 'object'
+            ? this.props.native.style
+            : {}),
+        }}
+      >
+        {this.props.children}
+      </span>
+    );
+  }
+}

package/lib/components/Flex.tsx

@@ -0,0 +1,159 @@
+import { classes } from '../common/react';
+import styles from '../styles/components/Flex.module.scss';
+import { BoxProps, computeBoxClassName, computeBoxProps, unit } from './Box';
+
+export type FlexProps = Partial<{
+  /**
+   * Default alignment of all children.
+   *
+   * - `stretch` (default) - stretch to fill the container.
+   * - `start` - items are placed at the start of the cross axis.
+   * - `end` - items are placed at the end of the cross axis.
+   * - `center` - items are centered on the cross axis.
+   * - `baseline` - items are aligned such as their baselines align.
+   */
+  align: string | boolean;
+  /**
+   * This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
+   *
+   *  - `row` (default) - left to right.
+   *  - `row-reverse` - right to left.
+   *  - `column` - top to bottom.
+   *  - `column-reverse` - bottom to top.
+   */
+  direction: string;
+  /** Makes flexbox container inline, with similar behavior to an `inline` property on a `Box`. */
+  inline: boolean;
+  /**
+   * This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are
+   * inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow
+   * the line.
+   *
+   *   - `flex-start` (default) - items are packed toward the start of the
+   *  flex-direction.
+   * - `flex-end` - items are packed toward the end of the flex-direction.
+   * - `space-between` - items are evenly distributed in the line; first item is
+   *   on the start line, last item on the end line
+   * - `space-around` - items are evenly distributed in the line with equal space
+   *   around them. Note that visually the spaces aren't equal, since all the items
+   *   have equal space on both sides. The first item will have one unit of space
+   *   against the container edge, but two units of space between the next item
+   *  because that next item has its own spacing that applies.
+   *  - `space-evenly` - items are distributed so that the spacing between any two
+   *  items (and the space to the edges) is equal.
+   */
+  justify: string;
+  /** By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. */
+  scrollable: boolean;
+  /**
+   * This defines the alignment along the cross axis. It helps distribute extra free space leftover when either all the flex items on a line are
+   *  inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow
+   *  the line.
+   *
+   *  - `nowrap` (default) - all flex items will be on one line
+   *  - `wrap` - flex items will wrap onto multiple lines, from top to bottom.
+   *  - `wrap-reverse` - flex items will wrap onto multiple lines from bottom to top.
+   */
+  wrap: string | boolean;
+}> &
+  BoxProps;
+
+export function computeFlexClassName(props: FlexProps) {
+  return classes([
+    styles.flex,
+    props.inline && styles.inline,
+    computeBoxClassName(props),
+  ]);
+}
+
+export function computeFlexProps(props: FlexProps) {
+  const { direction, wrap, align, justify, ...rest } = props;
+
+  return computeBoxProps({
+    style: {
+      ...rest.style,
+      flexDirection: direction,
+      flexWrap: wrap === true ? 'wrap' : wrap,
+      alignItems: align,
+      justifyContent: justify,
+    },
+    ...rest,
+  });
+}
+
+export function Flex(props) {
+  const { className, ...rest } = props;
+  return (
+    <div
+      className={classes([className, computeFlexClassName(rest)])}
+      {...computeFlexProps(rest)}
+    />
+  );
+}
+
+export type FlexItemProps = Partial<{
+  /** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
+  align: string | boolean;
+  /**
+   * This defines the default size of an element
+   * before any flex-related calculations are done. Has to be a length
+   * (e.g. `20%`, `5rem`), an `auto` or `content` keyword.
+   *
+   * - **Important:** IE11 flex is buggy, and auto width/height calculations
+   * can sometimes end up in a circular dependency. This usually happens, when
+   * working with tables inside flex (they have wacky internal widths and such).
+   * Setting basis to `0` breaks the loop and fixes all of the problems.
+   */
+  basis: string | number;
+  /**
+   * This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion.
+   * It dictates what amount of the available space inside the flex container the item should take up.
+   * This number is unit-less and is relative to other siblings.
+   */
+  grow: number | boolean;
+  /**
+   * By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the
+   * flex container
+   */
+  order: number;
+  /** This defines the ability for a flex item to shrink if necessary. Inverse of `grow`. */
+  shrink: number | boolean;
+}> &
+  BoxProps;
+
+export function computeFlexItemProps(props: FlexItemProps) {
+  const { style, grow, order, shrink, basis, align, ...rest } = props;
+
+  const computedBasis =
+    basis ??
+    // IE11: Set basis to specified width if it's known, which fixes certain
+    // bugs when rendering tables inside the flex.
+    props.width ??
+    // If grow is used, basis should be set to 0 to be consistent with
+    // flex css shorthand `flex: 1`.
+    (grow !== undefined ? 0 : undefined);
+
+  return computeBoxProps({
+    style: {
+      ...style,
+      flexGrow: grow !== undefined && Number(grow),
+      flexShrink: shrink !== undefined && Number(shrink),
+      flexBasis: unit(computedBasis),
+      order: order,
+      alignSelf: align,
+    },
+    ...rest,
+  });
+}
+
+function FlexItem(props) {
+  const { className, ...rest } = props;
+  return (
+    <div
+      className={classes([className, computeBoxClassName(props)])}
+      {...computeFlexItemProps(rest)}
+    />
+  );
+}
+
+Flex.Item = FlexItem;

package/lib/components/Icon.tsx

@@ -0,0 +1,95 @@
+import { CSSProperties, ReactNode } from 'react';
+
+import { BooleanLike, classes } from '../common/react';
+import style from '../styles/components/Icon.module.scss';
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  /** Icon name. See [icon list](https://fontawesome.com/v5/search?o=r&m=free) */
+  name: string;
+} & Partial<{
+  /** Custom CSS class. */
+  className: string;
+  /** Icon rotation, in degrees. */
+  rotation: number;
+  /** Icon size. `1` is normal size, `2` is two times bigger. Fractional numbers are supported. */
+  size: number;
+  /** Whether an icon should be spinning. Good for load indicators. */
+  spin: BooleanLike;
+  /** Custom CSS. */
+  style: CSSProperties;
+}> &
+  BoxProps;
+
+const FA_OUTLINE_REGEX = /-o$/;
+
+export function Icon(props: Props) {
+  const { name, size, spin, className, rotation, ...rest } = props;
+
+  const customStyle = rest.style || {};
+  if (size) {
+    customStyle.fontSize = size * 100 + '%';
+  }
+  if (rotation) {
+    customStyle.transform = `rotate(${rotation}deg)`;
+  }
+  rest.style = customStyle;
+
+  const boxProps = computeBoxProps(rest);
+
+  let iconClass = '';
+  if (name.startsWith('tg-')) {
+    // tgfont icon
+    iconClass = name;
+  } else {
+    // font awesome icon
+    const faRegular = FA_OUTLINE_REGEX.test(name);
+    const faName = name.replace(FA_OUTLINE_REGEX, '');
+    const preprendFa = !faName.startsWith('fa-');
+
+    iconClass = faRegular ? 'far ' : 'fas ';
+    if (preprendFa) {
+      iconClass += 'fa-';
+    }
+    iconClass += faName;
+    if (spin) {
+      iconClass += ' fa-spin';
+    }
+  }
+  return (
+    <i
+      className={classes([
+        style.icon,
+        iconClass,
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...boxProps}
+    />
+  );
+}
+
+type IconStackUnique = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type IconStackProps = IconStackUnique & BoxProps;
+
+export function IconStack(props: IconStackProps) {
+  const { className, children, ...rest } = props;
+  return (
+    <span
+      className={classes([
+        style.iconStack,
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...computeBoxProps(rest)}
+    >
+      {children}
+    </span>
+  );
+}
+
+Icon.Stack = IconStack;

package/lib/components/Image.tsx

@@ -0,0 +1,54 @@
+import { useRef } from 'react';
+
+import { BoxProps, computeBoxProps } from './Box';
+
+type Props = Partial<{
+  className: string;
+  /** True is default, this fixes an ie thing */
+  fixBlur: boolean;
+  /** False by default. Good if you're fetching images on UIs that do not auto update. This will attempt to fix the 'x' icon 5 times. */
+  fixErrors: boolean;
+  /** Fill is default. */
+  objectFit: 'contain' | 'cover';
+  src: string;
+}> &
+  BoxProps;
+
+// at least one of these is required
+
+const maxAttempts = 5;
+
+export function Image(props: Props) {
+  const {
+    fixBlur = true,
+    fixErrors = false,
+    objectFit = 'fill',
+    src,
+    ...rest
+  } = props;
+  const attempts = useRef(0);
+
+  const computedProps = computeBoxProps(rest);
+  computedProps['style'] = {
+    ...computedProps.style,
+    '-ms-interpolation-mode': fixBlur ? 'nearest-neighbor' : 'auto',
+    objectFit,
+  };
+
+  return (
+    <img
+      onError={(event) => {
+        if (fixErrors && attempts.current < maxAttempts) {
+          const imgElement = event.currentTarget;
+
+          setTimeout(() => {
+            imgElement.src = `${src}?attempt=${attempts.current}`;
+            attempts.current++;
+          }, 1000);
+        }
+      }}
+      src={src}
+      {...computedProps}
+    />
+  );
+}