@lyra/components/lib/edititem/StoryMover.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDraggable = require('react-draggable');

var _reactDraggable2 = _interopRequireDefault(_reactDraggable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class Mover extends _react2.default.Component {

  constructor(props, args) {
    super(props, args);

    this.handleStop = (event, element) => {
      const scrollTop = document.getElementById('myScrollContainerId').scrollTop;
      // Trigger window resize to force redrawing of the popover component
      window.dispatchEvent(new Event('resize'));
      this.setState({
        x: event.pageX - event.offsetX,
        y: event.pageY - event.offsetY + scrollTop
      });
    };

    this.state = {
      x: 50,
      y: 50
    };
  }

  render() {
    return _react2.default.createElement(
      'div',
      { className: 'moverElement' },
      _react2.default.createElement(
        _reactDraggable2.default,
        { onStop: this.handleStop },
        _react2.default.createElement(
          'div',
          {
            style: {
              zIndex: 1061,
              position: 'absolute',
              cursor: 'move',
              color: 'white',
              backgroundColor: 'red',
              padding: '10px'
            }
          },
          'Move me'
        )
      ),
      _react2.default.createElement(
        'div',
        {
          style: {
            position: 'absolute',
            top: `${this.state.y + 50}px`,
            left: `${this.state.x - 10}px`
          }
        },
        _react2.default.createElement(
          'div',
          {
            style: {
              color: 'red',
              position: 'absolute',
              zIndex: '5000',
              backgroundColor: 'black'
            }
          },
          'x: ',
          this.state.x - 10,
          ' y: ',
          this.state.y + 50
        ),
        this.props.children
      )
    );
  }
}
exports.default = Mover;
Mover.propTypes = {
  children: _propTypes2.default.node
};