FlexLayout: Allow SceneFlexLayout to be child of another flex layout #135
Conversation
| <item.Component key={item.state.key} model={item} /> | ||
| ))} | ||
| {children.map((item) => { | ||
| if (isSceneFlexLayout(item)) { |
There was a problem hiding this comment.
This is awkward, but don't see any other way (apart from tsignore) to make TS happy
There was a problem hiding this comment.
@dprokop I am a bit confused as well, this should not be needed as this component does not care about children or body.
I was able to make this work here, just need to simplify SceneFlexItemLikeState so that it does not include body
https://github.com/grafana/scenes/compare/flex-layout-children...flex-item-like-state?expand=1
There was a problem hiding this comment.
tempted to remove SceneLayoutItemState as it just adds a bit of confusing (just specifies body, but can have this as a convention instead for SceneFlexItem and SceneGridItem )
| @@ -45,9 +45,12 @@ function SceneFlexLayoutRenderer({ model }: SceneComponentProps<SceneFlexLayout> | |||
|
|
|||
| return ( | |||
| <div style={style}> | |||
There was a problem hiding this comment.
this is missing getFlexItemItemStyles(parent.state.direction || 'row', model);
If we are to use a SceneFlexLayout as an item it needs to behave as one as well
|
Thanks for having a look @torkelo. Did plenty of changes (SceneLayoutItemState removal included) so that it's I think slightly better now :) |
| @@ -43,16 +40,23 @@ function SceneFlexLayoutRenderer({ model }: SceneComponentProps<SceneFlexLayout> | |||
| minHeight: 0, | |||
| }; | |||
|
|
|||
| if (parent && isSceneFlexLayout(parent)) { | |||
There was a problem hiding this comment.
I think you can just use instanceof SceneFlexLayout here
|
🚀 PR was released in |
This allows SceneFlexLayout to be used as a child of another SceneFlexLayout, without the need for wrapping it with SceneFlexItem. Tried to make SceneFlexLayout to implement SceneFlexItemLike interface, but it's quite tricky since the primarily because the
bodyandchildrendifferentiation.