tgui-core 1.0.0

package/src/components/Knob.tsx

@@ -0,0 +1,185 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { keyOfMatchingRange, scale } from '../common/math';
+import { BooleanLike, classes } from '../common/react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+import { DraggableControl } from './DraggableControl';
+
+type Props = {
+  /** Value itself, controls the position of the cursor. */
+  value: number;
+} & Partial<{
+  /** Animates the value if it was changed externally. */
+  animated: boolean;
+  /** Knob can be bipolar or unipolar. */
+  bipolar: boolean;
+  /** Color of the outer ring around the knob. */
+  color: string | BooleanLike;
+  /** If set, this value will be used to set the fill percentage of the outer ring independently of the main value. */
+  fillValue: number;
+  /** Format value using this function before displaying it. */
+  format: (value: number) => string;
+  /** Highest possible value. */
+  maxValue: number;
+  /** Lowest possible value. */
+  minValue: number;
+  /** Adjust value by this amount when dragging the input. */
+  onChange: (event: Event, value: number) => void;
+  /** An event, which fires about every 500ms when you drag the input up and down, on release and on manual editing. */
+  onDrag: (event: Event, value: number) => void;
+  /** Applies a `color` to the outer ring around the knob based on whether the value lands in the range between `from` and `to`. */
+  ranges: Record<string, [number, number]>;
+  /** Relative size of the knob. `1` is normal size, `2` is two times bigger. Fractional numbers are supported. */
+  size: number;
+  /** Adjust value by this amount when dragging the input. */
+  step: number;
+  /** Screen distance mouse needs to travel to adjust value by one `step`. */
+  stepPixelSize: 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. */
+  suppressFlicker: boolean;
+  /** Unit to display to the right of value. */
+  unit: string;
+  /** Whether to clamp the value to the range. */
+  unclamped: boolean;
+}> &
+  BoxProps;
+
+/**
+ * ## Knob
+ * A radial control which allows dialing in precise values by dragging it
+ * up and down.
+ *
+ * Single click opens an input box to manually type in a number.
+ */
+export function Knob(props: Props) {
+  const {
+    // Draggable props (passthrough)
+    animated,
+    format,
+    maxValue,
+    minValue,
+    onChange,
+    onDrag,
+    step,
+    stepPixelSize,
+    suppressFlicker,
+    unclamped,
+    unit,
+    value,
+    // Own props
+    bipolar,
+    children,
+    className,
+    color,
+    fillValue,
+    ranges = {},
+    size = 1,
+    style,
+    ...rest
+  } = props;
+
+  return (
+    <DraggableControl
+      dragMatrix={[0, -1]}
+      {...{
+        animated,
+        format,
+        maxValue,
+        minValue,
+        onChange,
+        onDrag,
+        step,
+        stepPixelSize,
+        suppressFlicker,
+        unclamped,
+        unit,
+        value,
+      }}
+    >
+      {(control) => {
+        const {
+          displayElement,
+          displayValue,
+          dragging,
+          handleDragStart,
+          inputElement,
+          value,
+        } = control;
+        const scaledFillValue = scale(
+          fillValue ?? displayValue,
+          minValue,
+          maxValue
+        );
+        const scaledDisplayValue = scale(displayValue, minValue, maxValue);
+        const effectiveColor =
+          color || keyOfMatchingRange(fillValue ?? value, ranges) || 'default';
+        const rotation = Math.min((scaledDisplayValue - 0.5) * 270, 225);
+
+        return (
+          <div
+            className={classes([
+              'Knob',
+              'Knob--color--' + effectiveColor,
+              bipolar && 'Knob--bipolar',
+              className,
+              computeBoxClassName(rest),
+            ])}
+            {...computeBoxProps({
+              style: {
+                fontSize: size + 'em',
+                ...style,
+              },
+              ...rest,
+            })}
+            onMouseDown={handleDragStart}
+          >
+            <div className="Knob__circle">
+              <div
+                className="Knob__cursorBox"
+                style={{
+                  transform: `rotate(${rotation}deg)`,
+                }}
+              >
+                <div className="Knob__cursor" />
+              </div>
+            </div>
+            {dragging && (
+              <div className="Knob__popupValue">{displayElement}</div>
+            )}
+            <svg
+              className="Knob__ring Knob__ringTrackPivot"
+              viewBox="0 0 100 100"
+            >
+              <circle className="Knob__ringTrack" cx="50" cy="50" r="50" />
+            </svg>
+            <svg
+              className="Knob__ring Knob__ringFillPivot"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                className="Knob__ringFill"
+                style={{
+                  strokeDashoffset: Math.max(
+                    ((bipolar ? 2.75 : 2.0) - scaledFillValue * 1.5) *
+                      Math.PI *
+                      50,
+                    0
+                  ),
+                }}
+                cx="50"
+                cy="50"
+                r="50"
+              />
+            </svg>
+            {inputElement}
+          </div>
+        );
+      }}
+    </DraggableControl>
+  );
+}

package/src/components/LabeledControls.tsx

@@ -0,0 +1,50 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Flex, FlexProps } from './Flex';
+
+export function LabeledControls(props: FlexProps) {
+  const { children, wrap, ...rest } = props;
+
+  return (
+    <Flex
+      mx={-0.5}
+      wrap={wrap}
+      align="stretch"
+      justify="space-between"
+      {...rest}
+    >
+      {children}
+    </Flex>
+  );
+}
+
+type ItemProps = {
+  label: string;
+} & FlexProps;
+
+function LabeledControlsItem(props: ItemProps) {
+  const { label, children, mx = 1, ...rest } = props;
+
+  return (
+    <Flex.Item mx={mx}>
+      <Flex
+        height="100%"
+        direction="column"
+        align="center"
+        textAlign="center"
+        justify="space-between"
+        {...rest}
+      >
+        <Flex.Item />
+        <Flex.Item>{children}</Flex.Item>
+        <Flex.Item color="label">{label}</Flex.Item>
+      </Flex>
+    </Flex.Item>
+  );
+}
+
+LabeledControls.Item = LabeledControlsItem;

package/src/components/LabeledList.tsx

@@ -0,0 +1,130 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { BooleanLike, classes } from '../common/react';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { Box, unit } from './Box';
+import { Divider } from './Divider';
+import { Tooltip } from './Tooltip';
+
+export const LabeledList = (props: PropsWithChildren) => {
+  const { children } = props;
+  return <table className="LabeledList">{children}</table>;
+};
+
+type LabeledListItemProps = Partial<{
+  buttons: ReactNode;
+  className: string | BooleanLike;
+  color: string;
+  key: string | number;
+  label: string | ReactNode | BooleanLike;
+  labelColor: string;
+  labelWrap: boolean;
+  textAlign: string;
+  /** @deprecated */
+  content: any;
+  children: ReactNode;
+  verticalAlign: string;
+  tooltip: string;
+}>;
+
+const LabeledListItem = (props: LabeledListItemProps) => {
+  const {
+    className,
+    label,
+    labelColor = 'label',
+    labelWrap,
+    color,
+    textAlign,
+    buttons,
+    content,
+    children,
+    verticalAlign = 'baseline',
+    tooltip,
+  } = props;
+
+  let innerLabel;
+  if (label) {
+    innerLabel = label;
+    if (typeof label === 'string') innerLabel += ':';
+  }
+
+  if (tooltip !== undefined) {
+    innerLabel = (
+      <Tooltip content={tooltip}>
+        <Box
+          as="span"
+          style={{
+            borderBottom: '2px dotted rgba(255, 255, 255, 0.8)',
+          }}
+        >
+          {innerLabel}
+        </Box>
+      </Tooltip>
+    );
+  }
+
+  let labelChild = (
+    <Box
+      as="td"
+      color={labelColor}
+      className={classes([
+        'LabeledList__cell',
+        // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
+        !labelWrap && 'LabeledList__label--nowrap',
+      ])}
+      verticalAlign={verticalAlign}
+    >
+      {innerLabel}
+    </Box>
+  );
+
+  return (
+    <tr className={classes(['LabeledList__row', className])}>
+      {labelChild}
+      <Box
+        as="td"
+        color={color}
+        textAlign={textAlign}
+        className={classes(['LabeledList__cell', 'LabeledList__content'])}
+        // @ts-ignore
+        colSpan={buttons ? undefined : 2}
+        verticalAlign={verticalAlign}
+      >
+        {content}
+        {children}
+      </Box>
+      {buttons && (
+        <td className="LabeledList__cell LabeledList__buttons">{buttons}</td>
+      )}
+    </tr>
+  );
+};
+
+type LabeledListDividerProps = {
+  size?: number;
+};
+
+const LabeledListDivider = (props: LabeledListDividerProps) => {
+  const padding = props.size ? unit(Math.max(0, props.size - 1)) : 0;
+  return (
+    <tr className="LabeledList__row">
+      <td
+        colSpan={3}
+        style={{
+          paddingTop: padding,
+          paddingBottom: padding,
+        }}
+      >
+        <Divider />
+      </td>
+    </tr>
+  );
+};
+
+LabeledList.Item = LabeledListItem;
+LabeledList.Divider = LabeledListDivider;

package/src/components/MenuBar.tsx

@@ -0,0 +1,238 @@
+/**
+ * @file
+ * @copyright 2022 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+import { Component, createRef, ReactNode, RefObject } from 'react';
+
+import { logger } from '../logging';
+import { Box } from './Box';
+import { Icon } from './Icon';
+
+type MenuProps = {
+  children: any;
+  width: string;
+  menuRef: RefObject<HTMLElement>;
+  onOutsideClick: () => void;
+};
+
+class Menu extends Component<MenuProps> {
+  private readonly handleClick: (event) => void;
+
+  constructor(props) {
+    super(props);
+    this.handleClick = (event) => {
+      if (!this.props.menuRef.current) {
+        logger.log(`Menu.handleClick(): No ref`);
+        return;
+      }
+
+      if (this.props.menuRef.current.contains(event.target)) {
+        logger.log(`Menu.handleClick(): Inside`);
+      } else {
+        logger.log(`Menu.handleClick(): Outside`);
+        this.props.onOutsideClick();
+      }
+    };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillMount() {
+    window.addEventListener('click', this.handleClick);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this.handleClick);
+  }
+
+  render() {
+    const { width, children } = this.props;
+    return (
+      <div
+        className={'MenuBar__menu'}
+        style={{
+          width: width,
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+type MenuBarDropdownProps = {
+  open: boolean;
+  openWidth: string;
+  children: any;
+  disabled?: boolean;
+  display: any;
+  onMouseOver: () => void;
+  onClick: () => void;
+  onOutsideClick: () => void;
+  className?: string;
+};
+
+class MenuBarButton extends Component<MenuBarDropdownProps> {
+  private readonly menuRef: RefObject<HTMLDivElement>;
+
+  constructor(props) {
+    super(props);
+    this.menuRef = createRef();
+  }
+
+  render() {
+    const { props } = this;
+    const {
+      open,
+      openWidth,
+      children,
+      disabled,
+      display,
+      onMouseOver,
+      onClick,
+      onOutsideClick,
+      ...boxProps
+    } = props;
+    const { className, ...rest } = boxProps;
+
+    return (
+      <div ref={this.menuRef}>
+        <Box
+          className={classes([
+            'MenuBar__MenuBarButton',
+            'MenuBar__font',
+            'MenuBar__hover',
+            className,
+          ])}
+          {...rest}
+          onClick={disabled ? () => null : onClick}
+          onMouseOver={onMouseOver}
+        >
+          <span className="MenuBar__MenuBarButton-text">{display}</span>
+        </Box>
+        {open && (
+          <Menu
+            width={openWidth}
+            menuRef={this.menuRef}
+            onOutsideClick={onOutsideClick}
+          >
+            {children}
+          </Menu>
+        )}
+      </div>
+    );
+  }
+}
+
+type MenuBarItemProps = {
+  entry: string;
+  children: any;
+  openWidth: string;
+  display: ReactNode;
+  setOpenMenuBar: (entry: string | null) => void;
+  openMenuBar: string | null;
+  setOpenOnHover: (flag: boolean) => void;
+  openOnHover: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+export const Dropdown = (props: MenuBarItemProps) => {
+  const {
+    entry,
+    children,
+    openWidth,
+    display,
+    setOpenMenuBar,
+    openMenuBar,
+    setOpenOnHover,
+    openOnHover,
+    disabled,
+    className,
+  } = props;
+
+  return (
+    <MenuBarButton
+      openWidth={openWidth}
+      display={display}
+      disabled={disabled}
+      open={openMenuBar === entry}
+      className={className}
+      onClick={() => {
+        const open = openMenuBar === entry ? null : entry;
+        setOpenMenuBar(open);
+        setOpenOnHover(!openOnHover);
+      }}
+      onOutsideClick={() => {
+        setOpenMenuBar(null);
+        setOpenOnHover(false);
+      }}
+      onMouseOver={() => {
+        if (openOnHover) {
+          setOpenMenuBar(entry);
+        }
+      }}
+    >
+      {children}
+    </MenuBarButton>
+  );
+};
+
+const MenuItemToggle = (props) => {
+  const { value, displayText, onClick, checked } = props;
+  return (
+    <Box
+      className={classes([
+        'MenuBar__font',
+        'MenuBar__MenuItem',
+        'MenuBar__MenuItemToggle',
+        'MenuBar__hover',
+      ])}
+      onClick={() => onClick(value)}
+    >
+      <div className="MenuBar__MenuItemToggle__check">
+        {checked && <Icon size={1.3} name="check" />}
+      </div>
+      {displayText}
+    </Box>
+  );
+};
+
+Dropdown.MenuItemToggle = MenuItemToggle;
+
+const MenuItem = (props) => {
+  const { value, displayText, onClick } = props;
+  return (
+    <Box
+      className={classes([
+        'MenuBar__font',
+        'MenuBar__MenuItem',
+        'MenuBar__hover',
+      ])}
+      onClick={() => onClick(value)}
+    >
+      {displayText}
+    </Box>
+  );
+};
+
+Dropdown.MenuItem = MenuItem;
+
+const Separator = () => {
+  return <div className="MenuBar__Separator" />;
+};
+
+Dropdown.Separator = Separator;
+
+type MenuBarProps = {
+  children: any;
+};
+
+export const MenuBar = (props: MenuBarProps) => {
+  const { children } = props;
+  return <Box className="MenuBar">{children}</Box>;
+};
+
+MenuBar.Dropdown = Dropdown;

package/src/components/Modal.tsx

@@ -0,0 +1,25 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+import { Dimmer } from './Dimmer';
+
+export function Modal(props: BoxProps) {
+  const { className, children, ...rest } = props;
+
+  return (
+    <Dimmer>
+      <div
+        className={classes(['Modal', className, computeBoxClassName(rest)])}
+        {...computeBoxProps(rest)}
+      >
+        {children}
+      </div>
+    </Dimmer>
+  );
+}

package/src/components/NoticeBox.tsx

@@ -0,0 +1,48 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { classes } from '../common/react';
+
+import { Box, BoxProps } from './Box';
+
+type Props = ExclusiveProps & BoxProps;
+
+/** You MUST use only one or none */
+type NoticeType = 'info' | 'success' | 'danger';
+
+type None = {
+  [K in NoticeType]?: undefined;
+};
+
+type ExclusiveProps =
+  | None
+  | (Omit<None, 'info'> & {
+      info: boolean;
+    })
+  | (Omit<None, 'success'> & {
+      success: boolean;
+    })
+  | (Omit<None, 'danger'> & {
+      danger: boolean;
+    });
+
+export function NoticeBox(props: Props) {
+  const { className, color, info, success, danger, ...rest } = props;
+
+  return (
+    <Box
+      className={classes([
+        'NoticeBox',
+        color && 'NoticeBox--color--' + color,
+        info && 'NoticeBox--type--info',
+        success && 'NoticeBox--type--success',
+        danger && 'NoticeBox--type--danger',
+        className,
+      ])}
+      {...rest}
+    />
+  );
+}