Extract height ann width from TreeView

newIDE/app/src/UI/TreeView/index.js

@@ -5,7 +5,6 @@ import Text from '../Text';
 import { makeDragSourceAndDropTarget } from '../DragAndDrop/DragSourceAndDropTarget';
 import DropIndicator from '../SortableVirtualizedItemList/DropIndicator';
 import { FixedSizeList as List, areEqual } from 'react-window';
-import { AutoSizer } from 'react-virtualized';
 import memoizeOne from 'memoize-one';
 import IconButton from '../IconButton';
 import ArrowHeadBottom from '../CustomSvgIcons/ArrowHeadBottom';
@@ -27,8 +26,6 @@ type FlattenedNode = {|
   selected: boolean,
 |};
 
-type Props = {| nodes: Node[], searchText?: string |};
-
 const Row = React.memo(props => {
   const { data, index, style } = props;
   const { flattenedData, onOpen, onSelect, styling } = data;
@@ -154,7 +151,14 @@ const getItemData = memoizeOne((flattenedData, onOpen, onSelect, styling) => ({
   styling,
 }));
 
-const TreeView = ({ nodes, searchText }: Props) => {
+type Props = {|
+  height: number,
+  width: number,
+  nodes: Node[],
+  searchText?: string,
+|};
+
+const TreeView = ({ height, width, nodes, searchText }: Props) => {
   const [openedNodeIds, setOpenedNodeIds] = React.useState<string[]>([]);
   const [selectedNodeIds, setSelectedNodeIds] = React.useState<string[]>([]);
   const theme = React.useContext(GDevelopThemeContext);
@@ -224,20 +228,16 @@ const TreeView = ({ nodes, searchText }: Props) => {
   const itemData = getItemData(flattenedData, onOpen, onSelect, styling);
 
   return (
-    <AutoSizer>
-      {({ height, width }) => (
-        <List
-          height={height}
-          itemCount={flattenedData.length}
-          itemSize={32}
-          width={width}
-          itemKey={index => flattenedData[index].id}
-          itemData={itemData}
-        >
-          {Row}
-        </List>
-      )}
-    </AutoSizer>
+    <List
+      height={height}
+      itemCount={flattenedData.length}
+      itemSize={32}
+      width={width}
+      itemKey={index => flattenedData[index].id}
+      itemData={itemData}
+    >
+      {Row}
+    </List>
   );
 };
 

newIDE/app/src/stories/componentStories/UI/TreeView.stories.js

@@ -5,6 +5,7 @@ import muiDecorator from '../../ThemeDecorator';
 import { getPaperDecorator } from '../../PaperDecorator';
 import FixedHeightFlexContainer from '../../FixedHeightFlexContainer';
 import DragAndDropContextProvider from '../../../UI/DragAndDrop/DragAndDropContextProvider';
+import { AutoSizer } from 'react-virtualized';
 
 import TreeView from '../../../UI/TreeView';
 import { Column, Line } from '../../../UI/Grid';
@@ -425,23 +426,32 @@ export const Default = () => {
   const [searchText, setSearchText] = React.useState<string>('');
   return (
     <DragAndDropContextProvider>
-      <FixedHeightFlexContainer height={400}>
-        <Column noMargin expand>
-          <TextField
-            type="text"
-            value={searchText}
-            onChange={(e, text) => {
-              setSearchText(text);
-            }}
-            hintText={'Filter'}
-          />
-          <Line expand>
-            <Column expand>
-              <TreeView nodes={nodes} searchText={searchText} />
-            </Column>
-          </Line>
-        </Column>
-      </FixedHeightFlexContainer>
+      <Column noMargin expand>
+        <TextField
+          type="text"
+          value={searchText}
+          onChange={(e, text) => {
+            setSearchText(text);
+          }}
+          hintText={'Filter'}
+        />
+        <FixedHeightFlexContainer height={400}>
+          <AutoSizer>
+            {({ height, width }) => (
+              <Line expand>
+                <Column expand>
+                  <TreeView
+                    height={height}
+                    width={width}
+                    nodes={nodes}
+                    searchText={searchText}
+                  />
+                </Column>
+              </Line>
+            )}
+          </AutoSizer>
+        </FixedHeightFlexContainer>
+      </Column>
     </DragAndDropContextProvider>
   );
 };