tgui-core 1.1.11 → 1.1.13

package/lib/components/Slider.tsx

@@ -1,169 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { clamp01, keyOfMatchingRange, scale } from '../common/math';
-import { classes } from '../common/react';
-import progStyles from '../styles/components/ProgressBar.module.scss';
-import styles from '../styles/components/Slider.module.scss';
-import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-import { DraggableControl } from './DraggableControl';
-
-type Props = {
-  /** Highest possible value. */
-  maxValue: number;
-  /** Lowest possible value. */
-  minValue: number;
-  /** Value itself, controls the position of the cursor. */
-  value: number;
-} & Partial<{
-  /** Animates the value if it was changed externally. */
-  animated: boolean;
-  /** Custom css */
-  className: string;
-  /** Color of the slider. */
-  color: string;
-  /** If set, this value will be used to set the fill percentage of the progress bar filler independently of the main value. */
-  fillValue: number;
-  /** Format value using this function before displaying it. */
-  format: (value: number) => string;
-  /** Adjust value by this amount when dragging the input. */
-  onChange: (event: Event, value: number) => void;
-  /** An event, which fires when you release the input, or successfully enter a number. */
-  onDrag: (event: Event, value: number) => void;
-  /** Applies a `color` to the slider based on whether the value lands in the range between `from` and `to`. */
-  ranges: Record<string, [number, number]>;
-  /** Screen distance mouse needs to travel to adjust value by one `step`. */
-  step: number;
-  /** A number in milliseconds, for which the input will hold off from updating while events propagate through the backend. Default is about 250ms, increase it if you still see flickering. */
-  stepPixelSize: number;
-  /** Adjust value by this amount when dragging the input. */
-  suppressFlicker: boolean;
-  /** Unit to display to the right of value. */
-  unit: string;
-}> &
-  BoxProps &
-  PropsWithChildren;
-
-/**
- * ## Slider
- * A horizontal, progressbar-like control which allows dialing
- * in precise values by dragging it left and right.
- *
- * Single click opens an input box to manually type in a number.
- *
- */
-export function Slider(props: Props) {
-  const {
-    // Draggable props (passthrough)
-    animated,
-    format,
-    maxValue,
-    minValue,
-    onChange,
-    onDrag,
-    step,
-    stepPixelSize,
-    suppressFlicker,
-    unit,
-    value,
-    // Own props
-    className,
-    fillValue,
-    color,
-    ranges = {},
-    children,
-    ...rest
-  } = props;
-
-  const hasContent = children !== undefined;
-
-  return (
-    <DraggableControl
-      dragMatrix={[1, 0]}
-      {...{
-        animated,
-        format,
-        maxValue,
-        minValue,
-        onChange,
-        onDrag,
-        step,
-        stepPixelSize,
-        suppressFlicker,
-        unit,
-        value,
-      }}
-    >
-      {(control) => {
-        const {
-          displayElement,
-          displayValue,
-          dragging,
-          handleDragStart,
-          inputElement,
-          value,
-        } = control;
-
-        const hasFillValue = fillValue !== undefined && fillValue !== null;
-
-        const scaledFillValue = scale(
-          fillValue ?? displayValue,
-          minValue,
-          maxValue,
-        );
-        const scaledDisplayValue = scale(displayValue, minValue, maxValue);
-
-        const effectiveColor =
-          color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
-
-        return (
-          <div
-            className={classes([
-              styles.slider,
-              progStyles.progressBar,
-              progStyles['color__' + effectiveColor],
-              className,
-              computeBoxClassName(rest),
-            ])}
-            {...computeBoxProps(rest)}
-            onMouseDown={handleDragStart}
-          >
-            <div
-              className={classes([
-                progStyles.fill,
-                hasFillValue && progStyles.fill__animated,
-              ])}
-              style={{
-                width: clamp01(scaledFillValue) * 100 + '%',
-                opacity: 0.4,
-              }}
-            />
-            <div
-              className={progStyles.fill}
-              style={{
-                width:
-                  clamp01(Math.min(scaledFillValue, scaledDisplayValue)) * 100 +
-                  '%',
-              }}
-            />
-            <div
-              className={styles.cursorOffset}
-              style={{
-                width: clamp01(scaledDisplayValue) * 100 + '%',
-              }}
-            >
-              <div className={styles.cursor} />
-              <div className={styles.pointer} />
-              {dragging && (
-                <div className={styles.popupValue}>{displayElement}</div>
-              )}
-            </div>
-            <div className={progStyles.content}>
-              {hasContent ? children : displayElement}
-            </div>
-            {inputElement}
-          </div>
-        );
-      }}
-    </DraggableControl>
-  );
-}

package/lib/components/Stack.tsx

@@ -1,96 +0,0 @@
-/**
- * @file
- * @copyright 2021 Aleksej Komarov
- * @license MIT
- */
-import { RefObject } from 'react';
-
-import { classes } from '../common/react';
-import styles from '../styles/components/Stack.module.scss';
-import { computeBoxClassName } from './Box';
-import {
-  computeFlexClassName,
-  computeFlexItemProps,
-  computeFlexProps,
-  FlexItemProps,
-  FlexProps,
-} from './Flex';
-
-type Props = Partial<{
-  /** Fills available space. */
-  fill: boolean;
-  /** Reverses the stack. */
-  reverse: boolean;
-  /** Flex column */
-  vertical: boolean;
-  /** Adds zebra striping to the stack. */
-  zebra: boolean;
-}> &
-  FlexProps;
-
-export function Stack(props: Props) {
-  const { className, vertical, fill, reverse, zebra, ...rest } = props;
-
-  const directionPrefix = vertical ? 'column' : 'row';
-  const directionSuffix = reverse ? '-reverse' : '';
-
-  return (
-    <div
-      className={classes([
-        fill && styles.fill,
-        vertical ? styles.vertical : styles.horizontal,
-        zebra && styles.zebra,
-        reverse && styles[`reverse${vertical ? '__vertical' : ''}`],
-        className,
-        computeFlexClassName(props),
-      ])}
-      {...computeFlexProps({
-        direction: `${directionPrefix}${directionSuffix}`,
-        ...rest,
-      })}
-    />
-  );
-}
-
-type StackItemProps = FlexItemProps &
-  Partial<{
-    innerRef: RefObject<HTMLDivElement>;
-  }>;
-
-function StackItem(props: StackItemProps) {
-  const { className, innerRef, ...rest } = props;
-
-  return (
-    <div
-      className={classes([styles.item, className, computeBoxClassName(rest)])}
-      ref={innerRef}
-      {...computeFlexItemProps(rest)}
-    />
-  );
-}
-
-Stack.Item = StackItem;
-
-type StackDividerProps = FlexItemProps &
-  Partial<{
-    hidden: boolean;
-  }>;
-
-function StackDivider(props: StackDividerProps) {
-  const { className, hidden, ...rest } = props;
-
-  return (
-    <div
-      className={classes([
-        styles.item,
-        styles.divider,
-        hidden && styles.divider__hidden,
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeFlexItemProps(rest)}
-    />
-  );
-}
-
-Stack.Divider = StackDivider;

package/lib/components/StyleableSection.tsx

@@ -1,33 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-
-import styles from '../styles/components/Section.module.scss';
-import { Box } from './Box';
-
-type Props = Partial<{
-  style: Record<string, any>;
-  textStyle: Record<string, any>;
-  title: ReactNode;
-  titleStyle: Record<string, any>;
-  titleSubtext: string;
-}> &
-  PropsWithChildren;
-
-// The cost of flexibility and prettiness.
-export function StyleableSection(props: Props) {
-  const { children, titleStyle, titleSubtext, title, textStyle, style } = props;
-
-  return (
-    <Box style={style}>
-      {/* Yes, this box (line above) is missing the "Section" class. This is very intentional, as the layout looks *ugly* with it.*/}
-      <Box className={styles.title} style={titleStyle}>
-        <Box className={styles.titleText} style={textStyle}>
-          {title}
-        </Box>
-        <div className={styles.buttons}>{titleSubtext}</div>
-      </Box>
-      <Box className={styles.rest}>
-        <Box className={styles.content}>{children}</Box>
-      </Box>
-    </Box>
-  );
-}

package/lib/components/Table.tsx

@@ -1,84 +0,0 @@
-import { classes } from '../common/react';
-import styles from '../styles/components/Table.module.scss';
-import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-
-type Props = Partial<{
-  /** Collapses table to the smallest possible size. */
-  collapsing: boolean;
-}> &
-  BoxProps;
-
-export function Table(props: Props) {
-  const { className, collapsing, children, ...rest } = props;
-
-  return (
-    <table
-      className={classes([
-        styles.table,
-        collapsing && styles.collapsing,
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeBoxProps(rest)}
-    >
-      <tbody>{children}</tbody>
-    </table>
-  );
-}
-
-type RowProps = Partial<{
-  /** Whether this is a header cell. */
-  header: boolean;
-}> &
-  BoxProps;
-
-export function TableRow(props: RowProps) {
-  const { className, header, ...rest } = props;
-
-  return (
-    <tr
-      className={classes([
-        styles.row,
-        header && styles.row__header,
-        className,
-        computeBoxClassName(props),
-      ])}
-      {...computeBoxProps(rest)}
-    />
-  );
-}
-
-Table.Row = TableRow;
-
-type CellProps = Partial<{
-  /** Additional columns for this cell to expand, assuming there is room. */
-  colSpan: number;
-  /** Collapses table cell to the smallest possible size,
-  and stops any text inside from wrapping. */
-  collapsing: boolean;
-  /** Whether this is a header cell. */
-  header: boolean;
-  /** Rows for this cell to expand, assuming there is room. */
-  rowSpan: number;
-}> &
-  BoxProps;
-
-export function TableCell(props: CellProps) {
-  const { className, collapsing, colSpan, header, ...rest } = props;
-
-  return (
-    <td
-      className={classes([
-        styles.cell,
-        collapsing && styles.cell__collapsing,
-        header && styles.cell__header,
-        className,
-        computeBoxClassName(props),
-      ])}
-      colSpan={colSpan}
-      {...computeBoxProps(rest)}
-    />
-  );
-}
-
-Table.Cell = TableCell;

package/lib/components/Tabs.tsx

@@ -1,89 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-
-import { canRender, classes } from '../common/react';
-import styles from '../styles/components/Tabs.module.scss';
-import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
-import { Icon } from './Icon';
-
-type Props = Partial<{
-  className: string;
-  fill: boolean;
-  fluid: boolean;
-  vertical: boolean;
-}> &
-  BoxProps &
-  PropsWithChildren;
-
-type TabProps = Partial<{
-  className: string;
-  color: string;
-  icon: string;
-  leftSlot: ReactNode;
-  onClick: (e?) => void;
-  rightSlot: ReactNode;
-  selected: boolean;
-}> &
-  BoxProps &
-  PropsWithChildren;
-
-export function Tabs(props: Props) {
-  const { className, vertical, fill, fluid, children, ...rest } = props;
-
-  return (
-    <div
-      className={classes([
-        styles.tabs,
-        vertical ? styles.vertical : styles.horizontal,
-        fill && styles.fill,
-        fluid && styles.fluid,
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeBoxProps(rest)}
-    >
-      {children}
-    </div>
-  );
-}
-
-function Tab(props: TabProps) {
-  const {
-    className,
-    selected,
-    color,
-    icon,
-    leftSlot,
-    rightSlot,
-    children,
-    ...rest
-  } = props;
-
-  return (
-    <div
-      className={classes([
-        styles.tab,
-        styles.tabs__tab,
-        styles['color__' + color],
-        selected && styles.selected,
-        className,
-        computeBoxClassName(rest),
-      ])}
-      {...computeBoxProps(rest)}
-    >
-      {(canRender(leftSlot) && (
-        <div className={styles.tab__left}>{leftSlot}</div>
-      )) ||
-        (!!icon && (
-          <div className={styles.tab__left}>
-            <Icon name={icon} />
-          </div>
-        ))}
-      <div className={styles.tab__text}>{children}</div>
-      {canRender(rightSlot) && (
-        <div className={styles.tab__right}>{rightSlot}</div>
-      )}
-    </div>
-  );
-}
-
-Tabs.Tab = Tab;

package/lib/components/TextArea.tsx

@@ -1,182 +0,0 @@
-import {
-  forwardRef,
-  RefObject,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import { KeyboardEvent, SyntheticEvent } from 'react';
-
-import { KEY } from '../common/keys';
-import { classes } from '../common/react';
-import styles from '../styles/components/TextArea.module.scss';
-import { Box, BoxProps } from './Box';
-import { toInputValue } from './Input';
-
-type Props = Partial<{
-  autoFocus: boolean;
-  autoSelect: boolean;
-  displayedValue: string;
-  dontUseTabForIndent: boolean;
-  fluid: boolean;
-  maxLength: number;
-  noborder: boolean;
-  /** Fires when user is 'done typing': Clicked out, blur, enter key (but not shift+enter) */
-  onChange: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-  /** Fires once the enter key is pressed */
-  onEnter: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-  /** Fires once the escape key is pressed */
-  onEscape: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
-  /** Fires on each key press / value change. Used for searching */
-  onInput: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-  placeholder: string;
-  scrollbar: boolean;
-  selfClear: boolean;
-  value: string;
-}> &
-  BoxProps;
-
-export const TextArea = forwardRef(
-  (props: Props, forwardedRef: RefObject<HTMLTextAreaElement>) => {
-    const {
-      autoFocus,
-      autoSelect,
-      displayedValue,
-      dontUseTabForIndent,
-      maxLength,
-      noborder,
-      onChange,
-      onEnter,
-      onEscape,
-      onInput,
-      placeholder,
-      scrollbar,
-      selfClear,
-      value,
-      ...boxProps
-    } = props;
-    const { className, fluid, nowrap, ...rest } = boxProps;
-
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const [scrolledAmount, setScrolledAmount] = useState(0);
-
-    function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
-      if (event.key === KEY.Enter) {
-        if (event.shiftKey) {
-          event.currentTarget.focus();
-          return;
-        }
-
-        onEnter?.(event, event.currentTarget.value);
-        if (selfClear) {
-          event.currentTarget.value = '';
-        }
-        event.currentTarget.blur();
-        return;
-      }
-
-      if (event.key === KEY.Escape) {
-        onEscape?.(event);
-        if (selfClear) {
-          event.currentTarget.value = '';
-        } else {
-          event.currentTarget.value = toInputValue(value);
-          event.currentTarget.blur();
-        }
-
-        return;
-      }
-
-      if (!dontUseTabForIndent && event.key === KEY.Tab) {
-        event.preventDefault();
-        const { value, selectionStart, selectionEnd } = event.currentTarget;
-        event.currentTarget.value =
-          value.substring(0, selectionStart) +
-          '\t' +
-          value.substring(selectionEnd);
-        event.currentTarget.selectionEnd = selectionStart + 1;
-      }
-    }
-
-    useImperativeHandle(
-      forwardedRef,
-      () => textareaRef.current as HTMLTextAreaElement,
-    );
-
-    /** Focuses the input on mount */
-    useEffect(() => {
-      if (!autoFocus && !autoSelect) return;
-
-      const input = textareaRef.current;
-      if (!input) return;
-
-      if (autoFocus || autoSelect) {
-        setTimeout(() => {
-          input.focus();
-
-          if (autoSelect) {
-            input.select();
-          }
-        }, 1);
-      }
-    }, []);
-
-    /** Updates the initial value on props change */
-    useEffect(() => {
-      const input = textareaRef.current;
-      if (!input) return;
-
-      const newValue = toInputValue(value);
-      if (input.value === newValue) return;
-
-      input.value = newValue;
-    }, [value]);
-
-    return (
-      <Box
-        className={classes([
-          styles.textArea,
-          fluid && styles.fluid,
-          noborder && styles.noborder,
-          className,
-        ])}
-        {...rest}
-      >
-        {!!displayedValue && (
-          <div className={styles.wrapper}>
-            <div
-              className={classes([styles.inner, styles.custom])}
-              style={{
-                transform: `translateY(-${scrolledAmount}px)`,
-              }}
-            >
-              {displayedValue}
-            </div>
-          </div>
-        )}
-        <textarea
-          className={classes([
-            styles.inner,
-            scrollbar && styles.scrollable,
-            nowrap && styles.nowrap,
-          ])}
-          maxLength={maxLength}
-          onBlur={(event) => onChange?.(event, event.target.value)}
-          onChange={(event) => onInput?.(event, event.target.value)}
-          onKeyDown={handleKeyDown}
-          onScroll={() => {
-            if (displayedValue && textareaRef.current) {
-              setScrolledAmount(textareaRef.current.scrollTop);
-            }
-          }}
-          placeholder={placeholder}
-          ref={textareaRef}
-          style={{
-            color: displayedValue ? 'rgba(0, 0, 0, 0)' : 'inherit',
-          }}
-        />
-      </Box>
-    );
-  },
-);