diff --git a/src/components/List/__stories__/List.stories.tsx b/src/components/List/__stories__/List.stories.tsx index a3f8d74829..7bb1c5562c 100644 --- a/src/components/List/__stories__/List.stories.tsx +++ b/src/components/List/__stories__/List.stories.tsx @@ -6,6 +6,7 @@ import {List, listDefaultProps} from '..'; import type {ListProps} from '..'; import {ListShowcase} from './ListShowcase'; +import {ListWithLoader} from './ListWithLoader'; type ComponentType = React.JSXElementConstructor>; @@ -46,18 +47,7 @@ RenderItem.args = { renderItem: (item) => `🔥🔥🔥 ${item} 🔥🔥🔥`, }; -const TemplateWithState: ComponentStory = (args) => { - const [items, setItems] = React.useState(args.items); - - const onLoadMore = () => { - // delay for fetching new real items - setTimeout(() => { - setItems([...items, ...args.items]); - }, 300); - }; - - return ; -}; +const TemplateWithState: ComponentStory = (args) => ; export const WithLoadingMoreItems = TemplateWithState.bind({}); WithLoadingMoreItems.args = { diff --git a/src/components/List/__stories__/ListWithLoader.scss b/src/components/List/__stories__/ListWithLoader.scss new file mode 100644 index 0000000000..4fe39f4e6d --- /dev/null +++ b/src/components/List/__stories__/ListWithLoader.scss @@ -0,0 +1,6 @@ +@use '../../variables'; +@use '../../../../styles/mixins'; + +.list-with-loader { + overflow: auto; +} diff --git a/src/components/List/__stories__/ListWithLoader.tsx b/src/components/List/__stories__/ListWithLoader.tsx new file mode 100644 index 0000000000..eb3f7c8b0d --- /dev/null +++ b/src/components/List/__stories__/ListWithLoader.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import {cn} from '../../utils/cn'; +import {List} from '../List'; +import type {ListProps} from '../types'; + +import './ListWithLoader.scss'; + +const b = cn('list-with-loader'); + +export const ListWithLoader = (args: ListProps) => { + const [items, setItems] = React.useState(args.items); + + const onLoadMore = () => { + // delay for fetching new real items + setTimeout(() => { + setItems([...items, ...args.items]); + }, 300); + }; + + return ( +
+ +
+ ); +};