All files / lib/SelectOption index.js

100% Statements 7/7
100% Branches 13/13
50% Functions 1/2
100% Lines 7/7
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                                                              17x       17x     17x                                       17x                           89x                                     89x                     89x    
import React from 'react';
import PropTypes from 'prop-types';
import { uniqueId } from 'lodash';
import {
  Checkbox,
  Icon,
  ListItem,
  ListItemSection,
} from '@collab-ui/react';
 
/**
 * @category containers
 * @component select-option
 * @variations collab-ui-react
 */
 
class SelectOption extends React.Component {
 
  state = {
    id: this.props.id || uniqueId('cui-select-option-'),
  }
 
  render() {
    const {
      className,
      isMulti,
      active,
      children,
      label,
      title,
      ...props
    } = this.props;
 
    const {
      id
    } = this.state;
 
    const separateChildren =
      isMulti
      ? (
        <Checkbox
          htmlId={`${id}__checkbox`}
          label={label}
          checked={active}
          onChange={() => {}}
        />
      ) : (
        [
          <ListItemSection key='child-0' position='center'>
            {label || children}
          </ListItemSection>,
          <ListItemSection key='child-1' position='right'>
            {active && <Icon color='blue' name='check_20'/>}
          </ListItemSection>
        ]
      );
 
 
    return (
       <ListItem
         className={`${(className && ` ${className}`) || ''}`}
         id={id}
         label={label}
         title={title || label}
         {...props}
        >
          {separateChildren}
        </ListItem>
    );
  }
}
 
SelectOption.propTypes = {
  /** @prop SelectOption Boolean that describes active state | false */
  active: PropTypes.bool,
  /** @prop Children nodes to render inside SelectOption | null */
  children: PropTypes.node,
  /** @prop Optional HTML Class Name for ListItem | '' */
  className: PropTypes.string,
  /** @prop SelectOption ID | '' */
  id: PropTypes.string,
  /** @prop Optional prop to know if multiple SelectOptions can be active | false */
  isMulti: PropTypes.bool,
  /** @prop SelectOption label text | '' */
  label: PropTypes.string,
  /** @prop ListItem Title | '' */
  title: PropTypes.string,
  /** @prop SelectOption value | '' */
  value: PropTypes.string,
};
 
SelectOption.defaultProps = {
  active: false,
  children: null,
  className: '',
  id: '',
  isMulti: false,
  label: '',
  title: '',
  value:'',
};
 
SelectOption.displayName = 'SelectOption';
 
export default SelectOption;