# All files / components/MessageBox MessageForwardBox.js

100% Statements 10/10
100% Branches 4/4
100% Functions 4/4
100% Lines 9/9

    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

    9x

    3x

    9x

    9x

    3x

    3x
    10x
    10x

    3x

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

    // Icons to be used on this component
    import { Icon } from 'react-icons-kit';
    import { forward } from 'react-icons-kit/fa/forward';

    const FaForward = (props) => <Icon icon={forward} {...props} />;

    const StyledMessageForwardBox = styled.div`
      display: flex;
      width: 30px;
      height: 30px;
      border-radius: 20px;
      background: #fff;
      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
          `};
    `;
    StyledMessageForwardBox.displayName = 'StyledMessageForwardBox';

    const MessageForwardBox = (props) => {
      const { message, onForwardClick } = props;
      return (
        <StyledMessageForwardBox
          position={message.position}
          onClick={onForwardClick}
          onKeyPress={onForwardClick}
        >
          <FaForward color="#000" />
        </StyledMessageForwardBox>
      );
    };

    MessageForwardBox.propTypes = {
      message: PropTypes.shape({
        /**
         * Position: What side the forward is displayed
         */
        position: PropTypes.string,
      }),
      /**
       * onForwardClick: Handler function to be called when user click on forwared message
       */
      onForwardClick: PropTypes.func,
    };

    export default MessageForwardBox;