All files / lib/AlertCall/DeviceListCall index.js

100% Statements 18/18
91.67% Branches 11/12
100% Functions 6/6
100% Lines 18/18
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                                        1x 1x       1x 1x       1x         8x 8x   8x 16x 8x 8x       8x 16x 8x       8x                 16x                                                   89x             89x                                            
import React from 'react';
import PropTypes from 'prop-types';
import { uniqueId } from 'lodash';
import {
  Icon,
  List,
  ListItem,
  ListItemHeader,
  ListItemSection
} from '@collab-ui/react';
 
class DeviceListCall extends React.PureComponent {
  static displayName = 'DeviceListCall'
 
  state = {
    selectedIndex: this.props.defaultSelected,
    id: this.props.id || uniqueId('cui-device-list-call-'),
  };
 
  handleSelect = (e, value, index) => {
    const { onSelect, devices } = this.props;
    const currentIndex = devices.length < index - 1
      ? 0
      : index - 1;
 
    e.preventDefault();
    return this.setState({
      selectedIndex: currentIndex
    },
    () => (
      onSelect && onSelect(e, currentIndex, value)
    ));
  }
 
  render() {
    const { className, header, devices } = this.props;
    const { selectedIndex, id } = this.state;
 
    const getLeftSection = deviceType => {
      switch(deviceType) {
        case 'device': return <Icon name='spark-board_20' />;
        default: return <Icon name='laptop_20'/>;
      }
    };
 
    const getRightSection = (device, idx) => {
      if (idx === selectedIndex) {
        return <Icon name='check_20' color='blue'/>;
      }
    };
 
    return (
      <List
        className={className}
        onSelect={this.handleSelect}
        active={selectedIndex}
      >
        <ListItemHeader header={header} />
        {
          devices.map((ele, idx) => (
            <ListItem
              key={`device-${idx}`}
              id={id}
              value={ele}
              label={ele.name}
              title={ele.title || ele.name}
            >
              <ListItemSection position='left'>
                {getLeftSection(ele.type)}
              </ListItemSection>
              <ListItemSection position='center'>
                <div className='cui-list-item__header'>
                  {ele.name}
                </div>
              </ListItemSection>
              <ListItemSection position='right'>
                {getRightSection(ele, idx)}
              </ListItemSection>
            </ListItem>
          ))
        }
      </List>
    );
  }
}
 
DeviceListCall.defaultProps = {
  className: '',
  defaultSelected: 0,
  id: null,
  onSelect: null
};
 
DeviceListCall.propTypes = {
  /** Default Index Value selected */
  defaultSelected: PropTypes.number,
  /** required list of devices to show in list */
  devices: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      value: PropTypes.string,
      type: PropTypes.oneOf(['', 'device']),
      title: PropTypes.string
    })
  ).isRequired,
  /** HTML Class for associated input */
  className: PropTypes.string,
  /** ListItem header */
  header: PropTypes.string.isRequired,
  /** HTML ID for associated input */
  id: PropTypes.string,
  /** optional function called when list item is selected */
  onSelect: PropTypes.func
};
 
export default DeviceListCall;