awesome-mui-ripple/dist/index.js

Add MUI ripple effect to your React components

'use strict';

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

var defaultColors = {
    light: 'rgba(255,255,255, 0.3)',
    dark: 'rgba(0,0,0, 0.2)',
};
var Ripple = /** @class */ (function () {
    function Ripple() {
        this.x = 0;
        this.y = 0;
        this.z = 0;
    }
    Ripple.prototype.findFurthestPoint = function (clickPointX, elementWidth, offsetX, clickPointY, elementHeight, offsetY) {
        this.x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
        this.y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
        this.z = Math.hypot(this.x - (clickPointX - offsetX), this.y - (clickPointY - offsetY));
    };
    Ripple.prototype.applyStyles = function (element, rippleColor, rect, radius, event) {
        var isDefaultColor = rippleColor === 'light' || rippleColor === 'dark';
        if (isDefaultColor)
            element.style.backgroundColor = defaultColors[rippleColor];
        if (!isDefaultColor)
            element.style.backgroundColor = rippleColor;
        element.style.borderRadius = '50%';
        element.style.pointerEvents = 'none';
        element.style.position = 'absolute';
        element.style.left = event.clientX - rect.left - radius + 'px';
        element.style.top = event.clientY - rect.top - radius + 'px';
        element.style.width = element.style.height = radius * 2 + 'px';
    };
    Ripple.prototype.applyAnimation = function (element) {
        element.animate([
            {
                transform: 'scale(0)',
                opacity: 1,
            },
            {
                transform: 'scale(1.5)',
                opacity: 0,
            },
        ], {
            duration: 500,
            easing: 'linear',
        });
    };
    Ripple.prototype.animate = function (event, rippleColor) {
        var element = event.currentTarget;
        if (element === null)
            return;
        element.style.position = 'relative';
        element.style.overflow = 'hidden';
        var rect = element.getBoundingClientRect();
        this.findFurthestPoint(event.clientX, element.offsetWidth, rect.left, event.clientY, element.offsetHeight, rect.top);
        var circle = document.createElement('span');
        this.applyStyles(circle, rippleColor || 'light', rect, this.z, event);
        this.applyAnimation(circle);
        element.appendChild(circle);
        setTimeout(function () { return circle.remove(); }, 500);
    };
    return Ripple;
}());

exports.Ripple = Ripple;