All files Option.js

100% Statements 6/6
75% Branches 3/4
100% Functions 3/3
100% Lines 6/6
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      1x 2x                     1x           1x   1x         2x                                                  
import React from 'react';
import styled from '@emotion/styled';
 
const Option = ({ parentItem, parentProps, parentState, parentMethods }) =>
  parentItem && parentProps.optionRenderer ? (
    parentProps.optionRenderer(parentItem, parentProps, parentState, parentMethods)
  ) : (
    <OptionComponent
      role="listitem"
      disabled={parentProps.disabled}
      className="react-dropdown-select-option"
      color={parentProps.color}>
      <span className="react-dropdown-select-option-label">{parentItem[parentProps.labelField]}</span>
      <span
        className="react-dropdown-select-option-remove"
        onClick={(event) => parentMethods.removeItem(event, parentItem, parentProps.closeOnSelect)}>
        &times;
      </span>
    </OptionComponent>
  );
 
Option.propTypes = {};
 
const OptionComponent = styled.span`
  padding: 0 5px;
  border-radius: 2px;
  line-height: 21px;
  margin: 3px 0 3px 5px;
  background: ${({ color }) => color};
  color: #fff;
  display: inline-block;
 
  .react-dropdown-select-option-remove {
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: inline-block;
    text-align: center;
    margin: 0 -5px 0 0px;
    border-radius: 0 3px 3px 0;
 
    :hover {
      color: tomato;
    }
  }
 
  :hover,
  :hover > span {
    opacity: 0.9;
  }
`;
 
export default Option;