import React from 'react'; import styled from 'styled-components'; import { Button, Checkbox, Form } from 'semantic-ui-react'; const filters = [ { name: 'Source', field: 'source' }, { name: 'Journal', field: 'journal', }, { name: 'Published', field: 'year', }, { name: 'Author', field: 'author', }, { name: 'Full text', field: 'has_full_text', }, ]; const PaddedCheckbox = styled(Checkbox)` && { display: block; padding: 2px; font-size: 0.9em; label { color: #303030; } } `; function Checkboxes({ name, field, values, onSearch }) { if (!values || values.length === 0) return null; const onChange = (event, { value, checked }) => { // The new selected checkboxes are the ones that were previously selected // and the current value of the checkbox that triggered the event const selected = values .filter(({ value: oValue, checked: oChecked }) => oValue === value ? checked : oChecked ) .map(({ value: oValue }) => oValue); onSearch({ [field]: selected }); }; return ( <Form.Field> <label>{name}</label> {values .filter( ({ value }) => value.length > 0 && !(field === 'year' && value === '1970') ) .map(({ value, count, checked }, i) => ( <PaddedCheckbox key={i} name={name} value={value} onChange={onChange} label={`${value} (${count})`} checked={checked} /> ))} </Form.Field> ); } function Sidebar({ onSearch, ...filterValues }) { const noneChecked = Object.values(filterValues) .flatMap(values => values.map(({ checked }) => checked)) .find(c => c) !== true; return ( <div id="sidebar" className="ui form" style={{ backgroundColor: '#e6eff5' }} > <Button disabled={noneChecked} onClick={() => onSearch( filters.reduce((obj, { field }) => ({ ...obj, [field]: [] }), {}) ) } > Clear all </Button> {filters.map(({ name, field }) => ( <Checkboxes key={field} name={name} field={field} values={filterValues[field]} onSearch={onSearch} /> ))} </div> ); } export default Sidebar;