Skip to content

Commit

Permalink
Headstorm#184 Modify number of options to render initially
Browse files Browse the repository at this point in the history
  • Loading branch information
@dawsonbooth
dawsonbooth committed Aug 11, 2021
1 parent c0167d5 commit 449bf70
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 183 deletions.
7 changes: 7 additions & 0 deletions src/components/Dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,8 @@ export interface DropdownProps {
variant?: variants;
optionsVariant?: variants;
valueVariant?: variants;

initialOptionCount?: number;
}

const Dropdown = ({
Expand Down Expand Up @@ -289,6 +291,8 @@ const Dropdown = ({
rememberScrollPosition = true,
valueVariant = variants.text,
values = [],

initialOptionCount,
}: DropdownProps): JSX.Element | null => {
const { colors } = useTheme();
const defaultedColor = color || colors.grayDark;
Expand Down Expand Up @@ -586,8 +590,11 @@ const Dropdown = ({
{isOpen && (
<Virtuoso
data={options}
initialItemCount={
typeof window !== 'undefined' && window.document && window.document.createElement
? initialOptionCount
: options.length
}
components={VirtuosoComponents as Components}
itemContent={(index, option) => (
<StyledOptionItem
Expand Down
35 changes: 30 additions & 5 deletions src/components/Dropdown/__tests__/Dropdown.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,11 @@ describe('Dropdown', () => {

it('can focus dropdown and select option', async () => {
const { container, getByText } = render(
<Dropdown onSelect={mockedSelectHandler} options={pokeOptions} />,
<Dropdown
onSelect={mockedSelectHandler}
options={pokeOptions}
initialOptionCount={pokeOptions.length}
/>,
);

// TODO - Don't use id, see if we can use a more semantically meaningful element
Expand All @@ -114,7 +118,12 @@ describe('Dropdown', () => {

it('selects multiple options when dropdown is multi', async () => {
const { getByText, queryByText } = render(
<Dropdown onSelect={mockedSelectHandler} multi options={pokeOptions} />,
<Dropdown
onSelect={mockedSelectHandler}
multi
options={pokeOptions}
initialOptionCount={pokeOptions.length}
/>,
);

screen.getByRole('button').focus();
Expand All @@ -130,7 +139,12 @@ describe('Dropdown', () => {

it('deselects option when clicking on them twice when dropdown is multi', async () => {
const { container, getByText } = render(
<Dropdown onSelect={mockedSelectHandler} multi options={pokeOptions} />,
<Dropdown
onSelect={mockedSelectHandler}
multi
options={pokeOptions}
initialOptionCount={pokeOptions.length}
/>,
);

act(() => {
Expand Down Expand Up @@ -168,7 +182,11 @@ describe('Dropdown', () => {

it('can use arrow keys and enter to navigate options', async () => {
const { queryByText } = render(
<Dropdown onSelect={mockedSelectHandler} options={pokeOptions} />,
<Dropdown
onSelect={mockedSelectHandler}
options={pokeOptions}
initialOptionCount={pokeOptions.length}
/>,
);
act(() => {
screen.getByRole('button').focus();
Expand Down Expand Up @@ -240,7 +258,14 @@ describe('Dropdown', () => {
});
it('optionItemRef.current should exist', async () => {
const ref = React.createRef<HTMLElement>();
render(<Dropdown options={pokeOptions} onSelect={() => {}} optionItemRef={ref} />);
render(
<Dropdown
options={pokeOptions}
onSelect={() => {}}
optionItemRef={ref}
initialOptionCount={pokeOptions.length}
/>,
);
act(() => {
fireEvent.focus(screen.getByRole('button'));
});
Expand Down
182 changes: 4 additions & 178 deletions src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,35 +346,6 @@ exports[`Dropdown closes options when clicking outside 1`] = `
z-index: 1000;
}
.c13 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #252D34;
background-color: transparent;
}
.c13:hover {
background-color: rgba(0,0,0,0.05);
cursor: pointer;
outline: none;
}
.c13:focus {
outline: none;
background-color: rgba(0,0,0,0.1);
}
.c5 {
opacity: 0.8;
}
Expand Down Expand Up @@ -443,66 +414,8 @@ exports[`Dropdown closes options when clicking outside 1`] = `
style="width: 100%; height: 100%; position: absolute; top: 0px;"
>
<div
style="box-sizing: border-box; padding-top: 0px; padding-bottom: 0px; margin-top: 0px;"
>
<div
data-index="0"
data-item-index="0"
data-known-size="0"
>
<div
class=" c13"
color="#252D34"
id="dropdown-option-bulbasaur"
role="option"
tabindex="-1"
>
<span
class=" "
>
Bulbasaur
</span>
</div>
</div>
<div
data-index="1"
data-item-index="1"
data-known-size="0"
>
<div
class=" c13"
color="#252D34"
id="dropdown-option-charmander"
role="option"
tabindex="-1"
>
<span
class=" "
>
Charmander
</span>
</div>
</div>
<div
data-index="2"
data-item-index="2"
data-known-size="0"
>
<div
class=" c13"
color="#252D34"
id="dropdown-option-squirtle"
role="option"
tabindex="-1"
>
<span
class=" "
>
Squirtle
</span>
</div>
</div>
</div>
style="box-sizing: border-box; padding-top: 0px; margin-top: 0px;"
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -1197,35 +1110,6 @@ exports[`Dropdown displays all options when focused 1`] = `
z-index: 1000;
}
.c13 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #252D34;
background-color: transparent;
}
.c13:hover {
background-color: rgba(0,0,0,0.05);
cursor: pointer;
outline: none;
}
.c13:focus {
outline: none;
background-color: rgba(0,0,0,0.1);
}
.c5 {
opacity: 0.8;
}
Expand Down Expand Up @@ -1295,66 +1179,8 @@ exports[`Dropdown displays all options when focused 1`] = `
style="width: 100%; height: 100%; position: absolute; top: 0px;"
>
<div
style="box-sizing: border-box; padding-top: 0px; padding-bottom: 0px; margin-top: 0px;"
>
<div
data-index="0"
data-item-index="0"
data-known-size="0"
>
<div
class=" c13"
color="#252D34"
id="dropdown-option-bulbasaur"
role="option"
tabindex="-1"
>
<span
class=" "
>
Bulbasaur
</span>
</div>
</div>
<div
data-index="1"
data-item-index="1"
data-known-size="0"
>
<div
class=" c13"
color="#252D34"
id="dropdown-option-charmander"
role="option"
tabindex="-1"
>
<span
class=" "
>
Charmander
</span>
</div>
</div>
<div
data-index="2"
data-item-index="2"
data-known-size="0"
>
<div
class=" c13"
color="#252D34"
id="dropdown-option-squirtle"
role="option"
tabindex="-1"
>
<span
class=" "
>
Squirtle
</span>
</div>
</div>
</div>
style="box-sizing: border-box; padding-top: 0px; margin-top: 0px;"
/>
</div>
</div>
</div>
Expand Down

0 comments on commit 449bf70

Please sign in to comment.