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(Dropdown): async options story #2069

Merged
merged 2 commits into from
Apr 16, 2024
Merged

docs(Dropdown): async options story #2069

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab1350a
docs(Dropdown): async options story
YossiSaadi Apr 16, 2024
0db8f5a
docs(Dropdown): fake fetch
YossiSaadi Apr 16, 2024
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
6 changes: 6 additions & 0 deletions packages/core/src/components/Dropdown/__stories__/dropdown.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,12 @@ The Dropdown component supports multiple options selection in two different stat

<Canvas of={DropdownStories.MultiChoiceWithDifferentStates} />

### Async Options

The Dropdown component supports async loading of options.

<Canvas of={DropdownStories.AsyncOptions} />

### Dropdown with avatar

<Canvas of={DropdownStories.DropdownWithAvatar} />
Expand Down
16 changes: 16 additions & 0 deletions packages/core/src/components/Dropdown/__stories__/dropdown.stories.helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,19 @@ export const TipDevTipPopover = () => (
.
</Tip>
);

export const fakeFetchUsers = () => {
return new Promise(resolve => {
setTimeout(() => {
const users = [
{ id: "1", name: "Yossi Saadi" },
{ id: "2", name: "Shahar Zilberman" },
{ id: "3", name: "Tal Koren" },
{ id: "4", name: "Meirav Ron" },
{ id: "5", name: "Yael Bein" }
];

resolve({ json: () => Promise.resolve(users) });
}, 1000);
});
};
32 changes: 32 additions & 0 deletions packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Attach, Email } from "../../Icon/Icons";
import { Avatar, Box, Button, DialogContentContainer, Dropdown, Flex, Label, Modal, ModalContent } from "../../index";
import ModalExampleContent from "../../../storybook/patterns/dropdown-in-modals/ModalExampleContent";
import "./dropdown.stories.scss";
import { fakeFetchUsers } from "./dropdown.stories.helpers";

const metaSettings = createStoryMetaSettingsDecorator({
component: Dropdown,
Expand Down Expand Up @@ -272,6 +273,37 @@ export const MultiChoiceWithDifferentStates = {
play: multiInteractionTests
};

export const AsyncOptions = {
render: () => {
const fetchUserOptions = async () => {
try {
const response = await fakeFetchUsers();
const users = await response.json();

return users.slice(0, 5).map(user => ({
label: user.name,
value: user.id
}));
} catch (error) {
console.error("Error fetching user data:", error);
}
return [];
};

return (
<div
style={{
width: "400px"
}}
>
<Dropdown asyncOptions={fetchUserOptions} placeholder="Async options" cacheOptions defaultOptions />
</div>
);
},

name: "Async Dropdown"
};

export const DropdownWithAvatar = {
render: () => {
const optionsAvatar = useMemo(
Expand Down