All files / src/gadgets/filtered-dropdown progressive-disclosure.js

100% Statements 15/15
100% Branches 7/7
100% Functions 6/6
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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                              5x   2x   2x   1x                           6x 6x 6x 6x 6x 18x   72x   6x         1x                       1x                      
/* Copyright © 2016 Kuali, Inc. - All Rights Reserved
 * You may use and modify this code under the terms of the Kuali, Inc.
 * Pre-Release License Agreement. You may not distribute it.
 *
 * You should have received a copy of the Kuali, Inc. Pre-Release License
 * Agreement with this file. If not, please write to license@kuali.co.
 */
 
import PropTypes from 'prop-types'
import { SelectField } from '@kuali/kuali-ui'
import shortid from 'shortid'
import { get, values } from 'lodash'
import React, { Component } from 'react'
 
export function check (data, config) {
  switch (config.type) {
    case 'isSelected':
      return data === config.value
    case 'isNotSelected':
      return data !== config.value
    default:
      return true
  }
}
 
export class component extends Component {
  static displayName = 'FilteredDropdownProgressiveDisclosure'
 
  static propTypes = {
    details: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    value: PropTypes.object.isRequired
  }
 
  render () {
    const { details, onChange, value } = this.props
    const id = shortid.generate()
    const optionSets = get(details, 'data.values', [])
    let allOptions = []
    values(optionSets).forEach(set => {
      allOptions = allOptions.concat(set)
    })
    allOptions.sort((a, b) => a.lbl.localeCompare(b.lbl))
 
    return (
      <div style={{ display: 'flex', flex: 2, width: 0 }}>
        <SelectField
          id={`${id}-selected-select-field`}
          className='selected-select-field'
          onChange={type => onChange({ ...value, type })}
          style={{ flex: 1, marginRight: 10 }}
          value={value.type || ''}
          menuItems={[
            { value: '', label: '- - -' },
            { value: 'isSelected', label: 'is' },
            { value: 'isNotSelected', label: 'is not' }
          ]}
        />
        <SelectField
          id={`${id}-options-select-field`}
          className='options-select-field'
          onChange={val => onChange({ ...value, value: val })}
          style={{ flex: 1 }}
          value={value.value || ''}
          menuItems={[{ key: '', lbl: '- - -' }, ...allOptions]}
          itemLabel='lbl'
          itemValue='key'
        />
      </div>
    )
  }
}