# All files / composer/components LinkAttachmentThumbnailEditor.jsx

0% Statements 0/16
0% Branches 0/18
0% Functions 0/4
0% Lines 0/16

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
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119

     /**
     * Component that displays and allows to navigate among a provided list
     * of suggested media
     */

    import React from 'react';
    import PropTypes from 'prop-types';
    import ComposerActionCreators from '../action-creators/ComposerActionCreators';
    import styles from './css/LinkAttachmentThumbnailEditor.css';
    import { FileUploadFormatsConfigs, UploadTypes } from '../AppConstants';
    import { escapeParens } from '../utils/StringUtils';
    import UploadZone from '../components/UploadZone';
    import Button from '../components/Button';
    import CircularUploadIndicator from '../components/progress-indicators/CircularUploadIndicator';

    class LinkAttachmentThumbnailEditor extends React.Component {
      static propTypes = {
        draftId: PropTypes.string.isRequired,
        selectedThumbnail: PropTypes.object,
        availableThumbnails: PropTypes.array,
        filesUploadProgress: PropTypes.instanceOf(Map),
        visibleNotifications: PropTypes.array,
        service: PropTypes.object,
        hasThumbnail: PropTypes.bool,
      };

      selectPreviousThumbnail = () =>
        ComposerActionCreators.selectPreviousLinkThumbnail(this.props.draftId);

      selectNextThumbnail = () =>
        ComposerActionCreators.selectNextLinkThumbnail(this.props.draftId);

      render() {
        const { selectedThumbnail, filesUploadProgress, availableThumbnails } = this.props;

        const scrollLeftButtonClassName = [
          styles.scrollLeftButton,
          'bi bi-arrow-left',
        ].join(' ');

        const scrollRightButtonClassName = [
          styles.scrollRightButton,
          'bi bi-arrow-right',
        ].join(' ');

        const progressIndicatorClassName = { container: styles.progressIndicator };

        const uploadFormatsConfig = new Map(FileUploadFormatsConfigs.IMAGE);
        const hasThumbnail = selectedThumbnail !== null;
        const hasMoreThanOneThumbnail = availableThumbnails !== null && availableThumbnails.length > 1;

        const areUploadsInProgress = filesUploadProgress.size > 0;
        const totalUploadsProgress = areUploadsInProgress &&
          Array.from(filesUploadProgress.values()).reduce((a, b) => a + b) / filesUploadProgress.size;

        const uploadZoneClassName = [
          'bi bi-add-media',
          styles.uploadZone,
          hasThumbnail ? '' : styles.noSuggestedImages,
          areUploadsInProgress ? styles.uploadInProgress : '',
        ].join(' ');

        const uploadZoneClassNames = {
          uploadZone: uploadZoneClassName,
          uploadZoneActive: styles.uploadZoneActive,
          uploadZoneDisabled: styles.uploadZoneDisabled,
        };

        const thumbnailStyles =
          areUploadsInProgress ? styles.uploadingThumbnail : styles.thumbnail;

        return (
          <div className={styles.thumbnailEditorContainer}>
            {hasThumbnail &&
              <div
                className={thumbnailStyles}
                style={{ backgroundImage: `url(${escapeParens(selectedThumbnail.url)})` }}
                role="img"
                aria-label="Link Thumbnail"
              />}

            <UploadZone
              classNames={uploadZoneClassNames}
              draftId={this.props.draftId}
              uploadFormatsConfig={uploadFormatsConfig}
              service={this.props.service}
              visibleNotifications={this.props.visibleNotifications}
              uploadType={UploadTypes.LINK_THUMBNAIL}
              multiple={false}
              disabled={areUploadsInProgress}
            />

            {areUploadsInProgress &&
              <CircularUploadIndicator
                size={54}
                progress={totalUploadsProgress}
                classNames={progressIndicatorClassName}
                showText
              />}

            {hasMoreThanOneThumbnail &&
              <Button
                className={scrollLeftButtonClassName} onClick={this.selectPreviousThumbnail}
                aria-label="Scroll suggested media left"
              />}

            {hasMoreThanOneThumbnail &&
              <Button
                className={scrollRightButtonClassName} onClick={this.selectNextThumbnail}
                aria-label="Scroll suggested media right"
              />}
          </div>
        );
      }
    }

    export default LinkAttachmentThumbnailEditor;