@grafana/scenes 6.28.3 → 6.29.0--canary.1197.16594646941.0
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/dist/esm/components/layout/LazyLoader.js +2 -1
- package/dist/esm/components/layout/LazyLoader.js.map +1 -1
- package/dist/esm/locales/en-US/grafana-scenes.json.js +3 -0
- package/dist/esm/locales/en-US/grafana-scenes.json.js.map +1 -1
- package/dist/{grafana-scenes-uBsCv-Bu.js → grafana-scenes-C_CT7peT.js} +4 -1
- package/dist/{grafana-scenes-uBsCv-Bu.js.map → grafana-scenes-C_CT7peT.js.map} +1 -1
- package/dist/index.d.ts +1 -3
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,6 +3,7 @@ import { useEffectOnce } from 'react-use';
|
|
|
3
3
|
import { uniqueId } from 'lodash';
|
|
4
4
|
import { css } from '@emotion/css';
|
|
5
5
|
import { useStyles2 } from '@grafana/ui';
|
|
6
|
+
import { t } from '@grafana/i18n';
|
|
6
7
|
|
|
7
8
|
function useUniqueId() {
|
|
8
9
|
var _a;
|
|
@@ -39,7 +40,7 @@ const LazyLoader = React.forwardRef(
|
|
|
39
40
|
}
|
|
40
41
|
};
|
|
41
42
|
});
|
|
42
|
-
return /* @__PURE__ */ React.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded
|
|
43
|
+
return /* @__PURE__ */ React.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded || !isInView ? t("grafana-scenes.components.lazy-loader.placeholder", "\xA0") : children);
|
|
43
44
|
}
|
|
44
45
|
);
|
|
45
46
|
function getStyles() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LazyLoader.js","sources":["../../../../src/components/layout/LazyLoader.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, useImperativeHandle, useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\nimport { css } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\n\nexport function useUniqueId(): string {\n const idRefLazy = useRef<string | undefined>(undefined);\n idRefLazy.current ??= uniqueId();\n return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'> {\n children: React.ReactNode
|
|
1
|
+
{"version":3,"file":"LazyLoader.js","sources":["../../../../src/components/layout/LazyLoader.tsx"],"sourcesContent":["import React, { ForwardRefExoticComponent, useImperativeHandle, useRef, useState } from 'react';\nimport { useEffectOnce } from 'react-use';\n\nimport { uniqueId } from 'lodash';\nimport { css } from '@emotion/css';\nimport { useStyles2 } from '@grafana/ui';\nimport { t } from '@grafana/i18n';\n\nexport function useUniqueId(): string {\n const idRefLazy = useRef<string | undefined>(undefined);\n idRefLazy.current ??= uniqueId();\n return idRefLazy.current;\n}\n\nexport interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'children'> {\n children: React.ReactNode;\n key: string;\n onLoad?: () => void;\n onChange?: (isInView: boolean) => void;\n}\n\nexport interface LazyLoaderType extends ForwardRefExoticComponent<Props> {\n addCallback: (id: string, c: (e: IntersectionObserverEntry) => void) => void;\n callbacks: Record<string, (e: IntersectionObserverEntry) => void>;\n observer: IntersectionObserver;\n}\n\nexport const LazyLoader: LazyLoaderType = React.forwardRef<HTMLDivElement, Props>(\n ({ children, onLoad, onChange, className, ...rest }, ref) => {\n const id = useUniqueId();\n const { hideEmpty } = useStyles2(getStyles);\n const [loaded, setLoaded] = useState(false);\n const [isInView, setIsInView] = useState(false);\n const innerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => innerRef.current!);\n\n useEffectOnce(() => {\n LazyLoader.addCallback(id, (entry) => {\n if (!loaded && entry.isIntersecting) {\n setLoaded(true);\n onLoad?.();\n }\n\n setIsInView(entry.isIntersecting);\n onChange?.(entry.isIntersecting);\n });\n\n const wrapperEl = innerRef.current;\n\n if (wrapperEl) {\n LazyLoader.observer.observe(wrapperEl);\n }\n\n return () => {\n wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n delete LazyLoader.callbacks[id];\n if (Object.keys(LazyLoader.callbacks).length === 0) {\n LazyLoader.observer.disconnect();\n }\n };\n });\n\n // since we will hide empty lazyloaded divs, we need to include a\n // non-breaking space while the loader has not been loaded. after it has\n // been loaded, we can remove the non-breaking space and show the children.\n // If the children render empty, the whole loader will be hidden by css.\n return (\n <div id={id} ref={innerRef} className={`${hideEmpty} ${className}`} {...rest}>\n {!loaded || !isInView ? t('grafana-scenes.components.lazy-loader.placeholder', '\\u00A0') : children}\n </div>\n );\n }\n) as LazyLoaderType;\n\nfunction getStyles() {\n return {\n hideEmpty: css({\n '&:empty': {\n display: 'none',\n },\n }),\n };\n}\n\nLazyLoader.displayName = 'LazyLoader';\nLazyLoader.callbacks = {} as Record<string, (e: IntersectionObserverEntry) => void>;\nLazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);\nLazyLoader.observer = new IntersectionObserver(\n (entries) => {\n for (const entry of entries) {\n if (typeof LazyLoader.callbacks[entry.target.id] === 'function') {\n LazyLoader.callbacks[entry.target.id](entry);\n }\n }\n },\n { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -16,6 +16,9 @@ var grafanaScenes = {
|
|
|
16
16
|
subTitle: "The url did not match any page",
|
|
17
17
|
title: "Not found"
|
|
18
18
|
},
|
|
19
|
+
"lazy-loader": {
|
|
20
|
+
placeholder: " "
|
|
21
|
+
},
|
|
19
22
|
"nested-scene-renderer": {
|
|
20
23
|
"collapse-button-label": "Collapse scene",
|
|
21
24
|
"expand-button-label": "Expand scene",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grafana-scenes.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"grafana-scenes.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -18,6 +18,9 @@ var grafanaScenes = {
|
|
|
18
18
|
subTitle: "The url did not match any page",
|
|
19
19
|
title: "Not found"
|
|
20
20
|
},
|
|
21
|
+
"lazy-loader": {
|
|
22
|
+
placeholder: " "
|
|
23
|
+
},
|
|
21
24
|
"nested-scene-renderer": {
|
|
22
25
|
"collapse-button-label": "Collapse scene",
|
|
23
26
|
"expand-button-label": "Expand scene",
|
|
@@ -151,4 +154,4 @@ var grafanaScenes = {
|
|
|
151
154
|
};
|
|
152
155
|
|
|
153
156
|
exports.default = grafanaScenes;
|
|
154
|
-
//# sourceMappingURL=grafana-scenes-
|
|
157
|
+
//# sourceMappingURL=grafana-scenes-C_CT7peT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grafana-scenes-
|
|
1
|
+
{"version":3,"file":"grafana-scenes-C_CT7peT.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2500,9 +2500,7 @@ declare class SplitLayout extends SceneObjectBase<SplitLayoutState> {
|
|
|
2500
2500
|
}
|
|
2501
2501
|
|
|
2502
2502
|
interface Props$1 extends Omit<React__default.HTMLProps<HTMLDivElement>, 'onChange' | 'children'> {
|
|
2503
|
-
children: React__default.ReactNode
|
|
2504
|
-
isInView: boolean;
|
|
2505
|
-
}) => React__default.ReactNode);
|
|
2503
|
+
children: React__default.ReactNode;
|
|
2506
2504
|
key: string;
|
|
2507
2505
|
onLoad?: () => void;
|
|
2508
2506
|
onChange?: (isInView: boolean) => void;
|
package/dist/index.js
CHANGED
|
@@ -11158,7 +11158,7 @@ const LazyLoader = React__default.default.forwardRef(
|
|
|
11158
11158
|
}
|
|
11159
11159
|
};
|
|
11160
11160
|
});
|
|
11161
|
-
return /* @__PURE__ */ React__default.default.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded
|
|
11161
|
+
return /* @__PURE__ */ React__default.default.createElement("div", { id, ref: innerRef, className: `${hideEmpty} ${className}`, ...rest }, !loaded || !isInView ? i18n.t("grafana-scenes.components.lazy-loader.placeholder", "\xA0") : children);
|
|
11162
11162
|
}
|
|
11163
11163
|
);
|
|
11164
11164
|
function getStyles$6() {
|
|
@@ -14489,7 +14489,7 @@ function __variableDynamicImportRuntime0__(path) {
|
|
|
14489
14489
|
switch (path) {
|
|
14490
14490
|
case '../locales/cs-CZ/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-CY85TD5F.js'); });
|
|
14491
14491
|
case '../locales/de-DE/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-n10eQkNF.js'); });
|
|
14492
|
-
case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-
|
|
14492
|
+
case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-C_CT7peT.js'); });
|
|
14493
14493
|
case '../locales/es-ES/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-YMli37Xh.js'); });
|
|
14494
14494
|
case '../locales/fr-FR/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DXM1LI4B.js'); });
|
|
14495
14495
|
case '../locales/hu-HU/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DlUSL8jI.js'); });
|