Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x 1x 1x 1x 1x 1x 1x | import React, { useState } from 'react';
import { Meta, Story } from '@storybook/react';
import SlidePanel, { ISlidePanelSlideProps } from './SlidePanel';
import Button from '../Button/Button';
import AnalyzeDataIcon from '../Icon/AnalyzeDataIcon/AnalyzeDataIcon';
import CalendarIcon from '../Icon/CalendarIcon/CalendarIcon';
import DuplicateIcon from '../Icon/DuplicateIcon/DuplicateIcon';
import EditIcon from '../Icon/EditIcon/EditIcon';
import FileIcon from '../Icon/FileIcon/FileIcon';
import ImageIcon from '../Icon/ImageIcon/ImageIcon';
import SettingsIcon from '../Icon/SettingsIcon/SettingsIcon';
export default {
title: 'Private/SlidePanel',
component: SlidePanel,
parameters: {
docs: {
description: {
component: SlidePanel.peek.description,
},
},
},
args: SlidePanel.defaultProps,
} as Meta;
/* Looped Slides */
export const LoopedSlides: Story<ISlidePanelSlideProps> = (args) => {
const Slide = SlidePanel.Slide;
const [offset, setOffset] = useState(0);
const handlePrev = () => {
setOffset(offset - 1);
};
const handleNext = () => {
setOffset(offset + 1);
};
const handleSwipe = (slidesSwiped: any) => {
setOffset(offset + slidesSwiped);
};
return (
<section>
<Button onClick={handlePrev}>Backward</Button>
<Button onClick={handleNext}>Forward</Button>
Current offset: {offset}
<SlidePanel
{...args}
slidesToShow={2}
offset={offset}
onSwipe={handleSwipe}
isLooped={true}
>
<Slide>
<AnalyzeDataIcon
style={{
width: '100%',
height: '30vh',
background: 'whitesmoke',
}}
/>
</Slide>
<Slide>
<CalendarIcon style={{ width: '100%', height: '30vh' }} />
</Slide>
<Slide>
<DuplicateIcon
style={{
width: '100%',
height: '30vh',
background: 'whitesmoke',
}}
/>
</Slide>
<Slide>
<EditIcon style={{ width: '100%', height: '30vh' }} />
</Slide>
<Slide>
<FileIcon
style={{
width: '100%',
height: '30vh',
background: 'whitesmoke',
}}
/>
</Slide>
<Slide>
<ImageIcon
style={{
width: '100%',
height: '30vh',
background: 'whitesmoke',
}}
/>
</Slide>
<Slide>
<SettingsIcon style={{ width: '100%', height: '30vh' }} />
</Slide>
</SlidePanel>
</section>
);
};
|