yqcloud-ui/es/ripple/RippleChild.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';
import Animate from '../rc-components/animate';
import MouseDown from './MouseDown';

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

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

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

        _this.ripple = function (child) {
            if (React.isValidElement(child)) {
                return React.createElement(
                    MouseDown,
                    null,
                    _this.handleMouseDown.bind(_this, child)
                );
            }
            return child;
        };
        return _this;
    }

    _createClass(RippleChild, [{
        key: 'render',
        value: function render() {
            return this.ripple(React.Children.only(this.props.children));
        }
    }, {
        key: 'handleMouseDown',
        value: function handleMouseDown(child, size) {
            var prefixCls = this.props.prefixCls;
            var _child$props = child.props,
                children = _child$props.children,
                style = _child$props.style;

            var componentProps = {
                className: prefixCls + '-wrapper'
            };
            var circle = void 0;
            if (size) {
                var x = size.x,
                    y = size.y,
                    width = size.width,
                    height = size.height;

                var maxWidth = Math.max(width - x, x);
                var maxHeight = Math.max(height - y, y);
                var max = Math.sqrt(maxWidth * maxWidth + maxHeight * maxHeight);
                this.currentCircleStyle = {
                    width: max * 2,
                    height: max * 2,
                    left: x - max,
                    top: y - max
                };
                circle = React.createElement('div', { className: prefixCls, key: 'circle', style: this.currentCircleStyle });
            }
            var newProps = {
                children: [children, React.createElement(
                    Animate,
                    { key: 'ripple', component: 'div', componentProps: componentProps, transitionName: size ? 'zoom-small-slow' : 'fade' },
                    circle
                )],
                style: this.currentStyle || style
            };
            if (size) {
                newProps.visible = 'visible';
                if (size.position === 'static') {
                    newProps.style = this.currentStyle = _extends({}, style, { position: 'relative' });
                }
            }
            return React.cloneElement(child, newProps);
        }
    }]);

    return RippleChild;
}(React.Component);

export default RippleChild;