@grafana/scenes 0.0.10 → 0.0.11
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.
|
@@ -12,9 +12,17 @@ class SceneFlexLayout extends SceneObjectBase {
|
|
|
12
12
|
SceneFlexLayout.Component = FlexLayoutRenderer;
|
|
13
13
|
SceneFlexLayout.Editor = FlexLayoutEditor;
|
|
14
14
|
function FlexLayoutRenderer({ model, isEditing }) {
|
|
15
|
-
const { direction = "row", children } = model.useState();
|
|
15
|
+
const { direction = "row", children, wrap } = model.useState();
|
|
16
|
+
const style = {
|
|
17
|
+
flexGrow: 1,
|
|
18
|
+
flexDirection: direction,
|
|
19
|
+
display: "flex",
|
|
20
|
+
gap: "8px",
|
|
21
|
+
flexWrap: wrap,
|
|
22
|
+
alignContent: "baseline"
|
|
23
|
+
};
|
|
16
24
|
return /* @__PURE__ */ React.createElement("div", {
|
|
17
|
-
style
|
|
25
|
+
style
|
|
18
26
|
}, children.map((item) => /* @__PURE__ */ React.createElement(FlexLayoutChildComponent, {
|
|
19
27
|
key: item.state.key,
|
|
20
28
|
item,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { Field, RadioButtonGroup } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayoutChild, SceneLayoutState, SceneLayoutChildOptions } from '../../core/types';\n\nexport type FlexLayoutDirection = 'column' | 'row';\n\ninterface SceneFlexLayoutState extends SceneLayoutState {\n direction?: FlexLayoutDirection;\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> {\n public static Component = FlexLayoutRenderer;\n public static Editor = FlexLayoutEditor;\n\n public toggleDirection() {\n this.setState({\n direction: this.state.direction === 'row' ? 'column' : 'row',\n });\n }\n}\n\nfunction FlexLayoutRenderer({ model, isEditing }: SceneComponentProps<SceneFlexLayout>) {\n const { direction = 'row', children } = model.useState();\n\n
|
|
1
|
+
{"version":3,"file":"SceneFlexLayout.js","sources":["../../../../src/components/layout/SceneFlexLayout.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { Field, RadioButtonGroup } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneLayoutChild, SceneLayoutState, SceneLayoutChildOptions } from '../../core/types';\n\nexport type FlexLayoutDirection = 'column' | 'row';\n\ninterface SceneFlexLayoutState extends SceneLayoutState {\n direction?: FlexLayoutDirection;\n wrap?: CSSProperties['flexWrap'];\n}\n\nexport class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> {\n public static Component = FlexLayoutRenderer;\n public static Editor = FlexLayoutEditor;\n\n public toggleDirection() {\n this.setState({\n direction: this.state.direction === 'row' ? 'column' : 'row',\n });\n }\n}\n\nfunction FlexLayoutRenderer({ model, isEditing }: SceneComponentProps<SceneFlexLayout>) {\n const { direction = 'row', children, wrap } = model.useState();\n\n const style: CSSProperties = {\n flexGrow: 1,\n flexDirection: direction,\n display: 'flex',\n gap: '8px',\n flexWrap: wrap,\n alignContent: 'baseline',\n };\n\n return (\n <div style={style}>\n {children.map((item) => (\n <FlexLayoutChildComponent key={item.state.key} item={item} direction={direction} isEditing={isEditing} />\n ))}\n </div>\n );\n}\n\nfunction FlexLayoutChildComponent({\n item,\n direction,\n isEditing,\n}: {\n item: SceneLayoutChild;\n direction: FlexLayoutDirection;\n isEditing?: boolean;\n}) {\n const { placement } = item.useState();\n\n return (\n <div style={getItemStyles(direction, placement)}>\n <item.Component model={item} isEditing={isEditing} />\n </div>\n );\n}\n\nfunction getItemStyles(direction: FlexLayoutDirection, layout: SceneLayoutChildOptions = {}) {\n const { xSizing = 'fill', ySizing = 'fill' } = layout;\n\n const style: CSSProperties = {\n display: 'flex',\n flexDirection: direction,\n minWidth: layout.minWidth,\n minHeight: layout.minHeight,\n position: 'relative',\n };\n\n if (direction === 'column') {\n if (layout.height) {\n style.height = layout.height;\n } else {\n style.flexGrow = ySizing === 'fill' ? 1 : 0;\n }\n\n if (layout.width) {\n style.width = layout.width;\n } else {\n style.alignSelf = xSizing === 'fill' ? 'stretch' : 'flex-start';\n }\n } else {\n if (layout.height) {\n style.height = layout.height;\n } else {\n style.alignSelf = ySizing === 'fill' ? 'stretch' : 'flex-start';\n }\n\n if (layout.width) {\n style.width = layout.width;\n } else {\n style.flexGrow = xSizing === 'fill' ? 1 : 0;\n }\n }\n\n return style;\n}\n\nfunction FlexLayoutEditor({ model }: SceneComponentProps<SceneFlexLayout>) {\n const { direction = 'row' } = model.useState();\n const options = [\n { icon: 'arrow-right', value: 'row' },\n { icon: 'arrow-down', value: 'column' },\n ];\n\n return (\n <Field label=\"Direction\">\n <RadioButtonGroup\n options={options}\n value={direction}\n onChange={(value) => model.setState({ direction: value as FlexLayoutDirection })}\n />\n </Field>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { CSSProperties } from 'react';
|
|
3
3
|
import { Observable, Observer, Subscription, Unsubscribable } from 'rxjs';
|
|
4
4
|
import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeZone, TimeRange, ScopedVars, DataTransformerConfig, DataSourceRef, DataQuery, Registry, RegistryItem, VariableRefresh, VariableSort, FieldConfigSource, PanelPlugin, AbsoluteTimeRange, DataFrame } from '@grafana/data';
|
|
5
5
|
import { VariableType, VariableHide, VariableModel } from '@grafana/schema';
|
|
@@ -748,6 +748,7 @@ declare class SceneControlsSpacer extends SceneObjectBase<{}> {
|
|
|
748
748
|
type FlexLayoutDirection = 'column' | 'row';
|
|
749
749
|
interface SceneFlexLayoutState extends SceneLayoutState {
|
|
750
750
|
direction?: FlexLayoutDirection;
|
|
751
|
+
wrap?: CSSProperties['flexWrap'];
|
|
751
752
|
}
|
|
752
753
|
declare class SceneFlexLayout extends SceneObjectBase<SceneFlexLayoutState> {
|
|
753
754
|
static Component: typeof FlexLayoutRenderer;
|
package/dist/index.js
CHANGED
|
@@ -2843,9 +2843,17 @@ class SceneFlexLayout extends SceneObjectBase {
|
|
|
2843
2843
|
SceneFlexLayout.Component = FlexLayoutRenderer;
|
|
2844
2844
|
SceneFlexLayout.Editor = FlexLayoutEditor;
|
|
2845
2845
|
function FlexLayoutRenderer({ model, isEditing }) {
|
|
2846
|
-
const { direction = "row", children } = model.useState();
|
|
2846
|
+
const { direction = "row", children, wrap } = model.useState();
|
|
2847
|
+
const style = {
|
|
2848
|
+
flexGrow: 1,
|
|
2849
|
+
flexDirection: direction,
|
|
2850
|
+
display: "flex",
|
|
2851
|
+
gap: "8px",
|
|
2852
|
+
flexWrap: wrap,
|
|
2853
|
+
alignContent: "baseline"
|
|
2854
|
+
};
|
|
2847
2855
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
2848
|
-
style
|
|
2856
|
+
style
|
|
2849
2857
|
}, children.map((item) => /* @__PURE__ */ React__default["default"].createElement(FlexLayoutChildComponent, {
|
|
2850
2858
|
key: item.state.key,
|
|
2851
2859
|
item,
|