lucid-ui
Version:
A UI component library from AppNexus.
76 lines • 3.31 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var index_1 = require("../../../index");
exports.default = create_react_class_1.default({
getInitialState: function () {
return {
events: [],
};
},
render: function () {
var events = this.state.events;
return (react_1.default.createElement("section", { style: {
alignItems: 'center',
display: 'flex',
} },
react_1.default.createElement(index_1.DragCaptureZone, { onDrag: this.handleDragged, onDragEnd: this.handleDragEnded, onDragStart: this.handleDragStarted },
react_1.default.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_1.default.createElement("div", { style: {
height: 300,
marginLeft: 50,
overflow: 'auto',
width: 600,
} }, lodash_1.default.reverse(lodash_1.default.map(events, function (_a, index) {
var coordinates = _a.coordinates, type = _a.type;
return (react_1.default.createElement("div", { key: index },
react_1.default.createElement("div", { style: {
fontWeight: 'bold',
} }, type),
react_1.default.createElement("div", null, "dx: " + coordinates.dX + ", dy: " + coordinates.dY + ",\n\t\t\t\t\t\t\t\t\tpx: " + coordinates.pageX + ", py: " + coordinates.pageY)));
})))));
},
handleDragEnded: function (coordinates) {
this.setState({
events: lodash_1.default.concat(this.state.events, {
type: 'end',
coordinates: coordinates,
}),
});
},
handleDragStarted: function (coordinates) {
this.setState({
events: lodash_1.default.concat(this.state.events, {
type: 'start',
coordinates: coordinates,
}),
});
},
handleDragged: function (coordinates) {
var lastEvent = lodash_1.default.last(this.state.events);
var alreadyDragging = lastEvent.type === 'start';
this.setState({
events: lodash_1.default.concat(alreadyDragging ? this.state.events : lodash_1.default.slice(this.state.events, 0, -1), {
type: 'drag',
coordinates: coordinates,
}),
});
},
});
//# sourceMappingURL=interactive.js.map