tgui-core 1.0.0

package/src/components/Slider.tsx

@@ -0,0 +1,173 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { clamp01, keyOfMatchingRange, scale } from '../common/math';
+import { classes } from '../common/react';
+import { PropsWithChildren } from 'react';
+
+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([
+              'Slider',
+              'ProgressBar',
+              'ProgressBar--color--' + effectiveColor,
+              className,
+              computeBoxClassName(rest),
+            ])}
+            {...computeBoxProps(rest)}
+            onMouseDown={handleDragStart}
+          >
+            <div
+              className={classes([
+                'ProgressBar__fill',
+                hasFillValue && 'ProgressBar__fill--animated',
+              ])}
+              style={{
+                width: clamp01(scaledFillValue) * 100 + '%',
+                opacity: 0.4,
+              }}
+            />
+            <div
+              className="ProgressBar__fill"
+              style={{
+                width:
+                  clamp01(Math.min(scaledFillValue, scaledDisplayValue)) * 100 +
+                  '%',
+              }}
+            />
+            <div
+              className="Slider__cursorOffset"
+              style={{
+                width: clamp01(scaledDisplayValue) * 100 + '%',
+              }}
+            >
+              <div className="Slider__cursor" />
+              <div className="Slider__pointer" />
+              {dragging && (
+                <div className="Slider__popupValue">{displayElement}</div>
+              )}
+            </div>
+            <div className="ProgressBar__content">
+              {hasContent ? children : displayElement}
+            </div>
+            {inputElement}
+          </div>
+        );
+      }}
+    </DraggableControl>
+  );
+}

package/src/components/Stack.tsx

@@ -0,0 +1,101 @@
+/**
+ * @file
+ * @copyright 2021 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+import { RefObject } from 'react';
+
+import {
+  computeFlexClassName,
+  computeFlexItemClassName,
+  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([
+        'Stack',
+        fill && 'Stack--fill',
+        vertical ? 'Stack--vertical' : 'Stack--horizontal',
+        zebra && 'Stack--zebra',
+        reverse && `Stack--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([
+        'Stack__item',
+        className,
+        computeFlexItemClassName(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([
+        'Stack__item',
+        'Stack__divider',
+        hidden && 'Stack__divider--hidden',
+        className,
+        computeFlexItemClassName(rest),
+      ])}
+      {...computeFlexItemProps(rest)}
+    />
+  );
+}
+
+Stack.Divider = StackDivider;

package/src/components/StyleableSection.tsx

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

package/src/components/Table.tsx

@@ -0,0 +1,90 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+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([
+        'Table',
+        collapsing && 'Table--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([
+        'Table__row',
+        header && 'Table__row--header',
+        className,
+        computeBoxClassName(props),
+      ])}
+      {...computeBoxProps(rest)}
+    />
+  );
+}
+
+Table.Row = TableRow;
+
+type CellProps = Partial<{
+  /** Collapses table cell to the smallest possible size,
+  and stops any text inside from wrapping. */
+  collapsing: boolean;
+  /** Additional columns for this cell to expand, assuming there is room. */
+  colSpan: number;
+  /** 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([
+        'Table__cell',
+        collapsing && 'Table__cell--collapsing',
+        header && 'Table__cell--header',
+        className,
+        computeBoxClassName(props),
+      ])}
+      colSpan={colSpan}
+      {...computeBoxProps(rest)}
+    />
+  );
+}
+
+Table.Cell = TableCell;

package/src/components/Tabs.tsx

@@ -0,0 +1,90 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { canRender, classes } from '../common/react';
+import { PropsWithChildren, ReactNode } from 'react';
+
+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 const Tabs = (props: Props) => {
+  const { className, vertical, fill, fluid, children, ...rest } = props;
+
+  return (
+    <div
+      className={classes([
+        'Tabs',
+        vertical ? 'Tabs--vertical' : 'Tabs--horizontal',
+        fill && 'Tabs--fill',
+        fluid && 'Tabs--fluid',
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...computeBoxProps(rest)}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Tab = (props: TabProps) => {
+  const {
+    className,
+    selected,
+    color,
+    icon,
+    leftSlot,
+    rightSlot,
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <div
+      className={classes([
+        'Tab',
+        'Tabs__Tab',
+        'Tab--color--' + color,
+        selected && 'Tab--selected',
+        className,
+        computeBoxClassName(rest),
+      ])}
+      {...computeBoxProps(rest)}
+    >
+      {(canRender(leftSlot) && <div className="Tab__left">{leftSlot}</div>) ||
+        (!!icon && (
+          <div className="Tab__left">
+            <Icon name={icon} />
+          </div>
+        ))}
+      <div className="Tab__text">{children}</div>
+      {canRender(rightSlot) && <div className="Tab__right">{rightSlot}</div>}
+    </div>
+  );
+};
+
+Tabs.Tab = Tab;

package/src/components/TextArea.tsx

@@ -0,0 +1,198 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @author Warlockd
+ * @license MIT
+ */
+
+import { KEY } from '../common/keys';
+import { classes } from '../common/react';
+import {
+  forwardRef,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { KeyboardEvent, SyntheticEvent } from 'react';
+
+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);
+
+    const 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([
+          'TextArea',
+          fluid && 'TextArea--fluid',
+          noborder && 'TextArea--noborder',
+          className,
+        ])}
+        {...rest}
+      >
+        {!!displayedValue && (
+          <div
+            style={{
+              height: '100%',
+              overflow: 'hidden',
+              position: 'absolute',
+              width: '100%',
+            }}
+          >
+            <div
+              className={classes([
+                'TextArea__textarea',
+                'TextArea__textarea_custom',
+              ])}
+              style={{
+                transform: `translateY(-${scrolledAmount}px)`,
+              }}
+            >
+              {displayedValue}
+            </div>
+          </div>
+        )}
+        <textarea
+          className={classes([
+            'TextArea__textarea',
+            scrollbar && 'TextArea__textarea--scrollable',
+            nowrap && 'TextArea__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>
+    );
+  }
+);