# All files / components/PhotoMessage index.js

100% Statements 13/13
100% Branches 2/2
100% Functions 1/1
100% Lines 13/13

    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

    3x

    3x

    3x

    3x

    2x
    2x

    2x

    2x

    2x

    2x

    3x

    3x

    3x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    // Helpers components
    import MessageTimeBox from '../MessageBox/MessageTimeBox';

    const StyledPhotoContainer = styled.div`
      margin-top: -3px;
      margin-right: -6px;
      margin-left: -6px;

      div {
        position: relative;
        display: flex;
        overflow: hidden;
        justify-content: center;
        border-radius: 5px;
        max-height: 300px;
      }
    `;

    StyledPhotoContainer.displayName = 'PhotoContainer';

    const StyledText = styled.div`
      padding: 5px 0px;
      max-width: 300px;
      margin: auto;
    `;

    const PhotoMessage = (props) => {
      const {
        onOpen, message,
      } = props;
      const { data, text } = message;

      const {
        alt, uri,
      } = data;

      const StyledImageContainer = styled.div`
        position: relative;
        display: flex;
        overflow: hidden;
        justify-content: center;
        border-radius: 5px;
        max-height: 300px;

        img {
          cursor: pointer;
          padding: 6px 0;
          max-width: 100%;
          max-height: 230px;
        }
      `;
      StyledImageContainer.displayName = 'ImageContainer';

      return (
        <StyledPhotoContainer>
          <StyledImageContainer
            onClick={onOpen}
            onKeyPress={onOpen}
          >
            <img
              src={uri}
              alt={alt}
            />
          </StyledImageContainer>
          {
            text
            && (
              <StyledText>
                {text}
              </StyledText>
            )
          }
          <MessageTimeBox
            theme={message.theme}
            type={message.type}
            dateFormat={message.dateFormat}
            date={message.date}
          />
        </StyledPhotoContainer>
      );
    };

    PhotoMessage.defaultProps = {
      onOpen: null,
    };

    PhotoMessage.propTypes = {
      message: PropTypes.object.isRequired,
      onOpen: PropTypes.func,
    };

    PhotoMessage.displayName = 'PhotoMessage';

    export default PhotoMessage;