@grafana/scenes 5.41.0 → 5.41.1
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v5.41.1 (Thu Jan 30 2025)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- LazyLoader: Prevent empty panels from not being hidden [#1039](https://github.com/grafana/scenes/pull/1039) ([@svennergr](https://github.com/svennergr))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Sven Grossmann ([@svennergr](https://github.com/svennergr))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v5.41.0 (Tue Jan 28 2025)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
@@ -68,12 +68,11 @@ const LazyLoader = React.forwardRef(
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
});
|
|
71
|
-
const classes = `${loaded ? hideEmpty : ""} ${className}`;
|
|
72
71
|
return /* @__PURE__ */ React.createElement("div", __spreadValues({
|
|
73
72
|
id,
|
|
74
73
|
ref: innerRef,
|
|
75
|
-
className:
|
|
76
|
-
}, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
74
|
+
className: `${hideEmpty} ${className}`
|
|
75
|
+
}, rest), !loaded && "\xA0", loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
77
76
|
}
|
|
78
77
|
);
|
|
79
78
|
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 | (({ isInView }: { isInView: boolean }) => 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 //
|
|
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 | (({ isInView }: { isInView: boolean }) => 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 && '\\u00A0'}\n {loaded && (typeof children === 'function' ? children({ isInView }) : 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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"}
|
package/dist/index.js
CHANGED
|
@@ -10653,12 +10653,11 @@ const LazyLoader = React__default["default"].forwardRef(
|
|
|
10653
10653
|
}
|
|
10654
10654
|
};
|
|
10655
10655
|
});
|
|
10656
|
-
const classes = `${loaded ? hideEmpty : ""} ${className}`;
|
|
10657
10656
|
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$b({
|
|
10658
10657
|
id,
|
|
10659
10658
|
ref: innerRef,
|
|
10660
|
-
className:
|
|
10661
|
-
}, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
10659
|
+
className: `${hideEmpty} ${className}`
|
|
10660
|
+
}, rest), !loaded && "\xA0", loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
10662
10661
|
}
|
|
10663
10662
|
);
|
|
10664
10663
|
function getStyles$6() {
|