@grafana/scenes 0.29.0 → 0.29.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 +12 -0
- package/dist/esm/components/layout/grid/SceneGridRow.js +35 -24
- package/dist/esm/components/layout/grid/SceneGridRow.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +34 -36
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/dist/esm/components/SceneDragHandle.js +0 -18
- package/dist/esm/components/SceneDragHandle.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.29.1 (Tue Sep 05 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- SceneGridRow: Small design change and fixes, add actions support [#321](https://github.com/grafana/scenes/pull/321) ([@torkelo](https://github.com/torkelo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.29.0 (Tue Sep 05 2023)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
@@ -3,9 +3,9 @@ import React from 'react';
|
|
|
3
3
|
import { useStyles2, Icon } from '@grafana/ui';
|
|
4
4
|
import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
|
|
5
5
|
import { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig.js';
|
|
6
|
-
import { SceneDragHandle } from '../../SceneDragHandle.js';
|
|
7
6
|
import { SceneGridLayout } from './SceneGridLayout.js';
|
|
8
7
|
import { GRID_COLUMN_COUNT } from './constants.js';
|
|
8
|
+
import { sceneGraph } from '../../../core/sceneGraph/index.js';
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
11
|
var __defProps = Object.defineProperties;
|
|
@@ -69,14 +69,10 @@ class SceneGridRow extends SceneObjectBase {
|
|
|
69
69
|
SceneGridRow.Component = SceneGridRowRenderer;
|
|
70
70
|
function SceneGridRowRenderer({ model }) {
|
|
71
71
|
const styles = useStyles2(getSceneGridRowStyles);
|
|
72
|
-
const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();
|
|
73
|
-
const
|
|
74
|
-
dragClass: model.getGridLayout().getDragClass()
|
|
75
|
-
});
|
|
72
|
+
const { isCollapsible, isCollapsed, title, isDraggable, actions } = model.useState();
|
|
73
|
+
const layoutDragClass = model.getGridLayout().getDragClass();
|
|
76
74
|
return /* @__PURE__ */ React.createElement("div", {
|
|
77
|
-
className: styles.row
|
|
78
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
79
|
-
className: cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
|
|
75
|
+
className: cx(styles.row, isCollapsed && styles.rowCollapsed)
|
|
80
76
|
}, /* @__PURE__ */ React.createElement("button", {
|
|
81
77
|
onClick: model.onCollapseToggle,
|
|
82
78
|
className: styles.rowTitleButton
|
|
@@ -84,25 +80,24 @@ function SceneGridRowRenderer({ model }) {
|
|
|
84
80
|
name: isCollapsed ? "angle-right" : "angle-down"
|
|
85
81
|
}), /* @__PURE__ */ React.createElement("span", {
|
|
86
82
|
className: styles.rowTitle
|
|
87
|
-
}, title)),
|
|
83
|
+
}, sceneGraph.interpolate(model, title, void 0, "text"))), isCollapsed && /* @__PURE__ */ React.createElement("div", {
|
|
84
|
+
className: styles.collapsedInfo
|
|
85
|
+
}, "(", model.state.children.length, " panels)"), actions && /* @__PURE__ */ React.createElement(actions.Component, {
|
|
86
|
+
model: actions
|
|
87
|
+
}), isDraggable && isCollapsed && /* @__PURE__ */ React.createElement("div", {
|
|
88
|
+
className: cx(styles.dragHandle, layoutDragClass)
|
|
89
|
+
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
90
|
+
name: "draggabledots"
|
|
91
|
+
})));
|
|
88
92
|
}
|
|
89
93
|
const getSceneGridRowStyles = (theme) => {
|
|
90
94
|
return {
|
|
91
95
|
row: css({
|
|
92
|
-
width: "100%",
|
|
93
|
-
height: "100%",
|
|
94
|
-
position: "relative",
|
|
95
|
-
zIndex: 0,
|
|
96
|
-
display: "flex",
|
|
97
|
-
flexDirection: "column"
|
|
98
|
-
}),
|
|
99
|
-
rowHeader: css({
|
|
100
96
|
width: "100%",
|
|
101
97
|
height: "30px",
|
|
102
98
|
display: "flex",
|
|
103
99
|
justifyContent: "space-between",
|
|
104
|
-
|
|
105
|
-
border: `1px solid transparent`
|
|
100
|
+
gap: theme.spacing(1)
|
|
106
101
|
}),
|
|
107
102
|
rowTitleButton: css({
|
|
108
103
|
display: "flex",
|
|
@@ -112,15 +107,31 @@ const getSceneGridRowStyles = (theme) => {
|
|
|
112
107
|
border: "none",
|
|
113
108
|
gap: theme.spacing(1)
|
|
114
109
|
}),
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
border: `1px solid ${theme.colors.border.weak}`,
|
|
119
|
-
borderRadius: theme.shape.borderRadius(1)
|
|
110
|
+
rowCollapsed: css({
|
|
111
|
+
background: theme.colors.background.secondary,
|
|
112
|
+
borderBottom: `1px solid ${theme.colors.border.weak}`
|
|
120
113
|
}),
|
|
121
114
|
rowTitle: css({
|
|
122
115
|
fontSize: theme.typography.h5.fontSize,
|
|
123
116
|
fontWeight: theme.typography.fontWeightMedium
|
|
117
|
+
}),
|
|
118
|
+
collapsedInfo: css({
|
|
119
|
+
fontSize: theme.typography.bodySmall.fontSize,
|
|
120
|
+
color: theme.colors.text.secondary,
|
|
121
|
+
display: "flex",
|
|
122
|
+
alignItems: "center",
|
|
123
|
+
flexGrow: 1
|
|
124
|
+
}),
|
|
125
|
+
dragHandle: css({
|
|
126
|
+
display: "flex",
|
|
127
|
+
padding: theme.spacing(0, 1),
|
|
128
|
+
alignItems: "center",
|
|
129
|
+
justifyContent: "flex-end",
|
|
130
|
+
cursor: "move",
|
|
131
|
+
color: theme.colors.text.secondary,
|
|
132
|
+
"&:hover": {
|
|
133
|
+
color: theme.colors.text.primary
|
|
134
|
+
}
|
|
124
135
|
})
|
|
125
136
|
};
|
|
126
137
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectUrlValues } from '../../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig';\
|
|
1
|
+
{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\nimport { SceneObjectUrlSyncConfig } from '../../../services/SceneObjectUrlSyncConfig';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n title: string;\n isCollapsible?: boolean;\n isCollapsed?: boolean;\n actions?: SceneObject;\n children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n public static Component = SceneGridRowRenderer;\n\n protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['rowc'] });\n\n public constructor(state: Partial<SceneGridRowState>) {\n super({\n children: state.children || [],\n isCollapsible: state.isCollapsible || true,\n title: state.title || '',\n isDraggable: state.isDraggable || true,\n isResizable: state.isResizable || false,\n ...state,\n x: 0,\n height: 1,\n width: GRID_COLUMN_COUNT,\n });\n }\n\n public getGridLayout(): SceneGridLayout {\n const layout = this.parent;\n\n if (!layout || !(layout instanceof SceneGridLayout)) {\n throw new Error('SceneGridRow must be a child of SceneGridLayout');\n }\n\n return layout;\n }\n\n public onCollapseToggle = () => {\n if (!this.state.isCollapsible) {\n return;\n }\n\n this.getGridLayout().toggleRow(this);\n };\n\n public getUrlState() {\n return { rowc: this.state.isCollapsed ? '1' : '0' };\n }\n\n public updateFromUrl(values: SceneObjectUrlValues) {\n if (values.rowc == null) {\n return;\n }\n\n if (values.rowc !== this.getUrlState().rowc) {\n this.onCollapseToggle();\n }\n }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n const styles = useStyles2(getSceneGridRowStyles);\n const { isCollapsible, isCollapsed, title, isDraggable, actions } = model.useState();\n const layoutDragClass = model.getGridLayout().getDragClass();\n\n return (\n <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n <button onClick={model.onCollapseToggle} className={styles.rowTitleButton}>\n {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n <span className={styles.rowTitle}>{sceneGraph.interpolate(model, title, undefined, 'text')}</span>\n </button>\n {isCollapsed && <div className={styles.collapsedInfo}>({model.state.children.length} panels)</div>}\n {actions && <actions.Component model={actions} />}\n {isDraggable && isCollapsed && (\n <div className={cx(styles.dragHandle, layoutDragClass)}>\n <Icon name=\"draggabledots\" />\n </div>\n )}\n </div>\n );\n}\n\nconst getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n return {\n row: css({\n width: '100%',\n height: '30px',\n display: 'flex',\n justifyContent: 'space-between',\n gap: theme.spacing(1),\n }),\n rowTitleButton: css({\n display: 'flex',\n alignItems: 'center',\n cursor: 'pointer',\n background: 'transparent',\n border: 'none',\n gap: theme.spacing(1),\n }),\n rowCollapsed: css({\n background: theme.colors.background.secondary,\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n }),\n rowTitle: css({\n fontSize: theme.typography.h5.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n }),\n collapsedInfo: css({\n fontSize: theme.typography.bodySmall.fontSize,\n color: theme.colors.text.secondary,\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n }),\n dragHandle: css({\n display: 'flex',\n padding: theme.spacing(0, 1),\n alignItems: 'center',\n justifyContent: 'flex-end',\n cursor: 'move',\n color: theme.colors.text.secondary,\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n };\n};\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1167,6 +1167,7 @@ interface SceneGridRowState extends SceneGridItemStateLike {
|
|
|
1167
1167
|
title: string;
|
|
1168
1168
|
isCollapsible?: boolean;
|
|
1169
1169
|
isCollapsed?: boolean;
|
|
1170
|
+
actions?: SceneObject;
|
|
1170
1171
|
children: SceneGridItemLike[];
|
|
1171
1172
|
}
|
|
1172
1173
|
declare class SceneGridRow extends SceneObjectBase<SceneGridRowState> {
|
package/dist/index.js
CHANGED
|
@@ -5161,19 +5161,6 @@ const GRID_CELL_HEIGHT = 30;
|
|
|
5161
5161
|
const GRID_CELL_VMARGIN = 8;
|
|
5162
5162
|
const GRID_COLUMN_COUNT = 24;
|
|
5163
5163
|
|
|
5164
|
-
function SceneDragHandle({ className, dragClass }) {
|
|
5165
|
-
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
5166
|
-
className: `${className} ${dragClass}`,
|
|
5167
|
-
style: {
|
|
5168
|
-
width: "20px",
|
|
5169
|
-
height: "20px",
|
|
5170
|
-
cursor: "move"
|
|
5171
|
-
}
|
|
5172
|
-
}, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
|
|
5173
|
-
name: "draggabledots"
|
|
5174
|
-
}));
|
|
5175
|
-
}
|
|
5176
|
-
|
|
5177
5164
|
var __defProp$5 = Object.defineProperty;
|
|
5178
5165
|
var __defProps$2 = Object.defineProperties;
|
|
5179
5166
|
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
@@ -5236,14 +5223,10 @@ class SceneGridRow extends SceneObjectBase {
|
|
|
5236
5223
|
SceneGridRow.Component = SceneGridRowRenderer;
|
|
5237
5224
|
function SceneGridRowRenderer({ model }) {
|
|
5238
5225
|
const styles = ui.useStyles2(getSceneGridRowStyles);
|
|
5239
|
-
const { isCollapsible, isCollapsed, title, isDraggable } = model.useState();
|
|
5240
|
-
const
|
|
5241
|
-
dragClass: model.getGridLayout().getDragClass()
|
|
5242
|
-
});
|
|
5226
|
+
const { isCollapsible, isCollapsed, title, isDraggable, actions } = model.useState();
|
|
5227
|
+
const layoutDragClass = model.getGridLayout().getDragClass();
|
|
5243
5228
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
5244
|
-
className: styles.row
|
|
5245
|
-
}, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
5246
|
-
className: css.cx(styles.rowHeader, isCollapsed && styles.rowHeaderCollapsed)
|
|
5229
|
+
className: css.cx(styles.row, isCollapsed && styles.rowCollapsed)
|
|
5247
5230
|
}, /* @__PURE__ */ React__default["default"].createElement("button", {
|
|
5248
5231
|
onClick: model.onCollapseToggle,
|
|
5249
5232
|
className: styles.rowTitleButton
|
|
@@ -5251,25 +5234,24 @@ function SceneGridRowRenderer({ model }) {
|
|
|
5251
5234
|
name: isCollapsed ? "angle-right" : "angle-down"
|
|
5252
5235
|
}), /* @__PURE__ */ React__default["default"].createElement("span", {
|
|
5253
5236
|
className: styles.rowTitle
|
|
5254
|
-
}, title)),
|
|
5237
|
+
}, sceneGraph.interpolate(model, title, void 0, "text"))), isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
5238
|
+
className: styles.collapsedInfo
|
|
5239
|
+
}, "(", model.state.children.length, " panels)"), actions && /* @__PURE__ */ React__default["default"].createElement(actions.Component, {
|
|
5240
|
+
model: actions
|
|
5241
|
+
}), isDraggable && isCollapsed && /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
5242
|
+
className: css.cx(styles.dragHandle, layoutDragClass)
|
|
5243
|
+
}, /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
|
|
5244
|
+
name: "draggabledots"
|
|
5245
|
+
})));
|
|
5255
5246
|
}
|
|
5256
5247
|
const getSceneGridRowStyles = (theme) => {
|
|
5257
5248
|
return {
|
|
5258
5249
|
row: css.css({
|
|
5259
|
-
width: "100%",
|
|
5260
|
-
height: "100%",
|
|
5261
|
-
position: "relative",
|
|
5262
|
-
zIndex: 0,
|
|
5263
|
-
display: "flex",
|
|
5264
|
-
flexDirection: "column"
|
|
5265
|
-
}),
|
|
5266
|
-
rowHeader: css.css({
|
|
5267
5250
|
width: "100%",
|
|
5268
5251
|
height: "30px",
|
|
5269
5252
|
display: "flex",
|
|
5270
5253
|
justifyContent: "space-between",
|
|
5271
|
-
|
|
5272
|
-
border: `1px solid transparent`
|
|
5254
|
+
gap: theme.spacing(1)
|
|
5273
5255
|
}),
|
|
5274
5256
|
rowTitleButton: css.css({
|
|
5275
5257
|
display: "flex",
|
|
@@ -5279,15 +5261,31 @@ const getSceneGridRowStyles = (theme) => {
|
|
|
5279
5261
|
border: "none",
|
|
5280
5262
|
gap: theme.spacing(1)
|
|
5281
5263
|
}),
|
|
5282
|
-
|
|
5283
|
-
|
|
5284
|
-
|
|
5285
|
-
border: `1px solid ${theme.colors.border.weak}`,
|
|
5286
|
-
borderRadius: theme.shape.borderRadius(1)
|
|
5264
|
+
rowCollapsed: css.css({
|
|
5265
|
+
background: theme.colors.background.secondary,
|
|
5266
|
+
borderBottom: `1px solid ${theme.colors.border.weak}`
|
|
5287
5267
|
}),
|
|
5288
5268
|
rowTitle: css.css({
|
|
5289
5269
|
fontSize: theme.typography.h5.fontSize,
|
|
5290
5270
|
fontWeight: theme.typography.fontWeightMedium
|
|
5271
|
+
}),
|
|
5272
|
+
collapsedInfo: css.css({
|
|
5273
|
+
fontSize: theme.typography.bodySmall.fontSize,
|
|
5274
|
+
color: theme.colors.text.secondary,
|
|
5275
|
+
display: "flex",
|
|
5276
|
+
alignItems: "center",
|
|
5277
|
+
flexGrow: 1
|
|
5278
|
+
}),
|
|
5279
|
+
dragHandle: css.css({
|
|
5280
|
+
display: "flex",
|
|
5281
|
+
padding: theme.spacing(0, 1),
|
|
5282
|
+
alignItems: "center",
|
|
5283
|
+
justifyContent: "flex-end",
|
|
5284
|
+
cursor: "move",
|
|
5285
|
+
color: theme.colors.text.secondary,
|
|
5286
|
+
"&:hover": {
|
|
5287
|
+
color: theme.colors.text.primary
|
|
5288
|
+
}
|
|
5291
5289
|
})
|
|
5292
5290
|
};
|
|
5293
5291
|
};
|