Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] filter_group_multi: update multi select example to be functional #4178

Merged
merged 5 commits into from
Oct 28, 2020
Merged

[Docs] filter_group_multi: update multi select example to be functional #4178

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cdb129e
docs(filter_group_multi): update multi select example to be functional
Phizzard Oct 24, 2020
9bac338
fix(filter_group_multi): add working multi select example
Phizzard Oct 27, 2020
c8e7bee
add #4178 to changelog
Phizzard Oct 27, 2020
f7b1649
Merge branch 'master' into multi-select-example
Phizzard Oct 28, 2020
85a452a
Remove extra space from cl
cchaos Oct 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions src-docs/src/views/filter_group/filter_group_multi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ export default () => {
setIsPopoverOpen(false);
};

const items = [
const [items, setItems] = useState([
{ name: 'Johann Sebastian Bach', checked: 'on' },
{ name: 'Wolfgang Amadeus Mozart', checked: 'on' },
{ name: 'Antonín Dvořák', checked: 'off' },
{ name: 'Antonín Dvořák', checked: 'on' },
{ name: 'Dmitri Shostakovich' },
{ name: 'Felix Mendelssohn-Bartholdy' },
{ name: 'Franz Liszt' },
Expand All @@ -43,7 +43,20 @@ export default () => {
{ name: 'Robert Schumann' },
{ name: 'Sergej S. Prokofiew' },
{ name: 'Wolfgang Amadeus Mozart' },
];
]);

function updateItem(index) {
if (!items[index]) {
return;
}

const newItems = items;
Phizzard marked this conversation as resolved.
Show resolved Hide resolved

newItems[index].checked =
newItems[index].checked === 'on' ? undefined : 'on';
Phizzard marked this conversation as resolved.
Show resolved Hide resolved

setItems(newItems);
}

const button = (
<EuiFilterButton
Expand All @@ -52,7 +65,7 @@ export default () => {
isSelected={isPopoverOpen}
numFilters={items.length}
hasActiveFilters={true}
Phizzard marked this conversation as resolved.
Show resolved Hide resolved
numActiveFilters={2}>
numActiveFilters={items.filter((item) => item.checked === 'on').length}>
Composers
</EuiFilterButton>
);
Expand All @@ -71,7 +84,10 @@ export default () => {
</EuiPopoverTitle>
<div className="euiFilterSelect__items">
{items.map((item, index) => (
<EuiFilterSelectItem checked={item.checked} key={index}>
<EuiFilterSelectItem
checked={item.checked}
key={index}
onClick={() => updateItem(index)}>
{item.name}
</EuiFilterSelectItem>
))}
Expand Down