# All files / composer/components AttachmentGlance.jsx

0% Statements 0/29
0% Branches 0/34
0% Functions 0/3
0% Lines 0/29

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
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88

     /**
     * Component that displays toggles for attachments.
     */

    import React from 'react';
    import PropTypes from 'prop-types';
    import { AttachmentTypes } from '../AppConstants';
    import { escapeParens } from '../utils/StringUtils';
    import styles from './css/AttachmentGlance.css';
    import ComposerActionCreators from '../action-creators/ComposerActionCreators';
    import AppActionCreators from '../action-creators/AppActionCreators';

    class AttachmentGlance extends React.Component {

      static propTypes = {
        draft: PropTypes.object.isRequired,
        attachmentType: PropTypes.string.isRequired,
        attachmentThumbnails: PropTypes.array,
      };

      onClick = (e) => {
        e.preventDefault();
        ComposerActionCreators.expand(this.props.draft.id);
        AppActionCreators.trackUserAction(['composer', 'expand']);
      };

      render() {
        const { draft, attachmentType, attachmentThumbnails } = this.props;
        let iconClassName;

        if (attachmentType === AttachmentTypes.MEDIA && draft.video !== null) {
          iconClassName = ['bi bi-video', styles.attachmentIcon].join(' ');
        } else if (attachmentType === AttachmentTypes.MEDIA && draft.gif !== null) {
          iconClassName = ['bi bi-gif', styles.attachmentIcon].join(' ');
        } else if (attachmentType === AttachmentTypes.MEDIA && draft.images.length > 0) {
          iconClassName = ['bi bi-image', styles.attachmentIcon].join(' ');
        } else if (attachmentType === AttachmentTypes.LINK && draft.link !== null) {
          iconClassName = ['bi bi-link', styles.attachmentIcon].join(' ');
        } else if (attachmentType === AttachmentTypes.RETWEET && draft.retweet !== null) {
          iconClassName = ['bi bi-retweet', styles.attachmentIcon].join(' ');
        }
        const hasThumbnail = attachmentThumbnails !== null;

        let thumbnailContainerClassName = '';
        if (attachmentThumbnails === null) {
          thumbnailContainerClassName = '';
        } else if (attachmentThumbnails.length === 1) {
          thumbnailContainerClassName =
            [styles.singleThumbnailContainer, styles.thumbnailContainer].join(' ');
        } else if (attachmentThumbnails.length === 2) {
          thumbnailContainerClassName =
            [styles.twoThumbnailContainer, styles.thumbnailContainer].join(' ');
        } else if (attachmentThumbnails.length === 3) {
          thumbnailContainerClassName =
            [styles.threeThumbnailContainer, styles.thumbnailContainer].join(' ');
        } else if (attachmentThumbnails.length === 4) {
          thumbnailContainerClassName =
            [styles.fourThumbnailContainer, styles.thumbnailContainer].join(' ');
        }

        const containerClass = [
          hasThumbnail ? styles.containerWithThumbnail : styles.containerNoThumbnail,
          styles.container,
        ].join(' ');

        return (
          <div className={containerClass} onClick={this.onClick}>
            <div
              className={iconClassName}
            />
            {hasThumbnail &&
              <div className={thumbnailContainerClassName}>
                {attachmentThumbnails.map((thumbnail) =>
                  <div
                    src={thumbnail}
                    key={thumbnail}
                    className={styles.thumbnail}
                    role="presentation"
                    style={{ backgroundImage: `url(${escapeParens(thumbnail)})` }}
                  />)}
              </div>}
          </div>
        );
      }
    }

    export default AttachmentGlance;