@pdfme/ui 5.1.7 → 5.2.0-dev.1

package/src/components/Renderer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useContext, ReactNode, useRef } from 'react';
-import {Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions} from '@pdfme/common';
+import { Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions } from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants';
 import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
@@ -15,6 +15,7 @@ type RendererProps = Omit<
   outline: string;
   onChangeHoveringSchemaId?: (id: string | null) => void;
   scale: number;
+  selectable?: boolean;
 };
 
 type ReRenderCheckProps = {
@@ -43,12 +44,13 @@ const Wrapper = ({
   outline,
   onChangeHoveringSchemaId,
   schema,
+  selectable = true
 }: RendererProps & { children: ReactNode }) => (
   <div
     title={schema.name}
     onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
     onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
-    className={SELECTABLE_CLASSNAME}
+    className={selectable ? SELECTABLE_CLASSNAME : ''}
     id={schema.id}
     style={{
       position: 'absolute',
@@ -97,7 +99,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     return <></>;
   }
 
-  const reRenderDependencies = useRerenderDependencies({plugin, value, mode, scale, schema, options});
+  const reRenderDependencies = useRerenderDependencies({ plugin, value, mode, scale, schema, options });
 
   useEffect(() => {
     if (ref.current && schema.type) {

package/src/components/StaticSchema.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { isBlankPdf, replacePlaceholders, Template } from '@pdfme/common';
+import Renderer from './Renderer';
+import { uuid } from '../helper'
+
+const StaticSchema = (props: { template: Template, input: Record<string, string>, scale: number, totalPages: number, currentPage: number }) => {
+  const { template: { schemas, basePdf }, input, scale, totalPages, currentPage } = props;
+  if (!isBlankPdf(basePdf) || !basePdf.staticSchema) return null;
+  return <>{basePdf.staticSchema.map((schema) => (
+    <Renderer
+      key={schema.name}
+      schema={{ ...schema, id: uuid() }}
+      basePdf={basePdf}
+      value={replacePlaceholders({
+        content: schema.content || '',
+        variables: { ...input, totalPages, currentPage },
+        schemas
+      })}
+      onChangeHoveringSchemaId={() => { void 0 }}
+      mode={'viewer'}
+      outline={`none`}
+      scale={scale}
+      selectable={false}
+    />
+  ))}</>
+}
+
+export default StaticSchema;

package/src/constants.ts

@@ -8,6 +8,8 @@ export const RULER_HEIGHT = 30;
 
 export const PAGE_GAP = 10;
 
+export const LEFT_SIDEBAR_WIDTH = 45;
+
 export const RIGHT_SIDEBAR_WIDTH = 400;
 
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';