lucid-ui
Version:
A UI component library from AppNexus.
69 lines (68 loc) • 2.56 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { DragCaptureZone } from '../../../index';
export default createClass({
getInitialState() {
return {
events: [],
};
},
render() {
const { events } = this.state;
return (React.createElement("section", { style: {
alignItems: 'center',
display: 'flex',
} },
React.createElement(DragCaptureZone, { onDrag: this.handleDragged, onDragEnd: this.handleDragEnded, onDragStart: this.handleDragStarted },
React.createElement("div", { style: {
alignItems: 'center',
backgroundColor: '#b7b7b7',
display: 'flex',
fontFamily: 'Helvetica, sans-serif',
fontSize: '24px',
fontWeight: 300,
height: 300,
justifyContent: 'center',
textTransform: 'uppercase',
width: 400,
} }, "Go wild!")),
React.createElement("div", { style: {
height: 300,
marginLeft: 50,
overflow: 'auto',
width: 600,
} }, _.reverse(_.map(events, ({ coordinates, type }, index) => (React.createElement("div", { key: index },
React.createElement("div", { style: {
fontWeight: 'bold',
} }, type),
React.createElement("div", null, `dx: ${coordinates.dX}, dy: ${coordinates.dY},
px: ${coordinates.pageX}, py: ${coordinates.pageY}`))))))));
},
handleDragEnded(coordinates) {
this.setState({
events: _.concat(this.state.events, {
type: 'end',
coordinates,
}),
});
},
handleDragStarted(coordinates) {
this.setState({
events: _.concat(this.state.events, {
type: 'start',
coordinates,
}),
});
},
handleDragged(coordinates) {
const lastEvent = _.last(this.state.events);
const alreadyDragging = lastEvent.type === 'start';
this.setState({
events: _.concat(alreadyDragging ? this.state.events : _.slice(this.state.events, 0, -1), {
type: 'drag',
coordinates,
}),
});
},
});