@grafana/scenes 5.3.7 → 5.3.8--canary.823.9872224365.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneCSSGridLayout.js","sources":["../../../../../src/components/layout/CSSGrid/SceneCSSGridLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../../core/types';\nimport { config } from '@grafana/runtime';\nimport { LazyLoader } from '../LazyLoader';\n\nexport interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {\n children: Array<SceneCSSGridItem | SceneObject>;\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * For media query for sceens smaller than md breakpoint\n */\n md?: SceneCSSGridLayoutOptions;\n /** True when the items should be lazy loaded */\n isLazy?: boolean;\n}\n\nexport interface SceneCSSGridLayoutOptions {\n /**\n * Useful for setting a height on items without specifying how many rows there will be.\n * Defaults to 320px\n */\n autoRows?: CSSProperties['gridAutoRows'];\n /**\n * This overrides the autoRows with a specific row template.\n */\n templateRows?: CSSProperties['gridTemplateRows'];\n /**\n * Defaults to repeat(auto-fit, minmax(400px, 1fr)). This pattern us useful for equally sized items with a min width of 400px\n * and dynamic max width split equally among columns.\n */\n templateColumns: CSSProperties['gridTemplateColumns'];\n /** In Grafana design system grid units (8px) */\n rowGap: number;\n /** In Grafana design system grid units (8px) */\n columnGap: number;\n justifyItems?: CSSProperties['justifyItems'];\n alignItems?: CSSProperties['alignItems'];\n justifyContent?: CSSProperties['justifyContent'];\n}\n\nexport class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState> implements SceneLayout {\n public static Component = SceneCSSGridLayoutRenderer;\n\n public constructor(state: Partial<SceneCSSGridLayoutState>) {\n super({\n rowGap: 1,\n columnGap: 1,\n templateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',\n autoRows: state.autoRows ?? `320px`,\n children: state.children ?? [],\n ...state,\n });\n }\n\n public isDraggable(): boolean {\n return false;\n }\n}\n\nfunction SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>) {\n const { children, isHidden, isLazy } = model.useState();\n const style = useLayoutStyle(model.state);\n\n if (isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n {children.map((item) => {\n const Component = item.Component as ComponentType<SceneCSSGridItemRenderProps<SceneObject>>;\n if (isLazy) {\n return (\n <LazyLoader key={item.state.key!} className={style}>\n <Component key={item.state.key} model={item} parentState={model.state} />\n </LazyLoader>\n );\n }\n return <Component key={item.state.key} model={item} parentState={model.state} />;\n })}\n </div>\n );\n}\n\nexport interface SceneCSSGridItemPlacement {\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * Useful for making content span across multiple rows or columns\n */\n gridColumn?: CSSProperties['gridColumn'];\n gridRow?: CSSProperties['gridRow'];\n}\n\nexport interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {\n body: SceneObject | undefined;\n}\n\ninterface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {\n parentState?: SceneCSSGridItemPlacement;\n}\n\nexport class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {\n public static Component = SceneCSSGridItemRenderer;\n}\n\nfunction SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {\n if (!parentState) {\n throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');\n }\n\n const { body, isHidden } = model.useState();\n const style = useItemStyle(model.state);\n\n if (!body || isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n <body.Component model={body} />\n </div>\n );\n}\n\nfunction useLayoutStyle(state: SceneCSSGridLayoutState) {\n return useMemo(() => {\n const {} = state;\n // only need breakpoints so accessing theme from config instead of context is ok\n const style: CSSObject = {};\n const theme = config.theme2;\n\n style.display = 'grid';\n style.gridTemplateColumns = state.templateColumns;\n style.gridTemplateRows = state.templateRows || 'unset';\n style.gridAutoRows = state.autoRows || 'unset';\n style.rowGap = theme.spacing(state.rowGap ?? 1);\n style.columnGap = theme.spacing(state.columnGap ?? 1);\n style.justifyItems = state.justifyItems || 'unset';\n style.alignItems = state.alignItems || 'unset';\n style.justifyContent = state.justifyContent || 'unset';\n style.flexGrow = 1;\n\n if (state.md) {\n style[theme.breakpoints.down('md')] = {\n gridTemplateRows: state.md?.templateRows,\n gridTemplateColumns: state.md?.templateColumns,\n rowGap: state.md.rowGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n columnGap: state.md.columnGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n justifyItems: state.md?.justifyItems,\n alignItems: state.md?.alignItems,\n justifyContent: state.md?.justifyContent,\n };\n }\n\n return css(style);\n }, [state]);\n}\n\nfunction useItemStyle(state: SceneCSSGridItemState) {\n return useMemo(() => {\n const style: CSSObject = {};\n\n style.gridColumn = state.gridColumn || 'unset';\n style.gridRow = state.gridRow || 'unset';\n // Needed for VizPanel\n style.position = 'relative';\n\n return css(style);\n }, [state]);\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SceneCSSGridLayout.js","sources":["../../../../../src/components/layout/CSSGrid/SceneCSSGridLayout.tsx"],"sourcesContent":["import { css, CSSObject } from '@emotion/css';\nimport React, { ComponentType, CSSProperties, useMemo } from 'react';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayout, SceneObjectState, SceneObject } from '../../../core/types';\nimport { config } from '@grafana/runtime';\nimport { LazyLoader } from '../LazyLoader';\n\nexport interface SceneCSSGridLayoutState extends SceneObjectState, SceneCSSGridLayoutOptions {\n children: Array<SceneCSSGridItem | SceneObject>;\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * For media query for sceens smaller than md breakpoint\n */\n md?: SceneCSSGridLayoutOptions;\n /** True when the items should be lazy loaded */\n isLazy?: boolean;\n}\n\nexport interface SceneCSSGridLayoutOptions {\n /**\n * Useful for setting a height on items without specifying how many rows there will be.\n * Defaults to 320px\n */\n autoRows?: CSSProperties['gridAutoRows'];\n /**\n * This overrides the autoRows with a specific row template.\n */\n templateRows?: CSSProperties['gridTemplateRows'];\n /**\n * Defaults to repeat(auto-fit, minmax(400px, 1fr)). This pattern us useful for equally sized items with a min width of 400px\n * and dynamic max width split equally among columns.\n */\n templateColumns: CSSProperties['gridTemplateColumns'];\n /** In Grafana design system grid units (8px) */\n rowGap: number;\n /** In Grafana design system grid units (8px) */\n columnGap: number;\n justifyItems?: CSSProperties['justifyItems'];\n alignItems?: CSSProperties['alignItems'];\n justifyContent?: CSSProperties['justifyContent'];\n}\n\nexport class SceneCSSGridLayout extends SceneObjectBase<SceneCSSGridLayoutState> implements SceneLayout {\n public static Component = SceneCSSGridLayoutRenderer;\n\n public constructor(state: Partial<SceneCSSGridLayoutState>) {\n super({\n rowGap: 1,\n columnGap: 1,\n templateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',\n autoRows: state.autoRows ?? `320px`,\n children: state.children ?? [],\n ...state,\n });\n }\n\n public isDraggable(): boolean {\n return false;\n }\n}\n\nfunction SceneCSSGridLayoutRenderer({ model }: SceneCSSGridItemRenderProps<SceneCSSGridLayout>) {\n const { children, isHidden, isLazy } = model.useState();\n const style = useLayoutStyle(model.state);\n\n if (isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n {children.map((item) => {\n const Component = item.Component as ComponentType<SceneCSSGridItemRenderProps<SceneObject>>;\n \n if (isLazy) {\n return (\n <LazyLoader key={item.state.key!} className={style}>\n <Component key={item.state.key} model={item} parentState={model.state} />\n </LazyLoader>\n );\n }\n return <Component key={item.state.key} model={item} parentState={model.state} />;\n })}\n </div>\n );\n}\n\nexport interface SceneCSSGridItemPlacement {\n /**\n * True when the item should rendered but not visible.\n * Useful for conditional display of layout items\n */\n isHidden?: boolean;\n /**\n * Useful for making content span across multiple rows or columns\n */\n gridColumn?: CSSProperties['gridColumn'];\n gridRow?: CSSProperties['gridRow'];\n}\n\nexport interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {\n body: SceneObject | undefined;\n}\n\ninterface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {\n parentState?: SceneCSSGridItemPlacement;\n}\n\nexport class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {\n public static Component = SceneCSSGridItemRenderer;\n}\n\nfunction SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {\n if (!parentState) {\n throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');\n }\n\n const { body, isHidden } = model.useState();\n const style = useItemStyle(model.state);\n\n if (!body || isHidden) {\n return null;\n }\n\n return (\n <div className={style}>\n <body.Component model={body} />\n </div>\n );\n}\n\nfunction useLayoutStyle(state: SceneCSSGridLayoutState) {\n return useMemo(() => {\n const {} = state;\n // only need breakpoints so accessing theme from config instead of context is ok\n const style: CSSObject = {};\n const theme = config.theme2;\n\n style.display = 'grid';\n style.gridTemplateColumns = state.templateColumns;\n style.gridTemplateRows = state.templateRows || 'unset';\n style.gridAutoRows = state.autoRows || 'unset';\n style.rowGap = theme.spacing(state.rowGap ?? 1);\n style.columnGap = theme.spacing(state.columnGap ?? 1);\n style.justifyItems = state.justifyItems || 'unset';\n style.alignItems = state.alignItems || 'unset';\n style.justifyContent = state.justifyContent || 'unset';\n style.flexGrow = 1;\n\n if (state.md) {\n style[theme.breakpoints.down('md')] = {\n gridTemplateRows: state.md?.templateRows,\n gridTemplateColumns: state.md?.templateColumns,\n rowGap: state.md.rowGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n columnGap: state.md.columnGap ? theme.spacing(state.md?.rowGap ?? 1) : undefined,\n justifyItems: state.md?.justifyItems,\n alignItems: state.md?.alignItems,\n justifyContent: state.md?.justifyContent,\n };\n }\n\n return css(style);\n }, [state]);\n}\n\nfunction useItemStyle(state: SceneCSSGridItemState) {\n return useMemo(() => {\n const style: CSSObject = {};\n\n style.gridColumn = state.gridColumn || 'unset';\n style.gridRow = state.gridRow || 'unset';\n // Needed for VizPanel\n style.position = 'relative';\n\n return css(style);\n }, [state]);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useState, useRef, useImperativeHandle } from 'react';
|
|
2
2
|
import { useEffectOnce } from 'react-use';
|
|
3
3
|
import { uniqueId } from 'lodash';
|
|
4
|
+
import { css } from '@emotion/css';
|
|
4
5
|
|
|
5
6
|
var __defProp = Object.defineProperty;
|
|
6
7
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
@@ -38,8 +39,9 @@ function useUniqueId() {
|
|
|
38
39
|
}
|
|
39
40
|
const LazyLoader = React.forwardRef(
|
|
40
41
|
(_a, ref) => {
|
|
41
|
-
var _b = _a, { children, onLoad, onChange } = _b, rest = __objRest(_b, ["children", "onLoad", "onChange"]);
|
|
42
|
+
var _b = _a, { children, onLoad, onChange, className } = _b, rest = __objRest(_b, ["children", "onLoad", "onChange", "className"]);
|
|
42
43
|
const id = useUniqueId();
|
|
44
|
+
const style = useStyle();
|
|
43
45
|
const [loaded, setLoaded] = useState(false);
|
|
44
46
|
const [isInView, setIsInView] = useState(false);
|
|
45
47
|
const innerRef = useRef(null);
|
|
@@ -67,10 +69,18 @@ const LazyLoader = React.forwardRef(
|
|
|
67
69
|
});
|
|
68
70
|
return /* @__PURE__ */ React.createElement("div", __spreadValues({
|
|
69
71
|
id,
|
|
70
|
-
ref: innerRef
|
|
72
|
+
ref: innerRef,
|
|
73
|
+
className: `${loaded ? style : ""} ${className}`
|
|
71
74
|
}, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
72
75
|
}
|
|
73
76
|
);
|
|
77
|
+
function useStyle() {
|
|
78
|
+
return css({
|
|
79
|
+
"&:empty": {
|
|
80
|
+
display: "none"
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}
|
|
74
84
|
LazyLoader.displayName = "LazyLoader";
|
|
75
85
|
LazyLoader.callbacks = {};
|
|
76
86
|
LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;
|
|
@@ -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';\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, ...rest }, ref) => {\n const id = useUniqueId();\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 delete LazyLoader.callbacks[id];\n wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n if (Object.keys(LazyLoader.callbacks).length === 0) {\n LazyLoader.observer.disconnect();\n }\n };\n });\n\n return (\n <div id={id} ref={innerRef} {...rest}>\n {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n </div>\n );\n }\n) as LazyLoaderType;\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 LazyLoader.callbacks[entry.target.id](entry);\n }\n },\n { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"
|
|
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';\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 style = useStyle();\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 delete LazyLoader.callbacks[id];\n wrapperEl && LazyLoader.observer.unobserve(wrapperEl);\n if (Object.keys(LazyLoader.callbacks).length === 0) {\n LazyLoader.observer.disconnect();\n }\n };\n });\n\n return (\n <div id={id} ref={innerRef} className={`${loaded ? style : ''} ${className}`} {...rest}>\n {loaded && (typeof children === 'function' ? children({ isInView }) : children)}\n </div>\n );\n }\n) as LazyLoaderType;\n\nfunction useStyle() {\n return css({\n '&:empty': {\n display: 'none',\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 LazyLoader.callbacks[entry.target.id](entry);\n }\n },\n { rootMargin: '100px' }\n);\n"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -8185,8 +8185,9 @@ function useUniqueId() {
|
|
|
8185
8185
|
}
|
|
8186
8186
|
const LazyLoader = React__default["default"].forwardRef(
|
|
8187
8187
|
(_a, ref) => {
|
|
8188
|
-
var _b = _a, { children, onLoad, onChange } = _b, rest = __objRest$1(_b, ["children", "onLoad", "onChange"]);
|
|
8188
|
+
var _b = _a, { children, onLoad, onChange, className } = _b, rest = __objRest$1(_b, ["children", "onLoad", "onChange", "className"]);
|
|
8189
8189
|
const id = useUniqueId();
|
|
8190
|
+
const style = useStyle();
|
|
8190
8191
|
const [loaded, setLoaded] = React.useState(false);
|
|
8191
8192
|
const [isInView, setIsInView] = React.useState(false);
|
|
8192
8193
|
const innerRef = React.useRef(null);
|
|
@@ -8214,10 +8215,18 @@ const LazyLoader = React__default["default"].forwardRef(
|
|
|
8214
8215
|
});
|
|
8215
8216
|
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues$b({
|
|
8216
8217
|
id,
|
|
8217
|
-
ref: innerRef
|
|
8218
|
+
ref: innerRef,
|
|
8219
|
+
className: `${loaded ? style : ""} ${className}`
|
|
8218
8220
|
}, rest), loaded && (typeof children === "function" ? children({ isInView }) : children));
|
|
8219
8221
|
}
|
|
8220
8222
|
);
|
|
8223
|
+
function useStyle() {
|
|
8224
|
+
return css.css({
|
|
8225
|
+
"&:empty": {
|
|
8226
|
+
display: "none"
|
|
8227
|
+
}
|
|
8228
|
+
});
|
|
8229
|
+
}
|
|
8221
8230
|
LazyLoader.displayName = "LazyLoader";
|
|
8222
8231
|
LazyLoader.callbacks = {};
|
|
8223
8232
|
LazyLoader.addCallback = (id, c) => LazyLoader.callbacks[id] = c;
|