mk-component/lib/components/movable/index.js

- 1、npm install mk-component --save

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var movableComponent = function (_Component) {
    (0, _inherits3.default)(movableComponent, _Component);

    function movableComponent(props) {
        (0, _classCallCheck3.default)(this, movableComponent);

        var _this = (0, _possibleConstructorReturn3.default)(this, (movableComponent.__proto__ || (0, _getPrototypeOf2.default)(movableComponent)).call(this, props));

        _this.state = {
            pos: { x: 0, y: 0 },
            startMove: false,
            isMoving: false,
            isMoved: false,
            rel: null
        };

        _this.handleMouseDown = function (e) {
            if (e.button !== 0) return;
            var pos = _reactDom2.default.findDOMNode(_this.refs.internal).getBoundingClientRect();
            var parentPos = _reactDom2.default.findDOMNode(_this.refs.internal).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();
        };

        return _this;
    }

    (0, _createClass3.default)(movableComponent, [{
        key: 'render',
        value: function render() {
            var _classNames;

            var className = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, this.props.prefixCls, true), (0, _defineProperty3.default)(_classNames, this.props.className, !!this.props.className), _classNames)),
                style = void 0;

            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 _react2.default.createElement(
                'div',
                (0, _extends3.default)({
                    ref: 'internal',
                    className: className
                }, this.props, {
                    onMouseDown: this.handleMouseDown,
                    onClick: this.handleClick,
                    style: style }),
                this.props.children
            );
        }
    }]);
    return movableComponent;
}(_react.Component);

movableComponent.defaultProps = {
    prefixCls: 'mk-movable'
};
exports.default = movableComponent;
module.exports = exports['default'];