tgui-core 1.0.0

package/src/components/NumberInput.tsx

@@ -0,0 +1,328 @@
+import { KEY } from '../common/keys';
+import { clamp } from '../common/math';
+import { BooleanLike, classes } from '../common/react';
+import {
+  Component,
+  createRef,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  RefObject,
+} from 'react';
+
+import { AnimatedNumber } from './AnimatedNumber';
+import { Box } from './Box';
+
+type Props = Required<{
+  value: number | string;
+  minValue: number;
+  maxValue: number;
+  step: number;
+}> &
+  Partial<{
+    stepPixelSize: number;
+    disabled: BooleanLike;
+
+    className: string;
+    fluid: BooleanLike;
+    animated: BooleanLike;
+    unit: string;
+    height: string;
+    width: string;
+    lineHeight: string;
+    fontSize: string;
+    format: (value: number) => string;
+    onChange: (value: number) => void;
+    onDrag: (value: number) => void;
+  }>;
+
+type State = {
+  editing: BooleanLike;
+  dragging: BooleanLike;
+  currentValue: number;
+  previousValue: number;
+  origin: 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 {
+    let 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="NumberInput__content">
+        {animated && !dragging ? (
+          <AnimatedNumber value={displayValue} format={format} />
+        ) : format ? (
+          format(displayValue)
+        ) : (
+          displayValue
+        )}
+
+        {unit ? ' ' + unit : ''}
+      </div>
+    );
+
+    return (
+      <Box
+        className={classes([
+          'NumberInput',
+          fluid && 'NumberInput--fluid',
+          className,
+        ])}
+        minWidth={width}
+        minHeight={height}
+        lineHeight={lineHeight}
+        fontSize={fontSize}
+        onMouseDown={this.handleDragStart}
+      >
+        <div className="NumberInput__barContainer">
+          <div
+            className="NumberInput__bar"
+            style={{
+              height:
+                clamp(
+                  ((displayValue - minValue) / (maxValue - minValue)) * 100,
+                  0,
+                  100
+                ) + '%',
+            }}
+          />
+        </div>
+        {contentElement}
+        <input
+          ref={this.inputRef}
+          className="NumberInput__input"
+          style={{
+            display: !editing ? 'none' : 'inline',
+            height: height,
+            lineHeight: lineHeight,
+            fontSize: fontSize,
+          }}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+        />
+      </Box>
+    );
+  }
+}

package/src/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<{
+  /** Called when the user clicks outside the popper */
+  onClickOutside: () => void;
+  /** Where to place the popper relative to the reference element */
+  placement: Placement;
+  /** Base z-index of the popper div
+   * @default 5
+   */
+  baseZIndex: number;
+}>;
+
+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/src/components/ProgressBar.tsx

@@ -0,0 +1,79 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { clamp01, keyOfMatchingRange, scale, toFixed } from '../common/math';
+import { classes } from '../common/react';
+import { PropsWithChildren } from 'react';
+
+import { CSS_COLORS } from '../constants';
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+
+type Props = {
+  value: number;
+} & Partial<{
+  backgroundColor: string;
+  className: string;
+  color: string;
+  height: string | number;
+  maxValue: number;
+  minValue: number;
+  ranges: Record<string, [number, number]>;
+  style: Partial<HTMLDivElement['style']>;
+  title: string;
+  width: string | number;
+}> &
+  Partial<BoxProps> &
+  PropsWithChildren;
+
+export const 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 = ['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('ProgressBar--color--' + effectiveColor);
+  } else {
+    // Otherwise, set styles directly.
+    outerProps.style = { ...outerProps.style, borderColor: effectiveColor };
+    fillStyles['backgroundColor'] = effectiveColor;
+  }
+
+  return (
+    <div className={classes(outerClasses)} {...outerProps}>
+      <div
+        className="ProgressBar__fill ProgressBar__fill--animated"
+        style={fillStyles}
+      />
+      <div className="ProgressBar__content">
+        {hasContent ? children : toFixed(scaledValue * 100) + '%'}
+      </div>
+    </div>
+  );
+};