From 18491dac11fba2c7ccca90339a9cb3c9058ce78d Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Thu, 15 Apr 2021 07:46:28 -0700 Subject: [PATCH] Fixed issue where split container with null elems woudn't use remaining size Summary: This fixes an issue where `Layout.Top/Right/Left/Bottom` would not render its secondary child in the remaining size, if the primary child is empty (`null`). This is caused by React not rendering anything for null children, and as a result the CSS rules for the primary child would then match the second child. In the example below making the component tree invisible if there are no bundles in the NT/Bloks plugin. Fixed by rendering a zero sized element instead. Reviewed By: jknoxville Differential Revision: D27793382 fbshipit-source-id: 1e76b51986c30a6a0d98e9356fcad4dd8d5d5f91 --- desktop/flipper-plugin/src/ui/Layout.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/desktop/flipper-plugin/src/ui/Layout.tsx b/desktop/flipper-plugin/src/ui/Layout.tsx index 380f1bbe8..0659d3e2f 100644 --- a/desktop/flipper-plugin/src/ui/Layout.tsx +++ b/desktop/flipper-plugin/src/ui/Layout.tsx @@ -173,12 +173,21 @@ type SplitVerticalResizableProps = } | {}; +const Empty = styled.div({width: 0, height: 0}); + function renderSplitLayout( props: SplitLayoutProps, direction: 'column' | 'row', grow: 1 | 2, ) { let [child1, child2] = props.children; + // prevent some children to be accidentally omitted if the primary one is `null` + if (!child1) { + child1 = ; + } + if (!child2) { + child2 = ; + } if ('resizable' in props && props.resizable) { const { width,