paypal / react-paypal-js
Showing 1 of 2 files from the diff.

@@ -1,4 +1,12 @@
Loading
1 -
import React, { useEffect, useRef, useState, FunctionComponent } from "react";
1 +
import React, {
2 +
    useEffect,
3 +
    useRef,
4 +
    useState,
5 +
    FunctionComponent,
6 +
    ReactElement,
7 +
    ReactPortal,
8 +
    ReactFragment,
9 +
} from "react";
2 10
import { usePayPalScriptReducer } from "../hooks/scriptProviderHooks";
3 11
import { getPayPalWindowNamespace } from "../utils";
4 12
import { DEFAULT_PAYPAL_NAMESPACE } from "../constants";
@@ -12,6 +20,7 @@
Loading
12 20
     * Pass a css class to the div container.
13 21
     */
14 22
    className?: string;
23 +
    children?: ReactElement | ReactPortal | ReactFragment;
15 24
}
16 25
17 26
/**
@@ -32,10 +41,12 @@
Loading
32 41
*/
33 42
export const PayPalMarks: FunctionComponent<PayPalMarksComponentProps> = ({
34 43
    className = "",
44 +
    children,
35 45
    ...markProps
36 46
}: PayPalMarksComponentProps) => {
37 47
    const [{ isResolved, options }] = usePayPalScriptReducer();
38 48
    const markContainerRef = useRef<HTMLDivElement>(null);
49 +
    const [isEligible, setIsEligible] = useState(true);
39 50
    const [, setErrorState] = useState(null);
40 51
41 52
    /**
@@ -45,7 +56,9 @@
Loading
45 56
        const { current } = markContainerRef;
46 57
47 58
        // only render the mark when eligible
48 -
        if (!current || !mark.isEligible()) return;
59 +
        if (!current || !mark.isEligible()) {
60 +
            return setIsEligible(false);
61 +
        }
49 62
        // Remove any children before render it again
50 63
        if (current.firstChild) {
51 64
            current.removeChild(current.firstChild);
@@ -89,7 +102,15 @@
Loading
89 102
        // eslint-disable-next-line react-hooks/exhaustive-deps
90 103
    }, [isResolved, markProps.fundingSource]);
91 104
92 -
    return <div ref={markContainerRef} className={className} />;
105 +
    return (
106 +
        <>
107 +
            {isEligible ? (
108 +
                <div ref={markContainerRef} className={className} />
109 +
            ) : (
110 +
                children
111 +
            )}
112 +
        </>
113 +
    );
93 114
};
94 115
95 116
function getErrorMessage({
Files Coverage
src 97.84%
Project Totals (11 files) 97.84%
Sunburst
The inner-most circle is the entire project, moving away from the center are folders then, finally, a single file. The size and color of each slice is representing the number of statements and the coverage, respectively.
Icicle
The top section represents the entire project. Proceeding with folders and finally individual files. The size and color of each slice is representing the number of statements and the coverage, respectively.
Grid
Each block represents a single file in the project. The size and color of each block is represented by the number of statements and the coverage, respectively.
Loading