tgui-core 1.0.0

package/src/components/Box.tsx

@@ -0,0 +1,255 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { BooleanLike, classes } from '../common/react';
+import {
+  createElement,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+  UIEventHandler,
+} from 'react';
+
+import { CSS_COLORS } from '../constants';
+
+type BooleanProps = Partial<Record<keyof typeof booleanStyleMap, boolean>>;
+type StringProps = Partial<
+  Record<keyof typeof stringStyleMap, string | BooleanLike>
+>;
+
+export type EventHandlers = Partial<{
+  onClick: MouseEventHandler<HTMLDivElement>;
+  onContextMenu: MouseEventHandler<HTMLDivElement>;
+  onDoubleClick: MouseEventHandler<HTMLDivElement>;
+  onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+  onKeyUp: KeyboardEventHandler<HTMLDivElement>;
+  onMouseDown: MouseEventHandler<HTMLDivElement>;
+  onMouseMove: MouseEventHandler<HTMLDivElement>;
+  onMouseOver: MouseEventHandler<HTMLDivElement>;
+  onMouseUp: MouseEventHandler<HTMLDivElement>;
+  onScroll: UIEventHandler<HTMLDivElement>;
+}>;
+
+export type BoxProps = Partial<{
+  as: string;
+  children: ReactNode;
+  className: string | BooleanLike;
+  style: Partial<CSSStyleDeclaration>;
+}> &
+  BooleanProps &
+  StringProps &
+  EventHandlers;
+
+// Don't you dare put this elsewhere
+type DangerDoNotUse = {
+  dangerouslySetInnerHTML?: {
+    __html: any;
+  };
+};
+
+/**
+ * Coverts our rem-like spacing unit into a CSS unit.
+ */
+export const unit = (value: unknown) => {
+  if (typeof value === 'string') {
+    // Transparently convert pixels into rem units
+    if (value.endsWith('px')) {
+      return parseFloat(value) / 12 + 'rem';
+    }
+    return value;
+  }
+  if (typeof value === 'number') {
+    return value + 'rem';
+  }
+};
+
+/**
+ * Same as `unit`, but half the size for integers numbers.
+ */
+export const halfUnit = (value: unknown) => {
+  if (typeof value === 'string') {
+    return unit(value);
+  }
+  if (typeof value === 'number') {
+    return unit(value * 0.5);
+  }
+};
+
+const isColorCode = (str: unknown) => !isColorClass(str);
+
+const isColorClass = (str: unknown): boolean => {
+  return typeof str === 'string' && CSS_COLORS.includes(str as any);
+};
+
+const mapRawPropTo = (attrName) => (style, value) => {
+  if (typeof value === 'number' || typeof value === 'string') {
+    style[attrName] = value;
+  }
+};
+
+const mapUnitPropTo = (attrName, unit) => (style, value) => {
+  if (typeof value === 'number' || typeof value === 'string') {
+    style[attrName] = unit(value);
+  }
+};
+
+const mapBooleanPropTo = (attrName, attrValue) => (style, value) => {
+  if (value) {
+    style[attrName] = attrValue;
+  }
+};
+
+const mapDirectionalUnitPropTo = (attrName, unit, dirs) => (style, value) => {
+  if (typeof value === 'number' || typeof value === 'string') {
+    for (let i = 0; i < dirs.length; i++) {
+      style[attrName + '-' + dirs[i]] = unit(value);
+    }
+  }
+};
+
+const mapColorPropTo = (attrName) => (style, value) => {
+  if (isColorCode(value)) {
+    style[attrName] = value;
+  }
+};
+
+// String / number props
+const stringStyleMap = {
+  align: mapRawPropTo('textAlign'),
+  bottom: mapUnitPropTo('bottom', unit),
+  fontFamily: mapRawPropTo('fontFamily'),
+  fontSize: mapUnitPropTo('fontSize', unit),
+  fontWeight: mapRawPropTo('fontWeight'),
+  height: mapUnitPropTo('height', unit),
+  left: mapUnitPropTo('left', unit),
+  maxHeight: mapUnitPropTo('maxHeight', unit),
+  maxWidth: mapUnitPropTo('maxWidth', unit),
+  minHeight: mapUnitPropTo('minHeight', unit),
+  minWidth: mapUnitPropTo('minWidth', unit),
+  opacity: mapRawPropTo('opacity'),
+  overflow: mapRawPropTo('overflow'),
+  overflowX: mapRawPropTo('overflowX'),
+  overflowY: mapRawPropTo('overflowY'),
+  position: mapRawPropTo('position'),
+  right: mapUnitPropTo('right', unit),
+  textAlign: mapRawPropTo('textAlign'),
+  top: mapUnitPropTo('top', unit),
+  verticalAlign: mapRawPropTo('verticalAlign'),
+  width: mapUnitPropTo('width', unit),
+
+  lineHeight: (style, value) => {
+    if (typeof value === 'number') {
+      style['lineHeight'] = value;
+    } else if (typeof value === 'string') {
+      style['lineHeight'] = unit(value);
+    }
+  },
+  // Margin
+  m: mapDirectionalUnitPropTo('margin', halfUnit, [
+    'Top',
+    'Bottom',
+    'Left',
+    'Right',
+  ]),
+  mb: mapUnitPropTo('marginBottom', halfUnit),
+  ml: mapUnitPropTo('marginLeft', halfUnit),
+  mr: mapUnitPropTo('marginRight', halfUnit),
+  mt: mapUnitPropTo('marginTop', halfUnit),
+  mx: mapDirectionalUnitPropTo('margin', halfUnit, ['Left', 'Right']),
+  my: mapDirectionalUnitPropTo('margin', halfUnit, ['Top', 'Bottom']),
+  // Padding
+  p: mapDirectionalUnitPropTo('padding', halfUnit, [
+    'Top',
+    'Bottom',
+    'Left',
+    'Right',
+  ]),
+  pb: mapUnitPropTo('paddingBottom', halfUnit),
+  pl: mapUnitPropTo('paddingLeft', halfUnit),
+  pr: mapUnitPropTo('paddingRight', halfUnit),
+  pt: mapUnitPropTo('paddingTop', halfUnit),
+  px: mapDirectionalUnitPropTo('padding', halfUnit, ['Left', 'Right']),
+  py: mapDirectionalUnitPropTo('padding', halfUnit, ['Top', 'Bottom']),
+  // Color props
+  color: mapColorPropTo('color'),
+  textColor: mapColorPropTo('color'),
+  backgroundColor: mapColorPropTo('backgroundColor'),
+} as const;
+
+// Boolean props
+const booleanStyleMap = {
+  bold: mapBooleanPropTo('fontWeight', 'bold'),
+  fillPositionedParent: (style, value) => {
+    if (value) {
+      style['position'] = 'absolute';
+      style['top'] = 0;
+      style['bottom'] = 0;
+      style['left'] = 0;
+      style['right'] = 0;
+    }
+  },
+  inline: mapBooleanPropTo('display', 'inline-block'),
+  italic: mapBooleanPropTo('fontStyle', 'italic'),
+  nowrap: mapBooleanPropTo('whiteSpace', 'nowrap'),
+  preserveWhitespace: mapBooleanPropTo('whiteSpace', 'pre-wrap'),
+} as const;
+
+export const computeBoxProps = (props) => {
+  const computedProps: Record<string, any> = {};
+  const computedStyles: Record<string, string | number> = {};
+
+  // Compute props
+  for (let propName of Object.keys(props)) {
+    if (propName === 'style') {
+      continue;
+    }
+
+    const propValue = props[propName];
+
+    const mapPropToStyle =
+      stringStyleMap[propName] || booleanStyleMap[propName];
+
+    if (mapPropToStyle) {
+      mapPropToStyle(computedStyles, propValue);
+    } else {
+      computedProps[propName] = propValue;
+    }
+  }
+
+  // Merge computed styles and any directly provided styles
+  computedProps.style = { ...computedStyles, ...props.style };
+
+  return computedProps;
+};
+
+export const computeBoxClassName = (props: BoxProps) => {
+  const color = props.textColor || props.color;
+  const backgroundColor = props.backgroundColor;
+  return classes([
+    isColorClass(color) && 'color-' + color,
+    isColorClass(backgroundColor) && 'color-bg-' + backgroundColor,
+  ]);
+};
+
+export const Box = (props: BoxProps & DangerDoNotUse) => {
+  const { as = 'div', className, children, ...rest } = props;
+
+  // Compute class name and styles
+  const computedClassName = className
+    ? `${className} ${computeBoxClassName(rest)}`
+    : computeBoxClassName(rest);
+  const computedProps = computeBoxProps(rest);
+
+  // Render the component
+  return createElement(
+    typeof as === 'string' ? as : 'div',
+    {
+      ...computedProps,
+      className: computedClassName,
+    },
+    children
+  );
+};

package/src/components/Button.tsx

@@ -0,0 +1,415 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Placement } from '@popperjs/core';
+import { KEY } from '../common/keys';
+import { BooleanLike, classes } from '../common/react';
+import {
+  ChangeEvent,
+  createRef,
+  MouseEvent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { Box, BoxProps, computeBoxClassName, computeBoxProps } from './Box';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+
+/**
+ * Getting ellipses to work requires that you use:
+ * 1. A string rather than a node
+ * 2. A fixed width here or in a parent
+ * 3. Children prop rather than content
+ */
+type EllipsisUnion =
+  | {
+      ellipsis: true;
+      children: string;
+      /** @deprecated use children instead */
+      content?: never;
+    }
+  | Partial<{
+      ellipsis: undefined;
+      children: ReactNode;
+      /** @deprecated use children instead */
+      content: ReactNode;
+    }>;
+
+type Props = Partial<{
+  captureKeys: boolean;
+  circular: boolean;
+  compact: boolean;
+  disabled: BooleanLike;
+  fluid: boolean;
+  icon: string | false;
+  iconColor: string;
+  iconPosition: string;
+  iconRotation: number;
+  iconSpin: BooleanLike;
+  onClick: (e: any) => void;
+  selected: BooleanLike;
+  tooltip: ReactNode;
+  tooltipPosition: Placement;
+  verticalAlignContent: string;
+}> &
+  EllipsisUnion &
+  BoxProps;
+
+/** Clickable button. Comes with variants. Read more in the documentation. */
+export const Button = (props: Props) => {
+  const {
+    captureKeys = true,
+    children,
+    circular,
+    className,
+    color,
+    compact,
+    content,
+    disabled,
+    ellipsis,
+    fluid,
+    icon,
+    iconColor,
+    iconPosition,
+    iconRotation,
+    iconSpin,
+    onClick,
+    selected,
+    tooltip,
+    tooltipPosition,
+    verticalAlignContent,
+    ...rest
+  } = props;
+
+  const toDisplay: ReactNode = content || children;
+
+  let buttonContent = (
+    <div
+      className={classes([
+        'Button',
+        fluid && 'Button--fluid',
+        disabled && 'Button--disabled',
+        selected && 'Button--selected',
+        !!toDisplay && 'Button--hasContent',
+        circular && 'Button--circular',
+        compact && 'Button--compact',
+        iconPosition && 'Button--iconPosition--' + iconPosition,
+        verticalAlignContent && 'Button--flex',
+        verticalAlignContent && fluid && 'Button--flex--fluid',
+        verticalAlignContent &&
+          'Button--verticalAlignContent--' + verticalAlignContent,
+        color && typeof color === 'string'
+          ? 'Button--color--' + color
+          : 'Button--color--default',
+        className,
+        computeBoxClassName(rest),
+      ])}
+      tabIndex={!disabled ? 0 : undefined}
+      onClick={(event) => {
+        if (!disabled && onClick) {
+          onClick(event);
+        }
+      }}
+      onKeyDown={(event) => {
+        if (!captureKeys) {
+          return;
+        }
+
+        // Simulate a click when pressing space or enter.
+        if (event.key === KEY.Space || event.key === KEY.Enter) {
+          event.preventDefault();
+          if (!disabled && onClick) {
+            onClick(event);
+          }
+          return;
+        }
+
+        // Refocus layout on pressing escape.
+        if (event.key === KEY.Escape) {
+          event.preventDefault();
+        }
+      }}
+      {...computeBoxProps(rest)}
+    >
+      <div className="Button__content">
+        {icon && iconPosition !== 'right' && (
+          <Icon
+            name={icon}
+            color={iconColor}
+            rotation={iconRotation}
+            spin={iconSpin}
+          />
+        )}
+        {!ellipsis ? (
+          toDisplay
+        ) : (
+          <span
+            className={classes([
+              'Button--ellipsis',
+              icon && 'Button__textMargin',
+            ])}
+          >
+            {toDisplay}
+          </span>
+        )}
+        {icon && iconPosition === 'right' && (
+          <Icon
+            name={icon}
+            color={iconColor}
+            rotation={iconRotation}
+            spin={iconSpin}
+          />
+        )}
+      </div>
+    </div>
+  );
+
+  if (tooltip) {
+    buttonContent = (
+      <Tooltip content={tooltip} position={tooltipPosition as Placement}>
+        {buttonContent}
+      </Tooltip>
+    );
+  }
+
+  return buttonContent;
+};
+
+type CheckProps = Partial<{
+  checked: BooleanLike;
+}> &
+  Props;
+
+/** Visually toggles between checked and unchecked states. */
+export const ButtonCheckbox = (props: CheckProps) => {
+  const { checked, ...rest } = props;
+
+  return (
+    <Button
+      color="transparent"
+      icon={checked ? 'check-square-o' : 'square-o'}
+      selected={checked}
+      {...rest}
+    />
+  );
+};
+
+Button.Checkbox = ButtonCheckbox;
+
+type ConfirmProps = Partial<{
+  confirmColor: string;
+  confirmContent: ReactNode;
+  confirmIcon: string;
+}> &
+  Props;
+
+/**  Requires user confirmation before triggering its action. */
+const ButtonConfirm = (props: ConfirmProps) => {
+  const {
+    children,
+    color,
+    confirmColor = 'bad',
+    confirmContent = 'Confirm?',
+    confirmIcon,
+    ellipsis = true,
+    icon,
+    onClick,
+    ...rest
+  } = props;
+  const [clickedOnce, setClickedOnce] = useState(false);
+
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (!clickedOnce) {
+      setClickedOnce(true);
+      return;
+    }
+
+    onClick?.(event);
+    setClickedOnce(false);
+  };
+
+  return (
+    <Button
+      icon={clickedOnce ? confirmIcon : icon}
+      color={clickedOnce ? confirmColor : color}
+      onClick={handleClick}
+      {...rest}
+    >
+      {clickedOnce ? confirmContent : children}
+    </Button>
+  );
+};
+
+Button.Confirm = ButtonConfirm;
+
+type InputProps = Partial<{
+  currentValue: string;
+  defaultValue: string;
+  fluid: boolean;
+  maxLength: number;
+  onCommit: (e: any, value: string) => void;
+  placeholder: string;
+}> &
+  Props;
+
+/** Accepts and handles user input. */
+const ButtonInput = (props: InputProps) => {
+  const {
+    children,
+    color = 'default',
+    content,
+    currentValue,
+    defaultValue,
+    disabled,
+    fluid,
+    icon,
+    iconRotation,
+    iconSpin,
+    maxLength,
+    onCommit = () => null,
+    placeholder,
+    tooltip,
+    tooltipPosition,
+    ...rest
+  } = props;
+  const [inInput, setInInput] = useState(false);
+  const inputRef = createRef<HTMLInputElement>();
+
+  const toDisplay = content || children;
+
+  const commitResult = (e) => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    const hasValue = input.value !== '';
+    if (hasValue) {
+      onCommit(e, input.value);
+    } else {
+      if (defaultValue) {
+        onCommit(e, defaultValue);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    if (inInput) {
+      input.value = currentValue || '';
+      try {
+        input.focus();
+        input.select();
+      } catch {}
+    }
+  }, [inInput, currentValue]);
+
+  let buttonContent = (
+    <Box
+      className={classes([
+        'Button',
+        fluid && 'Button--fluid',
+        'Button--color--' + color,
+      ])}
+      {...rest}
+      onClick={() => setInInput(true)}
+    >
+      {icon && <Icon name={icon} rotation={iconRotation} spin={iconSpin} />}
+      <div>{toDisplay}</div>
+      <input
+        disabled={!!disabled}
+        ref={inputRef}
+        className="NumberInput__input"
+        style={{
+          display: !inInput ? 'none' : '',
+          textAlign: 'left',
+        }}
+        onBlur={(event) => {
+          if (!inInput) {
+            return;
+          }
+          setInInput(false);
+          commitResult(event);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === KEY.Enter) {
+            setInInput(false);
+            commitResult(event);
+            return;
+          }
+          if (event.key === KEY.Escape) {
+            setInInput(false);
+          }
+        }}
+      />
+    </Box>
+  );
+
+  if (tooltip) {
+    buttonContent = (
+      <Tooltip content={tooltip} position={tooltipPosition as Placement}>
+        {buttonContent}
+      </Tooltip>
+    );
+  }
+
+  return buttonContent;
+};
+
+Button.Input = ButtonInput;
+
+type FileProps = {
+  accept: string;
+  multiple?: boolean;
+  onSelectFiles: (files: string | string[]) => void;
+} & Props;
+
+/**  Accepts file input */
+function ButtonFile(props: FileProps) {
+  const { accept, multiple, onSelectFiles, ...rest } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  async function read(files: FileList) {
+    const promises = Array.from(files).map((file) => {
+      const reader = new FileReader();
+
+      return new Promise<string>((resolve) => {
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsText(file);
+      });
+    });
+
+    return await Promise.all(promises);
+  }
+
+  async function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    const files = event.target.files;
+    if (files?.length) {
+      const readFiles = await read(files);
+      onSelectFiles(multiple ? readFiles : readFiles[0]);
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={() => inputRef.current?.click()} {...rest} />
+      <input
+        hidden
+        type="file"
+        ref={inputRef}
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+      />
+    </>
+  );
+}
+
+Button.File = ButtonFile;