tgui-core 1.0.2 → 1.0.3

package/{src/components → components}/Input.tsx

@@ -1,181 +1,181 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @license MIT
- */
-
-import { KEY } from '../common/keys';
-import { classes } from '../common/react';
-import { debounce } from '../common/timer';
-import { KeyboardEvent, SyntheticEvent, useEffect, useRef } from 'react';
-
-import { Box, BoxProps } from './Box';
-
-type ConditionalProps =
-  | {
-      /**
-       * Mark this if you want to debounce onInput.
-       *
-       * This is useful for expensive filters, large lists etc.
-       *
-       * Requires `onInput` to be set.
-       */
-      expensive?: boolean;
-      /**
-       * Fires on each key press / value change. Used for searching.
-       *
-       * If it's a large list, consider using `expensive` prop.
-       */
-      onInput: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-    }
-  | {
-      /** This prop requires onInput to be set */
-      expensive?: never;
-      onInput?: never;
-    };
-
-type OptionalProps = Partial<{
-  /** Automatically focuses the input on mount */
-  autoFocus: boolean;
-  /** Automatically selects the input value on focus */
-  autoSelect: boolean;
-  /** The class name of the input */
-  className: string;
-  /** Disables the input */
-  disabled: boolean;
-  /** Mark this if you want the input to be as wide as possible */
-  fluid: boolean;
-  /** The maximum length of the input value */
-  maxLength: number;
-  /** Mark this if you want to use a monospace font */
-  monospace: boolean;
-  /** Fires when user is 'done typing': Clicked out, blur, enter key */
-  onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-  /** Fires once the enter key is pressed */
-  onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
-  /** Fires once the escape key is pressed */
-  onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
-  /** The placeholder text when everything is cleared */
-  placeholder: string;
-  /** Clears the input value on enter */
-  selfClear: boolean;
-  /** The state variable of the input. */
-  value: string | number;
-}>;
-
-type Props = OptionalProps & ConditionalProps & BoxProps;
-
-export function toInputValue(value: string | number | undefined) {
-  return typeof value !== 'number' && typeof value !== 'string'
-    ? ''
-    : String(value);
-}
-
-const inputDebounce = debounce((onInput: () => void) => onInput(), 250);
-
-/**
- * ### Input
- * A basic text input which allow users to enter text into a UI.
- * > Input does not support custom font size and height due to the way
- * > it's implemented in CSS. Eventually, this needs to be fixed.
- */
-export function Input(props: Props) {
-  const {
-    autoFocus,
-    autoSelect,
-    className,
-    disabled,
-    expensive,
-    fluid,
-    maxLength,
-    monospace,
-    onChange,
-    onEnter,
-    onEscape,
-    onInput,
-    placeholder,
-    selfClear,
-    value,
-    ...rest
-  } = props;
-
-  // The ref to the input field
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  function handleInput(event: SyntheticEvent<HTMLInputElement>) {
-    if (!onInput) return;
-
-    const value = event.currentTarget?.value;
-
-    if (expensive) {
-      inputDebounce(() => onInput(event, value));
-    } else {
-      onInput(event, value);
-    }
-  }
-
-  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    if (event.key === KEY.Enter) {
-      onEnter?.(event, event.currentTarget.value);
-      if (selfClear) {
-        event.currentTarget.value = '';
-      } else {
-        event.currentTarget.blur();
-        onChange?.(event, event.currentTarget.value);
-      }
-
-      return;
-    }
-
-    if (event.key === KEY.Escape) {
-      onEscape?.(event);
-
-      event.currentTarget.value = toInputValue(value);
-      event.currentTarget.blur();
-    }
-  }
-
-  /** Focuses the input on mount */
-  useEffect(() => {
-    const input = inputRef.current;
-    if (!input) return;
-
-    const newValue = toInputValue(value);
-
-    if (input.value !== newValue) input.value = newValue;
-
-    if (!autoFocus && !autoSelect) return;
-
-    setTimeout(() => {
-      input.focus();
-
-      if (autoSelect) {
-        input.select();
-      }
-    }, 1);
-  }, []);
-
-  return (
-    <Box
-      className={classes([
-        'Input',
-        fluid && 'Input--fluid',
-        monospace && 'Input--monospace',
-        className,
-      ])}
-      {...rest}
-    >
-      <div className="Input__baseline">.</div>
-      <input
-        className="Input__input"
-        disabled={disabled}
-        maxLength={maxLength}
-        onBlur={(event) => onChange?.(event, event.target.value)}
-        onChange={handleInput}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        ref={inputRef}
-      />
-    </Box>
-  );
-}
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { KEY } from '../common/keys';
+import { classes } from '../common/react';
+import { debounce } from '../common/timer';
+import { KeyboardEvent, SyntheticEvent, useEffect, useRef } from 'react';
+
+import { Box, BoxProps } from './Box';
+
+type ConditionalProps =
+  | {
+      /**
+       * Mark this if you want to debounce onInput.
+       *
+       * This is useful for expensive filters, large lists etc.
+       *
+       * Requires `onInput` to be set.
+       */
+      expensive?: boolean;
+      /**
+       * Fires on each key press / value change. Used for searching.
+       *
+       * If it's a large list, consider using `expensive` prop.
+       */
+      onInput: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+    }
+  | {
+      /** This prop requires onInput to be set */
+      expensive?: never;
+      onInput?: never;
+    };
+
+type OptionalProps = Partial<{
+  /** Automatically focuses the input on mount */
+  autoFocus: boolean;
+  /** Automatically selects the input value on focus */
+  autoSelect: boolean;
+  /** The class name of the input */
+  className: string;
+  /** Disables the input */
+  disabled: boolean;
+  /** Mark this if you want the input to be as wide as possible */
+  fluid: boolean;
+  /** The maximum length of the input value */
+  maxLength: number;
+  /** Mark this if you want to use a monospace font */
+  monospace: boolean;
+  /** Fires when user is 'done typing': Clicked out, blur, enter key */
+  onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+  /** Fires once the enter key is pressed */
+  onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+  /** Fires once the escape key is pressed */
+  onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
+  /** The placeholder text when everything is cleared */
+  placeholder: string;
+  /** Clears the input value on enter */
+  selfClear: boolean;
+  /** The state variable of the input. */
+  value: string | number;
+}>;
+
+type Props = OptionalProps & ConditionalProps & BoxProps;
+
+export function toInputValue(value: string | number | undefined) {
+  return typeof value !== 'number' && typeof value !== 'string'
+    ? ''
+    : String(value);
+}
+
+const inputDebounce = debounce((onInput: () => void) => onInput(), 250);
+
+/**
+ * ### Input
+ * A basic text input which allow users to enter text into a UI.
+ * > Input does not support custom font size and height due to the way
+ * > it's implemented in CSS. Eventually, this needs to be fixed.
+ */
+export function Input(props: Props) {
+  const {
+    autoFocus,
+    autoSelect,
+    className,
+    disabled,
+    expensive,
+    fluid,
+    maxLength,
+    monospace,
+    onChange,
+    onEnter,
+    onEscape,
+    onInput,
+    placeholder,
+    selfClear,
+    value,
+    ...rest
+  } = props;
+
+  // The ref to the input field
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function handleInput(event: SyntheticEvent<HTMLInputElement>) {
+    if (!onInput) return;
+
+    const value = event.currentTarget?.value;
+
+    if (expensive) {
+      inputDebounce(() => onInput(event, value));
+    } else {
+      onInput(event, value);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === KEY.Enter) {
+      onEnter?.(event, event.currentTarget.value);
+      if (selfClear) {
+        event.currentTarget.value = '';
+      } else {
+        event.currentTarget.blur();
+        onChange?.(event, event.currentTarget.value);
+      }
+
+      return;
+    }
+
+    if (event.key === KEY.Escape) {
+      onEscape?.(event);
+
+      event.currentTarget.value = toInputValue(value);
+      event.currentTarget.blur();
+    }
+  }
+
+  /** Focuses the input on mount */
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    const newValue = toInputValue(value);
+
+    if (input.value !== newValue) input.value = newValue;
+
+    if (!autoFocus && !autoSelect) return;
+
+    setTimeout(() => {
+      input.focus();
+
+      if (autoSelect) {
+        input.select();
+      }
+    }, 1);
+  }, []);
+
+  return (
+    <Box
+      className={classes([
+        'Input',
+        fluid && 'Input--fluid',
+        monospace && 'Input--monospace',
+        className,
+      ])}
+      {...rest}
+    >
+      <div className="Input__baseline">.</div>
+      <input
+        className="Input__input"
+        disabled={disabled}
+        maxLength={maxLength}
+        onBlur={(event) => onChange?.(event, event.target.value)}
+        onChange={handleInput}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        ref={inputRef}
+      />
+    </Box>
+  );
+}

package/{src/components → components}/KeyListener.tsx

@@ -1,40 +1,40 @@
-import { Component } from 'react';
-
-import { KeyEvent } from '../events';
-import { listenForKeyEvents } from '../hotkeys';
-
-type KeyListenerProps = Partial<{
-  onKey: (key: KeyEvent) => void;
-  onKeyDown: (key: KeyEvent) => void;
-  onKeyUp: (key: KeyEvent) => void;
-}>;
-
-export class KeyListener extends Component<KeyListenerProps> {
-  dispose: () => void;
-
-  constructor(props) {
-    super(props);
-
-    this.dispose = listenForKeyEvents((key) => {
-      if (this.props.onKey) {
-        this.props.onKey(key);
-      }
-
-      if (key.isDown() && this.props.onKeyDown) {
-        this.props.onKeyDown(key);
-      }
-
-      if (key.isUp() && this.props.onKeyUp) {
-        this.props.onKeyUp(key);
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    this.dispose();
-  }
-
-  render() {
-    return null;
-  }
-}
+import { Component } from 'react';
+
+import { KeyEvent } from '../src/events';
+import { listenForKeyEvents } from '../src/hotkeys';
+
+type KeyListenerProps = Partial<{
+  onKey: (key: KeyEvent) => void;
+  onKeyDown: (key: KeyEvent) => void;
+  onKeyUp: (key: KeyEvent) => void;
+}>;
+
+export class KeyListener extends Component<KeyListenerProps> {
+  dispose: () => void;
+
+  constructor(props) {
+    super(props);
+
+    this.dispose = listenForKeyEvents((key) => {
+      if (this.props.onKey) {
+        this.props.onKey(key);
+      }
+
+      if (key.isDown() && this.props.onKeyDown) {
+        this.props.onKeyDown(key);
+      }
+
+      if (key.isUp() && this.props.onKeyUp) {
+        this.props.onKeyUp(key);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.dispose();
+  }
+
+  render() {
+    return null;
+  }
+}