# All files / components/MessageBox MessageFailedBox.js

100% Statements 12/12
100% Branches 6/6
100% Functions 4/4
100% Lines 11/11

    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

    3x

    3x

    3x

    3x

    3x

    3x
    4x
    4x
    4x
    4x

    3x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled, { css } from 'styled-components';
    import ReactTooltip from 'react-tooltip';

    // Icons to be used on this component
    import { Icon } from 'react-icons-kit';
    // eslint-disable-next-line camelcase
    import { repeat } from 'react-icons-kit/fa/repeat';

    // eslint-disable-next-line camelcase
    const FaRepeat = (props) => <Icon icon={repeat} {...props} />;

    const StyledMessageFailedBox = styled.div`
      display: flex;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: red;
      position: absolute;
      flex-direction: row;
      align-self: center;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 5px 0 rgba(164, 164, 164, 1);
      cursor: pointer;
      transition: all 0.3s ease;
      top: 0;
      bottom: 0;
      margin: auto;

      ${(props) => props.position === 'left'
          && css`
            right: -50px
          `};

      ${(props) => props.position === 'right'
          && css`
            left: -50px
          `};
    `;
    StyledMessageFailedBox.displayName = 'StyledMessageFailedBox';

    const MessageFailedBox = (props) => {
      const { message, onFailedClick } = props;
      const { options = {} } = message;
      const { labels = {} } = options;
      return (
        <StyledMessageFailedBox
          position={message.position}
          onClick={onFailedClick}
          onKeyPress={onFailedClick}
          data-tip={labels.clickToRetry}
        >
          <FaRepeat size={16} style={{ color: '#FFF' }} />
          <ReactTooltip />
        </StyledMessageFailedBox>
      );
    };

    MessageFailedBox.propTypes = {
      message: PropTypes.shape({
        /**
         * Position: What side the forward is displayed
         */
        position: PropTypes.string,
        /**
         * options: Object with options to the message box
         */
        options: PropTypes.object,
      }),
      /**
       * onFailedClick: Handler function to be called when user click on forwared message
       */
      onFailedClick: PropTypes.func,
    };

    export default MessageFailedBox;