yqcloud-ui/es/ripple/MouseDown.js

An enterprise-class UI design language and React-based implementation

import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import * as React from 'react';

var MouseDown = function (_React$Component) {
    _inherits(MouseDown, _React$Component);

    function MouseDown() {
        _classCallCheck(this, MouseDown);

        var _this = _possibleConstructorReturn(this, (MouseDown.__proto__ || Object.getPrototypeOf(MouseDown)).apply(this, arguments));

        _this.state = {};
        _this.show = function (e) {
            var currentTarget = e.currentTarget;

            var pos = currentTarget.getBoundingClientRect();
            _this.setState({
                size: {
                    x: e.clientX - pos.left,
                    y: e.clientY - pos.top,
                    width: currentTarget.clientWidth,
                    height: currentTarget.clientHeight,
                    position: document.defaultView.getComputedStyle(currentTarget).position
                }
            });
        };
        _this.hide = function () {
            _this.setState({
                size: undefined
            });
        };
        return _this;
    }

    _createClass(MouseDown, [{
        key: 'render',
        value: function render() {
            var element = this.props.children(this.state.size);
            var visible = element.props.visible;

            var newProps = {
                onMouseDown: wrapEvent(element, 'onMouseDown', this.show)
            };
            if (visible) {
                _extends(newProps, {
                    onMouseUp: wrapEvent(element, 'onMouseUp', this.hide),
                    onMouseLeave: wrapEvent(element, 'onMouseLeave', this.hide),
                    onDragEnd: wrapEvent(element, 'onDragEnd', this.hide)
                });
            }
            return React.cloneElement(element, newProps);
        }
    }]);

    return MouseDown;
}(React.Component);

export default MouseDown;

function wrapEvent(element, eventName, callback) {
    return function (e) {
        var originalEvent = element.props[eventName];
        if (originalEvent) {
            originalEvent(e);
        }
        callback(e);
    };
}