@grafana/scenes 2.5.0 → 2.5.1
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.5.1 (Mon Feb 05 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- SceneGridLayout: Fixes missing resize handles [#566](https://github.com/grafana/scenes/pull/566) ([@torkelo](https://github.com/torkelo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.5.0 (Mon Feb 05 2024)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
@@ -48,7 +48,8 @@ function SceneGridLayoutRenderer({ model }) {
|
|
|
48
48
|
}
|
|
49
49
|
const layout = model.buildGridLayout(width);
|
|
50
50
|
return /* @__PURE__ */ React.createElement("div", {
|
|
51
|
-
style: { width: `${width}px`, height: "100%", position: "relative", zIndex: 1 }
|
|
51
|
+
style: { width: `${width}px`, height: "100%", position: "relative", zIndex: 1 },
|
|
52
|
+
className: "scene-grid-layout"
|
|
52
53
|
}, /* @__PURE__ */ React.createElement(ReactGridLayout, {
|
|
53
54
|
width,
|
|
54
55
|
isDraggable: isDraggable && width > 768,
|
|
@@ -77,7 +78,7 @@ function SceneGridLayoutRenderer({ model }) {
|
|
|
77
78
|
}
|
|
78
79
|
const GridItemWrapper = React.forwardRef((props, ref) => {
|
|
79
80
|
var _b;
|
|
80
|
-
const _a = props, { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange } = _a, divProps = __objRest(_a, ["grid", "layoutItem", "index", "totalCount", "isLazy", "style", "onLoad", "onChange"]);
|
|
81
|
+
const _a = props, { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children } = _a, divProps = __objRest(_a, ["grid", "layoutItem", "index", "totalCount", "isLazy", "style", "onLoad", "onChange", "children"]);
|
|
81
82
|
const sceneChild = grid.getSceneLayoutChild(layoutItem.i);
|
|
82
83
|
const className = (_b = sceneChild.getClassName) == null ? void 0 : _b.call(sceneChild);
|
|
83
84
|
const theme = useTheme2();
|
|
@@ -110,7 +111,7 @@ const GridItemWrapper = React.forwardRef((props, ref) => {
|
|
|
110
111
|
className: cx(className, props.className),
|
|
111
112
|
style: newStyle,
|
|
112
113
|
ref
|
|
113
|
-
}), innerContentWithContext);
|
|
114
|
+
}), innerContentWithContext, children);
|
|
114
115
|
}
|
|
115
116
|
return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, divProps), {
|
|
116
117
|
ref,
|
|
@@ -118,7 +119,7 @@ const GridItemWrapper = React.forwardRef((props, ref) => {
|
|
|
118
119
|
"data-griditem-key": sceneChild.state.key,
|
|
119
120
|
className: cx(className, props.className),
|
|
120
121
|
style: newStyle
|
|
121
|
-
}), innerContentWithContext);
|
|
122
|
+
}), children, innerContentWithContext);
|
|
122
123
|
});
|
|
123
124
|
GridItemWrapper.displayName = "GridItemWrapper";
|
|
124
125
|
function validateChildrenSize(children) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useReducer, useRef } from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants';\nimport { LazyLoader } from '../LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\n// @ts-expect-error TODO remove when @grafana/ui is upgraded to 10.4\nimport { LayoutItemContext, useTheme2 } from '@grafana/ui';\nimport { cx } from '@emotion/css';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n const { children, isLazy, isDraggable, isResizable } = model.useState();\n validateChildrenSize(children);\n\n return (\n <AutoSizer disableHeight>\n {({ width }) => {\n if (width === 0) {\n return null;\n }\n\n const layout = model.buildGridLayout(width);\n\n return (\n /**\n * The children is using a width of 100% so we need to guarantee that it is wrapped\n * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n * has a width of 0 and will let its content overflow its div.\n */\n <div
|
|
1
|
+
{"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useReducer, useRef } from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants';\nimport { LazyLoader } from '../LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\n// @ts-expect-error TODO remove when @grafana/ui is upgraded to 10.4\nimport { LayoutItemContext, useTheme2 } from '@grafana/ui';\nimport { cx } from '@emotion/css';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n const { children, isLazy, isDraggable, isResizable } = model.useState();\n validateChildrenSize(children);\n\n return (\n <AutoSizer disableHeight>\n {({ width }) => {\n if (width === 0) {\n return null;\n }\n\n const layout = model.buildGridLayout(width);\n\n return (\n /**\n * The children is using a width of 100% so we need to guarantee that it is wrapped\n * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n * has a width of 0 and will let its content overflow its div.\n */\n <div\n style={{ width: `${width}px`, height: '100%', position: 'relative', zIndex: 1 }}\n className=\"scene-grid-layout\"\n >\n <ReactGridLayout\n width={width}\n /**\n Disable draggable if mobile device, solving an issue with unintentionally\n moving panels. https://github.com/grafana/grafana/issues/18497\n theme.breakpoints.md = 769\n */\n isDraggable={isDraggable && width > 768}\n isResizable={isResizable ?? false}\n containerPadding={[0, 0]}\n useCSSTransforms={false}\n margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n cols={GRID_COLUMN_COUNT}\n rowHeight={GRID_CELL_HEIGHT}\n draggableHandle={`.grid-drag-handle-${model.state.key}`}\n draggableCancel=\".grid-drag-cancel\"\n // @ts-ignore: ignoring for now until we make the size type numbers-only\n layout={layout}\n onDragStop={model.onDragStop}\n onResizeStop={model.onResizeStop}\n onLayoutChange={model.onLayoutChange}\n isBounded={false}\n >\n {layout.map((gridItem, index) => (\n <GridItemWrapper\n key={gridItem.i}\n grid={model}\n layoutItem={gridItem}\n index={index}\n isLazy={isLazy}\n totalCount={layout.length}\n />\n ))}\n </ReactGridLayout>\n </div>\n );\n }}\n </AutoSizer>\n );\n}\n\ninterface GridItemWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n grid: SceneGridLayout;\n layoutItem: ReactGridLayout.Layout;\n index: number;\n totalCount: number;\n isLazy?: boolean;\n}\n\nconst GridItemWrapper = React.forwardRef<HTMLDivElement, GridItemWrapperProps>((props, ref) => {\n const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;\n const sceneChild = grid.getSceneLayoutChild(layoutItem.i)!;\n const className = sceneChild.getClassName?.();\n const theme = useTheme2();\n\n const boostedCount = useRef(0);\n const [_, forceUpdate] = useReducer((x) => x + 1, 0);\n\n const boostZIndex = useCallback(() => {\n boostedCount.current += 1;\n forceUpdate();\n\n return () => {\n boostedCount.current -= 1;\n forceUpdate();\n };\n }, [forceUpdate]);\n\n const ctxValue = useMemo(() => ({ boostZIndex }), [boostZIndex]);\n const descIndex = totalCount - index;\n const innerContent = <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />;\n const innerContentWithContext = LayoutItemContext ? (\n <LayoutItemContext.Provider value={ctxValue}>{innerContent}</LayoutItemContext.Provider>\n ) : (\n innerContent\n );\n\n const newStyle = {\n ...style,\n zIndex: boostedCount.current === 0 ? descIndex : theme.zIndex.dropdown,\n };\n\n if (isLazy) {\n return (\n <LazyLoader\n {...divProps}\n key={sceneChild.state.key!}\n data-griditem-key={sceneChild.state.key}\n className={cx(className, props.className)}\n style={newStyle}\n ref={ref}\n >\n {innerContentWithContext}\n {children}\n </LazyLoader>\n );\n }\n\n return (\n <div\n {...divProps}\n ref={ref}\n key={sceneChild.state.key}\n data-griditem-key={sceneChild.state.key}\n className={cx(className, props.className)}\n style={newStyle}\n >\n {children}\n {innerContentWithContext}\n </div>\n );\n});\n\nGridItemWrapper.displayName = 'GridItemWrapper';\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n if (\n children.some(\n (c) =>\n c.state.height === undefined ||\n c.state.width === undefined ||\n c.state.x === undefined ||\n c.state.y === undefined\n )\n ) {\n throw new Error('All children must have a size specified');\n }\n}\n"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -7303,7 +7303,8 @@ function SceneGridLayoutRenderer({ model }) {
|
|
|
7303
7303
|
}
|
|
7304
7304
|
const layout = model.buildGridLayout(width);
|
|
7305
7305
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
7306
|
-
style: { width: `${width}px`, height: "100%", position: "relative", zIndex: 1 }
|
|
7306
|
+
style: { width: `${width}px`, height: "100%", position: "relative", zIndex: 1 },
|
|
7307
|
+
className: "scene-grid-layout"
|
|
7307
7308
|
}, /* @__PURE__ */ React__default["default"].createElement(ReactGridLayout__default["default"], {
|
|
7308
7309
|
width,
|
|
7309
7310
|
isDraggable: isDraggable && width > 768,
|
|
@@ -7332,7 +7333,7 @@ function SceneGridLayoutRenderer({ model }) {
|
|
|
7332
7333
|
}
|
|
7333
7334
|
const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
|
|
7334
7335
|
var _b;
|
|
7335
|
-
const _a = props, { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange } = _a, divProps = __objRest(_a, ["grid", "layoutItem", "index", "totalCount", "isLazy", "style", "onLoad", "onChange"]);
|
|
7336
|
+
const _a = props, { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children } = _a, divProps = __objRest(_a, ["grid", "layoutItem", "index", "totalCount", "isLazy", "style", "onLoad", "onChange", "children"]);
|
|
7336
7337
|
const sceneChild = grid.getSceneLayoutChild(layoutItem.i);
|
|
7337
7338
|
const className = (_b = sceneChild.getClassName) == null ? void 0 : _b.call(sceneChild);
|
|
7338
7339
|
const theme = ui.useTheme2();
|
|
@@ -7365,7 +7366,7 @@ const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
|
|
|
7365
7366
|
className: css.cx(className, props.className),
|
|
7366
7367
|
style: newStyle,
|
|
7367
7368
|
ref
|
|
7368
|
-
}), innerContentWithContext);
|
|
7369
|
+
}), innerContentWithContext, children);
|
|
7369
7370
|
}
|
|
7370
7371
|
return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$5(__spreadValues$8({}, divProps), {
|
|
7371
7372
|
ref,
|
|
@@ -7373,7 +7374,7 @@ const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
|
|
|
7373
7374
|
"data-griditem-key": sceneChild.state.key,
|
|
7374
7375
|
className: css.cx(className, props.className),
|
|
7375
7376
|
style: newStyle
|
|
7376
|
-
}), innerContentWithContext);
|
|
7377
|
+
}), children, innerContentWithContext);
|
|
7377
7378
|
});
|
|
7378
7379
|
GridItemWrapper.displayName = "GridItemWrapper";
|
|
7379
7380
|
function validateChildrenSize(children) {
|