Files
Ashley Harrison 47f8717149 React: Use new JSX transform (#88802)
* update eslint, tsconfig + esbuild to handle new jsx transform

* remove thing that breaks the new jsx transform

* remove react imports

* adjust grafana-icons build

* is this the correct syntax?

* try this

* well this was much easier than expected...

* change grafana-plugin-configs webpack config

* fixes

* fix lockfile

* fix 2 more violations

* use path.resolve instead of require.resolve

* remove react import

* fix react imports

* more fixes

* remove React import

* remove import React from docs

* remove another react import
2024-06-25 12:43:47 +01:00

65 lines
1.8 KiB
TypeScript

import { useId, useRef, useState } from 'react';
import * as React from 'react';
import { useEffectOnce } from 'react-use';
export interface Props {
children: React.ReactNode | (({ isInView }: { isInView: boolean }) => React.ReactNode);
width?: number;
height?: number;
onLoad?: () => void;
onChange?: (isInView: boolean) => void;
}
export function LazyLoader({ children, width, height, onLoad, onChange }: Props) {
const id = useId();
const [loaded, setLoaded] = useState(false);
const [isInView, setIsInView] = useState(false);
const wrapperRef = useRef<HTMLDivElement>(null);
useEffectOnce(() => {
LazyLoader.addCallback(id, (entry) => {
if (!loaded && entry.isIntersecting) {
setLoaded(true);
onLoad?.();
}
setIsInView(entry.isIntersecting);
onChange?.(entry.isIntersecting);
});
const wrapperEl = wrapperRef.current;
if (wrapperEl) {
LazyLoader.observer.observe(wrapperEl);
}
return () => {
delete LazyLoader.callbacks[id];
wrapperEl && LazyLoader.observer.unobserve(wrapperEl);
if (Object.keys(LazyLoader.callbacks).length === 0) {
LazyLoader.observer.disconnect();
}
};
});
return (
<div id={id} ref={wrapperRef} style={{ width, height }}>
{loaded && (typeof children === 'function' ? children({ isInView }) : children)}
</div>
);
}
const callbacks: Record<string, (e: IntersectionObserverEntry) => void> = {};
LazyLoader.callbacks = callbacks;
LazyLoader.addCallback = (id: string, c: (e: IntersectionObserverEntry) => void) => (LazyLoader.callbacks[id] = c);
LazyLoader.observer = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (LazyLoader.callbacks[entry.target.id]) {
LazyLoader.callbacks[entry.target.id](entry);
}
}
},
{ rootMargin: '100px' }
);