feat(react): add position in layout (#145)

alibaba · Nov 30, 2021 · baba792 · baba792
1 parent 4b72dfe
commit baba792
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 10 deletions.
diff --git a/packages/react/src/containers/Layout.tsx b/packages/react/src/containers/Layout.tsx
@@ -28,7 +28,11 @@ export const Layout: React.FC<IDesignerLayoutProps> = (props) => {
       })}
     >
       <DesignerLayoutContext.Provider
-        value={{ theme: props.theme, prefixCls: props.prefixCls }}
+        value={{
+          theme: props.theme,
+          prefixCls: props.prefixCls,
+          position: props.position,
+        }}
       >
         {props.children}
       </DesignerLayoutContext.Provider>
@@ -39,4 +43,5 @@ export const Layout: React.FC<IDesignerLayoutProps> = (props) => {
 Layout.defaultProps = {
   theme: 'light',
   prefixCls: 'dn-',
+  position: 'fixed',
 }
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
@@ -3,6 +3,7 @@ export * from './useCursor'
 export * from './useScreen'
 export * from './useTree'
 export * from './useTheme'
+export * from './usePosition'
 export * from './useTreeNode'
 export * from './useHover'
 export * from './useViewport'

diff --git a/packages/react/src/hooks/usePosition.ts b/packages/react/src/hooks/usePosition.ts
@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import { DesignerLayoutContext } from '../context'
+import { IDesignerLayoutContext } from '../types'
+
+export const usePosition = (): IDesignerLayoutContext['position'] => {
+  return useContext(DesignerLayoutContext)?.position
+}
diff --git a/packages/react/src/panels/StudioPanel.tsx b/packages/react/src/panels/StudioPanel.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import { usePrefix } from '../hooks'
+import React, { useContext } from 'react'
+import { usePrefix, usePosition } from '../hooks'
 import { Layout } from '../containers'
 import cls from 'classnames'
 export interface IStudioPanelProps {
@@ -9,6 +9,7 @@ export interface IStudioPanelProps {
   actions?: React.ReactNode
   prefixCls?: string
   theme?: string
+  position?: React.ComponentProps<typeof Layout>['position']
 }
 
 const StudioPanelInternal: React.FC<IStudioPanelProps> = ({
@@ -17,11 +18,17 @@ const StudioPanelInternal: React.FC<IStudioPanelProps> = ({
   ...props
 }) => {
   const prefix = usePrefix('main-panel')
+  const position = usePosition()
   if (logo || actions) {
     return (
       <div
         {...props}
-        className={cls(prefix + '-container', 'root', props.className)}
+        className={cls(
+          prefix + '-container',
+          'root',
+          position,
+          props.className
+        )}
       >
         <div className={prefix + '-header'}>
           <div className={prefix + '-header-logo'}>{logo}</div>
@@ -32,7 +39,7 @@ const StudioPanelInternal: React.FC<IStudioPanelProps> = ({
     )
   }
   return (
-    <div {...props} className={cls(prefix, 'root')}>
+    <div {...props} className={cls(prefix, 'root', position)}>
       {props.children}
     </div>
   )

diff --git a/packages/react/src/panels/styles.less b/packages/react/src/panels/styles.less
@@ -21,6 +21,12 @@
       right: 0;
       bottom: 0;
     }
+    &.absolute {
+      position: absolute;
+    }
+    &.relative {
+      position: relative;
+    }
   }
 
   &-header {
@@ -140,7 +146,7 @@
         display: flex;
         align-items: center;
 
-        &>* {
+        & > * {
           margin-right: 8px;
 
           &:last-child {
@@ -196,10 +202,8 @@
     .@{prefix-cls}-composite-panel-tabs-content {
       border-right: none;
       border-left: 1px solid var(--dn-panel-border-color);
-
     }
     .@{prefix-cls}-composite-panel-tabs {
-
       border-left: 1px solid var(--dn-panel-border-color);
     }
   }
@@ -261,7 +265,7 @@
       display: flex;
       align-items: center;
 
-      &>* {
+      & > * {
         margin-right: 8px;
 
         &:last-child {
@@ -324,4 +328,4 @@
       transform: rotate(45deg);
     }
   }
-}
+}
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -5,6 +5,7 @@ export interface IDesignerLayoutProps {
   prefixCls?: string
   theme?: 'dark' | 'light' | (string & {})
   variables?: Record<string, string>
+  position?: 'fixed' | 'absolute' | 'relative'
 }
 export interface IDesignerProps extends IDesignerLayoutProps {
   engine: Engine
@@ -17,6 +18,7 @@ export interface IDesignerComponents {
 export interface IDesignerLayoutContext {
   theme?: 'dark' | 'light' | (string & {})
   prefixCls: string
+  position: 'fixed' | 'absolute' | 'relative'
 }
 
 export interface IWorkspaceContext {