diff --git a/tgui/packages/tgui/components/TextArea.jsx b/tgui/packages/tgui/components/TextArea.jsx
deleted file mode 100644
index 560915ffac1..00000000000
--- a/tgui/packages/tgui/components/TextArea.jsx
+++ /dev/null
@@ -1,240 +0,0 @@
-/**
- * @file
- * @copyright 2020 Aleksej Komarov
- * @author Warlockd
- * @license MIT
- */
-
-import { classes } from 'common/react';
-import { Component, createRef } from 'react';
-import { Box } from './Box';
-import { toInputValue } from './Input';
-import { KEY_ENTER, KEY_ESCAPE, KEY_TAB } from 'common/keycodes';
-
-export class TextArea extends Component {
- constructor(props) {
- super(props);
- this.textareaRef = props.innerRef || createRef();
- this.state = {
- editing: false,
- scrolledAmount: 0,
- };
- const { dontUseTabForIndent = false } = props;
- this.handleOnInput = (e) => {
- const { editing } = this.state;
- const { onInput } = this.props;
- if (!editing) {
- this.setEditing(true);
- }
- if (onInput) {
- onInput(e, e.target.value);
- }
- };
- this.handleOnChange = (e) => {
- const { editing } = this.state;
- const { onChange } = this.props;
- if (editing) {
- this.setEditing(false);
- }
- if (onChange) {
- onChange(e, e.target.value);
- }
- };
- this.handleKeyPress = (e) => {
- const { editing } = this.state;
- const { onKeyPress } = this.props;
- if (!editing) {
- this.setEditing(true);
- }
- if (onKeyPress) {
- onKeyPress(e, e.target.value);
- }
- };
- this.handleKeyDown = (e) => {
- const { editing } = this.state;
- const { onChange, onInput, onEnter, onKey } = this.props;
- if (e.keyCode === KEY_ENTER) {
- this.setEditing(false);
- if (onChange) {
- onChange(e, e.target.value);
- }
- if (onInput) {
- onInput(e, e.target.value);
- }
- if (onEnter) {
- onEnter(e, e.target.value);
- }
- if (this.props.selfClear) {
- e.target.value = '';
- e.target.blur();
- }
- return;
- }
- if (e.keyCode === KEY_ESCAPE) {
- if (this.props.onEscape) {
- this.props.onEscape(e);
- }
- this.setEditing(false);
- if (this.props.selfClear) {
- e.target.value = '';
- } else {
- e.target.value = toInputValue(this.props.value);
- e.target.blur();
- }
- return;
- }
- if (!editing) {
- this.setEditing(true);
- }
- // Custom key handler
- if (onKey) {
- onKey(e, e.target.value);
- }
- if (!dontUseTabForIndent) {
- const keyCode = e.keyCode || e.which;
- if (keyCode === KEY_TAB) {
- e.preventDefault();
- const { value, selectionStart, selectionEnd } = e.target;
- e.target.value =
- value.substring(0, selectionStart) +
- '\t' +
- value.substring(selectionEnd);
- e.target.selectionEnd = selectionStart + 1;
- if (onInput) {
- onInput(e, e.target.value);
- }
- }
- }
- };
- this.handleFocus = (e) => {
- const { editing } = this.state;
- if (!editing) {
- this.setEditing(true);
- }
- };
- this.handleBlur = (e) => {
- const { editing } = this.state;
- const { onChange } = this.props;
- if (editing) {
- this.setEditing(false);
- if (onChange) {
- onChange(e, e.target.value);
- }
- }
- };
- this.handleScroll = (e) => {
- const { displayedValue } = this.props;
- const input = this.textareaRef.current;
- if (displayedValue && input) {
- this.setState({
- scrolledAmount: input.scrollTop,
- });
- }
- };
- }
-
- componentDidMount() {
- const nextValue = this.props.value;
- const input = this.textareaRef.current;
- if (input) {
- input.value = toInputValue(nextValue);
- }
- if (this.props.autoFocus || this.props.autoSelect) {
- setTimeout(() => {
- input.focus();
-
- if (this.props.autoSelect) {
- input.select();
- }
- }, 1);
- }
- }
-
- componentDidUpdate(prevProps, prevState) {
- const prevValue = prevProps.value;
- const nextValue = this.props.value;
- const input = this.textareaRef.current;
- if (input && typeof nextValue === 'string' && prevValue !== nextValue) {
- input.value = toInputValue(nextValue);
- }
- }
-
- setEditing(editing) {
- this.setState({ editing });
- }
-
- getValue() {
- return this.textareaRef.current && this.textareaRef.current.value;
- }
-
- render() {
- // Input only props
- const {
- onChange,
- onKeyDown,
- onKeyPress,
- onInput,
- onFocus,
- onBlur,
- onEnter,
- value,
- maxLength,
- placeholder,
- scrollbar,
- noborder,
- displayedValue,
- ...boxProps
- } = this.props;
-
- // Box props
- const { className, fluid, nowrap, ...rest } = boxProps;
- const { scrolledAmount } = this.state;
- return (
-
- {!!displayedValue && (
-
-
- {displayedValue}
-
-
- )}
-
-
- );
- }
-}
diff --git a/tgui/packages/tgui/components/TextArea.tsx b/tgui/packages/tgui/components/TextArea.tsx
new file mode 100644
index 00000000000..cc6376d0de2
--- /dev/null
+++ b/tgui/packages/tgui/components/TextArea.tsx
@@ -0,0 +1,181 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @author Warlockd
+ * @license MIT
+ */
+
+import { classes } from 'common/react';
+import {
+ forwardRef,
+ useEffect,
+ useState,
+ RefObject,
+ useRef,
+ useImperativeHandle,
+} from 'react';
+import { toInputValue } from './Input';
+import { KEY } from 'common/keys';
+import { Box, BoxProps } from './Box';
+import { ChangeEvent, KeyboardEvent } from 'react';
+
+type Props = Partial<{
+ autoFocus: boolean;
+ autoSelect: boolean;
+ displayedValue: string;
+ dontUseTabForIndent: boolean;
+ maxLength: number;
+ noborder: boolean;
+ // This fires when: value changes
+ onChange: (event: ChangeEvent, value: string) => void;
+ // This fires when: enter is pressed
+ onEnter: (event: KeyboardEvent, value: string) => void;
+ // This fires when: escape is pressed
+ onEscape: (event: KeyboardEvent) => void;
+ placeholder: string;
+ scrollbar: boolean;
+ selfClear: boolean;
+ value: string;
+}> &
+ BoxProps;
+
+export const TextArea = forwardRef(
+ (props: Props, forwardedRef: RefObject) => {
+ const {
+ autoFocus,
+ autoSelect,
+ displayedValue,
+ dontUseTabForIndent,
+ maxLength,
+ noborder,
+ onChange,
+ onEnter,
+ onEscape,
+ placeholder,
+ scrollbar,
+ selfClear,
+ value,
+ ...boxProps
+ } = props;
+ const { className, fluid, nowrap, ...rest } = boxProps;
+
+ const textareaRef = useRef(null);
+ const [scrolledAmount, setScrolledAmount] = useState(0);
+
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === KEY.Enter) {
+ if (event.shiftKey) {
+ onChange?.(event as any, event.currentTarget.value);
+ 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,
+ );
+
+ useEffect(() => {
+ const input = textareaRef.current;
+ if (!input) return;
+
+ input.value = toInputValue(value);
+
+ if (autoFocus || autoSelect) {
+ setTimeout(() => {
+ input.focus();
+
+ if (autoSelect) {
+ input.select();
+ }
+ }, 1);
+ }
+ }, []);
+
+ return (
+
+ {!!displayedValue && (
+
+ )}
+