tgui-core 1.1.11 → 1.1.13

package/lib/components/Button.tsx

@@ -1,425 +0,0 @@
-import { Placement } from '@popperjs/core';
-import {
-  ChangeEvent,
-  createRef,
-  MouseEvent,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import { KEY } from '../common/keys';
-import { BooleanLike, classes } from '../common/react';
-import styles from '../styles/components/Button.module.scss';
-import { Box, BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-import { Icon } from './Icon';
-import { Tooltip } from './Tooltip';
-
-/**
- * Getting ellipses to work requires that you use:
- * 1. A string rather than a node
- * 2. A fixed width here or in a parent
- * 3. Children prop rather than content
- */
-type EllipsisUnion =
-  | {
-      children: string;
-      /** @deprecated use children instead */
-      content?: never;
-      /** Cuts off text with an ellipsis */
-      ellipsis: true;
-    }
-  | Partial<{
-      children: ReactNode;
-      /** @deprecated use children instead */
-      content: ReactNode;
-      ellipsis: undefined;
-    }>;
-
-type Props = Partial<{
-  /** Captures keyboard events */
-  captureKeys: boolean;
-  /** Makes the button circular */
-  circular: boolean;
-  /** Reduces the padding of the button */
-  compact: boolean;
-  /** Disables and greys out the button */
-  disabled: BooleanLike;
-  /** Fill all available horizontal space */
-  fluid: boolean;
-  /** Adds an icon to the button */
-  icon: string | false;
-  /** Icon color */
-  iconColor: string;
-  /** Icon position */
-  iconPosition: string;
-  /** Icon rotation */
-  iconRotation: number;
-  /** Makes the icon spin */
-  iconSpin: BooleanLike;
-  /** Called when element is clicked */
-  onClick: (e: any) => void;
-  /** Activates the button (gives it a green color) */
-  selected: BooleanLike;
-  /** A fancy, boxy tooltip, which appears when hovering over the button */
-  tooltip: ReactNode;
-  /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */
-  tooltipPosition: Placement;
-  /** Align content vertically using flex. Use lineHeight if the height is static. */
-  verticalAlignContent: string;
-}> &
-  EllipsisUnion &
-  BoxProps;
-
-/** Clickable button. Comes with variants. Read more in the documentation. */
-export function Button(props: Props) {
-  const {
-    captureKeys = true,
-    children,
-    circular,
-    className,
-    color,
-    compact,
-    content,
-    disabled,
-    ellipsis,
-    fluid,
-    icon,
-    iconColor,
-    iconPosition,
-    iconRotation,
-    iconSpin,
-    onClick,
-    selected,
-    tooltip,
-    tooltipPosition,
-    verticalAlignContent,
-    ...rest
-  } = props;
-
-  const toDisplay: ReactNode = content || children;
-
-  let buttonContent = (
-    <div
-      className={classes([
-        styles.button,
-        fluid && styles.fluid,
-        disabled && styles.disabled,
-        selected && styles.selected,
-        circular && styles.circular,
-        compact && styles.compact,
-        verticalAlignContent && styles.flex,
-        verticalAlignContent && fluid && styles.flex__fluid,
-        verticalAlignContent &&
-          styles['verticalAlignContent__' + verticalAlignContent],
-        color && typeof color === 'string'
-          ? styles['color__' + color]
-          : styles['color__default'],
-        className,
-        computeBoxClassName(rest),
-      ])}
-      tabIndex={!disabled ? 0 : undefined}
-      onClick={(event) => {
-        if (!disabled && onClick) {
-          onClick(event);
-        }
-      }}
-      onKeyDown={(event) => {
-        if (!captureKeys) {
-          return;
-        }
-
-        // Simulate a click when pressing space or enter.
-        if (event.key === KEY.Space || event.key === KEY.Enter) {
-          event.preventDefault();
-          if (!disabled && onClick) {
-            onClick(event);
-          }
-          return;
-        }
-
-        // Refocus layout on pressing escape.
-        if (event.key === KEY.Escape) {
-          event.preventDefault();
-        }
-      }}
-      {...computeBoxProps(rest)}
-    >
-      <div className={styles.content}>
-        {icon && iconPosition !== 'right' && (
-          <Icon
-            mr={1}
-            name={icon}
-            color={iconColor}
-            rotation={iconRotation}
-            spin={iconSpin}
-          />
-        )}
-        {!ellipsis ? (
-          toDisplay
-        ) : (
-          <span
-            className={classes([styles.ellipsis, icon && styles.textMargin])}
-          >
-            {toDisplay}
-          </span>
-        )}
-        {icon && iconPosition === 'right' && (
-          <Icon
-            ml={1}
-            name={icon}
-            color={iconColor}
-            rotation={iconRotation}
-            spin={iconSpin}
-          />
-        )}
-      </div>
-    </div>
-  );
-
-  if (tooltip) {
-    buttonContent = (
-      <Tooltip content={tooltip} position={tooltipPosition as Placement}>
-        {buttonContent}
-      </Tooltip>
-    );
-  }
-
-  return buttonContent;
-}
-
-type CheckProps = Partial<{
-  checked: BooleanLike;
-}> &
-  Props;
-
-/** Visually toggles between checked and unchecked states. */
-export function ButtonCheckbox(props: CheckProps) {
-  const { checked, ...rest } = props;
-
-  return (
-    <Button
-      color="transparent"
-      icon={checked ? 'check-square-o' : 'square-o'}
-      selected={checked}
-      {...rest}
-    />
-  );
-}
-
-Button.Checkbox = ButtonCheckbox;
-
-type ConfirmProps = Partial<{
-  confirmColor: string;
-  confirmContent: ReactNode;
-  confirmIcon: string;
-}> &
-  Props;
-
-/**  Requires user confirmation before triggering its action. */
-function ButtonConfirm(props: ConfirmProps) {
-  const {
-    children,
-    color,
-    confirmColor = 'bad',
-    confirmContent = 'Confirm?',
-    confirmIcon,
-    ellipsis = true,
-    icon,
-    onClick,
-    ...rest
-  } = props;
-  const [clickedOnce, setClickedOnce] = useState(false);
-
-  function handleClick(event: MouseEvent<HTMLDivElement>) {
-    if (!clickedOnce) {
-      setClickedOnce(true);
-      return;
-    }
-
-    onClick?.(event);
-    setClickedOnce(false);
-  }
-
-  return (
-    <Button
-      icon={clickedOnce ? confirmIcon : icon}
-      color={clickedOnce ? confirmColor : color}
-      onClick={handleClick}
-      {...rest}
-    >
-      {clickedOnce ? confirmContent : children}
-    </Button>
-  );
-}
-
-Button.Confirm = ButtonConfirm;
-
-type InputProps = Partial<{
-  currentValue: string;
-  defaultValue: string;
-  fluid: boolean;
-  maxLength: number;
-  onCommit: (e: any, value: string) => void;
-  placeholder: string;
-}> &
-  Props;
-
-/** Accepts and handles user input. */
-function ButtonInput(props: InputProps) {
-  const {
-    children,
-    color = 'default',
-    content,
-    currentValue,
-    defaultValue,
-    disabled,
-    fluid,
-    icon,
-    iconRotation,
-    iconSpin,
-    maxLength,
-    onCommit = () => null,
-    placeholder,
-    tooltip,
-    tooltipPosition,
-    ...rest
-  } = props;
-  const [inInput, setInInput] = useState(false);
-  const inputRef = createRef<HTMLInputElement>();
-
-  const toDisplay = content || children;
-
-  function commitResult(e) {
-    const input = inputRef.current;
-    if (!input) return;
-
-    const hasValue = input.value !== '';
-    if (hasValue) {
-      onCommit(e, input.value);
-    } else {
-      if (defaultValue) {
-        onCommit(e, defaultValue);
-      }
-    }
-  }
-
-  useEffect(() => {
-    const input = inputRef.current;
-    if (!input) return;
-
-    if (inInput) {
-      input.value = currentValue || '';
-      try {
-        input.focus();
-        input.select();
-      } catch {
-        // Ignore errors
-      }
-    }
-  }, [inInput, currentValue]);
-
-  let buttonContent = (
-    <Box
-      className={classes([
-        styles.button,
-        fluid && styles.fluid,
-        styles['color__' + color],
-      ])}
-      {...rest}
-      onClick={() => setInInput(true)}
-    >
-      {icon && <Icon name={icon} rotation={iconRotation} spin={iconSpin} />}
-      <div>{toDisplay}</div>
-      <input
-        disabled={!!disabled}
-        ref={inputRef}
-        className="NumberInput__input"
-        style={{
-          display: !inInput ? 'none' : '',
-          textAlign: 'left',
-        }}
-        onBlur={(event) => {
-          if (!inInput) {
-            return;
-          }
-          setInInput(false);
-          commitResult(event);
-        }}
-        onKeyDown={(event) => {
-          if (event.key === KEY.Enter) {
-            setInInput(false);
-            commitResult(event);
-            return;
-          }
-          if (event.key === KEY.Escape) {
-            setInInput(false);
-          }
-        }}
-      />
-    </Box>
-  );
-
-  if (tooltip) {
-    buttonContent = (
-      <Tooltip content={tooltip} position={tooltipPosition as Placement}>
-        {buttonContent}
-      </Tooltip>
-    );
-  }
-
-  return buttonContent;
-}
-
-Button.Input = ButtonInput;
-
-type FileProps = {
-  accept: string;
-  multiple?: boolean;
-  onSelectFiles: (files: string | string[]) => void;
-} & Props;
-
-/**  Accepts file input */
-function ButtonFile(props: FileProps) {
-  const { accept, multiple, onSelectFiles, ...rest } = props;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  async function read(files: FileList) {
-    const promises = Array.from(files).map((file) => {
-      const reader = new FileReader();
-
-      return new Promise<string>((resolve) => {
-        reader.onload = () => resolve(reader.result as string);
-        reader.readAsText(file);
-      });
-    });
-
-    return await Promise.all(promises);
-  }
-
-  async function handleChange(event: ChangeEvent<HTMLInputElement>) {
-    const files = event.target.files;
-    if (files?.length) {
-      const readFiles = await read(files);
-      onSelectFiles(multiple ? readFiles : readFiles[0]);
-    }
-  }
-
-  return (
-    <>
-      <Button onClick={() => inputRef.current?.click()} {...rest} />
-      <input
-        hidden
-        type="file"
-        ref={inputRef}
-        accept={accept}
-        multiple={multiple}
-        onChange={handleChange}
-      />
-    </>
-  );
-}
-
-Button.File = ButtonFile;

package/lib/components/ByondUi.jsx

@@ -1,110 +0,0 @@
-import { Component, createRef } from 'react';
-
-import { shallowDiffers } from '../common/react';
-import { debounce } from '../common/timer';
-import { computeBoxProps } from './Box';
-
-// Stack of currently allocated BYOND UI element ids.
-const byondUiStack = [];
-
-function createByondUiElement(elementId) {
-  // Reserve an index in the stack
-  const index = byondUiStack.length;
-  byondUiStack.push(null);
-  // Get a unique id
-  const id = elementId || 'byondui_' + index;
-  // Return a control structure
-  return {
-    render: (params) => {
-      byondUiStack[index] = id;
-      Byond.winset(id, params);
-    },
-    unmount: () => {
-      byondUiStack[index] = null;
-      Byond.winset(id, {
-        parent: '',
-      });
-    },
-  };
-}
-
-window.addEventListener('beforeunload', () => {
-  // Cleanly unmount all visible UI elements
-  for (let index = 0; index < byondUiStack.length; index++) {
-    const id = byondUiStack[index];
-    if (typeof id === 'string') {
-      byondUiStack[index] = null;
-      Byond.winset(id, {
-        parent: '',
-      });
-    }
-  }
-});
-
-/**
- * Get the bounding box of the DOM element in display-pixels.
- */
-function getBoundingBox(element) {
-  const pixelRatio = window.devicePixelRatio ?? 1;
-  const rect = element.getBoundingClientRect();
-
-  return {
-    pos: [rect.left * pixelRatio, rect.top * pixelRatio],
-    size: [
-      (rect.right - rect.left) * pixelRatio,
-      (rect.bottom - rect.top) * pixelRatio,
-    ],
-  };
-}
-
-export class ByondUi extends Component {
-  constructor(props) {
-    super(props);
-    this.containerRef = createRef();
-    this.byondUiElement = createByondUiElement(props.params?.id);
-    this.handleResize = debounce(() => {
-      this.forceUpdate();
-    }, 100);
-  }
-
-  shouldComponentUpdate(nextProps) {
-    const { params: prevParams = {}, ...prevRest } = this.props;
-    const { params: nextParams = {}, ...nextRest } = nextProps;
-    return (
-      shallowDiffers(prevParams, nextParams) ||
-      shallowDiffers(prevRest, nextRest)
-    );
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize);
-    this.componentDidUpdate();
-    this.handleResize();
-  }
-
-  componentDidUpdate() {
-    const { params = {} } = this.props;
-    const box = getBoundingBox(this.containerRef.current);
-    this.byondUiElement.render({
-      parent: Byond.windowId,
-      ...params,
-      pos: box.pos[0] + ',' + box.pos[1],
-      size: box.size[0] + 'x' + box.size[1],
-    });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-    this.byondUiElement.unmount();
-  }
-
-  render() {
-    const { params, ...rest } = this.props;
-    return (
-      <div ref={this.containerRef} {...computeBoxProps(rest)}>
-        {/* Filler */}
-        <div style={{ minHeight: '22px' }} />
-      </div>
-    );
-  }
-}

package/lib/components/Chart.tsx

@@ -1,155 +0,0 @@
-import { Component, createRef, RefObject } from 'react';
-
-import { zip } from '../common/collections';
-import { Box, BoxProps } from './Box';
-
-type Props = {
-  data: number[][];
-} & Partial<{
-  fillColor: string;
-  rangeX: [number, number];
-  rangeY: [number, number];
-  strokeColor: string;
-  strokeWidth: number;
-}> &
-  BoxProps;
-
-type State = {
-  viewBox: [number, number];
-};
-
-type Point = number[];
-type Range = [number, number];
-
-function normalizeData(
-  data: Point[],
-  scale: number[],
-  rangeX?: Range,
-  rangeY?: Range,
-) {
-  if (data.length === 0) {
-    return [];
-  }
-
-  const zipped = zip(...data);
-
-  const min = zipped.map((p) => Math.min(...p));
-  const max = zipped.map((p) => Math.max(...p));
-
-  if (rangeX !== undefined) {
-    min[0] = rangeX[0];
-    max[0] = rangeX[1];
-  }
-
-  if (rangeY !== undefined) {
-    min[1] = rangeY[0];
-    max[1] = rangeY[1];
-  }
-
-  const normalized = data.map((point) =>
-    zip(point, min, max, scale).map(
-      ([value, min, max, scale]) => ((value - min) / (max - min)) * scale,
-    ),
-  );
-
-  return normalized;
-}
-
-function dataToPolylinePoints(data) {
-  let points = '';
-  for (let i = 0; i < data.length; i++) {
-    const point = data[i];
-    points += point[0] + ',' + point[1] + ' ';
-  }
-  return points;
-}
-
-class LineChart extends Component<Props> {
-  ref: RefObject<HTMLDivElement>;
-  state: State;
-
-  constructor(props: Props) {
-    super(props);
-    this.ref = createRef();
-    this.state = {
-      // Initial guess
-      viewBox: [600, 200],
-    };
-    this.handleResize = this.handleResize.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  handleResize = () => {
-    const element = this.ref.current;
-    if (!element) {
-      return;
-    }
-    this.setState({
-      viewBox: [element.offsetWidth, element.offsetHeight],
-    });
-  };
-
-  render() {
-    const {
-      data = [],
-      rangeX,
-      rangeY,
-      fillColor = 'none',
-      strokeColor = '#ffffff',
-      strokeWidth = 2,
-      ...rest
-    } = this.props;
-    const { viewBox } = this.state;
-    const normalized = normalizeData(data, viewBox, rangeX, rangeY);
-    // Push data outside viewBox and form a fillable polygon
-    if (normalized.length > 0) {
-      const first = normalized[0];
-      const last = normalized[normalized.length - 1];
-      normalized.push([viewBox[0] + strokeWidth, last[1]]);
-      normalized.push([viewBox[0] + strokeWidth, -strokeWidth]);
-      normalized.push([-strokeWidth, -strokeWidth]);
-      normalized.push([-strokeWidth, first[1]]);
-    }
-    const points = dataToPolylinePoints(normalized);
-    const divProps = { ...rest, className: '', ref: this.ref };
-
-    return (
-      <Box position="relative" {...rest}>
-        <Box {...divProps}>
-          <svg
-            viewBox={`0 0 ${viewBox[0]} ${viewBox[1]}`}
-            preserveAspectRatio="none"
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              overflow: 'hidden',
-            }}
-          >
-            <polyline
-              transform={`scale(1, -1) translate(0, -${viewBox[1]})`}
-              fill={fillColor}
-              stroke={strokeColor}
-              strokeWidth={strokeWidth}
-              points={points}
-            />
-          </svg>
-        </Box>
-      </Box>
-    );
-  }
-}
-
-export const Chart = {
-  Line: LineChart,
-};