@dfds-ui/hooks 2.2.0-alpha.8f6cde13 → 2.2.0-alpha.9b8e2d07
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.d.ts +6 -0
- package/cjs/index.js +60 -0
- package/cjs/useDimensions.d.ts +16 -0
- package/cjs/useDimensions.js +61 -0
- package/cjs/useForwardedRef.d.ts +3 -0
- package/cjs/useForwardedRef.js +23 -0
- package/cjs/useGoogleReCaptchaV3.d.ts +18 -0
- package/cjs/useGoogleReCaptchaV3.js +48 -0
- package/cjs/useOffline.d.ts +5 -0
- package/cjs/useOffline.js +26 -0
- package/cjs/useResizeObserver.d.ts +2 -0
- package/cjs/useResizeObserver.js +9 -0
- package/cjs/useScript.d.ts +8 -0
- package/cjs/useScript.js +92 -0
- package/index.d.ts +6 -0
- package/index.js +6 -0
- package/package.json +2 -2
- package/useDimensions.d.ts +16 -0
- package/useDimensions.js +71 -0
- package/useForwardedRef.d.ts +3 -0
- package/useForwardedRef.js +16 -0
- package/useGoogleReCaptchaV3.d.ts +18 -0
- package/useGoogleReCaptchaV3.js +72 -0
- package/useOffline.d.ts +5 -0
- package/useOffline.js +35 -0
- package/useResizeObserver.d.ts +2 -0
- package/useResizeObserver.js +2 -0
- package/useScript.d.ts +8 -0
- package/useScript.js +122 -0
package/cjs/index.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as useScript } from './useScript';
|
|
2
|
+
export { default as useResizeObserver } from './useResizeObserver';
|
|
3
|
+
export { default as useForwardedRef } from './useForwardedRef';
|
|
4
|
+
export { default as useOffline } from './useOffline';
|
|
5
|
+
export { default as useDimensions } from './useDimensions';
|
|
6
|
+
export * from './useGoogleReCaptchaV3';
|
package/cjs/index.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
useScript: true,
|
|
8
|
+
useResizeObserver: true,
|
|
9
|
+
useForwardedRef: true,
|
|
10
|
+
useOffline: true,
|
|
11
|
+
useDimensions: true
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "useDimensions", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _useDimensions.default;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "useForwardedRef", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _useForwardedRef.default;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(exports, "useOffline", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () {
|
|
28
|
+
return _useOffline.default;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "useResizeObserver", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () {
|
|
34
|
+
return _useResizeObserver.default;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(exports, "useScript", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () {
|
|
40
|
+
return _useScript.default;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
var _useScript = _interopRequireDefault(require("./useScript"));
|
|
44
|
+
var _useResizeObserver = _interopRequireDefault(require("./useResizeObserver"));
|
|
45
|
+
var _useForwardedRef = _interopRequireDefault(require("./useForwardedRef"));
|
|
46
|
+
var _useOffline = _interopRequireDefault(require("./useOffline"));
|
|
47
|
+
var _useDimensions = _interopRequireDefault(require("./useDimensions"));
|
|
48
|
+
var _useGoogleReCaptchaV = require("./useGoogleReCaptchaV3");
|
|
49
|
+
Object.keys(_useGoogleReCaptchaV).forEach(function (key) {
|
|
50
|
+
if (key === "default" || key === "__esModule") return;
|
|
51
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
52
|
+
if (key in exports && exports[key] === _useGoogleReCaptchaV[key]) return;
|
|
53
|
+
Object.defineProperty(exports, key, {
|
|
54
|
+
enumerable: true,
|
|
55
|
+
get: function () {
|
|
56
|
+
return _useGoogleReCaptchaV[key];
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface DimensionObject {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
top: number;
|
|
5
|
+
left: number;
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
right: number;
|
|
9
|
+
bottom: number;
|
|
10
|
+
}
|
|
11
|
+
export type UseDimensionsHook = [(node: HTMLElement | null) => void, DimensionObject, HTMLElement | null];
|
|
12
|
+
export interface UseDimensionsArgs {
|
|
13
|
+
liveMeasure?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare function useDimensions({ liveMeasure }?: UseDimensionsArgs): UseDimensionsHook;
|
|
16
|
+
export default useDimensions;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
9
|
+
|
|
10
|
+
const EMPTY_DIMENSION_OBJECT = {
|
|
11
|
+
width: 0,
|
|
12
|
+
height: 0,
|
|
13
|
+
top: 0,
|
|
14
|
+
left: 0,
|
|
15
|
+
x: 0,
|
|
16
|
+
y: 0,
|
|
17
|
+
right: 0,
|
|
18
|
+
bottom: 0
|
|
19
|
+
};
|
|
20
|
+
function getDimensionObject(node) {
|
|
21
|
+
const rect = node.getBoundingClientRect();
|
|
22
|
+
return {
|
|
23
|
+
width: rect.width,
|
|
24
|
+
height: rect.height,
|
|
25
|
+
x: rect.x,
|
|
26
|
+
y: rect.y,
|
|
27
|
+
top: rect.y,
|
|
28
|
+
left: rect.x,
|
|
29
|
+
right: rect.right,
|
|
30
|
+
bottom: rect.bottom
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function useDimensions({
|
|
34
|
+
liveMeasure = true
|
|
35
|
+
} = {}) {
|
|
36
|
+
const [dimensions, setDimensions] = (0, _react.useState)(EMPTY_DIMENSION_OBJECT);
|
|
37
|
+
const [node, setNode] = (0, _react.useState)(null);
|
|
38
|
+
const ref = (0, _react.useCallback)(node => {
|
|
39
|
+
setNode(node);
|
|
40
|
+
}, []);
|
|
41
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
|
|
42
|
+
useIsomorphicLayoutEffect(() => {
|
|
43
|
+
if (node) {
|
|
44
|
+
const measure = () => window.requestAnimationFrame(() => setDimensions(getDimensionObject(node)));
|
|
45
|
+
measure();
|
|
46
|
+
if (liveMeasure) {
|
|
47
|
+
window.addEventListener('resize', measure);
|
|
48
|
+
window.addEventListener('scroll', measure);
|
|
49
|
+
return () => {
|
|
50
|
+
window.removeEventListener('resize', measure);
|
|
51
|
+
window.removeEventListener('scroll', measure);
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
return () => {
|
|
56
|
+
/* no-op */
|
|
57
|
+
};
|
|
58
|
+
}, [liveMeasure, node]);
|
|
59
|
+
return [ref, dimensions, node];
|
|
60
|
+
}
|
|
61
|
+
var _default = exports.default = useDimensions;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
function useForwardedRef(forwardedRef) {
|
|
10
|
+
const innerRef = _react.default.useRef(null);
|
|
11
|
+
_react.default.useEffect(() => {
|
|
12
|
+
if (!forwardedRef) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
if (typeof forwardedRef === 'function') {
|
|
16
|
+
forwardedRef(innerRef.current);
|
|
17
|
+
} else {
|
|
18
|
+
forwardedRef.current = innerRef.current;
|
|
19
|
+
}
|
|
20
|
+
}, [forwardedRef]);
|
|
21
|
+
return innerRef;
|
|
22
|
+
}
|
|
23
|
+
var _default = exports.default = useForwardedRef;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare global {
|
|
2
|
+
interface Window {
|
|
3
|
+
grecaptcha: any;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
export type GoogleReCaptchaV3Options = {
|
|
7
|
+
/**
|
|
8
|
+
* The `sitekey` to use with reCAPTCHA v3.
|
|
9
|
+
* https://developers.google.com/recaptcha/docs/v3
|
|
10
|
+
*/
|
|
11
|
+
siteKey: string;
|
|
12
|
+
/**
|
|
13
|
+
* Disable ReCaptcha preventing the script from loading and return undefined from the execute function.
|
|
14
|
+
* This is useful when consumer needs to conditionally enable or disable ReCaptcha
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
};
|
|
18
|
+
export declare function useGoogleReCaptchaV3({ siteKey, disabled }: GoogleReCaptchaV3Options): (action?: string) => Promise<string | undefined>;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useGoogleReCaptchaV3 = useGoogleReCaptchaV3;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _useScript = _interopRequireDefault(require("./useScript"));
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
function useGoogleReCaptchaV3({
|
|
11
|
+
siteKey,
|
|
12
|
+
disabled = false
|
|
13
|
+
}) {
|
|
14
|
+
// Load ReCaptcha script.
|
|
15
|
+
const [loaded, error] = (0, _useScript.default)(`https://www.google.com/recaptcha/api.js?render=${siteKey}`, disabled);
|
|
16
|
+
(0, _react.useEffect)(() => {
|
|
17
|
+
if (loaded && !disabled) {
|
|
18
|
+
// eslint-disable-next-line no-console
|
|
19
|
+
console.log('Google ReCaptcha script loaded!');
|
|
20
|
+
}
|
|
21
|
+
if (error) throw new Error('Google ReCaptcha script failed to load');
|
|
22
|
+
}, [loaded, error, disabled]);
|
|
23
|
+
const executeReCaptcha = (0, _react.useCallback)(async action => {
|
|
24
|
+
if (!window) {
|
|
25
|
+
throw new Error('ERROR: NOT A WEB BROWSER');
|
|
26
|
+
}
|
|
27
|
+
if (disabled) {
|
|
28
|
+
return Promise.resolve(undefined);
|
|
29
|
+
}
|
|
30
|
+
const {
|
|
31
|
+
grecaptcha
|
|
32
|
+
} = window;
|
|
33
|
+
if (!grecaptcha) {
|
|
34
|
+
throw new Error('ERROR: SCRIPT NOT AVAILABLE');
|
|
35
|
+
}
|
|
36
|
+
return new Promise(resolve => {
|
|
37
|
+
// Invoke the ReCaptcha check.
|
|
38
|
+
grecaptcha.ready(() => {
|
|
39
|
+
grecaptcha.execute(siteKey, {
|
|
40
|
+
action
|
|
41
|
+
}).then(token => {
|
|
42
|
+
resolve(token);
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
}, [siteKey, disabled]);
|
|
47
|
+
return executeReCaptcha;
|
|
48
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
const getOnLineStatus = () => typeof window !== 'undefined' && typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
|
|
9
|
+
const useOffline = () => {
|
|
10
|
+
const [status, setStatus] = (0, _react.useState)(getOnLineStatus());
|
|
11
|
+
const setOnline = () => setStatus(true);
|
|
12
|
+
const setOffline = () => setStatus(false);
|
|
13
|
+
(0, _react.useEffect)(() => {
|
|
14
|
+
window.addEventListener('online', setOnline);
|
|
15
|
+
window.addEventListener('offline', setOffline);
|
|
16
|
+
return () => {
|
|
17
|
+
window.removeEventListener('online', setOnline);
|
|
18
|
+
window.removeEventListener('offline', setOffline);
|
|
19
|
+
};
|
|
20
|
+
}, []);
|
|
21
|
+
return {
|
|
22
|
+
isOnline: status,
|
|
23
|
+
isOffline: !status
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
var _default = exports.default = useOffline;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _polyfilled = _interopRequireDefault(require("use-resize-observer/polyfilled"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
var _default = exports.default = _polyfilled.default;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook for loading external script
|
|
3
|
+
* @param {string} src - The URL of the script
|
|
4
|
+
* @param {boolean} [doNotLoad=false] - If set to true the script will not be loaded
|
|
5
|
+
* This can be handy because hooks can not be called conditionally by the consumer
|
|
6
|
+
*/
|
|
7
|
+
declare function useScript(src: string, doNotLoad?: boolean): boolean[];
|
|
8
|
+
export default useScript;
|
package/cjs/useScript.js
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
class Script {
|
|
9
|
+
constructor(src) {
|
|
10
|
+
this.state = 'PENDING';
|
|
11
|
+
this.listeners = [];
|
|
12
|
+
const script = document.createElement('script');
|
|
13
|
+
script.src = src;
|
|
14
|
+
script.async = true;
|
|
15
|
+
const load = () => {
|
|
16
|
+
this.state = 'LOADED';
|
|
17
|
+
script.removeEventListener('load', load);
|
|
18
|
+
this.emitState();
|
|
19
|
+
};
|
|
20
|
+
const error = () => {
|
|
21
|
+
this.state = 'ERROR';
|
|
22
|
+
script.removeEventListener('error', error);
|
|
23
|
+
this.emitState();
|
|
24
|
+
};
|
|
25
|
+
script.addEventListener('load', load);
|
|
26
|
+
script.addEventListener('error', error);
|
|
27
|
+
document.body.appendChild(script);
|
|
28
|
+
}
|
|
29
|
+
onStateChange(cb) {
|
|
30
|
+
this.listeners.push(cb);
|
|
31
|
+
return () => {
|
|
32
|
+
this.listeners = this.listeners.filter(fn => fn !== cb);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
emitState() {
|
|
36
|
+
for (const cb of this.listeners) {
|
|
37
|
+
cb(this.state);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
const scripts = new Map();
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Hook for loading external script
|
|
45
|
+
* @param {string} src - The URL of the script
|
|
46
|
+
* @param {boolean} [doNotLoad=false] - If set to true the script will not be loaded
|
|
47
|
+
* This can be handy because hooks can not be called conditionally by the consumer
|
|
48
|
+
*/
|
|
49
|
+
function useScript(src, doNotLoad = false) {
|
|
50
|
+
// Keeping track of script loaded and error state
|
|
51
|
+
const [state, setState] = (0, _react.useState)({
|
|
52
|
+
loaded: false,
|
|
53
|
+
error: false
|
|
54
|
+
});
|
|
55
|
+
(0, _react.useEffect)(() => {
|
|
56
|
+
// If doNotLoad we return early so the script will not be loaded
|
|
57
|
+
if (doNotLoad) {
|
|
58
|
+
setState({
|
|
59
|
+
loaded: true,
|
|
60
|
+
error: false
|
|
61
|
+
});
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// If scripts already includes src it means that the script was already
|
|
66
|
+
// loaded by another instance of the hook, so no need to load again
|
|
67
|
+
const script = scripts.get(src) || scripts.set(src, new Script(src)).get(src);
|
|
68
|
+
if (script.state === 'LOADED') {
|
|
69
|
+
setState({
|
|
70
|
+
loaded: true,
|
|
71
|
+
error: false
|
|
72
|
+
});
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
return script.onStateChange(state => {
|
|
76
|
+
if (state === 'ERROR') {
|
|
77
|
+
scripts.delete(src);
|
|
78
|
+
setState({
|
|
79
|
+
loaded: true,
|
|
80
|
+
error: true
|
|
81
|
+
});
|
|
82
|
+
} else {
|
|
83
|
+
setState({
|
|
84
|
+
loaded: true,
|
|
85
|
+
error: false
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
}, [src, doNotLoad]);
|
|
90
|
+
return [state.loaded, state.error];
|
|
91
|
+
}
|
|
92
|
+
var _default = exports.default = useScript;
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as useScript } from './useScript';
|
|
2
|
+
export { default as useResizeObserver } from './useResizeObserver';
|
|
3
|
+
export { default as useForwardedRef } from './useForwardedRef';
|
|
4
|
+
export { default as useOffline } from './useOffline';
|
|
5
|
+
export { default as useDimensions } from './useDimensions';
|
|
6
|
+
export * from './useGoogleReCaptchaV3';
|
package/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as useScript } from './useScript';
|
|
2
|
+
export { default as useResizeObserver } from './useResizeObserver';
|
|
3
|
+
export { default as useForwardedRef } from './useForwardedRef';
|
|
4
|
+
export { default as useOffline } from './useOffline';
|
|
5
|
+
export { default as useDimensions } from './useDimensions';
|
|
6
|
+
export * from './useGoogleReCaptchaV3';
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "React hooks",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"private": false,
|
|
6
|
-
"version": "2.2.0-alpha.
|
|
6
|
+
"version": "2.2.0-alpha.9b8e2d07",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"main": "./cjs/index.js",
|
|
9
9
|
"module": "./index.js",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"use-resize-observer": "^9.1.0"
|
|
18
18
|
},
|
|
19
|
-
"gitHead": "
|
|
19
|
+
"gitHead": "9b8e2d078da813820f18ff9612654529755b55f2",
|
|
20
20
|
"publishConfig": {
|
|
21
21
|
"access": "public"
|
|
22
22
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface DimensionObject {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
top: number;
|
|
5
|
+
left: number;
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
right: number;
|
|
9
|
+
bottom: number;
|
|
10
|
+
}
|
|
11
|
+
export type UseDimensionsHook = [(node: HTMLElement | null) => void, DimensionObject, HTMLElement | null];
|
|
12
|
+
export interface UseDimensionsArgs {
|
|
13
|
+
liveMeasure?: boolean;
|
|
14
|
+
}
|
|
15
|
+
declare function useDimensions({ liveMeasure }?: UseDimensionsArgs): UseDimensionsHook;
|
|
16
|
+
export default useDimensions;
|
package/useDimensions.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
7
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
8
|
+
import { useState, useCallback, useLayoutEffect, useEffect } from 'react';
|
|
9
|
+
var EMPTY_DIMENSION_OBJECT = {
|
|
10
|
+
width: 0,
|
|
11
|
+
height: 0,
|
|
12
|
+
top: 0,
|
|
13
|
+
left: 0,
|
|
14
|
+
x: 0,
|
|
15
|
+
y: 0,
|
|
16
|
+
right: 0,
|
|
17
|
+
bottom: 0
|
|
18
|
+
};
|
|
19
|
+
function getDimensionObject(node) {
|
|
20
|
+
var rect = node.getBoundingClientRect();
|
|
21
|
+
return {
|
|
22
|
+
width: rect.width,
|
|
23
|
+
height: rect.height,
|
|
24
|
+
x: rect.x,
|
|
25
|
+
y: rect.y,
|
|
26
|
+
top: rect.y,
|
|
27
|
+
left: rect.x,
|
|
28
|
+
right: rect.right,
|
|
29
|
+
bottom: rect.bottom
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
function useDimensions() {
|
|
33
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
34
|
+
_ref$liveMeasure = _ref.liveMeasure,
|
|
35
|
+
liveMeasure = _ref$liveMeasure === void 0 ? true : _ref$liveMeasure;
|
|
36
|
+
var _useState = useState(EMPTY_DIMENSION_OBJECT),
|
|
37
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
38
|
+
dimensions = _useState2[0],
|
|
39
|
+
setDimensions = _useState2[1];
|
|
40
|
+
var _useState3 = useState(null),
|
|
41
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
42
|
+
node = _useState4[0],
|
|
43
|
+
setNode = _useState4[1];
|
|
44
|
+
var ref = useCallback(function (node) {
|
|
45
|
+
setNode(node);
|
|
46
|
+
}, []);
|
|
47
|
+
var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
48
|
+
useIsomorphicLayoutEffect(function () {
|
|
49
|
+
if (node) {
|
|
50
|
+
var measure = function measure() {
|
|
51
|
+
return window.requestAnimationFrame(function () {
|
|
52
|
+
return setDimensions(getDimensionObject(node));
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
measure();
|
|
56
|
+
if (liveMeasure) {
|
|
57
|
+
window.addEventListener('resize', measure);
|
|
58
|
+
window.addEventListener('scroll', measure);
|
|
59
|
+
return function () {
|
|
60
|
+
window.removeEventListener('resize', measure);
|
|
61
|
+
window.removeEventListener('scroll', measure);
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return function () {
|
|
66
|
+
/* no-op */
|
|
67
|
+
};
|
|
68
|
+
}, [liveMeasure, node]);
|
|
69
|
+
return [ref, dimensions, node];
|
|
70
|
+
}
|
|
71
|
+
export default useDimensions;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
function useForwardedRef(forwardedRef) {
|
|
3
|
+
var innerRef = React.useRef(null);
|
|
4
|
+
React.useEffect(function () {
|
|
5
|
+
if (!forwardedRef) {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
if (typeof forwardedRef === 'function') {
|
|
9
|
+
forwardedRef(innerRef.current);
|
|
10
|
+
} else {
|
|
11
|
+
forwardedRef.current = innerRef.current;
|
|
12
|
+
}
|
|
13
|
+
}, [forwardedRef]);
|
|
14
|
+
return innerRef;
|
|
15
|
+
}
|
|
16
|
+
export default useForwardedRef;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare global {
|
|
2
|
+
interface Window {
|
|
3
|
+
grecaptcha: any;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
export type GoogleReCaptchaV3Options = {
|
|
7
|
+
/**
|
|
8
|
+
* The `sitekey` to use with reCAPTCHA v3.
|
|
9
|
+
* https://developers.google.com/recaptcha/docs/v3
|
|
10
|
+
*/
|
|
11
|
+
siteKey: string;
|
|
12
|
+
/**
|
|
13
|
+
* Disable ReCaptcha preventing the script from loading and return undefined from the execute function.
|
|
14
|
+
* This is useful when consumer needs to conditionally enable or disable ReCaptcha
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
};
|
|
18
|
+
export declare function useGoogleReCaptchaV3({ siteKey, disabled }: GoogleReCaptchaV3Options): (action?: string) => Promise<string | undefined>;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
2
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
3
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
4
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
5
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
6
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
8
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
9
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
11
|
+
import { useCallback, useEffect } from 'react';
|
|
12
|
+
import useScript from './useScript';
|
|
13
|
+
export function useGoogleReCaptchaV3(_ref) {
|
|
14
|
+
var siteKey = _ref.siteKey,
|
|
15
|
+
_ref$disabled = _ref.disabled,
|
|
16
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
17
|
+
// Load ReCaptcha script.
|
|
18
|
+
var _useScript = useScript("https://www.google.com/recaptcha/api.js?render=".concat(siteKey), disabled),
|
|
19
|
+
_useScript2 = _slicedToArray(_useScript, 2),
|
|
20
|
+
loaded = _useScript2[0],
|
|
21
|
+
error = _useScript2[1];
|
|
22
|
+
useEffect(function () {
|
|
23
|
+
if (loaded && !disabled) {
|
|
24
|
+
// eslint-disable-next-line no-console
|
|
25
|
+
console.log('Google ReCaptcha script loaded!');
|
|
26
|
+
}
|
|
27
|
+
if (error) throw new Error('Google ReCaptcha script failed to load');
|
|
28
|
+
}, [loaded, error, disabled]);
|
|
29
|
+
var executeReCaptcha = useCallback(/*#__PURE__*/function () {
|
|
30
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(action) {
|
|
31
|
+
var _window, grecaptcha;
|
|
32
|
+
return _regenerator().w(function (_context) {
|
|
33
|
+
while (1) switch (_context.n) {
|
|
34
|
+
case 0:
|
|
35
|
+
if (window) {
|
|
36
|
+
_context.n = 1;
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
throw new Error('ERROR: NOT A WEB BROWSER');
|
|
40
|
+
case 1:
|
|
41
|
+
if (!disabled) {
|
|
42
|
+
_context.n = 2;
|
|
43
|
+
break;
|
|
44
|
+
}
|
|
45
|
+
return _context.a(2, Promise.resolve(undefined));
|
|
46
|
+
case 2:
|
|
47
|
+
_window = window, grecaptcha = _window.grecaptcha;
|
|
48
|
+
if (grecaptcha) {
|
|
49
|
+
_context.n = 3;
|
|
50
|
+
break;
|
|
51
|
+
}
|
|
52
|
+
throw new Error('ERROR: SCRIPT NOT AVAILABLE');
|
|
53
|
+
case 3:
|
|
54
|
+
return _context.a(2, new Promise(function (resolve) {
|
|
55
|
+
// Invoke the ReCaptcha check.
|
|
56
|
+
grecaptcha.ready(function () {
|
|
57
|
+
grecaptcha.execute(siteKey, {
|
|
58
|
+
action: action
|
|
59
|
+
}).then(function (token) {
|
|
60
|
+
resolve(token);
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
}));
|
|
64
|
+
}
|
|
65
|
+
}, _callee);
|
|
66
|
+
}));
|
|
67
|
+
return function (_x) {
|
|
68
|
+
return _ref2.apply(this, arguments);
|
|
69
|
+
};
|
|
70
|
+
}(), [siteKey, disabled]);
|
|
71
|
+
return executeReCaptcha;
|
|
72
|
+
}
|
package/useOffline.d.ts
ADDED
package/useOffline.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
7
|
+
import { useEffect, useState } from 'react';
|
|
8
|
+
var getOnLineStatus = function getOnLineStatus() {
|
|
9
|
+
return typeof window !== 'undefined' && typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
|
|
10
|
+
};
|
|
11
|
+
var useOffline = function useOffline() {
|
|
12
|
+
var _useState = useState(getOnLineStatus()),
|
|
13
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
14
|
+
status = _useState2[0],
|
|
15
|
+
setStatus = _useState2[1];
|
|
16
|
+
var setOnline = function setOnline() {
|
|
17
|
+
return setStatus(true);
|
|
18
|
+
};
|
|
19
|
+
var setOffline = function setOffline() {
|
|
20
|
+
return setStatus(false);
|
|
21
|
+
};
|
|
22
|
+
useEffect(function () {
|
|
23
|
+
window.addEventListener('online', setOnline);
|
|
24
|
+
window.addEventListener('offline', setOffline);
|
|
25
|
+
return function () {
|
|
26
|
+
window.removeEventListener('online', setOnline);
|
|
27
|
+
window.removeEventListener('offline', setOffline);
|
|
28
|
+
};
|
|
29
|
+
}, []);
|
|
30
|
+
return {
|
|
31
|
+
isOnline: status,
|
|
32
|
+
isOffline: !status
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export default useOffline;
|
package/useScript.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook for loading external script
|
|
3
|
+
* @param {string} src - The URL of the script
|
|
4
|
+
* @param {boolean} [doNotLoad=false] - If set to true the script will not be loaded
|
|
5
|
+
* This can be handy because hooks can not be called conditionally by the consumer
|
|
6
|
+
*/
|
|
7
|
+
declare function useScript(src: string, doNotLoad?: boolean): boolean[];
|
|
8
|
+
export default useScript;
|
package/useScript.js
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
4
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
5
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
6
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
|
|
7
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
8
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
9
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
10
|
+
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
|
11
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
12
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
13
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
14
|
+
import { useState, useEffect } from 'react';
|
|
15
|
+
var Script = /*#__PURE__*/function () {
|
|
16
|
+
function Script(src) {
|
|
17
|
+
var _this = this;
|
|
18
|
+
_classCallCheck(this, Script);
|
|
19
|
+
this.state = 'PENDING';
|
|
20
|
+
this.listeners = [];
|
|
21
|
+
var script = document.createElement('script');
|
|
22
|
+
script.src = src;
|
|
23
|
+
script.async = true;
|
|
24
|
+
var _load = function load() {
|
|
25
|
+
_this.state = 'LOADED';
|
|
26
|
+
script.removeEventListener('load', _load);
|
|
27
|
+
_this.emitState();
|
|
28
|
+
};
|
|
29
|
+
var _error = function error() {
|
|
30
|
+
_this.state = 'ERROR';
|
|
31
|
+
script.removeEventListener('error', _error);
|
|
32
|
+
_this.emitState();
|
|
33
|
+
};
|
|
34
|
+
script.addEventListener('load', _load);
|
|
35
|
+
script.addEventListener('error', _error);
|
|
36
|
+
document.body.appendChild(script);
|
|
37
|
+
}
|
|
38
|
+
return _createClass(Script, [{
|
|
39
|
+
key: "onStateChange",
|
|
40
|
+
value: function onStateChange(cb) {
|
|
41
|
+
var _this2 = this;
|
|
42
|
+
this.listeners.push(cb);
|
|
43
|
+
return function () {
|
|
44
|
+
_this2.listeners = _this2.listeners.filter(function (fn) {
|
|
45
|
+
return fn !== cb;
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
}, {
|
|
50
|
+
key: "emitState",
|
|
51
|
+
value: function emitState() {
|
|
52
|
+
var _iterator = _createForOfIteratorHelper(this.listeners),
|
|
53
|
+
_step;
|
|
54
|
+
try {
|
|
55
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
56
|
+
var cb = _step.value;
|
|
57
|
+
cb(this.state);
|
|
58
|
+
}
|
|
59
|
+
} catch (err) {
|
|
60
|
+
_iterator.e(err);
|
|
61
|
+
} finally {
|
|
62
|
+
_iterator.f();
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}]);
|
|
66
|
+
}();
|
|
67
|
+
var scripts = new Map();
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Hook for loading external script
|
|
71
|
+
* @param {string} src - The URL of the script
|
|
72
|
+
* @param {boolean} [doNotLoad=false] - If set to true the script will not be loaded
|
|
73
|
+
* This can be handy because hooks can not be called conditionally by the consumer
|
|
74
|
+
*/
|
|
75
|
+
function useScript(src) {
|
|
76
|
+
var doNotLoad = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
77
|
+
// Keeping track of script loaded and error state
|
|
78
|
+
var _useState = useState({
|
|
79
|
+
loaded: false,
|
|
80
|
+
error: false
|
|
81
|
+
}),
|
|
82
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
83
|
+
state = _useState2[0],
|
|
84
|
+
setState = _useState2[1];
|
|
85
|
+
useEffect(function () {
|
|
86
|
+
// If doNotLoad we return early so the script will not be loaded
|
|
87
|
+
if (doNotLoad) {
|
|
88
|
+
setState({
|
|
89
|
+
loaded: true,
|
|
90
|
+
error: false
|
|
91
|
+
});
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// If scripts already includes src it means that the script was already
|
|
96
|
+
// loaded by another instance of the hook, so no need to load again
|
|
97
|
+
var script = scripts.get(src) || scripts.set(src, new Script(src)).get(src);
|
|
98
|
+
if (script.state === 'LOADED') {
|
|
99
|
+
setState({
|
|
100
|
+
loaded: true,
|
|
101
|
+
error: false
|
|
102
|
+
});
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
return script.onStateChange(function (state) {
|
|
106
|
+
if (state === 'ERROR') {
|
|
107
|
+
scripts["delete"](src);
|
|
108
|
+
setState({
|
|
109
|
+
loaded: true,
|
|
110
|
+
error: true
|
|
111
|
+
});
|
|
112
|
+
} else {
|
|
113
|
+
setState({
|
|
114
|
+
loaded: true,
|
|
115
|
+
error: false
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
}, [src, doNotLoad]);
|
|
120
|
+
return [state.loaded, state.error];
|
|
121
|
+
}
|
|
122
|
+
export default useScript;
|