lucid-ui
Version:
A UI component library from Xandr.
49 lines • 1.88 kB
JavaScript
import React, { useState } from 'react';
import InfiniteSlidePanel from './InfiniteSlidePanel';
import Button from '../Button/Button';
export default {
title: 'Private/InfiniteSlidePanel',
component: InfiniteSlidePanel,
parameters: {
docs: {
description: {
component: InfiniteSlidePanel.peek.description,
},
},
},
args: InfiniteSlidePanel.defaultProps,
};
/* Dynamic Content */
export const DynamicContent = (args) => {
const generateRGB = (n) => {
const R = Math.floor((Math.sin(n / Math.PI) + 1) * 128);
const G = Math.floor((Math.sin((2 * n) / Math.PI) + 1) * 128);
const B = Math.floor((Math.sin((3 * n) / Math.PI) + 1) * 128);
return `rgb(${R},${G},${B})`;
};
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"),
React.createElement("span", { style: { marginLeft: 10 } },
"Current offset: ",
offset),
React.createElement(InfiniteSlidePanel, { ...args, totalSlides: 12, slidesToShow: 3, offset: offset, onSwipe: handleSwipe }, (slideOffset) => (React.createElement("div", { style: {
width: '100%',
height: '30vh',
background: generateRGB(slideOffset),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
} }, slideOffset)))));
};
//# sourceMappingURL=InfiniteSlidePanel.stories.js.map