lucid-ui
Version:
A UI component library from Xandr.
73 lines • 3.06 kB
JavaScript
import React, { useState } from 'react';
import SlidePanel 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,
};
/* Looped Slides */
export const LoopedSlides = (args) => {
const Slide = SlidePanel.Slide;
const [offset, setOffset] = useState(0);
const handlePrev = () => {
setOffset(offset - 1);
};
const handleNext = () => {
setOffset(offset + 1);
};
const handleSwipe = (slidesSwiped) => {
setOffset(offset + slidesSwiped);
};
return (React.createElement("section", null,
React.createElement(Button, { onClick: handlePrev }, "Backward"),
React.createElement(Button, { onClick: handleNext }, "Forward"),
"Current offset: ",
offset,
React.createElement(SlidePanel, { ...args, slidesToShow: 2, offset: offset, onSwipe: handleSwipe, isLooped: true },
React.createElement(Slide, null,
React.createElement(AnalyzeDataIcon, { style: {
width: '100%',
height: '30vh',
background: 'whitesmoke',
} })),
React.createElement(Slide, null,
React.createElement(CalendarIcon, { style: { width: '100%', height: '30vh' } })),
React.createElement(Slide, null,
React.createElement(DuplicateIcon, { style: {
width: '100%',
height: '30vh',
background: 'whitesmoke',
} })),
React.createElement(Slide, null,
React.createElement(EditIcon, { style: { width: '100%', height: '30vh' } })),
React.createElement(Slide, null,
React.createElement(FileIcon, { style: {
width: '100%',
height: '30vh',
background: 'whitesmoke',
} })),
React.createElement(Slide, null,
React.createElement(ImageIcon, { style: {
width: '100%',
height: '30vh',
background: 'whitesmoke',
} })),
React.createElement(Slide, null,
React.createElement(SettingsIcon, { style: { width: '100%', height: '30vh' } })))));
};
//# sourceMappingURL=SlidePanel.stories.js.map