Skip to content

[EuiSelectable] isVirtualized and data #5521

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

Merged
thompsongl merged 7 commits into from
Jan 11, 2022
Merged

[EuiSelectable] isVirtualized and data #5521

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7870131
isVirtualized and labelProps
thompsongl Jan 6, 2022
fa98a22
update docs
thompsongl Jan 6, 2022
75805ad
CL
thompsongl Jan 6, 2022
8c38555
review feedback
thompsongl Jan 6, 2022
077bb15
update list types
thompsongl Jan 6, 2022
7a0df30
labelProps -> data
thompsongl Jan 11, 2022
1485d4a
Update docs with virtualization toggle and hide overflow of selectabl…
Jan 11, 2022
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
5 changes: 4 additions & 1 deletion src-docs/src/views/selectable/selectable_custom_render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export default () => {
prepend: country.flag,
append: <EuiBadge>{country.code}</EuiBadge>,
showIcons: false,
labelProps: {
secondaryContent: 'I am secondary content, I am!',
},
};
});

Expand All @@ -46,7 +49,7 @@ export default () => {
<EuiTextColor color="subdued">
<small>
<EuiHighlight search={searchValue}>
I am secondary content, I am!
{option.secondaryContent}
</EuiHighlight>
</small>
</EuiTextColor>
Expand Down
13 changes: 12 additions & 1 deletion src-docs/src/views/selectable/selectable_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,14 @@ export const SelectableExample = {
single <EuiCode>option</EuiCode> object and the{' '}
<EuiCode>searchValue</EuiCode> to use for highlighting.
</p>
<p>
To provide data that can be used by the{' '}
<EuiCode>renderOption</EuiCode> function that does not match the
standard option API, use <EuiCode>option.labelProps</EuiCode> which
will be make custom data available in the <EuiCode>option</EuiCode>{' '}
Comment thread
thompsongl marked this conversation as resolved.
Outdated
parameter. See the <EuiCode>secondaryContent</EuiCode> configuration
in the following example.
</p>
<p>
In order for the list to know how to scroll to the selected or
highlighted option, it must also know the height of the rows. It
Expand All @@ -365,7 +373,10 @@ export const SelectableExample = {
<EuiCode>listProps.rowHeight</EuiCode>.
</p>
<p>
Comment thread
thompsongl marked this conversation as resolved.
Outdated
<strong>Every row must be the same height.</strong>
<strong>Every row must be the same height</strong> unless{' '}
<EuiCode>listProps.isVirtualized</EuiCode> is set to{' '}
<EuiCode>false</EuiCode>, in which case we recommend having a large
enough container to accomodate all optons and eliminate scrolling.
</p>
</Fragment>
),
Expand Down
102 changes: 102 additions & 0 deletions src/components/selectable/__snapshots__/selectable.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,107 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiSelectable custom options with labelProps 1`] = `
<div
class="euiSelectable"
>
<div
class="euiSelectableList"
>
<div
data-eui="EuiAutoSizer"
>
<div
class="euiSelectableList__list"
style="position:relative;height:96px;width:600px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:transform;direction:ltr"
>
<ul
style="height:96px;width:100%"
>
<li
aria-posinset="1"
aria-selected="false"
aria-setsize="3"
class="euiSelectableListItem"
id="generated-id_listbox_option-0"
role="option"
style="position:absolute;left:0;top:0;height:32px;width:100%"
title="Titan"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Titan: VI
</span>
</span>
</span>
</li>
<li
aria-posinset="2"
aria-selected="false"
aria-setsize="3"
class="euiSelectableListItem"
id="generated-id_listbox_option-1"
role="option"
style="position:absolute;left:0;top:32px;height:32px;width:100%"
title="Enceladus"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Enceladus: II
</span>
</span>
</span>
</li>
<li
aria-posinset="3"
aria-selected="false"
aria-setsize="3"
class="euiSelectableListItem"
id="generated-id_listbox_option-2"
role="option"
style="position:absolute;left:0;top:64px;height:32px;width:100%"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Pandora is one of Saturn's moons, named for a Titaness of Greek mythology: XVII
</span>
</span>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
`;

exports[`EuiSelectable is rendered 1`] = `
<div
class="euiSelectable testClass1 testClass2"
Expand Down
43 changes: 43 additions & 0 deletions src/components/selectable/selectable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,5 +208,48 @@ describe('EuiSelectable', () => {
(component.find('EuiSelectableList').props() as any).visibleOptions
).toEqual(options);
});

test('with labelProps', () => {
type WithLabelProps = {
numeral?: string;
};
const options = [
{
label: 'Titan',
labelProps: {
numeral: 'VI',
},
},
{
label: 'Enceladus',
labelProps: {
numeral: 'II',
},
},
{
label:
"Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
labelProps: {
numeral: 'XVII',
},
},
];
const component = render(
<EuiSelectable<WithLabelProps>
options={options}
renderOption={(option) => {
return (
<span>
{option.label}: {option.numeral}
Comment thread
thompsongl marked this conversation as resolved.
Outdated
</span>
);
}}
>
{(list) => list}
</EuiSelectable>
);

expect(component).toMatchSnapshot();
});
});
});
165 changes: 165 additions & 0 deletions src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1087,6 +1087,171 @@ exports[`EuiSelectableListItem props height is full 1`] = `
</div>
`;

exports[`EuiSelectableListItem props isVirtualized 1`] = `
<div
class="euiSelectableList testClass1 testClass2"
data-test-subj="test subject string"
>
<div
class="euiSelectableList__list"
>
<ul>
<li
aria-posinset="1"
aria-selected="false"
aria-setsize="6"
class="euiSelectableListItem"
data-test-subj="titanOption"
id="option_0"
role="option"
title="Titan"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Titan
</span>
</span>
</span>
</li>
<li
aria-posinset="2"
aria-selected="false"
aria-setsize="6"
class="euiSelectableListItem"
id="option_1"
role="option"
title="Enceladus"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Enceladus
</span>
</span>
</span>
</li>
<li
aria-posinset="3"
aria-selected="false"
aria-setsize="6"
class="euiSelectableListItem"
id="option_2"
role="option"
title="Mimas"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Mimas
</span>
</span>
</span>
</li>
<li
aria-posinset="4"
aria-selected="false"
aria-setsize="6"
class="euiSelectableListItem"
id="option_3"
role="option"
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
</span>
</span>
</span>
</li>
<li
aria-posinset="5"
aria-selected="false"
aria-setsize="6"
class="euiSelectableListItem"
id="option_4"
role="option"
title="Tethys"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Tethys
</span>
</span>
</span>
</li>
<li
aria-posinset="6"
aria-selected="false"
aria-setsize="6"
class="euiSelectableListItem"
id="option_5"
role="option"
title="Hyperion"
>
<span
class="euiSelectableListItem__content"
>
<span
class="euiSelectableListItem__icon"
data-euiicon-type="empty"
/>
<span
class="euiSelectableListItem__text"
>
<span>
Hyperion
</span>
</span>
</span>
</li>
</ul>
</div>
</div>
`;

exports[`EuiSelectableListItem props renderOption 1`] = `
<div
class="euiSelectableList testClass1 testClass2"
Expand Down
12 changes: 12 additions & 0 deletions src/components/selectable/selectable_list/selectable_list.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,5 +214,17 @@ describe('EuiSelectableListItem', () => {

expect(component).toMatchSnapshot();
});

test('isVirtualized', () => {
Comment thread
thompsongl marked this conversation as resolved.
Outdated
const component = render(
<EuiSelectableList
options={options}
isVirtualized={false}
{...selectableListRequiredProps}
/>
);

expect(component).toMatchSnapshot();
});
});
});
Loading