accounts-frontend/packages/app/components/ui/form/TextArea.tsx

import React from 'react';
import { MessageDescriptor } from 'react-intl';
import TextareaAutosize, {
  TextareaAutosizeProps,
} from 'react-textarea-autosize';
import clsx from 'clsx';
import { uniqueId, omit } from 'app/functions';
import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';

import styles from './form.scss';
import FormInputComponent from './FormInputComponent';

interface OwnProps {
  placeholder?: string | MessageDescriptor;
  label?: string | MessageDescriptor;
  skin: Skin;
  color: Color;
}

export default class TextArea extends FormInputComponent<
  OwnProps & Omit<TextareaAutosizeProps, keyof OwnProps>
> {
  static defaultProps = {
    color: COLOR_GREEN,
    skin: SKIN_DARK,
  };

  elRef = React.createRef<HTMLTextAreaElement>();

  render() {
    const {
      color,
      skin,
      label: labelText,
      placeholder: placeholderText,
    } = this.props;
    let label: React.ReactElement | undefined;
    let placeholder: string | undefined;

    const props = omit(
      {
        type: 'text',
        ...this.props,
      },
      ['label', 'placeholder', 'error', 'skin', 'color'],
    );

    if (labelText) {
      if (!props.id) {
        props.id = uniqueId('textarea');
      }

      label = (
        <label className={styles.textFieldLabel} htmlFor={props.id}>
          {this.formatMessage(labelText)}
        </label>
      );
    }

    if (placeholderText) {
      placeholder = this.formatMessage(placeholderText);
    }

    return (
      <div className={styles.formRow}>
        {label}
        <div className={styles.textAreaContainer}>
          <TextareaAutosize
            inputRef={this.elRef}
            className={clsx(
              styles.textArea,
              styles[`${skin}TextField`],
              styles[`${color}TextField`],
            )}
            placeholder={placeholder}
            {...props}
          />
        </div>
        {this.renderError()}
      </div>
    );
  }

  getValue() {
    const { current: el } = this.elRef;

    return el && el.value;
  }

  focus() {
    const { current: el } = this.elRef;

    if (!el) {
      return;
    }

    el.focus();
    setTimeout(el.focus.bind(el), 10);
  }
}