# All files / components/ActionableMessageBox index.js

95.65% Statements 22/23
92.86% Branches 13/14
92.31% Functions 12/13
95.65% Lines 22/23

    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

    3x

    3x

    3x
    3x
    3x
    3x

    3x

    12x
    12x

    12x

    12x

    3x

    3x

    6x
    6x

    6x

    24x
    24x

    2x

    3x

    3x

    3x

     import React from 'react';
    import PropTypes from 'prop-types';
    import styled from 'styled-components';
    import { rgba } from 'polished';
    import { themeColor } from '../../utils/style';

    const StyledActionList = styled.ul`
      display: block;
      cursor: ${(props) => props.disabled ? 'not-allowed' : '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};
    `;

    const StyledActionItem = styled.li`
      list-style: none;
      padding: 15px;
      color: ${(props) => themeColor(props.theme, 'accent', 'base')};
      background-color: ${(props) => props.selected ? rgba(themeColor(props.theme, 'accent', 'base'), 0.1) : ''};

      &:hover {
        background-color: ${(props) => !props.disabled ? rgba(themeColor(props.theme, 'accent', 'base'), 0.1) : ''};
      }
      &:first-child {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
      &:last-child {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      &:not(:last-child) {
        border-bottom: 1px solid ${(props) => props.theme.palette.divider};
      }
    `;
    StyledActionItem.displayName = 'StyledActionItem';

    const ActionableMessageBox = (props) => {
      const {
        data, onClickAction, disabled, selected,
      } = props;
      const { actions } = data;

      return (
        <StyledActionList className={props.className} disabled={disabled}>
          {actions.map((action, index) => {
            const isItemSelected = selected === action.id;
            return (
              <StyledActionItem
                selected={isItemSelected}
                disabled={disabled}
                key={action.id}
                role="presentation"
                tabIndex={index}
                onClick={onClickAction && !disabled ? ((e) => onClickAction(action, index, e)) : undefined}
                onKeyUp={onClickAction && !disabled ? ((e) => onClickAction(action, index, e)) : undefined}
              >
                <span>
                  {action.name}
                </span>
              </StyledActionItem>
            );
          })}
        </StyledActionList>
      );
    };

    ActionableMessageBox.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,
      /**
       * Callback function called when user clicks on an action Item
       * The callback has the following signature:
       * callback (action, index, e)
       */
      onClickAction: PropTypes.func,
      /**
       * Disabled boolean indicates if actions can be selected
       */
      disabled: PropTypes.bool,
      /**
       * Selected action item selected by default
       */
      selected: PropTypes.object,
    };

    ActionableMessageBox.defaultProps = {
      onClickAction: null,
      className: 'LT-ActionableMessageBox-Container',
      disabled: false,
      selected: null,
    };

    ActionableMessageBox.displayName = 'ActionableMessageBox';

    export default ActionableMessageBox;