# All files / composer/components LinkAttachmentTextEditor.jsx

0% Statements 0/14
0% Branches 0/22
0% Functions 0/3
0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69

     /**
     * Component that displays a thumbnail that fits the width of its container
     */

    import React from 'react';
    import PropTypes from 'prop-types';
    import Textarea from 'react-textarea-autosize';
    import ComposerActionCreators from '../action-creators/ComposerActionCreators';
    import { LinkAttachmentTextFieldTypes } from '../AppConstants';
    import styles from './css/LinkAttachmentTextEditor.css';

    class LinkAttachmentTextEditor extends React.Component {
      static propTypes = {
        draftId: PropTypes.string.isRequired,
        type: PropTypes.string.isRequired,
        value: PropTypes.string.isRequired,
        canBeEdited: PropTypes.bool.isRequired,
      };

      onLinkFieldKeyDown = (e) => {
        // Prevent inserting line breaks in link title
        if (this.props.type === LinkAttachmentTextFieldTypes.TITLE) {
          if (e.key === 'Enter') e.preventDefault();
        }
      };

      onLinkFieldChange = (e) => {
        if (this.props.type === LinkAttachmentTextFieldTypes.TITLE) {
          ComposerActionCreators.updateDraftLinkTitle(this.props.draftId, e.target.value);
        } else if (this.props.type === LinkAttachmentTextFieldTypes.DESCRIPTION) {
          ComposerActionCreators.updateDraftLinkDescription(this.props.draftId, e.target.value);
        }
      };

      render() {
        const { value, type, canBeEdited } = this.props;

        let placeholder;
        if (type === LinkAttachmentTextFieldTypes.TITLE) {
          placeholder = 'No title';
        } else if (type === LinkAttachmentTextFieldTypes.DESCRIPTION) {
          placeholder = 'No description';
        }

        const textFieldClassName =
          type === LinkAttachmentTextFieldTypes.TITLE ?
            (canBeEdited ? styles.editableTitle : styles.title) :
          type === LinkAttachmentTextFieldTypes.DESCRIPTION ?
            (canBeEdited ? styles.editableDescription : styles.description) :
          null;

        return (
          <div>
            {canBeEdited ?
              <Textarea
                className={textFieldClassName}
                onKeyDown={this.onLinkFieldKeyDown}
                onChange={this.onLinkFieldChange}
                value={value}
                placeholder={placeholder}
              /> :
              <p className={textFieldClassName}>{value}</p>}
          </div>
        );
      }
    }

    export default LinkAttachmentTextEditor;