All files Item.js

91.67% Statements 11/12
60% Branches 12/20
100% Functions 5/5
91.67% Lines 11/12
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      1x 4x       4x 1x     3x                       1x 1x             1x   1x                                 3x                         3x                                    
import React from 'react';
import styled from '@emotion/styled';
 
const Item = ({ parentProps, parentState, parentMethods, item, itemIndex }) => {
  Iif (!!parentProps.itemRenderer) {
    return parentProps.itemRenderer(item, itemIndex, parentProps, parentState, parentMethods);
  }
 
  if (!parentProps.keepSelectedInList && parentMethods.isSelected(item)) {
    return null;
  }
 
  return (
    <ItemComponent
      role="option"
      aria-selected={parentMethods.isSelected(item)}
      aria-disabled={item.disabled}
      disabled={item.disabled}
      aria-label={item[parentProps.labelField]}
      key={`${item[parentProps.valueField]}${item[parentProps.labelField]}`}
      tabIndex="-1"
      className={`react-dropdown-select-item ${
        parentMethods.isSelected(item) ? 'react-dropdown-select-item-selected' : ''
        } ${parentState.cursor === itemIndex ? 'react-dropdown-select-item-active' : null}`}
      onClick={item.disabled ? undefined : () => parentMethods.addItem(item)}
      onKeyPress={item.disabled ? undefined : () => parentMethods.addItem(item)}
      color={parentProps.color}>
      {item[parentProps.labelField]} {item.disabled && <ins>disabled</ins>}
    </ItemComponent>
  );
};
 
Item.propTypes = {};
 
const ItemComponent = styled.span`
  padding: 5px 10px;
  cursor: pointer;
  border-bottom: 1px solid #fff;
  
  &.react-dropdown-select-item-active {
    border-left: 5px solid #ccc;
  }
 
  :hover,
  :focus {
    background: #f2f2f2;
    outline: none;
  }
 
  &.react-dropdown-select-item-selected {
    ${({ disabled, color }) =>
      disabled
        ? `
    background: #f2f2f2;
    color: #ccc;
    `
        : `
    background: ${color};
    color: #fff;
    border-bottom: 1px solid #fff;
    `}
  }
 
  ${({ disabled }) =>
    disabled
      ? `
    background: #f2f2f2;
    color: #ccc;
    
    ins {
      text-decoration: none;
      border:1px solid #ccc;
      border-radius: 2px;
      padding: 0px 3px;
      font-size: x-small;
      text-transform: uppercase;
    }
    `
      : ''}
`;
 
export default Item;