tgui-core 1.1.11 → 1.1.13

package/lib/components/Collapsible.tsx

@@ -1,43 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,276 +0,0 @@
-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],
-};