Fixed #1507 - New Component: Ripple

src/components/ripple/Ripple.css

@@ -0,0 +1,27 @@
+.p-ripple {
+    overflow: hidden;
+    position: relative;
+}
+
+.p-ink {
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 100%;
+    transform: scale(0);
+}
+
+.p-ink-active {
+    animation: ripple 0.4s linear;
+}
+
+.p-ripple-disabled .p-ink {
+    display: none !important;
+}
+
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}

src/components/ripple/Ripple.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+interface RippleProps {
+
+}
+
+export class Ripple extends React.Component<RippleProps,any> {}

src/components/ripple/Ripple.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import DomHandler from '../utils/DomHandler';
+import PrimeReact from '../utils/PrimeReact';
+
+export class Ripple extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.onMouseDown = this.onMouseDown.bind(this);
+    }
+
+    getTarget() {
+        return this.ink && this.ink.parentElement;
+    }
+
+    bindEvents() {
+        if (this.target) {
+            this.target.addEventListener('mousedown', this.onMouseDown);
+        }
+    }
+
+    unbindEvents() {
+        if (this.target) {
+            this.target.removeEventListener('mousedown', this.onMouseDown);
+        }
+    }
+
+    onMouseDown(event) {
+        if (!this.ink || getComputedStyle(this.ink, null).display === 'none') {
+            return;
+        }
+
+        DomHandler.removeClass(this.ink, 'p-ink-active');
+        if (!DomHandler.getHeight(this.ink) && !DomHandler.getWidth(this.ink)) {
+            let d = Math.max(DomHandler.getOuterWidth(this.target), DomHandler.getOuterHeight(this.target));
+            this.ink.style.height = d + 'px';
+            this.ink.style.width = d + 'px';
+        }
+
+        let offset = DomHandler.getOffset(this.target);
+        let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(this.ink) / 2;
+        let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(this.ink) / 2;
+
+        this.ink.style.top = y + 'px';
+        this.ink.style.left = x + 'px';
+        DomHandler.addClass(this.ink, 'p-ink-active');
+    }
+
+    onAnimationEnd(event) {
+        DomHandler.removeClass(event.currentTarget, 'p-ink-active');
+    }
+
+    componentDidMount() {
+        if (this.ink) {
+            this.target = this.getTarget();
+            this.bindEvents();
+        }
+    }
+
+    componentDidUpdate() {
+        if (this.ink && !this.target) {
+            this.target = this.getTarget();
+            this.bindEvents();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.ink) {
+            this.target = null;
+            this.unbindEvents();
+        }
+    }
+
+    render() {
+        return PrimeReact.ripple && (<span ref={(el => this.ink = el)} className="p-ink" onAnimationEnd={this.onAnimationEnd}></span>);
+    }
+}