{"size": 1023, "ext": "js", "max_stars_repo_path": "lib/FilterGroups/stories/basic.js", "max_stars_repo_name": "jgnieuwhof/stripes-components", "max_stars_repo_stars_event_min_datetime": "2018-02-06T19:39:42.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-13T08:55:44.000Z", "max_issues_repo_path": "lib/FilterGroups/stories/basic.js", "max_issues_repo_name": "jgnieuwhof/stripes-components", "max_issues_repo_issues_event_min_datetime": "2017-05-30T13:39:15.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-29T22:12:50.000Z", "max_forks_repo_path": "lib/FilterGroups/stories/basic.js", "max_forks_repo_name": "jgnieuwhof/stripes-components", "max_forks_repo_forks_event_min_datetime": "2017-05-09T16:44:38.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-05T08:05:48.000Z"}
{"max_stars_count": 13, "max_issues_count": 1021, "max_forks_count": 43, "avg_line_length": 21.7659574468, "max_line_length": 73, "alphanum_fraction": 0.5337243402}
import React from 'react';
import FilterGroups, { initialFilterState } from '../index';

export default class Basic extends React.Component {
  constructor() {
    super();

    this.config = [
      {
        label: 'Item Types',
        name: 'item',
        cql: 'materialType',
        values: ['Books', 'DVDs', 'Microfilm'],
      }, {
        label: 'Location',
        name: 'location',
        cql: 'location.name',
        values: [{ name: 'Main Library', cql: 'main' }, 'Annex Library'],
      },
    ];

    this.state = {
      filters: initialFilterState(this.config, null),
    };
  }

  onChangeFilter = (e) => {
    this.setState(prevState => {
      const filters = Object.assign({}, prevState.filters);
      filters[e.target.name] = e.target.checked;
      return { filters };
    });
  }

  render() {
    return (
      <div>
        <FilterGroups
          config={this.config}
          filters={this.state.filters}
          onChangeFilter={this.onChangeFilter}
        />
      </div>
    );
  }
}
