quantumai-design-system/dist/hooks/useRipple.js

퀀텀에이아이의 디자인 시스템

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useEffect, useState } from 'react';
import useDebounce from './useDebounce';
import styled from '@emotion/styled';
var useRipple = function (ref, bgColor) {
    var _a = useState([]), ripples = _a[0], setRipples = _a[1];
    useEffect(function () {
        if (ref.current) {
            var elem_1 = ref.current;
            var clickHandler_1 = function (e) {
                var rect = elem_1.getBoundingClientRect();
                var left = e.clientX - rect.left;
                var top = e.clientY - rect.top;
                var width = elem_1.clientWidth;
                var height = elem_1.clientHeight;
                var maxSize = Math.max(width, height);
                setRipples(__spreadArray(__spreadArray([], ripples, true), [
                    {
                        left: left - maxSize / 2,
                        top: top - maxSize / 2,
                        width: maxSize,
                        height: maxSize,
                    },
                ], false));
            };
            elem_1.addEventListener('click', clickHandler_1);
            return function () {
                elem_1.removeEventListener('click', clickHandler_1);
            };
        }
    }, [ref, ripples]);
    var _debounced = useDebounce(ripples, 1000);
    useEffect(function () {
        if (_debounced.length)
            setRipples([]);
    }, [_debounced.length]);
    return ripples.map(function (style, index) { return (_jsx(RippleStyled, { style: __assign(__assign({}, style), { backgroundColor: bgColor !== null && bgColor !== void 0 ? bgColor : 'white' }) }, index)); });
};
export default useRipple;
var RippleStyled = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @keyframes rippleEffect {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n\n  position: absolute;\n  opacity: 30%;\n  transform: scale(0);\n  animation: rippleEffect 0.6s linear;\n  border-radius: 50%;\n"], ["\n  @keyframes rippleEffect {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n\n  position: absolute;\n  opacity: 30%;\n  transform: scale(0);\n  animation: rippleEffect 0.6s linear;\n  border-radius: 50%;\n"])));
var templateObject_1;