tgui-core 1.0.2 → 1.0.3

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

@@ -1,198 +1,198 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @author Warlockd
- * @license MIT
- */
-
-import { KEY } from '../common/keys';
-import { classes } from '../common/react';
-import {
-  forwardRef,
-  RefObject,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-import { KeyboardEvent, SyntheticEvent } from 'react';
-
-import { Box, BoxProps } from './Box';
-import { toInputValue } from './Input';
-
-type Props = Partial<{
-  autoFocus: boolean;
-  autoSelect: boolean;
-  displayedValue: string;
-  dontUseTabForIndent: boolean;
-  fluid: boolean;
-  maxLength: number;
-  noborder: boolean;
-  /** Fires when user is 'done typing': Clicked out, blur, enter key (but not shift+enter) */
-  onChange: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-  /** Fires once the enter key is pressed */
-  onEnter: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-  /** Fires once the escape key is pressed */
-  onEscape: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
-  /** Fires on each key press / value change. Used for searching */
-  onInput: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
-  placeholder: string;
-  scrollbar: boolean;
-  selfClear: boolean;
-  value: string;
-}> &
-  BoxProps;
-
-export const TextArea = forwardRef(
-  (props: Props, forwardedRef: RefObject<HTMLTextAreaElement>) => {
-    const {
-      autoFocus,
-      autoSelect,
-      displayedValue,
-      dontUseTabForIndent,
-      maxLength,
-      noborder,
-      onChange,
-      onEnter,
-      onEscape,
-      onInput,
-      placeholder,
-      scrollbar,
-      selfClear,
-      value,
-      ...boxProps
-    } = props;
-    const { className, fluid, nowrap, ...rest } = boxProps;
-
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const [scrolledAmount, setScrolledAmount] = useState(0);
-
-    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (event.key === KEY.Enter) {
-        if (event.shiftKey) {
-          event.currentTarget.focus();
-          return;
-        }
-
-        onEnter?.(event, event.currentTarget.value);
-        if (selfClear) {
-          event.currentTarget.value = '';
-        }
-        event.currentTarget.blur();
-        return;
-      }
-
-      if (event.key === KEY.Escape) {
-        onEscape?.(event);
-        if (selfClear) {
-          event.currentTarget.value = '';
-        } else {
-          event.currentTarget.value = toInputValue(value);
-          event.currentTarget.blur();
-        }
-
-        return;
-      }
-
-      if (!dontUseTabForIndent && event.key === KEY.Tab) {
-        event.preventDefault();
-        const { value, selectionStart, selectionEnd } = event.currentTarget;
-        event.currentTarget.value =
-          value.substring(0, selectionStart) +
-          '\t' +
-          value.substring(selectionEnd);
-        event.currentTarget.selectionEnd = selectionStart + 1;
-      }
-    };
-
-    useImperativeHandle(
-      forwardedRef,
-      () => textareaRef.current as HTMLTextAreaElement
-    );
-
-    /** Focuses the input on mount */
-    useEffect(() => {
-      if (!autoFocus && !autoSelect) return;
-
-      const input = textareaRef.current;
-      if (!input) return;
-
-      if (autoFocus || autoSelect) {
-        setTimeout(() => {
-          input.focus();
-
-          if (autoSelect) {
-            input.select();
-          }
-        }, 1);
-      }
-    }, []);
-
-    /** Updates the initial value on props change */
-    useEffect(() => {
-      const input = textareaRef.current;
-      if (!input) return;
-
-      const newValue = toInputValue(value);
-      if (input.value === newValue) return;
-
-      input.value = newValue;
-    }, [value]);
-
-    return (
-      <Box
-        className={classes([
-          'TextArea',
-          fluid && 'TextArea--fluid',
-          noborder && 'TextArea--noborder',
-          className,
-        ])}
-        {...rest}
-      >
-        {!!displayedValue && (
-          <div
-            style={{
-              height: '100%',
-              overflow: 'hidden',
-              position: 'absolute',
-              width: '100%',
-            }}
-          >
-            <div
-              className={classes([
-                'TextArea__textarea',
-                'TextArea__textarea_custom',
-              ])}
-              style={{
-                transform: `translateY(-${scrolledAmount}px)`,
-              }}
-            >
-              {displayedValue}
-            </div>
-          </div>
-        )}
-        <textarea
-          className={classes([
-            'TextArea__textarea',
-            scrollbar && 'TextArea__textarea--scrollable',
-            nowrap && 'TextArea__nowrap',
-          ])}
-          maxLength={maxLength}
-          onBlur={(event) => onChange?.(event, event.target.value)}
-          onChange={(event) => onInput?.(event, event.target.value)}
-          onKeyDown={handleKeyDown}
-          onScroll={() => {
-            if (displayedValue && textareaRef.current) {
-              setScrolledAmount(textareaRef.current.scrollTop);
-            }
-          }}
-          placeholder={placeholder}
-          ref={textareaRef}
-          style={{
-            color: displayedValue ? 'rgba(0, 0, 0, 0)' : 'inherit',
-          }}
-        />
-      </Box>
-    );
-  }
-);
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @author Warlockd
+ * @license MIT
+ */
+
+import { KEY } from '../common/keys';
+import { classes } from '../common/react';
+import {
+  forwardRef,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { KeyboardEvent, SyntheticEvent } from 'react';
+
+import { Box, BoxProps } from './Box';
+import { toInputValue } from './Input';
+
+type Props = Partial<{
+  autoFocus: boolean;
+  autoSelect: boolean;
+  displayedValue: string;
+  dontUseTabForIndent: boolean;
+  fluid: boolean;
+  maxLength: number;
+  noborder: boolean;
+  /** Fires when user is 'done typing': Clicked out, blur, enter key (but not shift+enter) */
+  onChange: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
+  /** Fires once the enter key is pressed */
+  onEnter: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
+  /** Fires once the escape key is pressed */
+  onEscape: (event: SyntheticEvent<HTMLTextAreaElement>) => void;
+  /** Fires on each key press / value change. Used for searching */
+  onInput: (event: SyntheticEvent<HTMLTextAreaElement>, value: string) => void;
+  placeholder: string;
+  scrollbar: boolean;
+  selfClear: boolean;
+  value: string;
+}> &
+  BoxProps;
+
+export const TextArea = forwardRef(
+  (props: Props, forwardedRef: RefObject<HTMLTextAreaElement>) => {
+    const {
+      autoFocus,
+      autoSelect,
+      displayedValue,
+      dontUseTabForIndent,
+      maxLength,
+      noborder,
+      onChange,
+      onEnter,
+      onEscape,
+      onInput,
+      placeholder,
+      scrollbar,
+      selfClear,
+      value,
+      ...boxProps
+    } = props;
+    const { className, fluid, nowrap, ...rest } = boxProps;
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const [scrolledAmount, setScrolledAmount] = useState(0);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === KEY.Enter) {
+        if (event.shiftKey) {
+          event.currentTarget.focus();
+          return;
+        }
+
+        onEnter?.(event, event.currentTarget.value);
+        if (selfClear) {
+          event.currentTarget.value = '';
+        }
+        event.currentTarget.blur();
+        return;
+      }
+
+      if (event.key === KEY.Escape) {
+        onEscape?.(event);
+        if (selfClear) {
+          event.currentTarget.value = '';
+        } else {
+          event.currentTarget.value = toInputValue(value);
+          event.currentTarget.blur();
+        }
+
+        return;
+      }
+
+      if (!dontUseTabForIndent && event.key === KEY.Tab) {
+        event.preventDefault();
+        const { value, selectionStart, selectionEnd } = event.currentTarget;
+        event.currentTarget.value =
+          value.substring(0, selectionStart) +
+          '\t' +
+          value.substring(selectionEnd);
+        event.currentTarget.selectionEnd = selectionStart + 1;
+      }
+    };
+
+    useImperativeHandle(
+      forwardedRef,
+      () => textareaRef.current as HTMLTextAreaElement
+    );
+
+    /** Focuses the input on mount */
+    useEffect(() => {
+      if (!autoFocus && !autoSelect) return;
+
+      const input = textareaRef.current;
+      if (!input) return;
+
+      if (autoFocus || autoSelect) {
+        setTimeout(() => {
+          input.focus();
+
+          if (autoSelect) {
+            input.select();
+          }
+        }, 1);
+      }
+    }, []);
+
+    /** Updates the initial value on props change */
+    useEffect(() => {
+      const input = textareaRef.current;
+      if (!input) return;
+
+      const newValue = toInputValue(value);
+      if (input.value === newValue) return;
+
+      input.value = newValue;
+    }, [value]);
+
+    return (
+      <Box
+        className={classes([
+          'TextArea',
+          fluid && 'TextArea--fluid',
+          noborder && 'TextArea--noborder',
+          className,
+        ])}
+        {...rest}
+      >
+        {!!displayedValue && (
+          <div
+            style={{
+              height: '100%',
+              overflow: 'hidden',
+              position: 'absolute',
+              width: '100%',
+            }}
+          >
+            <div
+              className={classes([
+                'TextArea__textarea',
+                'TextArea__textarea_custom',
+              ])}
+              style={{
+                transform: `translateY(-${scrolledAmount}px)`,
+              }}
+            >
+              {displayedValue}
+            </div>
+          </div>
+        )}
+        <textarea
+          className={classes([
+            'TextArea__textarea',
+            scrollbar && 'TextArea__textarea--scrollable',
+            nowrap && 'TextArea__nowrap',
+          ])}
+          maxLength={maxLength}
+          onBlur={(event) => onChange?.(event, event.target.value)}
+          onChange={(event) => onInput?.(event, event.target.value)}
+          onKeyDown={handleKeyDown}
+          onScroll={() => {
+            if (displayedValue && textareaRef.current) {
+              setScrolledAmount(textareaRef.current.scrollTop);
+            }
+          }}
+          placeholder={placeholder}
+          ref={textareaRef}
+          style={{
+            color: displayedValue ? 'rgba(0, 0, 0, 0)' : 'inherit',
+          }}
+        />
+      </Box>
+    );
+  }
+);

package/{src/components → components}/TimeDisplay.jsx

@@ -1,64 +1,64 @@
-import { Component } from 'react';
-
-import { formatTime } from '../format';
-
-// AnimatedNumber Copypaste
-const isSafeNumber = (value) => {
-  return (
-    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
-  );
-};
-
-export class TimeDisplay extends Component {
-  constructor(props) {
-    super(props);
-    this.timer = null;
-    this.last_seen_value = undefined;
-    this.state = {
-      value: 0,
-    };
-    // Set initial state with value provided in props
-    if (isSafeNumber(props.value)) {
-      this.state.value = Number(props.value);
-      this.last_seen_value = Number(props.value);
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.props.auto !== undefined) {
-      clearInterval(this.timer);
-      this.timer = setInterval(() => this.tick(), 1000); // every 1 s
-    }
-  }
-
-  tick() {
-    let current = Number(this.state.value);
-    if (this.props.value !== this.last_seen_value) {
-      this.last_seen_value = this.props.value;
-      current = this.props.value;
-    }
-    const mod = this.props.auto === 'up' ? 10 : -10; // Time down by default.
-    const value = Math.max(0, current + mod); // one sec tick
-    this.setState({ value });
-  }
-
-  componentDidMount() {
-    if (this.props.auto !== undefined) {
-      this.timer = setInterval(() => this.tick(), 1000); // every 1 s
-    }
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timer);
-  }
-
-  render() {
-    const val = this.state.value;
-    // Directly display weird stuff
-    if (!isSafeNumber(val)) {
-      return this.state.value || null;
-    }
-
-    return formatTime(val);
-  }
-}
+import { Component } from 'react';
+
+import { formatTime } from '../src/format';
+
+// AnimatedNumber Copypaste
+const isSafeNumber = (value) => {
+  return (
+    typeof value === 'number' && Number.isFinite(value) && !Number.isNaN(value)
+  );
+};
+
+export class TimeDisplay extends Component {
+  constructor(props) {
+    super(props);
+    this.timer = null;
+    this.last_seen_value = undefined;
+    this.state = {
+      value: 0,
+    };
+    // Set initial state with value provided in props
+    if (isSafeNumber(props.value)) {
+      this.state.value = Number(props.value);
+      this.last_seen_value = Number(props.value);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.auto !== undefined) {
+      clearInterval(this.timer);
+      this.timer = setInterval(() => this.tick(), 1000); // every 1 s
+    }
+  }
+
+  tick() {
+    let current = Number(this.state.value);
+    if (this.props.value !== this.last_seen_value) {
+      this.last_seen_value = this.props.value;
+      current = this.props.value;
+    }
+    const mod = this.props.auto === 'up' ? 10 : -10; // Time down by default.
+    const value = Math.max(0, current + mod); // one sec tick
+    this.setState({ value });
+  }
+
+  componentDidMount() {
+    if (this.props.auto !== undefined) {
+      this.timer = setInterval(() => this.tick(), 1000); // every 1 s
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  render() {
+    const val = this.state.value;
+    // Directly display weird stuff
+    if (!isSafeNumber(val)) {
+      return this.state.value || null;
+    }
+
+    return formatTime(val);
+  }
+}

package/components/index.ts

@@ -0,0 +1,51 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+export { AnimatedNumber } from './AnimatedNumber';
+export { Autofocus } from './Autofocus';
+export { Blink } from './Blink';
+export { BlockQuote } from './BlockQuote';
+export { Box } from './Box';
+export { Button } from './Button';
+export { ByondUi } from './ByondUi';
+export { Chart } from './Chart';
+export { Collapsible } from './Collapsible';
+export { ColorBox } from './ColorBox';
+export { Dialog } from './Dialog';
+export { Dimmer } from './Dimmer';
+export { Divider } from './Divider';
+export { DmIcon } from './DmIcon';
+export { DraggableControl } from './DraggableControl';
+export { Dropdown } from './Dropdown';
+export { FitText } from './FitText';
+export { Flex } from './Flex';
+export { Icon } from './Icon';
+export { Image } from './Image';
+export { InfinitePlane } from './InfinitePlane';
+export { Input } from './Input';
+export { KeyListener } from './KeyListener';
+export { Knob } from './Knob';
+export { LabeledControls } from './LabeledControls';
+export { LabeledList } from './LabeledList';
+export { MenuBar } from './MenuBar';
+export { Modal } from './Modal';
+export { NoticeBox } from './NoticeBox';
+export { NumberInput } from './NumberInput';
+export { Popper } from './Popper';
+export { ProgressBar } from './ProgressBar';
+export { RestrictedInput } from './RestrictedInput';
+export { RoundGauge } from './RoundGauge';
+export { Section } from './Section';
+export { Slider } from './Slider';
+export { Stack } from './Stack';
+export { StyleableSection } from './StyleableSection';
+export { Table } from './Table';
+export { Tabs } from './Tabs';
+export { TextArea } from './TextArea';
+export { TimeDisplay } from './TimeDisplay';
+export { Tooltip } from './Tooltip';
+export { TrackOutsideClicks } from './TrackOutsideClicks';
+export { VirtualList } from './VirtualList';