refactor(form-elements-text-area): migrate TextArea from Flow to Type…

src/components/context-menu/__tests__/ContextMenu.test.tsx

@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import React, { act } from 'react';
 import { mount, shallow, ReactWrapper } from 'enzyme';
 import TetherComponent from 'react-tether';

src/components/datalist-item/DatalistItem.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-// @ts-ignore JS Import
 import DatalistItem from './DatalistItem';
 import notes from './DatalistItem.stories.md';
 

src/components/flyout/Flyout.stories.tsx

@@ -2,11 +2,9 @@ import * as React from 'react';
 
 import Button from '../button';
 import IconHelp from '../../icons/general/IconHelp';
-// @ts-ignore JS import
 import TextInput from '../text-input';
 import PlainButton from '../plain-button';
 import PrimaryButton from '../primary-button';
-// @ts-ignore JS import
 import TextArea from '../text-area';
 
 import { Flyout, Overlay } from '.';

src/components/form-elements/text-area/TextArea.js → src/components/form-elements/text-area/TextArea.js.flow

@@ -6,6 +6,11 @@ import TextAreaCore from '../../text-area';
 import * as messages from '../input-messages';
 import FormInput from '../form/FormInput';
 
+export type TextAreaValidationError = {
+    code: string,
+    message?: React.Node,
+};
+
 type Props = {
     autoFocus?: boolean,
     /** Add a class to the component */
@@ -22,8 +27,8 @@ type Props = {
     name: string,
     /** Placeholder for the text area */
     placeholder?: string,
-    /** Validation function that returns an error string or a promise that resolves to an error string */
-    validation?: Function,
+    /** Validation function that returns `TextAreaValidationError` or a falsy value when valid */
+    validation?: (value: string) => TextAreaValidationError | null | void,
     /** Default value of the text area */
     value: string,
 };
@@ -146,6 +151,7 @@ class TextArea extends React.Component<Props, State> {
             isRequired,
             isResizable,
             label,
+            maxLength,
             name,
             placeholder,
         } = this.props;
@@ -162,6 +168,7 @@ class TextArea extends React.Component<Props, State> {
                         label={label}
                         isRequired={isRequired}
                         isResizable={isResizable}
+                        maxLength={maxLength}
                         name={name}
                         onBlur={this.checkValidity}
                         onChange={this.onChange}
@@ -178,4 +185,6 @@ class TextArea extends React.Component<Props, State> {
     }
 }
 
+export type TextAreaProps = Props;
+
 export default TextArea;

src/components/form-elements/text-area/TextArea.stories.js → src/components/form-elements/text-area/TextArea.stories.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 
 import TextArea from './TextArea';
@@ -7,7 +6,7 @@ import notes from './TextArea.stories.md';
 export const basic = () => <TextArea name="textarea" label="Your story" placeholder="Once upon a time" />;
 
 export const withValidation = () => {
-    const textAreaValidator = value => {
+    const textAreaValidator = (value: string) => {
         if (!value.includes('www')) {
             return {
                 code: 'nowww',

src/components/form-elements/text-area/TextArea.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+
+import TextAreaCore from '../../text-area';
+
+import * as messages from '../input-messages';
+import FormInput from '../form/FormInput';
+
+/** Return type for the `validation` callback (`code` required for HTML constraint validation). */
+export interface TextAreaValidationError {
+    code: string;
+    message?: React.ReactNode;
+}
+
+/** Internal error shape in state (optional `code` for externally injected errors). */
+interface TextAreaError {
+    code?: string;
+    message?: React.ReactNode;
+}
+
+export interface TextAreaProps {
+    /** Whether the text area is focused on mount */
+    autoFocus?: boolean;
+    /** Add a class to the component */
+    className?: string;
+    /** Whether the text area is disabled */
+    isDisabled?: boolean;
+    /** Whether the text area is read-only */
+    isReadOnly?: boolean;
+    /** Whether the text area value is required */
+    isRequired?: boolean;
+    /** Is text area resizable */
+    isResizable?: boolean;
+    /** Label displayed for the text area */
+    label: React.ReactNode;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
+    /** Name of the text area */
+    name: string;
+    /** Placeholder for the text area */
+    placeholder?: string;
+    /** Validation function that returns `TextAreaValidationError` or a falsy value when valid */
+    validation?: (value: string) => TextAreaValidationError | null | undefined;
+    /** Default value of the text area */
+    value: string;
+}
+
+interface TextAreaState {
+    error: TextAreaError | null | undefined;
+    value: string;
+}
+
+class TextArea extends React.Component<TextAreaProps, TextAreaState> {
+    static defaultProps = {
+        autoFocus: false,
+        value: '',
+        isReadOnly: false,
+    };
+
+    constructor(props: TextAreaProps) {
+        super(props);
+        this.state = {
+            error: null,
+            value: props.value,
+        };
+    }
+
+    componentDidUpdate({ value: prevValue }: TextAreaProps): void {
+        // If a new value is passed by prop, set it
+        if (prevValue !== this.props.value) {
+            this.setState({
+                value: this.props.value,
+            });
+        }
+    }
+
+    onChange = ({ currentTarget }: React.ChangeEvent<HTMLTextAreaElement>): void => {
+        const { value } = currentTarget;
+        if (this.state.error) {
+            this.setState(
+                {
+                    value,
+                },
+                this.checkValidity,
+            );
+        } else {
+            this.setState({
+                value,
+            });
+        }
+    };
+
+    onValidityStateUpdateHandler = (error: ValidityState | TextAreaError): void => {
+        if ((error as ValidityState).valid !== undefined) {
+            this.setErrorFromValidityState(error as ValidityState);
+        } else {
+            this.setState({
+                error: error as TextAreaError,
+            });
+        }
+    };
+
+    setErrorFromValidityState(validityState: ValidityState): void {
+        const { badInput, customError, tooLong, valid, valueMissing } = validityState;
+
+        const { isRequired, maxLength, validation } = this.props;
+
+        const { value } = this.state;
+
+        let error;
+
+        if (valid) {
+            error = null;
+        } else if (badInput) {
+            error = messages.badInput();
+        } else if (tooLong && typeof maxLength !== 'undefined') {
+            error = messages.tooLong(maxLength);
+        } else if (valueMissing) {
+            error = messages.valueMissing();
+        } else if (customError && (isRequired || value.trim().length) && validation) {
+            error = validation(value);
+        }
+
+        this.setState({
+            error,
+        });
+    }
+
+    textarea: HTMLTextAreaElement | null | undefined;
+
+    // Updates component value and validity state
+    checkValidity = (): void => {
+        const { isRequired, validation } = this.props;
+        const { textarea } = this;
+
+        if (!textarea) {
+            return;
+        }
+
+        if (validation && (isRequired || textarea.value.trim().length)) {
+            const error = validation(textarea.value);
+            this.setState({
+                error,
+                value: textarea.value,
+            });
+
+            if (error) {
+                textarea.setCustomValidity(error.code);
+            } else {
+                textarea.setCustomValidity('');
+            }
+        } else {
+            this.setErrorFromValidityState(textarea.validity);
+        }
+    };
+
+    render(): React.ReactNode {
+        const {
+            autoFocus,
+            className = '',
+            isDisabled,
+            isReadOnly,
+            isRequired,
+            isResizable,
+            label,
+            maxLength,
+            name,
+            placeholder,
+        } = this.props;
+
+        const { error, value } = this.state;
+
+        return (
+            <div className={className}>
+                <FormInput name={name} onValidityStateUpdate={this.onValidityStateUpdateHandler}>
+                    <TextAreaCore
+                        autoFocus={autoFocus}
+                        disabled={isDisabled}
+                        error={error ? error.message : null}
+                        label={label}
+                        isRequired={isRequired}
+                        isResizable={isResizable}
+                        maxLength={maxLength}
+                        name={name}
+                        onBlur={this.checkValidity}
+                        onChange={this.onChange}
+                        placeholder={placeholder}
+                        readOnly={isReadOnly}
+                        textareaRef={textarea => {
+                            this.textarea = textarea;
+                        }}
+                        value={value}
+                    />
+                </FormInput>
+            </div>
+        );
+    }
+}
+
+export default TextArea;