lucid-ui
Version:
A UI component library from AppNexus.
78 lines • 2.57 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';
var Slide = SlidePanel.Slide;
export default createClass({
getInitialState: function getInitialState() {
return {
offset: 0
};
},
handlePrev: function handlePrev() {
this.setState({
offset: this.state.offset - 1
});
},
handleNext: function handleNext() {
this.setState({
offset: this.state.offset + 1
});
},
handleSwipe: function handleSwipe(slidesSwiped) {
this.setState({
offset: this.state.offset + slidesSwiped
});
},
render: function render() {
return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(Button, {
onClick: this.handlePrev
}, "Backward"), /*#__PURE__*/React.createElement(Button, {
onClick: this.handleNext
}, "Forward"), "Current offset: ", this.state.offset, /*#__PURE__*/React.createElement(SlidePanel, {
slidesToShow: 2,
offset: this.state.offset,
onSwipe: this.handleSwipe,
isLooped: true
}, /*#__PURE__*/React.createElement(Slide, null, /*#__PURE__*/React.createElement(AnalyzeDataIcon, {
style: {
width: '100%',
height: '30vh',
background: 'whitesmoke'
}
})), /*#__PURE__*/React.createElement(Slide, null, /*#__PURE__*/React.createElement(CalendarIcon, {
style: {
width: '100%',
height: '30vh'
}
})), /*#__PURE__*/React.createElement(Slide, null, /*#__PURE__*/React.createElement(DuplicateIcon, {
style: {
width: '100%',
height: '30vh',
background: 'whitesmoke'
}
})), /*#__PURE__*/React.createElement(Slide, null, /*#__PURE__*/React.createElement(EditIcon, {
style: {
width: '100%',
height: '30vh'
}
})), /*#__PURE__*/React.createElement(Slide, null, /*#__PURE__*/React.createElement(FileIcon, {
style: {
width: '100%',
height: '30vh',
background: 'whitesmoke'
}
})), /*#__PURE__*/React.createElement(Slide, null, /*#__PURE__*/React.createElement(ImageIcon, {
style: {
width: '100%',
height: '30vh',
background: 'whitesmoke'
}
})), /*#__PURE__*/React.createElement(Slide, null, /*#__PURE__*/React.createElement(SettingsIcon, {
style: {
width: '100%',
height: '30vh'
}
}))));
}
});