/**
 * @file TouchRipple component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import TransitionGroup from 'react-transition-group/TransitionGroup';

import Ripple from '../_Ripple';

import Util from '../_vendors/Util';
import Dom from '../_vendors/Dom';

class TouchRipple extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.ignoreNextMouseDown = false;
        this.nextKey = 0;

        this.state = {
            ripples: []
        };

    }

    getRippleStyle = e => {

        const {displayCenter} = this.props,

            el = ReactDOM.findDOMNode(this),

            elWidth = el.offsetWidth,
            elHeight = el.offsetHeight;

        // get pointer offset of el
        let pointerX, pointerY;
        if (!e || displayCenter) {
            pointerX = elWidth / 2;
            pointerY = elHeight / 2;
        } else {
            const {top, left} = Dom.getOffset(el);
            pointerX = e.pageX - left;
            pointerY = e.pageY - top;
        }

        // radius is the max distence
        const rippleRadius = Math.max(
            Util.getDiag(pointerX, pointerY),
            Util.getDiag(elWidth - pointerX, pointerY),
            Util.getDiag(elWidth - pointerX, elHeight - pointerY),
            Util.getDiag(pointerX, elHeight - pointerY)
        );
        const rippleSize = rippleRadius * 2;

        // calculate offset
        const left = pointerX - rippleRadius;
        const top = pointerY - rippleRadius;

        return {
            height: rippleSize,
            width: rippleSize,
            top: top,
            left: left
        };

    };

    addRipple = (e, props) => {

        if (this.ignoreNextMouseDown) {
            return;
        }

        props = props || {};

        this.ignoreNextMouseDown = true;
        let {ripples} = this.state;

        ripples.push({
            ...props,
            key: this.nextKey++,
            style: {...props.style, ...this.getRippleStyle(e)}
        });

        this.setState({
            ripples
        }, () => {
            this.ignoreNextMouseDown = false;
        });

    };

    removeRipple = () => {
        this.setState({
            ripples: []
        });
    };

    mouseDownHandler = e => {
        this.addRipple(e);
    };

    render() {

        const {className, style, duration} = this.props,
            {ripples} = this.state,

            wrapperClassName = classNames('touch-ripple', {
                [className]: className
            });

        return (
            <TransitionGroup className={wrapperClassName}
                             style={style}
                             onMouseDown={this.mouseDownHandler}
                             onMouseUp={this.removeRipple}
                             onMouseLeave={this.removeRipple}>
                {
                    ripples && ripples.map(item =>
                        <Ripple {...item}
                                duration={duration}/>
                    )
                }
            </TransitionGroup>
        );

    }
}

TouchRipple.propTypes = {

    className: PropTypes.string,
    style: PropTypes.object,

    duration: PropTypes.number,
    displayCenter: PropTypes.bool

};

TouchRipple.defaultProps = {
    duration: 500,
    displayCenter: false
};

export default TouchRipple;
@@ -2409,25 +2409,31 @@
 %7D;%0A%0A    
-m
+handleM
 ouseDown
 Handler 
@@ -2424,23 +2424,16 @@
 ouseDown
-Handler
  = e =%3E 
@@ -2576,17 +2576,17 @@
 is.state
-,
+;
 %0A%0A      
@@ -2591,28 +2591,55 @@
     
-    wrapperC
+return (%0A            %3CTransitionGroup c
 lassName
  = c
@@ -2634,19 +2634,18 @@
 lassName
- = 
+=%7B
 classNam
@@ -2722,84 +2722,8 @@
   %7D)
-;%0A%0A        return (%0A            %3CTransitionGroup className=%7BwrapperClassName
 %7D%0A  
@@ -2814,17 +2814,23 @@
 his.
-m
+handleM
 ouseDown
 Hand
@@ -2829,15 +2829,8 @@
 Down
-Handler
 %7D%0A  
@@ -3010,20 +3010,29 @@
 les.map(
+(
 item
+, index)
  =%3E%0A    
@@ -3069,16 +3069,60 @@
 ..item%7D%0A
+                                key=%7Bindex%7D%0A
         
@@ -3524,8 +3524,9 @@
 hRipple;
+%0A

update TouchRipple