lucid-ui/lib/components/DragCaptureZone/examples/interactive.js

A UI component library from AppNexus.

import _slice from "lodash/slice";
import _last from "lodash/last";
import _concat from "lodash/concat";
import _map from "lodash/map";
import _reverse from "lodash/reverse";
import React from 'react';
import createClass from 'create-react-class';
import { DragCaptureZone } from '../../../index';
export default createClass({
  getInitialState: function getInitialState() {
    return {
      events: []
    };
  },
  render: function render() {
    var events = this.state.events;
    return /*#__PURE__*/React.createElement("section", {
      style: {
        alignItems: 'center',
        display: 'flex'
      }
    }, /*#__PURE__*/React.createElement(DragCaptureZone, {
      onDrag: this.handleDragged,
      onDragEnd: this.handleDragEnded,
      onDragStart: this.handleDragStarted
    }, /*#__PURE__*/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!")), /*#__PURE__*/React.createElement("div", {
      style: {
        height: 300,
        marginLeft: 50,
        overflow: 'auto',
        width: 600
      }
    }, _reverse(_map(events, function (_ref, index) {
      var coordinates = _ref.coordinates,
          type = _ref.type;
      return /*#__PURE__*/React.createElement("div", {
        key: index
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          fontWeight: 'bold'
        }
      }, type), /*#__PURE__*/React.createElement("div", null, "dx: ".concat(coordinates.dX, ", dy: ").concat(coordinates.dY, ",\n\t\t\t\t\t\t\t\t\tpx: ").concat(coordinates.pageX, ", py: ").concat(coordinates.pageY)));
    }))));
  },
  handleDragEnded: function handleDragEnded(coordinates) {
    this.setState({
      events: _concat(this.state.events, {
        type: 'end',
        coordinates: coordinates
      })
    });
  },
  handleDragStarted: function handleDragStarted(coordinates) {
    this.setState({
      events: _concat(this.state.events, {
        type: 'start',
        coordinates: coordinates
      })
    });
  },
  handleDragged: function handleDragged(coordinates) {
    var lastEvent = _last(this.state.events);

    var alreadyDragging = lastEvent.type === 'start';
    this.setState({
      events: _concat(alreadyDragging ? this.state.events : _slice(this.state.events, 0, -1), {
        type: 'drag',
        coordinates: coordinates
      })
    });
  }
});