paypal / react-paypal-js

@@ -1,12 +1,4 @@
Loading
1 -
import React, {
2 -
    useEffect,
3 -
    useRef,
4 -
    useState,
5 -
    FunctionComponent,
6 -
    ReactElement,
7 -
    ReactPortal,
8 -
    ReactFragment,
9 -
} from "react";
1 +
import React, { useEffect, useRef, useState, FunctionComponent } from "react";
10 2
import { usePayPalScriptReducer } from "../hooks/scriptProviderHooks";
11 3
import { getPayPalWindowNamespace } from "../utils";
12 4
import { DEFAULT_PAYPAL_NAMESPACE } from "../constants";
@@ -14,13 +6,14 @@
Loading
14 6
    PayPalMarksComponentOptions,
15 7
    PayPalMarksComponent,
16 8
} from "@paypal/paypal-js/types/components/marks";
9 +
import type { PayPalProviderChildren } from "../types/scriptProviderTypes";
17 10
18 11
export interface PayPalMarksComponentProps extends PayPalMarksComponentOptions {
19 12
    /**
20 13
     * Pass a css class to the div container.
21 14
     */
22 15
    className?: string;
23 -
    children?: ReactElement | ReactPortal | ReactFragment;
16 +
    children?: PayPalProviderChildren;
24 17
}
25 18
26 19
/**

@@ -49,7 +49,7 @@
Loading
49 49
    ({
50 50
        className = "",
51 51
        disabled = false,
52 -
        children = null,
52 +
        children,
53 53
        forceReRender = [],
54 54
        ...buttonProps
55 55
    }: BraintreePayPalButtonsComponentProps) => {

@@ -38,7 +38,7 @@
Loading
38 38
export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
39 39
    className = "",
40 40
    disabled = false,
41 -
    children = null,
41 +
    children,
42 42
    forceReRender = [],
43 43
    ...buttonProps
44 44
}: PayPalButtonsComponentProps) => {
@@ -156,16 +156,18 @@
Loading
156 156
        disabled ? "paypal-buttons-disabled" : ""
157 157
    }`.trim();
158 158
159 -
    if (isEligible === false) {
160 -
        return children;
161 -
    }
162 -
163 159
    return (
164 -
        <div
165 -
            ref={buttonsContainerRef}
166 -
            style={isDisabledStyle}
167 -
            className={classNames}
168 -
        />
160 +
        <>
161 +
            {isEligible ? (
162 +
                <div
163 +
                    ref={buttonsContainerRef}
164 +
                    style={isDisabledStyle}
165 +
                    className={classNames}
166 +
                />
167 +
            ) : (
168 +
                children
169 +
            )}
170 +
        </>
169 171
    );
170 172
};
171 173
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