lucid-ui
Version:
A UI component library from AppNexus.
48 lines (47 loc) • 1.68 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { Button } from '../../../index';
import InfiniteSlidePanel from '../InfiniteSlidePanel';
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})`;
};
export default createClass({
getInitialState() {
return {
offset: 0,
};
},
handlePrev() {
this.setState({
offset: this.state.offset - 1,
});
},
handleNext() {
this.setState({
offset: this.state.offset + 1,
});
},
handleSwipe(slidesSwiped) {
this.setState({
offset: this.state.offset + slidesSwiped,
});
},
render() {
return (React.createElement("section", null,
React.createElement(Button, { onClick: this.handlePrev }, "Backward"),
React.createElement(Button, { onClick: this.handleNext }, "Forward"),
"Current offset: ",
this.state.offset,
React.createElement(InfiniteSlidePanel, { totalSlides: 12, slidesToShow: 3, offset: this.state.offset, onSwipe: this.handleSwipe }, slideOffset => (React.createElement("div", { style: {
width: '100%',
height: '30vh',
background: generateRGB(slideOffset),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
} }, slideOffset)))));
},
});