All files / src/gadgets/list column-visibility.js

100% Statements 16/16
100% Branches 6/6
100% Functions 5/5
100% Lines 15/15

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                                                    3x   3x           3x 3x   3x 2x 2x 1x     3x 3x       9x 9x   9x     18x   18x                              
/* 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 { Checkbox } from '@kuali/kuali-ui'
import PropTypes from 'prop-types'
import React from 'react'
import { includes, noop } from 'lodash'
 
export default class ColumnVisibility extends React.Component {
  static propTypes = {
    onChange: PropTypes.func,
    headers: PropTypes.array,
    initialHiddenColumns: PropTypes.array
  }
 
  static defaultProps = {
    onChange: noop,
    initialHiddenColumns: []
  }
 
  constructor (props) {
    super(props)
 
    this.state = {
      hiddenColumns: this.props.initialHiddenColumns
    }
  }
 
  handleChange = (checked, evt) => {
    const column = evt.target.name
    let { hiddenColumns } = this.state
 
    if (includes(hiddenColumns, column) && checked) {
      hiddenColumns = hiddenColumns.filter(name => name !== column)
    } else if (!checked) {
      hiddenColumns = [...hiddenColumns, column]
    }
 
    this.setState({ hiddenColumns })
    this.props.onChange(hiddenColumns)
  }
 
  render () {
    const { headers } = this.props
    const { hiddenColumns } = this.state
 
    return (
      <div>
        {headers.map((header, index) => {
          const checked = !includes(hiddenColumns, header.key)
 
          return (
            <Checkbox
              key={header.key}
              id={header.key}
              name={header.key}
              label={header.label}
              checked={checked}
              onChange={this.handleChange}
            />
          )
        })}
      </div>
    )
  }
}