tgui-core 1.1.8 → 1.1.10

package/lib/components/LabeledList.tsx

@@ -0,0 +1,154 @@
+import { PropsWithChildren, ReactNode } from 'react';
+
+import { BooleanLike, classes } from '../common/react';
+import styles from '../styles/components/LabeledList.module.scss';
+import { Box, unit } from './Box';
+import { Divider } from './Divider';
+import { Tooltip } from './Tooltip';
+
+export function LabeledList(props: PropsWithChildren) {
+  const { children } = props;
+  return <table className="LabeledList">{children}</table>;
+}
+
+type LabeledListItemProps = Partial<{
+  /** Buttons to render aside the content. */
+  buttons: ReactNode;
+  /** Content of this labeled item. */
+  children: ReactNode;
+  /** Applies a CSS class to the element. */
+  className: string | BooleanLike;
+  /** Sets the color of the content text. */
+  color: string;
+  /** @deprecated */
+  content: any;
+  /**
+   * Sometimes this does not properly register in TS.
+   * See [react key docs](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) for more info.
+   */
+  key: string | number;
+  /** Item label. Appends a colon at the end. */
+  label: ReactNode;
+  /** Sets the color of the label. */
+  labelColor: string;
+  /** Lets the label wrap and makes it not take the minimum width. */
+  labelWrap: boolean;
+  /**
+   * Align the content text.
+   *
+   * - `left` (default)
+   * - `center`
+   * - `right`
+   */
+  textAlign: string;
+  /** Tooltip text. */
+  tooltip: string;
+  /**
+   * Align both the label and the content vertically.
+   *
+   * - `baseline` (default)
+   * - `top`
+   * - `middle`
+   * - `bottom`
+   */
+  verticalAlign: string;
+}>;
+
+function 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>
+    );
+  }
+
+  const labelChild = (
+    <Box
+      as="td"
+      color={labelColor}
+      className={classes([
+        styles.cell,
+        // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
+        !labelWrap && styles.label__nowrap,
+      ])}
+      verticalAlign={verticalAlign}
+    >
+      {innerLabel}
+    </Box>
+  );
+
+  return (
+    <tr className={classes([styles.row, className])}>
+      {labelChild}
+      <Box
+        as="td"
+        color={color}
+        textAlign={textAlign}
+        className={styles.cell}
+        // @ts-ignore
+        colSpan={buttons ? undefined : 2}
+        verticalAlign={verticalAlign}
+      >
+        {content}
+        {children}
+      </Box>
+      {buttons && (
+        <td className={classes([styles.cell, styles.buttons])}>{buttons}</td>
+      )}
+    </tr>
+  );
+}
+
+LabeledList.Item = LabeledListItem;
+
+type LabeledListDividerProps = {
+  /** Size of the divider. */
+  size?: number;
+};
+
+function 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.Divider = LabeledListDivider;

package/lib/components/MenuBar.tsx

@@ -0,0 +1,228 @@
+/**
+ * @file
+ * @copyright 2022 Aleksej Komarov
+ * @license MIT
+ */
+import { Component, createRef, ReactNode, RefObject } from 'react';
+
+import { classes } from '../common/react';
+import styles from '../styles/components/MenuBar.module.scss';
+import { Box } from './Box';
+import { Icon } from './Icon';
+
+type MenuProps = {
+  children: any;
+  menuRef: RefObject<HTMLElement>;
+  onOutsideClick: () => void;
+  width: string;
+};
+
+class Menu extends Component<MenuProps> {
+  private readonly handleClick: (event) => void;
+
+  constructor(props) {
+    super(props);
+    this.handleClick = (event) => {
+      if (!this.props.menuRef.current) {
+        return;
+      }
+
+      if (!this.props.menuRef.current.contains(event.target)) {
+        this.props.onOutsideClick();
+      }
+    };
+  }
+
+  componentWillMount() {
+    window.addEventListener('click', this.handleClick);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this.handleClick);
+  }
+
+  render() {
+    const { width, children } = this.props;
+    return (
+      <div
+        className={styles.menu}
+        style={{
+          width: width,
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+type MenuBarDropdownProps = {
+  children: any;
+  className?: string;
+  disabled?: boolean;
+  display: any;
+  onClick: () => void;
+  onMouseOver: () => void;
+  onOutsideClick: () => void;
+  open: boolean;
+  openWidth: 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([
+            styles.button,
+            styles.font,
+            styles.hover,
+            className,
+          ])}
+          {...rest}
+          onClick={disabled ? () => null : onClick}
+          onMouseOver={onMouseOver}
+        >
+          <span className={styles.button__text}>{display}</span>
+        </Box>
+        {open && (
+          <Menu
+            width={openWidth}
+            menuRef={this.menuRef}
+            onOutsideClick={onOutsideClick}
+          >
+            {children}
+          </Menu>
+        )}
+      </div>
+    );
+  }
+}
+
+type MenuBarItemProps = {
+  children: any;
+  className?: string;
+  disabled?: boolean;
+  display: ReactNode;
+  entry: string;
+  openMenuBar: string | null;
+  openOnHover: boolean;
+  openWidth: string;
+  setOpenMenuBar: (entry: string | null) => void;
+  setOpenOnHover: (flag: boolean) => void;
+};
+
+export function 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>
+  );
+}
+
+function MenuItemToggle(props) {
+  const { value, displayText, onClick, checked } = props;
+  return (
+    <Box
+      className={classes([
+        styles.font,
+        styles.item,
+        styles.toggle,
+        styles.hover,
+      ])}
+      onClick={() => onClick(value)}
+    >
+      <div className={styles.toggle__check}>
+        {checked && <Icon size={1.3} name="check" />}
+      </div>
+      {displayText}
+    </Box>
+  );
+}
+
+Dropdown.MenuItemToggle = MenuItemToggle;
+
+function MenuItem(props) {
+  const { value, displayText, onClick } = props;
+  return (
+    <Box
+      className={classes([styles.font, styles.item, styles.hover])}
+      onClick={() => onClick(value)}
+    >
+      {displayText}
+    </Box>
+  );
+}
+
+Dropdown.MenuItem = MenuItem;
+
+function Separator() {
+  return <div className={styles.separator} />;
+}
+
+Dropdown.Separator = Separator;
+
+type MenuBarProps = {
+  children: any;
+};
+
+export function MenuBar(props: MenuBarProps) {
+  const { children } = props;
+  return <Box className={styles.menuBar}>{children}</Box>;
+}
+
+MenuBar.Dropdown = Dropdown;

package/lib/components/Modal.tsx

@@ -0,0 +1,23 @@
+import { classes } from '../common/react';
+import styles from '../styles/components/Modal.module.scss';
+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([
+          styles.modal,
+          className,
+          computeBoxClassName(rest),
+        ])}
+        {...computeBoxProps(rest)}
+      >
+        {children}
+      </div>
+    </Dimmer>
+  );
+}

package/lib/components/NoticeBox.tsx

@@ -0,0 +1,45 @@
+import { classes } from '../common/react';
+import styles from '../styles/components/NoticeBox.module.scss';
+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'> & {
+      /** Blue notice */
+      info: boolean;
+    })
+  | (Omit<None, 'success'> & {
+      /** Green notice */
+      success: boolean;
+    })
+  | (Omit<None, 'danger'> & {
+      /** Red notice */
+      danger: boolean;
+    });
+
+export function NoticeBox(props: Props) {
+  const { className, color, info, success, danger, ...rest } = props;
+
+  return (
+    <Box
+      className={classes([
+        styles.noticeBox,
+        color && styles['color__' + color],
+        info && styles.info,
+        success && styles.success,
+        danger && styles.danger,
+        className,
+      ])}
+      {...rest}
+    />
+  );
+}