# All files / components/AttachmentMenu index.js

94.74% Statements 36/38
100% Branches 10/10
88.89% Functions 16/18
96.97% Lines 32/33

    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
    132

    2x
    1x
    4x
    2x
    2x

    1x

    2x
    2x
    2x
    2x
    2x

    2x

    2x
    2x

    1x
    21x

    4x

    4x

    4x

    4x

    4x

    1x

    1x

    6x
    6x

    6x

    21x

    3x

    1x

    1x

    1x

    1x

     /* eslint-disable camelcase */
    import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import { rgba } from 'polished';

    import { Flex, Box } from 'grid-styled';
    import { Icon } from 'react-icons-kit';

    import { ic_music_note as MusicNote } from 'react-icons-kit/md/ic_music_note';
    import { ic_attach_file as AttachFile } from 'react-icons-kit/md/ic_attach_file';
    import { ic_image as Image } from 'react-icons-kit/md/ic_image';
    import { ic_lock_open as LockOpen } from 'react-icons-kit/md/ic_lock_open';
    import { ic_video_library as VideoLibrary } from 'react-icons-kit/md/ic_video_library';

    import { textColor, themeColor } from '../../utils/style';

    const MdMusicNote = (props) => <Icon icon={MusicNote} {...props} />;
    const MdAttachFile = (props) => <Icon icon={AttachFile} {...props} />;
    const MdImage = (props) => <Icon icon={Image} {...props} />;
    const MdLockOpen = (props) => <Icon icon={LockOpen} {...props} />;
    const MdVideoLibrary = (props) => <Icon icon={VideoLibrary} {...props} />;

    const StyledMenuList = styled.ul`
      display: block;
      cursor: pointer;
      padding: 0;
      margin: 0;
      border-radius: 5px;
      background-color: ${(props) => props.theme.palette.common.white};
      font-size: ${(props) => props.theme.typography.classes.caption.fontSize};
      line-height: ${(props) => props.theme.typography.classes.caption.lineHeight};
      font-weight: ${(props) => props.theme.typography.weights.fontWeightMedium};
      box-shadow: ${(props) => props.theme.shadows['4p']};

      li {
        list-style: none;
        padding: 15px;
        color: ${(props) => textColor(props.theme, 'light', 'secondary')};

        &:hover {
          color: ${(props) => themeColor(props.theme, 'accent', 'base')};
          background-color: ${(props) => rgba(themeColor(props.theme, 'accent', 'base'), 0.1)};
        }
      }
    `;

    const renderIcon = (type, size) => {
      switch (type) {
        case 'image':
          return <MdImage size={size} />;
        case 'video':
          return <MdVideoLibrary size={size} />;
        case 'audio':
          return <MdMusicNote size={size} />;
        case 'document':
          return <MdImage size={size} />;
        case 'link':
          return <MdLockOpen size={size} />;
        default:
          return <MdAttachFile size={size} />;
      }
    };

    const AttachmentMenu = (props) => {
      const {
        className, data, onItemClick, iconSize,
      } = props;
      const { items } = data;

      return (
        <StyledMenuList className={className}>
          {items.map((item, index) => (
            <li
              key={item.id}
            >
              <div
                role="button"
                tabIndex={index}
                onClick={onItemClick && ((e) => onItemClick(item, index, e))}
                onKeyUp={onItemClick && ((e) => onItemClick(item, index, e))}
              >
                <Flex flex="1 1 auto" alignItems="center">
                  <Box p={2}>
                    {renderIcon(item.type, iconSize)}
                  </Box>
                  <Box p={2} ml="auto" width={1}>
                    <span>{item.name}</span>
                  </Box>
                </Flex>
              </div>
            </li>
          ))}
        </StyledMenuList>
      );
    };

    AttachmentMenu.defaultProps = {
      onItemClick: null,
      className: 'LT-AttachmentMenu-Container',
    };

    AttachmentMenu.propTypes = {
      /**
       * Array of element to display as Action items [{ id: '1', name: 'MyAction'}]
       */
      data: PropTypes.object.isRequired,
      /**
       * Extra className to style the component
       */
      className: PropTypes.string,
      /**
       * Size for the icons
       */
      iconSize: PropTypes.number,
      /**
       * Callback function called when user clicks on an action Item
       * The callback has the following signature:
       * callback (action, index, e)
       */
      onItemClick: PropTypes.func,
    };

    AttachmentMenu.defaultProps = {
      className: 'LT-AttachmentMenu-Wrapper',
      iconSize: 20,
    };

    AttachmentMenu.displayName = 'AttachmentMenu';

    export default AttachmentMenu;