tgui-core 1.0.0

package/src/components/Flex.tsx

@@ -0,0 +1,105 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps, unit } from './Box';
+
+export type FlexProps = Partial<{
+  align: string | boolean;
+  direction: string;
+  inline: boolean;
+  justify: string;
+  scrollable: boolean;
+  style: Partial<HTMLDivElement['style']>;
+  wrap: string | boolean;
+}> &
+  BoxProps;
+
+export const computeFlexClassName = (props: FlexProps) => {
+  return classes([
+    'Flex',
+    props.inline && 'Flex--inline',
+    computeBoxClassName(props),
+  ]);
+};
+
+export const computeFlexProps = (props: FlexProps) => {
+  const { className, direction, wrap, align, justify, inline, ...rest } = props;
+
+  return computeBoxProps({
+    style: {
+      ...rest.style,
+      flexDirection: direction,
+      flexWrap: wrap === true ? 'wrap' : wrap,
+      alignItems: align,
+      justifyContent: justify,
+    },
+    ...rest,
+  });
+};
+
+export const Flex = (props) => {
+  const { className, ...rest } = props;
+  return (
+    <div
+      className={classes([className, computeFlexClassName(rest)])}
+      {...computeFlexProps(rest)}
+    />
+  );
+};
+
+export type FlexItemProps = BoxProps &
+  Partial<{
+    grow: number | boolean;
+    order: number;
+    shrink: number | boolean;
+    basis: string | number;
+    align: string | boolean;
+    style: Partial<HTMLDivElement['style']>;
+  }>;
+
+export const computeFlexItemClassName = (props: FlexItemProps) => {
+  return classes(['Flex__item', computeBoxClassName(props)]);
+};
+
+export const computeFlexItemProps = (props: FlexItemProps) => {
+  const { className, 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,
+  });
+};
+
+const FlexItem = (props) => {
+  const { className, ...rest } = props;
+  return (
+    <div
+      className={classes([className, computeFlexItemClassName(props)])}
+      {...computeFlexItemProps(rest)}
+    />
+  );
+};
+
+Flex.Item = FlexItem;

package/src/components/Grid.tsx

@@ -0,0 +1,44 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { PropsWithChildren } from 'react';
+
+import { logger } from '../logging';
+import { BoxProps } from './Box';
+import { Table } from './Table';
+
+/** @deprecated Do not use. Use stack instead. */
+export function Grid(props: PropsWithChildren<BoxProps>) {
+  const { children, ...rest } = props;
+  logger.error('Grid component is deprecated. Use a Stack instead.');
+  return (
+    <Table {...rest}>
+      <Table.Row>{children}</Table.Row>
+    </Table>
+  );
+}
+
+type Props = Partial<{
+  /** Width of the column in percentage. */
+  size: number;
+}> &
+  BoxProps;
+
+/** @deprecated Do not use. Use stack instead. */
+export function GridColumn(props: Props) {
+  const { size = 1, style, ...rest } = props;
+  return (
+    <Table.Cell
+      style={{
+        width: size + '%',
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+}
+
+Grid.Column = GridColumn;

package/src/components/Icon.tsx

@@ -0,0 +1,91 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @author Original Aleksej Komarov
+ * @author Changes ThePotato97
+ * @license MIT
+ */
+
+import { BooleanLike, classes } from '../common/react';
+import { ReactNode } from 'react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+const FA_OUTLINE_REGEX = /-o$/;
+
+type IconPropsUnique = { name: string } & Partial<{
+  size: number;
+  spin: BooleanLike;
+  className: string;
+  rotation: number;
+  style: Partial<HTMLDivElement['style']>;
+}>;
+
+export type IconProps = IconPropsUnique & BoxProps;
+
+export const Icon = (props: IconProps) => {
+  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([
+        'Icon',
+        iconClass,
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...boxProps}
+    />
+  );
+};
+
+type IconStackUnique = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type IconStackProps = IconStackUnique & BoxProps;
+
+export const IconStack = (props: IconStackProps) => {
+  const { className, children, ...rest } = props;
+  return (
+    <span
+      className={classes(['IconStack', className, computeBoxClassName(rest)])}
+      {...computeBoxProps(rest)}
+    >
+      {children}
+    </span>
+  );
+};
+
+Icon.Stack = IconStack;

package/src/components/Image.tsx

@@ -0,0 +1,63 @@
+import { useRef } from 'react';
+
+import { BoxProps, computeBoxProps } from './Box';
+
+type Props = Partial<{
+  /** 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';
+}> &
+  IconUnion &
+  BoxProps;
+
+// at least one of these is required
+type IconUnion =
+  | {
+      className?: string;
+      src: string;
+    }
+  | {
+      className: string;
+      src?: string;
+    };
+
+const maxAttempts = 5;
+
+/** Image component. Use this instead of Box as="img". */
+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}
+    />
+  );
+}

package/src/components/InfinitePlane.jsx

@@ -0,0 +1,192 @@
+import { Component } from 'react';
+
+import { computeBoxProps } from './Box';
+import { Button } from './Button';
+import { ProgressBar } from './ProgressBar';
+import { Stack } from './Stack';
+
+const ZOOM_MIN_VAL = 0.5;
+const ZOOM_MAX_VAL = 1.5;
+
+const ZOOM_INCREMENT = 0.1;
+
+export class InfinitePlane extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      mouseDown: false,
+
+      left: 0,
+      top: 0,
+
+      lastLeft: 0,
+      lastTop: 0,
+
+      zoom: 1,
+    };
+
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleZoomIncrease = this.handleZoomIncrease.bind(this);
+    this.handleZoomDecrease = this.handleZoomDecrease.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+
+    this.doOffsetMouse = this.doOffsetMouse.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener('mouseup', this.onMouseUp);
+
+    window.addEventListener('mousedown', this.doOffsetMouse);
+    window.addEventListener('mousemove', this.doOffsetMouse);
+    window.addEventListener('mouseup', this.doOffsetMouse);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.onMouseUp);
+
+    window.removeEventListener('mousedown', this.doOffsetMouse);
+    window.removeEventListener('mousemove', this.doOffsetMouse);
+    window.removeEventListener('mouseup', this.doOffsetMouse);
+  }
+
+  doOffsetMouse(event) {
+    const { zoom } = this.state;
+    event.screenZoomX = event.screenX * Math.pow(zoom, -1);
+    event.screenZoomY = event.screenY * Math.pow(zoom, -1);
+  }
+
+  handleMouseDown(event) {
+    this.setState((state) => {
+      return {
+        mouseDown: true,
+        lastLeft: event.clientX - state.left,
+        lastTop: event.clientY - state.top,
+      };
+    });
+  }
+
+  onMouseUp() {
+    this.setState({
+      mouseDown: false,
+    });
+  }
+
+  handleZoomIncrease(event) {
+    const { onZoomChange } = this.props;
+    const { zoom } = this.state;
+    const newZoomValue = Math.min(zoom + ZOOM_INCREMENT, ZOOM_MAX_VAL);
+    this.setState({
+      zoom: newZoomValue,
+    });
+    if (onZoomChange) {
+      onZoomChange(newZoomValue);
+    }
+  }
+
+  handleZoomDecrease(event) {
+    const { onZoomChange } = this.props;
+    const { zoom } = this.state;
+    const newZoomValue = Math.max(zoom - ZOOM_INCREMENT, ZOOM_MIN_VAL);
+    this.setState({
+      zoom: newZoomValue,
+    });
+
+    if (onZoomChange) {
+      onZoomChange(newZoomValue);
+    }
+  }
+
+  handleMouseMove(event) {
+    const { onBackgroundMoved, initialLeft = 0, initialTop = 0 } = this.props;
+    if (this.state.mouseDown) {
+      let newX, newY;
+      this.setState((state) => {
+        newX = event.clientX - state.lastLeft;
+        newY = event.clientY - state.lastTop;
+        return {
+          left: newX,
+          top: newY,
+        };
+      });
+      if (onBackgroundMoved) {
+        onBackgroundMoved(newX + initialLeft, newY + initialTop);
+      }
+    }
+  }
+
+  render() {
+    const {
+      children,
+      backgroundImage,
+      imageWidth,
+      initialLeft = 0,
+      initialTop = 0,
+      ...rest
+    } = this.props;
+    const { left, top, zoom } = this.state;
+
+    const finalLeft = initialLeft + left;
+    const finalTop = initialTop + top;
+
+    return (
+      <div
+        ref={this.ref}
+        {...computeBoxProps({
+          ...rest,
+          style: {
+            ...rest.style,
+            overflow: 'hidden',
+            position: 'relative',
+          },
+        })}
+      >
+        <div
+          onMouseDown={this.handleMouseDown}
+          onMouseMove={this.handleMouseMove}
+          style={{
+            position: 'fixed',
+            height: '100%',
+            width: '100%',
+            backgroundImage: `url("${backgroundImage}")`,
+            backgroundPosition: `${finalLeft}px ${finalTop}px`,
+            backgroundRepeat: 'repeat',
+            backgroundSize: `${zoom * imageWidth}px`,
+          }}
+        />
+        <div
+          onMouseDown={this.handleMouseDown}
+          onMouseMove={this.handleMouseMove}
+          style={{
+            position: 'fixed',
+            transform: `translate(${finalLeft}px, ${finalTop}px) scale(${zoom})`,
+            transformOrigin: 'top left',
+            height: '100%',
+            width: '100%',
+          }}
+        >
+          {children}
+        </div>
+
+        <Stack position="absolute" width="100%">
+          <Stack.Item>
+            <Button icon="minus" onClick={this.handleZoomDecrease} />
+          </Stack.Item>
+          <Stack.Item grow={1}>
+            <ProgressBar
+              minValue={ZOOM_MIN_VAL}
+              value={zoom}
+              maxValue={ZOOM_MAX_VAL}
+            >
+              {zoom}x
+            </ProgressBar>
+          </Stack.Item>
+          <Stack.Item>
+            <Button icon="plus" onClick={this.handleZoomIncrease} />
+          </Stack.Item>
+        </Stack>
+      </div>
+    );
+  }
+}

package/src/components/Input.tsx

@@ -0,0 +1,181 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { KEY } from '../common/keys';
+import { classes } from '../common/react';
+import { debounce } from '../common/timer';
+import { KeyboardEvent, SyntheticEvent, useEffect, useRef } from 'react';
+
+import { Box, BoxProps } from './Box';
+
+type ConditionalProps =
+  | {
+      /**
+       * Mark this if you want to debounce onInput.
+       *
+       * This is useful for expensive filters, large lists etc.
+       *
+       * Requires `onInput` to be set.
+       */
+      expensive?: boolean;
+      /**
+       * Fires on each key press / value change. Used for searching.
+       *
+       * If it's a large list, consider using `expensive` prop.
+       */
+      onInput: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+    }
+  | {
+      /** This prop requires onInput to be set */
+      expensive?: never;
+      onInput?: never;
+    };
+
+type OptionalProps = Partial<{
+  /** Automatically focuses the input on mount */
+  autoFocus: boolean;
+  /** Automatically selects the input value on focus */
+  autoSelect: boolean;
+  /** The class name of the input */
+  className: string;
+  /** Disables the input */
+  disabled: boolean;
+  /** Mark this if you want the input to be as wide as possible */
+  fluid: boolean;
+  /** The maximum length of the input value */
+  maxLength: number;
+  /** Mark this if you want to use a monospace font */
+  monospace: boolean;
+  /** Fires when user is 'done typing': Clicked out, blur, enter key */
+  onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+  /** Fires once the enter key is pressed */
+  onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+  /** Fires once the escape key is pressed */
+  onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
+  /** The placeholder text when everything is cleared */
+  placeholder: string;
+  /** Clears the input value on enter */
+  selfClear: boolean;
+  /** The state variable of the input. */
+  value: string | number;
+}>;
+
+type Props = OptionalProps & ConditionalProps & BoxProps;
+
+export function toInputValue(value: string | number | undefined) {
+  return typeof value !== 'number' && typeof value !== 'string'
+    ? ''
+    : String(value);
+}
+
+const inputDebounce = debounce((onInput: () => void) => onInput(), 250);
+
+/**
+ * ### Input
+ * A basic text input which allow users to enter text into a UI.
+ * > Input does not support custom font size and height due to the way
+ * > it's implemented in CSS. Eventually, this needs to be fixed.
+ */
+export function Input(props: Props) {
+  const {
+    autoFocus,
+    autoSelect,
+    className,
+    disabled,
+    expensive,
+    fluid,
+    maxLength,
+    monospace,
+    onChange,
+    onEnter,
+    onEscape,
+    onInput,
+    placeholder,
+    selfClear,
+    value,
+    ...rest
+  } = props;
+
+  // The ref to the input field
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function handleInput(event: SyntheticEvent<HTMLInputElement>) {
+    if (!onInput) return;
+
+    const value = event.currentTarget?.value;
+
+    if (expensive) {
+      inputDebounce(() => onInput(event, value));
+    } else {
+      onInput(event, value);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === KEY.Enter) {
+      onEnter?.(event, event.currentTarget.value);
+      if (selfClear) {
+        event.currentTarget.value = '';
+      } else {
+        event.currentTarget.blur();
+        onChange?.(event, event.currentTarget.value);
+      }
+
+      return;
+    }
+
+    if (event.key === KEY.Escape) {
+      onEscape?.(event);
+
+      event.currentTarget.value = toInputValue(value);
+      event.currentTarget.blur();
+    }
+  }
+
+  /** Focuses the input on mount */
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    const newValue = toInputValue(value);
+
+    if (input.value !== newValue) input.value = newValue;
+
+    if (!autoFocus && !autoSelect) return;
+
+    setTimeout(() => {
+      input.focus();
+
+      if (autoSelect) {
+        input.select();
+      }
+    }, 1);
+  }, []);
+
+  return (
+    <Box
+      className={classes([
+        'Input',
+        fluid && 'Input--fluid',
+        monospace && 'Input--monospace',
+        className,
+      ])}
+      {...rest}
+    >
+      <div className="Input__baseline">.</div>
+      <input
+        className="Input__input"
+        disabled={disabled}
+        maxLength={maxLength}
+        onBlur={(event) => onChange?.(event, event.target.value)}
+        onChange={handleInput}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        ref={inputRef}
+      />
+    </Box>
+  );
+}

package/src/components/KeyListener.tsx

@@ -0,0 +1,40 @@
+import { Component } from 'react';
+
+import { KeyEvent } from '../events';
+import { listenForKeyEvents } from '../hotkeys';
+
+type KeyListenerProps = Partial<{
+  onKey: (key: KeyEvent) => void;
+  onKeyDown: (key: KeyEvent) => void;
+  onKeyUp: (key: KeyEvent) => void;
+}>;
+
+export class KeyListener extends Component<KeyListenerProps> {
+  dispose: () => void;
+
+  constructor(props) {
+    super(props);
+
+    this.dispose = listenForKeyEvents((key) => {
+      if (this.props.onKey) {
+        this.props.onKey(key);
+      }
+
+      if (key.isDown() && this.props.onKeyDown) {
+        this.props.onKeyDown(key);
+      }
+
+      if (key.isUp() && this.props.onKeyUp) {
+        this.props.onKeyUp(key);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.dispose();
+  }
+
+  render() {
+    return null;
+  }
+}