lucid-ui
Version:
A UI component library from AppNexus.
66 lines (65 loc) • 2.76 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import SlidePanel from '../SlidePanel';
import { AnalyzeDataIcon, Button, CalendarIcon, DuplicateIcon, EditIcon, FileIcon, ImageIcon, SettingsIcon, } from '../../../index';
const Slide = SlidePanel.Slide;
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(SlidePanel, { slidesToShow: 2, offset: this.state.offset, onSwipe: this.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' } })))));
},
});