Merge pull request #291 from stone-lyl/feat-add-node

fix: set fixed width and height for `ReactFlow` to resolve warning
ajthinking · Sep 13, 2024 · 4ca323a · 4ca323a
2 parents 7e371fc + e3c14ba
commit 4ca323a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/packages/docs/components/demos/TinkerDemo.tsx b/packages/docs/components/demos/TinkerDemo.tsx
@@ -2,7 +2,6 @@ import { DataStory } from '@data-story/ui'
 import { core, str, } from '@data-story/core';
 import { MockJSClient } from '../splash/MockJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
-import { useMemo } from 'react';
 import useRequest from 'ahooks/lib/useRequest';
 
 // This component is just a place to sketch

diff --git a/packages/docs/components/demos/Tree/CustomActivityBar.tsx b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
@@ -24,7 +24,7 @@ export default () => {
         client={client}
         hideControls={true}
         hideSidebar={true}
-        hideActivityBar={['settings', 'explorer']}
+        hideActivityBar={['settings']}
       />
     </div>
   );

diff --git a/packages/ui/src/components/DataStory/DataStory.tsx b/packages/ui/src/components/DataStory/DataStory.tsx
@@ -131,7 +131,7 @@ export const DataStoryComponent = (
                   activeKey={sidebarKey}
                   onClose={setIsSidebarClose}/>
               </Allotment.Pane>
-              <Allotment.Pane visible={!isSidebarClose} snap maxSize={500}>
+              <Allotment.Pane visible={!isSidebarClose} snap maxSize={500} preferredSize={300}>
                 <Sidebar
                   tree={tree}
                   handleClickExplorerNode={handleClickExplorerNode}
@@ -142,7 +142,9 @@ export const DataStoryComponent = (
                   setSidebarKey={setSidebarKey} node={selectedNode}
                   onUpdateNodeData={setUpdateSelectedNodeData} onClose={setIsSidebarClose}/>
               </Allotment.Pane>
-              <Allotment.Pane minSize={300}>
+              {/*The Allotment.Pane will recalculate the width and height of the child components.*/}
+              {/*The className is used to address the ReactFlow warning.*/}
+              <Allotment.Pane minSize={300} className="h-full w-96">
                 <DataStoryCanvas
                   {...props}
                   onSave={saveTree}