1 | import * as React from 'react'
|
2 |
|
3 | import { DefaultLoadingElement } from './LoadScript'
|
4 | import { useLoadScript, UseLoadScriptOptions } from './useLoadScript'
|
5 |
|
6 | export interface LoadScriptNextProps extends UseLoadScriptOptions {
|
7 | loadingElement?: React.ReactElement
|
8 | onLoad?: () => void
|
9 | onError?: (error: Error) => void
|
10 | onUnmount?: () => void
|
11 | children: React.ReactElement
|
12 | }
|
13 |
|
14 | const defaultLoadingElement = <DefaultLoadingElement />
|
15 |
|
16 | function LoadScriptNext({
|
17 | loadingElement,
|
18 | onLoad,
|
19 | onError,
|
20 | onUnmount,
|
21 | children,
|
22 | ...hookOptions
|
23 | }: LoadScriptNextProps): JSX.Element {
|
24 | const { isLoaded, loadError } = useLoadScript(hookOptions)
|
25 |
|
26 | React.useEffect(
|
27 | function handleOnLoad() {
|
28 | if (isLoaded && typeof onLoad === 'function') {
|
29 | onLoad()
|
30 | }
|
31 | },
|
32 | [isLoaded, onLoad]
|
33 | )
|
34 |
|
35 | React.useEffect(
|
36 | function handleOnError() {
|
37 | if (loadError && typeof onError === 'function') {
|
38 | onError(loadError)
|
39 | }
|
40 | },
|
41 | [loadError, onError]
|
42 | )
|
43 |
|
44 | React.useEffect(
|
45 | function handleOnUnmount() {
|
46 | return () => {
|
47 | if (onUnmount) {
|
48 | onUnmount()
|
49 | }
|
50 | }
|
51 | },
|
52 | [onUnmount]
|
53 | )
|
54 |
|
55 | return isLoaded ? children : loadingElement || defaultLoadingElement
|
56 | }
|
57 |
|
58 | export default React.memo(LoadScriptNext)
|