Merge branch 'hotfix/09_27' into 'dev'

fix: AppProps 新增style属性 layout 布局改动 See merge request label-bee/beehive!15
open-mmlab · Sep 27, 2021 · 80b5187 · 80b5187
2 parents 3926c09 + 6a44392
commit 80b5187
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/packages/lb-components/src/App.tsx b/packages/lb-components/src/App.tsx
@@ -24,6 +24,9 @@ export interface AppProps {
   header?: React.ReactNode;
   footer?: React.ReactNode;
   sider?: React.ReactNode;
+  style?: {
+    [key: string]: any;
+  };
   setToolInstance?: (tool: ToolInstance) => void;
 }
 

diff --git a/packages/lb-components/src/views/MainView/index.tsx b/packages/lb-components/src/views/MainView/index.tsx
@@ -15,25 +15,29 @@ const layoutCls = `${prefix}-layout`;
 const MainView: React.FC<AppProps> = (props) => {
   return (
     <ViewportProvider>
-      <Layout className={`${layoutCls} ${props.className}`}>
-        <Header className={`${layoutCls}__header`}>
-          {getNewNode(
-            props.header,
-            <ToolHeader
-              headerName={props.headerName}
-              goBack={props.goBack}
-              exportData={props.exportData}
-            />,
-          )}
-        </Header>
+      <Layout className={`${layoutCls} ${props.className}`} style={props.style}>
+        {
+          getNewNode(props.header,
+            <Header className={`${layoutCls}__header`}>
+              <ToolHeader
+                headerName={props.headerName}
+                goBack={props.goBack}
+                exportData={props.exportData}
+              />
+            </Header>
+          )
+        }
         <Layout>
           <Content className={`${layoutCls}__content`}>
             <AnnotationOperation {...props} />
             {getNewNode(props.footer, <ToolFooter />)}
           </Content>
-          <Sider className={`${layoutCls}__side`} width='auto'>
-            {getNewNode(props.sider, <Sidebar />)}
-          </Sider>
+          {
+            getNewNode(props.sider,
+              <Sider className={`${layoutCls}__side`} width='auto'>
+                <Sidebar/>
+              </Sider>)
+          }
         </Layout>
       </Layout>
     </ViewportProvider>