# All files / components/MessageBox MessageTimeBox.js

96.55% Statements 28/29
94.12% Branches 16/17
90.91% Functions 10/11
100% Lines 25/25

    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
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131

    6x
    5x
    5x
    5x

    5x

    5x
    1x

    5x

    5x

    5x

    5x
    8x
    8x

    5x
    10x

    8x
    8x
    8x
    8x

    10x

    10x

    10x

    10x

    5x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';

    // Icons to be used on this component
    import { Icon } from 'react-icons-kit';
    import { ic_done_all as DoneAll } from 'react-icons-kit/md/ic_done_all';
    import { ic_access_time as AccessTime } from 'react-icons-kit/md/ic_access_time';
    import { ic_done as IcDone } from 'react-icons-kit/md/ic_done';
    import { ic_error_outline as IcErrorOutline } from 'react-icons-kit/md/ic_error_outline';

    // Constants
    import constants from '../../utils/constants';
    import { textColor } from '../../utils/style';
    import { formatDateTime } from '../../utils/datetime';

    const MdDoneAll = (props) => <Icon icon={DoneAll} {...props} />;
    const MdAccessTime = (props) => <Icon icon={AccessTime} {...props} />;
    const MdDone = (props) => <Icon icon={IcDone} {...props} />;
    const MdErrorOutline = (props) => <Icon icon={IcErrorOutline} {...props} />;

    const { messagesTypes } = constants;

    const StyledTimeAgoText = styled.span`
      font-size: ${(props) => props.theme.typography.classes.small.fontSize};
    `;
    StyledTimeAgoText.displayName = 'StyledTimeAgoText';

    const StyledStatusSpan = styled.span`
      margin-left: 3px;
    `;
    StyledStatusSpan.displayName = 'StyledStatusSpan';

    const messageTextColor = (theme, themeProps) => {
      const result = theme === 'primary' ? textColor(themeProps.theme, 'dark', 'disabled') : textColor(themeProps.theme, 'light', 'disabled');
      return result;
    };

    const MessageTimeBox = (props) => {
      const StyledMessageTimeBoxContainer = styled.span`
        display: inline-block;
        float: right;
        padding: 0 0 0 7px;
        position: relative;
        bottom: -4px;
        max-width: 80px;
        text-align: right;
        color: ${(themeProps) => messageTextColor(props.theme, themeProps, 'light', 'primary')};
        font-size: ${(themeProps) => themeProps.theme.typography.classes.caption.fontSize};
        line-height: ${(themeProps) => themeProps.theme.typography.classes.caption.lineHeight};
        font-weight: ${(themeProps) => themeProps.theme.typography.weights.fontWeightMedium};
      `;
      StyledMessageTimeBoxContainer.displayName = 'StyledMessageTimeBoxContainer';

      const {
        date, dateFormat, status, type,
      } = props;

      const dateToShow = formatDateTime(new Date(date), dateFormat);

      return (
        <StyledMessageTimeBoxContainer>
          {
            date && (type !== messagesTypes.TYPING)
          && (
            <StyledTimeAgoText>
              {dateToShow}
            </StyledTimeAgoText>
          )
          }
          {
            status
            && (
              <StyledStatusSpan>
                {
                  status === 'waiting' && <MdAccessTime />
                }
                {
                  status === 'sent' && <MdDone />
                }
                {
                  status === 'received' && <MdDoneAll />
                }
                {
                  status === 'read' && <MdDoneAll color="#4FC3F7" />
                }
                {
                  status === 'failed' && <MdErrorOutline />
                }
              </StyledStatusSpan>
            )
          }
        </StyledMessageTimeBoxContainer>);
    };

    MessageTimeBox.propTypes = {
      /**
       * Type of Message: Type of the message. Values are defined as constants.
       * The current supported types are: SYSTEM, TEXT, TYPING, TIME, ACTIONABLE, FILE, PHOTO.
       */
      type: PropTypes.string.isRequired,
      /**
       * theme: Theme to use to render this message.
       * Current supported values are: primary, secondary
       */
      theme: PropTypes.string,
      /**
       * status: Message status. Values are defined as constants.
       * Current supported values are: WAITING, SENT, RECEIVED, READ
       */
      status: PropTypes.string,
      /**
       * date: Message creation date.
       */
      date: PropTypes.instanceOf(Date),
      /**
       * dateFormat: Formated date string to show.
       * We support this format 'HH:mm'
       */
      dateFormat: PropTypes.string,
    };

    MessageTimeBox.defaultProps = {
      status: '',
      date: null,
      dateFormat: 'HH:mm',
    };

    export default MessageTimeBox;