tgui-core 1.1.11 → 1.1.13

package/lib/components/NumberInput.tsx

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

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

@@ -1,105 +0,0 @@
-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>
-  );
-}