talk/client/talk-plugin-commentbox/CommentForm.js

import React from 'react';
import PropTypes from 'prop-types';
import { Button } from 'coral-ui';
import cn from 'classnames';
import Slot from 'coral-framework/components/Slot';

import { name } from './CommentBox';
import styles from './styles.css';

import t from 'coral-framework/services/i18n';

/**
 * Common UI for Creating or Editing a Comment
 */
export class CommentForm extends React.Component {
  static propTypes = {
    charCountEnable: PropTypes.bool.isRequired,
    maxCharCount: PropTypes.number,

    // DOM ID for form input that edits comment body
    bodyInputId: PropTypes.string,

    // screen reader label for input that edits comment body
    bodyLabel: PropTypes.string,

    // Placeholder for input that edits comment body
    bodyPlaceholder: PropTypes.string,

    // render at start of button container (useful for extra buttons)
    buttonContainerStart: PropTypes.node,

    // render inside submit button
    submitText: PropTypes.node,

    // cStyle for enabled submit <coral-ui/Button>
    submitButtonCStyle: PropTypes.string,

    // return whether the submit button should be enabled for the provided
    // comment ({ body }) (for reasons other than charCount)
    submitEnabled: PropTypes.func,

    // className to add to buttons
    submitButtonClassName: PropTypes.string,
    cancelButtonClassName: PropTypes.string,

    body: PropTypes.string.isRequired,
    onBodyChange: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    onCancel: PropTypes.func,
    state: PropTypes.string,
    loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
  };
  static get defaultProps() {
    return {
      bodyLabel: t('comment_box.comment'),
      bodyPlaceholder: t('comment_box.comment'),
      submitText: t('comment_box.post'),
      submitButtonCStyle: 'darkGrey',
      submitEnabled: () => true,
    };
  }

  onBodyChange = e => {
    this.props.onBodyChange(e.target.value);
  };

  onClickSubmit = () => {
    this.props.onSubmit();
  };

  getButtonClassName = () => {
    switch (this.props.loadingState) {
      case 'loading':
        return cn(`${name}-button-loading`, styles.buttonLoading);
      case 'success':
        return cn(`${name}-button-success`, styles.buttonSuccess);
      case 'error':
        return cn(`${name}-button-error`, styles.buttonError);
      default:
        return '';
    }
  };

  render() {
    const {
      maxCharCount,
      submitEnabled,
      cancelButtonClassName,
      submitButtonClassName,
      charCountEnable,
      body,
      loadingState,
    } = this.props;

    const length = body.length;
    const isRespectingMaxCount = length =>
      charCountEnable && maxCharCount && length > maxCharCount;
    const disableSubmitButton =
      !length ||
      body.trim().length === 0 ||
      isRespectingMaxCount(length) ||
      !submitEnabled({ body }) ||
      loadingState === 'loading';
    const disableCancelButton = loadingState === 'loading';
    const disableTextArea = loadingState === 'loading';

    return (
      <div>
        <div className={`${name}-container`}>
          <label
            htmlFor={this.props.bodyInputId}
            className="screen-reader-text"
            aria-hidden={true}
          >
            {this.props.bodyLabel}
          </label>
          <textarea
            className={`${name}-textarea`}
            value={body}
            placeholder={this.props.bodyPlaceholder}
            id={this.props.bodyInputId}
            onChange={this.onBodyChange}
            rows={3}
            disabled={disableTextArea}
          />
          <Slot fill="commentInputArea" />
        </div>
        {this.props.charCountEnable && (
          <div
            className={`${name}-char-count ${
              length > maxCharCount ? `${name}-char-max` : ''
            }`}
          >
            {maxCharCount &&
              `${maxCharCount - length} ${t(
                'comment_box.characters_remaining'
              )}`}
          </div>
        )}
        <div className={`${name}-button-container`}>
          {this.props.buttonContainerStart}
          {typeof this.props.onCancel === 'function' && (
            <Button
              cStyle="darkGrey"
              className={cn(`${name}-cancel-button`, cancelButtonClassName)}
              onClick={this.props.onCancel}
              disabled={disableCancelButton}
            >
              {t('comment_box.cancel')}
            </Button>
          )}
          <Button
            cStyle={
              disableSubmitButton ? 'lightGrey' : this.props.submitButtonCStyle
            }
            className={cn(
              `${name}-button`,
              submitButtonClassName,
              this.getButtonClassName()
            )}
            onClick={this.onClickSubmit}
            disabled={disableSubmitButton ? 'disabled' : ''}
          >
            {this.props.submitText}
          </Button>
        </div>
      </div>
    );
  }
}