tgui-core 1.1.8 → 1.1.10

package/lib/components/NumberInput.tsx

@@ -0,0 +1,328 @@
+import {
+  Component,
+  createRef,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  RefObject,
+} from 'react';
+
+import { KEY } from '../common/keys';
+import { clamp } from '../common/math';
+import { BooleanLike, classes } from '../common/react';
+import styles from '../styles/components/NumberInput.module.scss';
+import { AnimatedNumber } from './AnimatedNumber';
+import { Box } from './Box';
+
+type Props = Required<{
+  maxValue: number;
+  minValue: number;
+  step: number;
+  value: number | string;
+}> &
+  Partial<{
+    animated: BooleanLike;
+    className: string;
+    disabled: BooleanLike;
+    fluid: BooleanLike;
+    fontSize: string;
+    format: (value: number) => string;
+    height: string;
+    lineHeight: string;
+    onChange: (value: number) => void;
+    onDrag: (value: number) => void;
+    stepPixelSize: number;
+    unit: string;
+    width: string;
+  }>;
+
+type State = {
+  currentValue: number;
+  dragging: BooleanLike;
+  editing: BooleanLike;
+  origin: number;
+  previousValue: number;
+};
+
+export class NumberInput extends Component<Props, State> {
+  // Ref to the input field to set focus & highlight
+  inputRef: RefObject<HTMLInputElement> = createRef();
+
+  // After this time has elapsed we are in drag mode so no editing when dragging ends
+  dragTimeout: NodeJS.Timeout;
+
+  // Call onDrag at this interval
+  dragInterval: NodeJS.Timeout;
+
+  // default values for the number input state
+  state: State = {
+    editing: false,
+    dragging: false,
+    currentValue: 0,
+    previousValue: 0,
+    origin: 0,
+  };
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  componentDidMount(): void {
+    const displayValue = parseFloat(this.props.value.toString());
+
+    this.setState({
+      currentValue: displayValue,
+      previousValue: displayValue,
+    });
+  }
+
+  handleDragStart: MouseEventHandler<HTMLDivElement> = (event) => {
+    const { value, disabled } = this.props;
+    const { editing } = this.state;
+    if (disabled || editing) {
+      return;
+    }
+    document.body.style['pointer-events'] = 'none';
+
+    const parsedValue = parseFloat(value.toString());
+    this.setState({
+      dragging: false,
+      origin: event.screenY,
+      currentValue: parsedValue,
+      previousValue: parsedValue,
+    });
+
+    this.dragTimeout = setTimeout(() => {
+      this.setState({
+        dragging: true,
+      });
+    }, 250);
+    this.dragInterval = setInterval(() => {
+      const { dragging, currentValue, previousValue } = this.state;
+      const { onDrag } = this.props;
+      if (dragging && currentValue !== previousValue) {
+        this.setState({
+          previousValue: currentValue,
+        });
+        onDrag?.(currentValue);
+      }
+    }, 400);
+
+    document.addEventListener('mousemove', this.handleDragMove);
+    document.addEventListener('mouseup', this.handleDragEnd);
+  };
+
+  handleDragMove = (event: MouseEvent) => {
+    const { minValue, maxValue, step, stepPixelSize, disabled } = this.props;
+    if (disabled) {
+      return;
+    }
+
+    this.setState((prevState) => {
+      const state = { ...prevState };
+
+      const offset = state.origin - event.screenY;
+      if (prevState.dragging) {
+        const stepOffset = isFinite(minValue) ? minValue % step : 0;
+        // Translate mouse movement to value
+        // Give it some headroom (by increasing clamp range by 1 step)
+        state.currentValue = clamp(
+          state.currentValue + (offset * step) / (stepPixelSize || 1),
+          minValue - step,
+          maxValue + step,
+        );
+        // Clamp the final value
+        state.currentValue = clamp(
+          state.currentValue - (state.currentValue % step) + stepOffset,
+          minValue,
+          maxValue,
+        );
+        // Set the new origin
+        state.origin = event.screenY;
+      } else if (Math.abs(offset) > 4) {
+        state.dragging = true;
+      }
+      return state;
+    });
+  };
+
+  handleDragEnd = (_event: MouseEvent) => {
+    const { dragging, currentValue } = this.state;
+    const { onDrag, onChange, disabled } = this.props;
+    if (disabled) {
+      return;
+    }
+    document.body.style['pointer-events'] = 'auto';
+
+    clearInterval(this.dragInterval);
+    clearTimeout(this.dragTimeout);
+
+    this.setState({
+      dragging: false,
+      editing: !dragging,
+      previousValue: currentValue,
+    });
+    if (dragging) {
+      onChange?.(currentValue);
+      onDrag?.(currentValue);
+    } else if (this.inputRef) {
+      const input = this.inputRef.current;
+      if (input) {
+        input.value = `${currentValue}`;
+        setTimeout(() => {
+          input.focus();
+          input.select();
+        }, 1);
+      }
+    }
+
+    document.removeEventListener('mousemove', this.handleDragMove);
+    document.removeEventListener('mouseup', this.handleDragEnd);
+  };
+
+  handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    const { editing, previousValue } = this.state;
+    const { minValue, maxValue, onChange, onDrag, disabled } = this.props;
+    if (disabled || !editing) {
+      return;
+    }
+
+    const targetValue = clamp(
+      parseFloat(event.target.value),
+      minValue,
+      maxValue,
+    );
+    if (isNaN(targetValue)) {
+      this.setState({
+        editing: false,
+      });
+      return;
+    }
+
+    this.setState({
+      editing: false,
+      currentValue: targetValue,
+      previousValue: targetValue,
+    });
+    if (previousValue !== targetValue) {
+      onChange?.(targetValue);
+      onDrag?.(targetValue);
+    }
+  };
+
+  handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    const { minValue, maxValue, onChange, onDrag, disabled } = this.props;
+    if (disabled) {
+      return;
+    }
+    const { previousValue } = this.state;
+
+    if (event.key === KEY.Enter) {
+      const targetValue = clamp(
+        parseFloat(event.currentTarget.value),
+        minValue,
+        maxValue,
+      );
+      if (isNaN(targetValue)) {
+        this.setState({
+          editing: false,
+        });
+        return;
+      }
+
+      this.setState({
+        editing: false,
+        currentValue: targetValue,
+        previousValue: targetValue,
+      });
+      if (previousValue !== targetValue) {
+        onChange?.(targetValue);
+        onDrag?.(targetValue);
+      }
+    } else if (event.key === KEY.Escape) {
+      this.setState({
+        editing: false,
+      });
+    }
+  };
+
+  render() {
+    const { dragging, editing, currentValue } = this.state;
+
+    const {
+      className,
+      fluid,
+      animated,
+      unit,
+      value,
+      minValue,
+      maxValue,
+      height,
+      width,
+      lineHeight,
+      fontSize,
+      format,
+    } = this.props;
+
+    let displayValue = parseFloat(value.toString());
+    if (dragging) {
+      displayValue = currentValue;
+    }
+
+    const contentElement = (
+      <div className={styles.content}>
+        {animated && !dragging ? (
+          <AnimatedNumber value={displayValue} format={format} />
+        ) : format ? (
+          format(displayValue)
+        ) : (
+          displayValue
+        )}
+
+        {unit ? ' ' + unit : ''}
+      </div>
+    );
+
+    return (
+      <Box
+        className={classes([
+          styles.numberInput,
+          fluid && styles.fluid,
+          className,
+        ])}
+        minWidth={width}
+        minHeight={height}
+        lineHeight={lineHeight}
+        fontSize={fontSize}
+        onMouseDown={this.handleDragStart}
+      >
+        <div className={styles.barContainer}>
+          <div
+            className={styles.bar}
+            style={{
+              height:
+                clamp(
+                  ((displayValue - minValue) / (maxValue - minValue)) * 100,
+                  0,
+                  100,
+                ) + '%',
+            }}
+          />
+        </div>
+        {contentElement}
+        <input
+          ref={this.inputRef}
+          className={styles.inner}
+          style={{
+            display: !editing ? 'none' : 'inline',
+            height: height,
+            lineHeight: lineHeight,
+            fontSize: fontSize,
+          }}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+        />
+      </Box>
+    );
+  }
+}

package/lib/components/Popper.tsx

@@ -0,0 +1,100 @@
+import { Placement } from '@popperjs/core';
+import {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { usePopper } from 'react-popper';
+
+type RequiredProps = {
+  /** The content to display in the popper */
+  content: ReactNode;
+  /** Whether the popper is open */
+  isOpen: boolean;
+};
+
+type OptionalProps = Partial<{
+  /** Base z-index of the popper div
+   * @default 5
+   */
+  baseZIndex: number;
+  /** Called when the user clicks outside the popper */
+  onClickOutside: () => void;
+  /** Where to place the popper relative to the reference element */
+  placement: Placement;
+}>;
+
+type Props = RequiredProps & OptionalProps;
+
+/**
+ * ## Popper
+ *  Popper lets you position elements so that they don't go out of the bounds of the window.
+ * @url https://popper.js.org/react-popper/ for more information.
+ */
+export function Popper(props: PropsWithChildren<Props>) {
+  const { children, content, isOpen, onClickOutside, placement } = props;
+
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  // One would imagine we could just use useref here, but it's against react-popper documentation and causes a positioning bug
+  // We still need them to call focus and clickoutside events :(
+  const popperRef = useRef<HTMLDivElement | null>(null);
+  const parentRef = useRef<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement,
+  });
+
+  /** Close the popper when the user clicks outside */
+  function handleClickOutside(event: MouseEvent) {
+    if (
+      !popperRef.current?.contains(event.target as Node) &&
+      !parentRef.current?.contains(event.target as Node)
+    ) {
+      onClickOutside?.();
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      <div
+        ref={(node) => {
+          setReferenceElement(node);
+          parentRef.current = node;
+        }}
+      >
+        {children}
+      </div>
+      {isOpen && (
+        <div
+          ref={(node) => {
+            setPopperElement(node);
+            popperRef.current = node;
+          }}
+          style={{ ...styles.popper, zIndex: props.baseZIndex ?? 5 }}
+          {...attributes.popper}
+        >
+          {content}
+        </div>
+      )}
+    </>
+  );
+}

package/lib/components/ProgressBar.tsx

@@ -0,0 +1,105 @@
+import { PropsWithChildren } from 'react';
+
+import { CSS_COLORS } from '../common/constants';
+import { clamp01, keyOfMatchingRange, scale, toFixed } from '../common/math';
+import { classes } from '../common/react';
+import styles from '../styles/components/ProgressBar.module.scss';
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  /**
+   * Current progress as a floating point number between `minValue` (default: 0) and `maxValue` (default: 1).
+   * Determines the percentage and how filled the bar is.
+   */
+  value: number;
+} & Partial<{
+  /**
+   * Color of the progress bar. Can take any of the following formats:
+   * - `#ffffff` - Hex format
+   * - `rgb(r,g,b) / rgba(r,g,b,a)` - RGB format
+   * - `<name>` - the name of a `color-<name>` CSS class. See `CSS_COLORS` in `constants.js`.
+   * - `<name>` - the name of a base CSS color, if not overridden by the definitions above.
+   */
+  color: string;
+  /** Highest possible value. */
+  maxValue: number;
+  /** Lowest possible value. */
+  minValue: number;
+  /**
+   * Applies a `color` to the progress bar based on whether the value lands in the range between `from` and `to`.
+   * This takes an object with the following format:
+   * ```tsx
+   * {
+   *   (colorname): [from, to]
+   * }
+   * ```
+   * For example:
+   * ```tsx
+   * <ProgressBar
+   *   value={0.5}
+   *   ranges={{
+   *     bad: [0, 0.5],
+   *     good: [0.5, 1],
+   *   }}
+   * />
+   * ```
+   *
+   */
+  ranges: Record<string, [number, number]>;
+}> &
+  BoxProps &
+  PropsWithChildren;
+
+export function ProgressBar(props: Props) {
+  const {
+    className,
+    value,
+    minValue = 0,
+    maxValue = 1,
+    color,
+    ranges = {},
+    children,
+    ...rest
+  } = props;
+  const scaledValue = scale(value, minValue, maxValue);
+  const hasContent = children !== undefined;
+
+  const effectiveColor =
+    color || keyOfMatchingRange(value, ranges) || 'default';
+
+  // We permit colors to be in hex format, rgb()/rgba() format,
+  // a name for a color-<name> class, or a base CSS class.
+  const outerProps = computeBoxProps(rest);
+
+  const outerClasses = [
+    styles.progressBar,
+    className,
+    computeBoxClassName(rest),
+  ];
+  const fillStyles = {
+    width: clamp01(scaledValue) * 100 + '%',
+  };
+  if (
+    CSS_COLORS.includes(effectiveColor as any) ||
+    effectiveColor === 'default'
+  ) {
+    // If the color is a color-<name> class, just use that.
+    outerClasses.push(styles['color__' + effectiveColor]);
+  } else {
+    // Otherwise, set styles directly.
+    outerProps.style = { ...outerProps.style, borderColor: effectiveColor };
+    fillStyles['backgroundColor'] = effectiveColor;
+  }
+
+  return (
+    <div className={classes(outerClasses)} {...outerProps}>
+      <div
+        className={classes([styles.fill, styles.fill__animated])}
+        style={fillStyles}
+      />
+      <div className={styles.content}>
+        {hasContent ? children : toFixed(scaledValue * 100) + '%'}
+      </div>
+    </div>
+  );
+}