🦺 feat: update styles & props

ant-design · Dec 4, 2023 · decb858 · decb858
1 parent 7785cc1
commit decb858
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 46 deletions.
diff --git a/src/Layout/index.tsx b/src/Layout/index.tsx
@@ -2,7 +2,7 @@ import { DraggablePanel } from '@ant-design/pro-editor';
 import { FlexProps, TabsProps } from 'antd';
 import { Size } from 're-resizable';
 import { ReactNode } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import { ConfigProvider } from '../ConfigProvider';
 import { getPrefixCls } from '../theme';
 import { useStyle } from './style';
@@ -16,7 +16,7 @@ interface HeaderFooterSettings {
   children?: ReactNode;
 }
 
-interface LayoutProps {
+interface LayoutProps extends FlexboxProps {
   header?: HeaderFooterSettings;
   footer?: HeaderFooterSettings;
   leftPannel?: PannelSettings;
@@ -39,51 +39,53 @@ interface PannelSettings {
   className?: string;
 }
 
-const getPannelProps = (
-  index: number,
-):
-  | {
-      placement: 'left' | 'right' | 'bottom';
-      className?: string;
-      defaultSize?: Partial<Size>;
-    }
-  | false => {
-  switch (['left', 'right', 'bottom', 'center'][index]) {
-    case 'left':
-      return {
-        placement: 'left',
-        defaultSize: {
-          width: '200',
-        },
-      };
-    case 'right':
-      return {
-        placement: 'right',
-        defaultSize: {
-          width: '200',
-        },
-      };
-    case 'bottom':
-      return {
-        placement: 'bottom',
-        defaultSize: {
-          height: '200',
-        },
-      };
-    case 'center':
-      return false;
-    default:
-      return false;
-  }
-};
-
 const BasicLayout = (props: LayoutProps) => {
   const { header, footer, leftPannel, rightPannel, bottomPannel, centerPannel, type, ...rest } =
     props;
 
   const prefixCls = getPrefixCls('layout');
   const { styles, cx } = useStyle(prefixCls);
 
+  const getPannelProps = (
+    index: number,
+  ):
+    | {
+        placement: 'left' | 'right' | 'bottom';
+        className?: string;
+        defaultSize?: Partial<Size>;
+      }
+    | false => {
+    switch (['left', 'right', 'bottom', 'center'][index]) {
+      case 'left':
+        return {
+          placement: 'left',
+          className: styles.leftPannel,
+          defaultSize: {
+            width: '200',
+          },
+        };
+      case 'right':
+        return {
+          placement: 'right',
+          className: styles.rightPannel,
+          defaultSize: {
+            width: '200',
+          },
+        };
+      case 'bottom':
+        return {
+          placement: 'bottom',
+          defaultSize: {
+            height: '200',
+          },
+        };
+      case 'center':
+        return false;
+      default:
+        return false;
+    }
+  };
+
   const DraggablePanelRender = (props: PannelSettings, index: number) => {
     const {
       children = '',
@@ -101,7 +103,7 @@ const BasicLayout = (props: LayoutProps) => {
         </div>
       );
     }
-    const { placement } = pannelProps;
+    const { placement, className: pannelClassName } = pannelProps;
     return (
       <DraggablePanel
         expandable={false}
@@ -112,7 +114,7 @@ const BasicLayout = (props: LayoutProps) => {
         {...pannelProps}
         {...rest}
       >
-        <div className={cx(styles.pannel, className)}>{children}</div>
+        <div className={cx(styles.pannel, pannelClassName, className)}>{children}</div>
       </DraggablePanel>
     );
   };
@@ -153,7 +155,7 @@ const BasicLayout = (props: LayoutProps) => {
   );
 };
 
-const WrapperLayout = (props) => {
+const WrapperLayout = (props: LayoutProps) => {
   return (
     <ConfigProvider>
       <BasicLayout {...props} />

diff --git a/src/Layout/style.ts b/src/Layout/style.ts
@@ -20,17 +20,18 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
       `${prefixCls}-header`,
       css`
         height: 48px;
+        min-height: 48px;
         border-radius: ${token.borderRadius}px;
         background-color: ${token.colorFillQuaternary};
-        margin-bottom: ${token.margin / 4}px;
+        margin: ${token.margin / 4}px;
       `,
     ),
     footer: cx(
       `${prefixCls}-footer`,
       css`
         height: 28px;
         width: 100%;
-        margin-top: ${token.margin / 4}px;
+        margin: ${token.margin / 4}px;
         background-color: ${token.colorFillQuaternary};
       `,
     ),
@@ -62,9 +63,11 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
         background-color: ${token.colorFillQuaternary};
         margin: ${token.margin / 4 + 2}px;
         height: calc(100% - ${token.margin / 2 + 1}px);
-        width: calc(100% - ${token.margin / 2 + 1}px);
       `,
     ),
+
+    leftPannel: cx(`${prefixCls}-left-pannel`, css``),
+    rightPannel: cx(`${prefixCls}-right-pannel`, css``),
     tip: cx(
       `${prefixCls}-tip`,
       css`