|
| 1 | +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; |
| 2 | +import * as React from "react"; |
| 3 | +import invariant from "invariant"; |
| 4 | +import { injectScript } from "./utils/injectscript"; |
| 5 | +import { preventGoogleFonts } from "./utils/prevent-google-fonts"; |
| 6 | +import { isBrowser } from "./utils/isbrowser"; |
| 7 | +import { makeLoadScriptUrl } from "./utils/make-load-script-url"; |
| 8 | +let cleaningUp = false; |
| 9 | +export function DefaultLoadingElement() { |
| 10 | + return (/*#__PURE__*/ _jsx("div", { |
| 11 | + children: `Loading...` |
| 12 | + })); |
| 13 | +} |
| 14 | +export const defaultLoadScriptProps = { |
| 15 | + id: "script-loader", |
| 16 | + version: "weekly" |
| 17 | +}; |
| 18 | +class LoadScript extends React.PureComponent { |
| 19 | + componentDidMount() { |
| 20 | + if (isBrowser) { |
| 21 | + if (window.google && window.google.maps && !cleaningUp) { |
| 22 | + console.error("google api is already presented"); |
| 23 | + return; |
| 24 | + } |
| 25 | + this.isCleaningUp().then(this.injectScript).catch(function error(err) { |
| 26 | + console.error("Error at injecting script after cleaning up: ", err); |
| 27 | + }); |
| 28 | + } |
| 29 | + } |
| 30 | + componentDidUpdate(prevProps) { |
| 31 | + if (this.props.libraries !== prevProps.libraries) { |
| 32 | + console.warn("Performance warning! LoadScript has been reloaded unintentionally! You should not pass `libraries` prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable outside of component, or somewhere in config files or ENV variables"); |
| 33 | + } |
| 34 | + if (isBrowser && prevProps.language !== this.props.language) { |
| 35 | + this.cleanup(); |
| 36 | + // TODO: refactor to use gDSFP maybe... wait for hooks refactoring. |
| 37 | + // eslint-disable-next-line react/no-did-update-set-state |
| 38 | + this.setState(function setLoaded() { |
| 39 | + return { |
| 40 | + loaded: false |
| 41 | + }; |
| 42 | + }, this.cleanupCallback); |
| 43 | + } |
| 44 | + } |
| 45 | + componentWillUnmount() { |
| 46 | + if (isBrowser) { |
| 47 | + this.cleanup(); |
| 48 | + const timeoutCallback = () => { |
| 49 | + if (!this.check.current) { |
| 50 | + // @ts-ignore |
| 51 | + delete window.google; |
| 52 | + cleaningUp = false; |
| 53 | + } |
| 54 | + }; |
| 55 | + window.setTimeout(timeoutCallback, 1); |
| 56 | + if (this.props.onUnmount) { |
| 57 | + this.props.onUnmount(); |
| 58 | + } |
| 59 | + } |
| 60 | + } |
| 61 | + render() { |
| 62 | + return (/*#__PURE__*/ _jsxs(_Fragment, { |
| 63 | + children: [ |
| 64 | + /*#__PURE__*/ _jsx("div", { |
| 65 | + ref: this.check |
| 66 | + }), |
| 67 | + this.state.loaded ? this.props.children : this.props.loadingElement || /*#__PURE__*/ _jsx(DefaultLoadingElement, { |
| 68 | + }) |
| 69 | + ] |
| 70 | + })); |
| 71 | + } |
| 72 | + constructor(...args) { |
| 73 | + super(...args); |
| 74 | + this.check = /*#__PURE__*/ React.createRef(); |
| 75 | + this.state = { |
| 76 | + loaded: false |
| 77 | + }; |
| 78 | + this.cleanupCallback = () => { |
| 79 | + // @ts-ignore |
| 80 | + delete window.google.maps; |
| 81 | + this.injectScript(); |
| 82 | + }; |
| 83 | + this.isCleaningUp = async () => { |
| 84 | + function promiseCallback(resolve) { |
| 85 | + if (!cleaningUp) { |
| 86 | + resolve(); |
| 87 | + } else { |
| 88 | + if (isBrowser) { |
| 89 | + const timer = window.setInterval(function interval() { |
| 90 | + if (!cleaningUp) { |
| 91 | + window.clearInterval(timer); |
| 92 | + resolve(); |
| 93 | + } |
| 94 | + }, 1); |
| 95 | + } |
| 96 | + } |
| 97 | + return; |
| 98 | + } |
| 99 | + return new Promise(promiseCallback); |
| 100 | + }; |
| 101 | + this.cleanup = () => { |
| 102 | + cleaningUp = true; |
| 103 | + const script1 = document.getElementById(this.props.id); |
| 104 | + if (script1 && script1.parentNode) { |
| 105 | + script1.parentNode.removeChild(script1); |
| 106 | + } |
| 107 | + Array.prototype.slice.call(document.getElementsByTagName("script")).filter(function filter(script) { |
| 108 | + return typeof script.src === "string" && script.src.includes("maps.googleapis"); |
| 109 | + }).forEach(function forEach(script) { |
| 110 | + if (script.parentNode) { |
| 111 | + script.parentNode.removeChild(script); |
| 112 | + } |
| 113 | + }); |
| 114 | + Array.prototype.slice.call(document.getElementsByTagName("link")).filter(function filter(link) { |
| 115 | + return link.href === "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans"; |
| 116 | + }).forEach(function forEach(link) { |
| 117 | + if (link.parentNode) { |
| 118 | + link.parentNode.removeChild(link); |
| 119 | + } |
| 120 | + }); |
| 121 | + Array.prototype.slice.call(document.getElementsByTagName("style")).filter(function filter(style) { |
| 122 | + return style.innerText !== undefined && style.innerText.length > 0 && style.innerText.includes(".gm-"); |
| 123 | + }).forEach(function forEach(style) { |
| 124 | + if (style.parentNode) { |
| 125 | + style.parentNode.removeChild(style); |
| 126 | + } |
| 127 | + }); |
| 128 | + }; |
| 129 | + this.injectScript = () => { |
| 130 | + if (this.props.preventGoogleFontsLoading) { |
| 131 | + preventGoogleFonts(); |
| 132 | + } |
| 133 | + invariant(!!this.props.id, 'LoadScript requires "id" prop to be a string: %s', this.props.id); |
| 134 | + const injectScriptOptions = { |
| 135 | + id: this.props.id, |
| 136 | + nonce: this.props.nonce, |
| 137 | + url: makeLoadScriptUrl(this.props) |
| 138 | + }; |
| 139 | + injectScript(injectScriptOptions).then(() => { |
| 140 | + if (this.props.onLoad) { |
| 141 | + this.props.onLoad(); |
| 142 | + } |
| 143 | + this.setState(function setLoaded() { |
| 144 | + return { |
| 145 | + loaded: true |
| 146 | + }; |
| 147 | + }); |
| 148 | + return; |
| 149 | + }).catch((err) => { |
| 150 | + if (this.props.onError) { |
| 151 | + this.props.onError(err); |
| 152 | + } |
| 153 | + console.error(` |
| 154 | + There has been an Error with loading Google Maps API script, please check that you provided correct google API key (${this.props.googleMapsApiKey || "-"}) or Client ID (${this.props.googleMapsClientId || "-"}) to <LoadScript /> |
| 155 | + Otherwise it is a Network issue. |
| 156 | + `); |
| 157 | + }); |
| 158 | + }; |
| 159 | + } |
| 160 | +} |
| 161 | +LoadScript.defaultProps = defaultLoadScriptProps; |
| 162 | +export default LoadScript; |
0 commit comments