@pdfme/ui 5.5.2 → 5.5.3-dev.2

package/src/components/Designer/RightSidebar/layout.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Divider } from 'antd';
+
+export const SIDEBAR_H_PADDING_PX = 16;
+export const SIDEBAR_V_PADDING_PX = 8;
+export const SIDEBAR_HEADER_HEIGHT = 60;
+
+type SectionProps = {
+  children: React.ReactNode;
+};
+type SidebarFrameProps = SectionProps & {
+  className?: string;
+};
+
+export const SidebarFrame = ({ children, className }: SidebarFrameProps) => (
+  <div
+    className={className}
+    style={{
+      height: '100%',
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const SidebarHeader = ({ children }: SectionProps) => (
+  <div
+    style={{
+      position: 'relative',
+      minHeight: SIDEBAR_HEADER_HEIGHT,
+      display: 'flex',
+      flexShrink: 0,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      padding: `${SIDEBAR_V_PADDING_PX}px ${SIDEBAR_H_PADDING_PX}px 0`,
+    }}
+  >
+    <div style={{ minHeight: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      {children}
+    </div>
+    <Divider style={{ marginTop: `${SIDEBAR_V_PADDING_PX}px`, marginBottom: 0 }} />
+  </div>
+);
+
+export const SidebarBody = ({ children }: SectionProps) => (
+  <div
+    style={{
+      flex: 1,
+      minHeight: 0,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      padding: `${SIDEBAR_V_PADDING_PX}px ${SIDEBAR_H_PADDING_PX}px`,
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const SidebarFooter = ({ children }: SectionProps) => (
+  <div
+    style={{
+      display: 'flex',
+      flexShrink: 0,
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: `${SIDEBAR_V_PADDING_PX}px`,
+      padding: `${SIDEBAR_H_PADDING_PX}px`,
+    }}
+  >
+    {children}
+  </div>
+);

package/src/components/Root.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
 import { Size } from '@pdfme/common';
 import { FontContext } from '../contexts.js';
-import { BACKGROUND_COLOR } from '../constants.js';
+import { BACKGROUND_COLOR, DESIGNER_CLASSNAME } from '../constants.js';
 import Spinner from './Spinner.js';
 
 type Props = { size: Size; scale: number; children: ReactNode };
@@ -29,8 +29,8 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   }, [font]);
 
   return (
-    <div ref={ref} style={{ position: 'relative', background: BACKGROUND_COLOR, ...size }}>
-      <div style={{ margin: '0 auto', ...size }}>{scale === 0 ? <Spinner /> : children}</div>
+    <div className={DESIGNER_CLASSNAME + 'root'} ref={ref} style={{ position: 'relative', background: BACKGROUND_COLOR, ...size }}>
+      <div className={DESIGNER_CLASSNAME + 'background'} style={{ margin: '0 auto', ...size }}>{scale === 0 ? <Spinner /> : children}</div>
     </div>
   );
 };

package/src/constants.ts

@@ -15,3 +15,7 @@ export const RIGHT_SIDEBAR_WIDTH = 400;
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';
 
 export const DEFAULT_MAX_ZOOM = 2;
+
+export const DESIGNER_CLASSNAME = 'pdfme-designer-';
+
+export const UI_CLASSNAME = 'pdfme-ui-';

package/src/helper.ts

@@ -420,9 +420,6 @@ export const getPagesScrollTopByIndex = (pageSizes: Size[], index: number, scale
     .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale, 0);
 };
 
-export const getSidebarContentHeight = (sidebarHeight: number) =>
-  sidebarHeight - RULER_HEIGHT - RULER_HEIGHT / 2 - 30;
-
 const handlePositionSizeChange = (
   schema: SchemaForUI,
   key: string,