tgui-core 1.1.11 → 1.1.13

package/lib/components/LabeledList.tsx

@@ -1,154 +0,0 @@
-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

@@ -1,228 +0,0 @@
-/**
- * @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

@@ -1,23 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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}
-    />
-  );
-}