function RefinementsPanelCustom() {
const [value, setValue] = useState();
const [valueObject, setValueObject] = useState();
const [refinements, { set, push }] = useList();
const makes = [
{ label: 'Audi', count: 32, id: 'audi', value: 'audi', selected: true },
{ label: 'BMW', count: 12, id: 'BMW', value: 'BMW', selected: true },
{ label: 'Cadillac', count: 55, value: 'Cadillac', id: 'Cadillac', selected: true },
{ label: 'Chevrolet', count: 43, value: 'Chevrolet', id: 'Chevrolet' },
{ label: 'Ford', count: 6, value: 'Ford', id: 'Ford' },
{ label: 'Honda', count: 102, value: 'Honda', id: 'Honda' },
{ label: 'Hyundai', count: 211, value: 'Hyundai', id: 'Hyundai' },
{ label: 'Mazda', count: 23, value: 'Mazda', id: 'Mazda' },
{ label: 'Mercedes-Benz', count: 4, value: 'Mercedes-Benz', id: 'Mercedes-Benz' },
];
const colors = [
{ label: 'red', count: 2, id: '__red__', value: '__red__' },
{ label: 'blue', count: 96, id: '__blue__', value: '__red__' },
{ label: 'green', count: 19, id: '__green__', value: '__red__' },
{ label: 'gold', count: 1, id: '__gold__', value: '__red__' },
];
const handleChange = e => {
const { name, id, value } = e.target;
let targetObj = { id, value };
console.log('app-level::handleChange', targetObj);
setValue(value);
setValueObject(targetObj);
};
const addToPanel = obj => {
push(obj);
};
const removeFromPanel = obj => {
const prevList = refinements;
const removeItem = refinements.filter(item => item.id != obj.id);
set(removeItem);
};
const removeFilterByValue = value => {
const filterItems = refinements.filter(item => item.value !== value);
set(filterItems);
};
const handleCheckChange = e => {
const { id, value, checked } = e.target;
let targetObj = { id, value };
checked ? addToPanel(targetObj) : removeFromPanel(targetObj);
};
const handleSubmit = e => {
e.preventDefault();
push(valueObject);
};
const handleFilterClick = e => {
const filterId = e.target.id.replace('filter-item--', '');
const findCheckbox = document.getElementById(`_${filterId}_`);
removeFilterByValue(filterId);
};
const panelStyle = {
backgroundColor: '#eee',
height: '10rem',
width: '100%',
};
const handleSaveAll = (e) => {
console.log('app-level::handleSaveAll');
};
const handleClearAll = (e) => {
console.log('app-level::handleClearAll');
};
const handleItemClick = (e, item) => {
console.log('app-level::handleItemClick', item);
};
return (
<Container className='bg-white m-3 p-3'>
<Refinements>
<RefinementsHeader
title="Refinements"
onSaveAll={handleSaveAll}
onClearAll={handleClearAll}
onItemClick={handleItemClick}
items={refinements.map(r => Object.assign({label: r.value}, r)) }
/>
<Refinements.Panel
title="Custom Input"
onChange={handleChange}
onSubmit={handleSubmit}
type="custom"
>
<div className="d-flex align-items-center mt-3 mb-3">
<Input id={`_input1_`} type="text" placeholder="custom input" />
<Button type="submit" color="secondary" className="ml-3">Submit</Button>
</div>
</Refinements.Panel>
<Refinements.Panel
title="Searchable List Panel with list heading"
onChange={handleCheckChange}
>
<Searchable>
<Searchable.Search />
<Searchable.List heading="Section Heading 1" icon="search" data={colors} />
</Searchable>
</Refinements.Panel>
<Refinements.Panel
title="Searchable List Panel with pre-checked items"
onChange={handleCheckChange}
>
<Searchable>
<Searchable.Search />
<Searchable.List heading="Section Heading 2" icon="search" data={makes} />
</Searchable>
</Refinements.Panel>
</Refinements>
</Container>
);
}