@ttk/component/lib/movable/index.js

ttk组件库

'use strict';

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

var _extends = require('../extends-63327b06.js');
var defineProperty = require('../defineProperty-ad97b418.js');
var getPrototypeOf = require('../getPrototypeOf-3a7a3df9.js');
var React = require('react');
var ReactDOM = require('react-dom');
var classNames = require('classnames');
require('../_commonjsHelpers-badc9712.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf._getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf._getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return getPrototypeOf._possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var movableComponent = /*#__PURE__*/function (_PureComponent) {
  getPrototypeOf._inherits(movableComponent, _PureComponent);

  var _super = _createSuper(movableComponent);

  function movableComponent(props) {
    var _this;

    getPrototypeOf._classCallCheck(this, movableComponent);

    _this = _super.call(this, props);
    _this.state = {
      pos: {
        x: 0,
        y: 0
      },
      startMove: false,
      isMoving: false,
      isMoved: false,
      rel: null
    };

    _this.handleMouseDown = function (e) {
      if (e.target.getAttribute('class').indexOf('movable_handle') == -1) return;
      if (e.button !== 0) return;
      var pos = ReactDOM__default["default"].findDOMNode(_this.ref).getBoundingClientRect();
      var parentPos = ReactDOM__default["default"].findDOMNode(_this.ref).parentElement.getBoundingClientRect();

      _this.setState({
        startMove: true,
        rel: {
          x: pos.left - parentPos.left,
          y: pos.top - parentPos.top,
          oldPageX: e.pageX,
          oldPageY: e.pageY,
          maxX: parentPos.width - pos.width,
          maxY: parentPos.height - pos.height
        },
        pos: {
          x: pos.left - parentPos.left,
          y: pos.top - parentPos.top
        }
      });

      document.addEventListener('mousemove', _this.handleMouseMove);
      document.addEventListener('mouseup', _this.handleMouseUp);
      e.stopPropagation();
      e.preventDefault();
    };

    _this.handleMouseMove = function (e) {
      if (!_this.state.startMove) return;
      var x = e.pageX - _this.state.rel.oldPageX + _this.state.rel.x,
          y = e.pageY - _this.state.rel.oldPageY + _this.state.rel.y;
      if (x < 0) x = 0;
      if (x > _this.state.rel.maxX) x = _this.state.rel.maxX;
      if (y < 0) y = 0;
      if (y > _this.state.rel.maxY) y = _this.state.rel.maxY;

      _this.setState({
        pos: {
          x: x,
          y: y
        },
        isMoving: true,
        isMoved: true
      });

      e.stopPropagation();
      e.preventDefault();
    };

    _this.handleMouseUp = function (e) {
      var w = Math.abs(_this.state.pos.x - _this.state.rel.x),
          h = Math.abs(_this.state.pos.y - _this.state.rel.y);
      var validOffset = w < 5 && h < 5;
      if ((validOffset || !_this.state.isMoving) && _this.props.onClick) _this.props.onClick();

      _this.setState({
        isMoving: false,
        startMove: false
      });

      document.removeEventListener('mousemove', _this.handleMouseMove);
      document.removeEventListener('mouseup', _this.handleMouseUp);
      e.stopPropagation();
      e.preventDefault();
    };

    _this.handleClick = function (e) {
      e.stopPropagation();
      e.preventDefault();
    };

    _this.getRef = function (ref) {
      _this.ref = ref;
    };

    _this.ref = null;
    return _this;
  }

  getPrototypeOf._createClass(movableComponent, [{
    key: "render",
    value: function render() {
      var _classNames;

      var className = classNames__default["default"]((_classNames = {}, defineProperty._defineProperty(_classNames, this.props.prefixCls, true), defineProperty._defineProperty(_classNames, this.props.className, !!this.props.className), _classNames)),
          style;

      if (!this.state.isMoved) {
        style = this.props.style || {};
        style.position = 'absolute';
        style.lineHeight = (style.height || 70) + 'px';
        style.textAlign = 'center';
      } else {
        style = this.props.style || {};
        style = {
          position: 'absolute',
          left: this.props.isStopX ? this.state.rel.x : this.state.pos.x,
          top: this.props.isStopY ? this.state.rel.y : this.state.pos.y,
          width: style.width || 70,
          height: style.height || 70,
          lineHeight: (style.height || 70) + 'px',
          textAlign: 'center'
        };
      }

      return /*#__PURE__*/React__default["default"].createElement("div", _extends._extends({
        ref: this.getRef,
        className: className
      }, this.props, {
        onMouseDown: this.handleMouseDown.bind(this),
        onClick: this.handleClick,
        style: style
      }), this.props.children);
    }
  }]);

  return movableComponent;
}(React.PureComponent);

movableComponent.defaultProps = {
  prefixCls: 'mk-movable'
};

exports["default"] = movableComponent;