react-recaptcha-that-works/dist/Recaptcha.js

⚛ A reCAPTCHA bridge for React that works.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const isReady = () => Boolean(typeof window === 'object'
    // @ts-ignore
    && window.grecaptcha
    // @ts-ignore
    && window.grecaptcha.render);
const Recaptcha = (0, react_1.forwardRef)(({ id = 'react-recaptcha-that-works', siteKey, size = 'normal', theme = 'light', onLoad = undefined, onVerify, onExpire = undefined, onError = undefined, onClose = undefined, }, ref) => {
    const [ready, setReady] = (0, react_1.useState)(isReady());
    const widgetRef = (0, react_1.useRef)();
    const closeObserverRef = (0, react_1.useRef)();
    const readyIntervalRef = (0, react_1.useRef)();
    const isRendered = () => {
        return typeof widgetRef.current === 'number';
    };
    const updateReadyState = () => {
        if (isReady()) {
            clearInterval(readyIntervalRef.current);
            setReady(true);
        }
    };
    const renderRecaptcha = () => {
        // @ts-ignore
        widgetRef.current = window.grecaptcha.render(id, {
            sitekey: siteKey,
            size,
            theme,
            callback: onVerify,
            'expired-callback': onExpire,
            'error-callback': onError,
        });
        onLoad?.();
    };
    (0, react_1.useEffect)(() => {
        if (ready) {
            renderRecaptcha();
            return;
        }
        readyIntervalRef.current = setInterval(updateReadyState, 1000);
        return () => clearInterval(readyIntervalRef.current);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [ready]);
    (0, react_1.useEffect)(() => {
        if (ready && !isRendered()) {
            renderRecaptcha();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [ready]);
    (0, react_1.useEffect)(() => {
        return () => {
            closeObserverRef.current?.disconnect();
            if (isRendered()) {
                // @ts-ignore
                window.grecaptcha.reset(widgetRef.current);
            }
        };
    }, []);
    const registerOnCloseListener = (0, react_1.useCallback)(() => {
        closeObserverRef.current?.disconnect();
        const iframes = document.getElementsByTagName('iframe');
        const recaptchaFrame = Array.prototype.find
            .call(iframes, e => e.src.includes('google.com/recaptcha/api2/bframe'));
        const recaptchaElement = recaptchaFrame.parentNode.parentNode;
        let lastOpacity = recaptchaElement.style.opacity;
        closeObserverRef.current = new MutationObserver(() => {
            if (lastOpacity !== recaptchaElement.style.opacity
                && recaptchaElement.style.opacity == 0) { // eslint-disable-line eqeqeq
                onClose?.();
            }
            lastOpacity = recaptchaElement.style.opacity;
        });
        closeObserverRef.current.observe(recaptchaElement, {
            attributes: true,
            attributeFilter: ['style'],
        });
    }, [onClose]);
    (0, react_1.useImperativeHandle)(ref, () => ({
        execute: () => {
            if (onClose) {
                registerOnCloseListener();
            }
            // @ts-ignore
            window.grecaptcha.execute(widgetRef.current);
        },
        reset: () => {
            // @ts-ignore
            window.grecaptcha.reset(widgetRef.current);
        }
    }), [onClose, registerOnCloseListener]);
    return (react_1.default.createElement("span", { id: id }));
});
exports.default = Recaptcha;
//# sourceMappingURL=Recaptcha.js.map