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

ttk组件库

import { _ as _extends } from '../extends-b1af4ff7.js';
import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import '../_commonjsHelpers-471920d6.js';

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _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) {
  _inherits(movableComponent, _PureComponent);

  var _super = _createSuper(movableComponent);

  function movableComponent(props) {
    var _this;

    _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.findDOMNode(_this.ref).getBoundingClientRect();
      var parentPos = ReactDOM.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;
  }

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

      var className = classNames((_classNames = {}, _defineProperty(_classNames, this.props.prefixCls, true), _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.createElement("div", _extends({
        ref: this.getRef,
        className: className
      }, this.props, {
        onMouseDown: this.handleMouseDown.bind(this),
        onClick: this.handleClick,
        style: style
      }), this.props.children);
    }
  }]);

  return movableComponent;
}(PureComponent);

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

export { movableComponent as default };