@pdfme/ui 5.3.8-dev.56 → 5.3.8-dev.58

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -21,13 +21,13 @@ import { PluginsRegistry } from '../../../../contexts.js';
 import Item from './Item.js';
 import SelectableSortableItem from './SelectableSortableItem.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon.js";
+import PluginIcon from '../../PluginIcon.js';
 
 const SelectableSortableContainer = (
   props: Pick<
     SidebarProps,
     'schemas' | 'onEdit' | 'onSortEnd' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
-  >
+  >,
 ) => {
   const { token } = theme.useToken();
   const { schemas, onEdit, onSortEnd, hoveringSchemaId, onChangeHoveringSchemaId } = props;
@@ -37,7 +37,7 @@ const SelectableSortableContainer = (
   const pluginsRegistry = useContext(PluginsRegistry);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 15 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
 
   const isItemSelected = (itemId: string): boolean =>
@@ -59,17 +59,25 @@ const SelectableSortableContainer = (
   };
 
   const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
-    const thisSchema = (typeof inSchema === 'string') ? schemas.find((schema) => schema.id === inSchema) : inSchema;
+    const thisSchema =
+      typeof inSchema === 'string' ? schemas.find((schema) => schema.id === inSchema) : inSchema;
 
     const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
-      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type
+      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type,
     )!;
 
     if (!activePlugin) {
-      return <></>
+      return <></>;
     }
 
-    return <PluginIcon plugin={activePlugin} label={pluginLabel} size={20} styles={{ marginRight: '0.5rem' }} />
+    return (
+      <PluginIcon
+        plugin={activePlugin}
+        label={pluginLabel}
+        size={20}
+        styles={{ marginRight: '0.5rem' }}
+      />
+    );
   };
 
   return (
@@ -90,7 +98,7 @@ const SelectableSortableContainer = (
                 return ret;
               }
               return ret.filter((schema) => schema !== selectedItem);
-            }, schemas)
+            }, schemas),
           );
         }
       }}
@@ -106,7 +114,7 @@ const SelectableSortableContainer = (
           newSchemas.splice(
             overIndex + 1,
             0,
-            ...selectedSchemas.filter((item) => item.id !== activeId)
+            ...selectedSchemas.filter((item) => item.id !== activeId),
           );
           onSortEnd(newSchemas);
           setSelectedSchemas([]);
@@ -133,8 +141,9 @@ const SelectableSortableContainer = (
                 <SelectableSortableItem
                   key={schema.id}
                   style={{
-                    border: `1px solid ${schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
-                      }`,
+                    border: `1px solid ${
+                      schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
+                    }`,
                   }}
                   schema={schema}
                   schemas={schemas}
@@ -150,43 +159,43 @@ const SelectableSortableContainer = (
         </div>
         {createPortal(
           <DragOverlay adjustScale>
-            {activeId ? (
-              (() => {
-                const activeSchema = schemas.find((schema) => schema.id === activeId);
-                if (!activeSchema) return null;
-                return (
-                  <>
-                    <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                      <Item
-                        icon={getPluginIcon(activeId)}
-                        value={activeSchema.name}
-                        required={activeSchema.required}
-                        readOnly={activeSchema.readOnly}
-                        style={{ background: token.colorPrimary }}
-                        dragOverlay
-                      />
-                    </ul>
-                    <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                      {selectedSchemas
-                        .filter((item) => item.id !== activeId)
-                        .map((item) => (
-                          <Item
-                            icon={getPluginIcon(item)}
-                            key={item.id}
-                            value={item.name}
-                            required={item.required}
-                            readOnly={item.readOnly}
-                            style={{ background: token.colorPrimary }}
-                            dragOverlay
-                          />
-                        ))}
-                    </ul>
-                  </>
-                );
-              })()
-            ) : null}
+            {activeId
+              ? (() => {
+                  const activeSchema = schemas.find((schema) => schema.id === activeId);
+                  if (!activeSchema) return null;
+                  return (
+                    <>
+                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                        <Item
+                          icon={getPluginIcon(activeId)}
+                          value={activeSchema.name}
+                          required={activeSchema.required}
+                          readOnly={activeSchema.readOnly}
+                          style={{ background: token.colorPrimary }}
+                          dragOverlay
+                        />
+                      </ul>
+                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                        {selectedSchemas
+                          .filter((item) => item.id !== activeId)
+                          .map((item) => (
+                            <Item
+                              icon={getPluginIcon(item)}
+                              key={item.id}
+                              value={item.name}
+                              required={item.required}
+                              readOnly={item.readOnly}
+                              style={{ background: token.colorPrimary }}
+                              dragOverlay
+                            />
+                          ))}
+                      </ul>
+                    </>
+                  );
+                })()
+              : null}
           </DragOverlay>,
-          document.body
+          document.body,
         )}
       </>
     </DndContext>

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -5,7 +5,7 @@ import { PluginsRegistry, I18nContext } from '../../../../contexts.js';
 import Item from './Item.js';
 import { useMountStatus } from '../../../../hooks.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon.js";
+import PluginIcon from '../../PluginIcon.js';
 
 interface Props {
   isSelected: boolean;
@@ -43,10 +43,9 @@ const SelectableSortableItem = ({
   };
 
   const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
-    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type
+    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type,
   )!;
 
-
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.name) {
     status = 'is-warning';

package/src/components/Designer/RightSidebar/ListView/index.tsx

@@ -21,7 +21,7 @@ const ListView = (
     | 'hoveringSchemaId'
     | 'onChangeHoveringSchemaId'
     | 'changeSchemas'
-  >
+  >,
 ) => {
   const {
     schemas,
@@ -48,7 +48,7 @@ const ListView = (
           key: 'name',
           value,
           schemaId: schemas[index].id,
-        }))
+        })),
       );
       setIsBulkUpdateFieldNamesMode(false);
     }
@@ -89,7 +89,14 @@ const ListView = (
             onEdit={onEdit}
           />
         )}
-        <div style={{ paddingTop: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+        <div
+          style={{
+            paddingTop: '0.5rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}
+        >
           {isBulkUpdateFieldNamesMode ? (
             <>
               <Button size="small" type="text" onClick={commitBulk}>

package/src/components/Designer/index.tsx

@@ -40,7 +40,7 @@ const scaleDragPosAdjustment = (adjustment: number, scale: number): number => {
   if (scale > 1) return adjustment * (scale - 1);
   if (scale < 1) return adjustment * -(1 - scale);
   return 0;
-}
+};
 
 const TemplateEditor = ({
   template,
@@ -53,8 +53,8 @@ const TemplateEditor = ({
   onSaveTemplate: (t: Template) => void;
   onChangeTemplate: (t: Template) => void;
 } & {
-  onChangeTemplate: (t: Template) => void
-  onPageCursorChange: (newPageCursor: number) => void
+  onChangeTemplate: (t: Template) => void;
+  onPageCursorChange: (newPageCursor: number) => void;
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
@@ -74,8 +74,12 @@ const TemplateEditor = ({
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
-  const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
+  const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+    template,
+    size,
+    zoomLevel,
+    maxZoom,
+  });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);
@@ -94,7 +98,7 @@ const TemplateEditor = ({
     pageCursor,
     onChangePageCursor: (p) => {
       setPageCursor(p);
-      onPageCursorChange(p)
+      onPageCursorChange(p);
       onEditEnd();
     },
   });
@@ -108,7 +112,7 @@ const TemplateEditor = ({
       setSchemasList(_schemasList);
       onChangeTemplate(schemasList2template(_schemasList, template.basePdf));
     },
-    [template, schemasList, pageCursor, onChangeTemplate]
+    [template, schemasList, pageCursor, onChangeTemplate],
   );
 
   const removeSchemas = useCallback(
@@ -116,7 +120,7 @@ const TemplateEditor = ({
       commitSchemas(schemasList[pageCursor].filter((schema) => !ids.includes(schema.id)));
       onEditEnd();
     },
-    [schemasList, pageCursor, commitSchemas]
+    [schemasList, pageCursor, commitSchemas],
   );
 
   const changeSchemas: ChangeSchemas = useCallback(
@@ -130,7 +134,7 @@ const TemplateEditor = ({
         commitSchemas,
       });
     },
-    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf]
+    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf],
   );
 
   useInitEvents({
@@ -161,29 +165,42 @@ const TemplateEditor = ({
   }, []);
 
   const addSchema = (defaultSchema: Schema) => {
-    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [0, 0, 0, 0];
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf)
+      ? template.basePdf.padding
+      : [0, 0, 0, 0];
     const pageSize = pageSizes[pageCursor];
 
     const newSchemaName = (prefix: string) => {
       let index = schemasList.reduce((acc, page) => acc + page.length, 1);
       let newName = prefix + index;
-      while (schemasList.some(page => page.find((s) => s.name === newName))) {
+      while (schemasList.some((page) => page.find((s) => s.name === newName))) {
         index++;
         newName = prefix + index;
       }
       return newName;
     };
-    const ensureMiddleValue = (min: number, value: number, max: number) => Math.min(Math.max(min, value), max)
+    const ensureMiddleValue = (min: number, value: number, max: number) =>
+      Math.min(Math.max(min, value), max);
 
     const s = {
       id: uuid(),
       ...defaultSchema,
       name: newSchemaName(i18n('field')),
       position: {
-        x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),
-        y: ensureMiddleValue(paddingTop, defaultSchema.position.y, pageSize.height - paddingBottom - defaultSchema.height),
+        x: ensureMiddleValue(
+          paddingLeft,
+          defaultSchema.position.x,
+          pageSize.width - paddingRight - defaultSchema.width,
+        ),
+        y: ensureMiddleValue(
+          paddingTop,
+          defaultSchema.position.y,
+          pageSize.height - paddingBottom - defaultSchema.height,
+        ),
       },
-      required: defaultSchema.readOnly ? false : options.requiredByDefault || defaultSchema.required || false,
+      required: defaultSchema.readOnly
+        ? false
+        : options.requiredByDefault || defaultSchema.required || false,
     } as SchemaForUI;
 
     if (defaultSchema.position.y === 0) {
@@ -213,7 +230,8 @@ const TemplateEditor = ({
     setTimeout(
       () =>
         canvasRef.current &&
-        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)), 0)
+        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)),
+        0),
     );
   };
 
@@ -262,13 +280,17 @@ const TemplateEditor = ({
           const dragStartLeft = active.rect.current.initial?.left || 0;
           const dragStartTop = active.rect.current.initial?.top || 0;
 
-          const canvasLeftOffsetFromPageCorner = pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
+          const canvasLeftOffsetFromPageCorner =
+            pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
           const canvasTopOffsetFromPageCorner = pageRect.top - dragStartTop;
 
           const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / scale;
           const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / scale;
 
-          const position = { x: round(px2mm(Math.max(0, moveX)), 2), y: round(px2mm(Math.max(0, moveY)), 2) }
+          const position = {
+            x: round(px2mm(Math.max(0, moveX)), 2),
+            y: round(px2mm(Math.max(0, moveY)), 2),
+          };
 
           addSchema({ ...(active.data.current as Schema), position });
         }}
@@ -307,7 +329,7 @@ const TemplateEditor = ({
             schemas={schemasList[pageCursor] ?? []}
             changeSchemas={changeSchemas}
             onSortEnd={onSortEnd}
-            onEdit={id => {
+            onEdit={(id) => {
               const editingElem = document.getElementById(id);
               editingElem && onEdit([editingElem]);
             }}

package/src/components/Preview.tsx

@@ -1,5 +1,12 @@
 import React, { useRef, useState, useEffect, useContext } from 'react';
-import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate, replacePlaceholders } from '@pdfme/common';
+import {
+  Template,
+  SchemaForUI,
+  PreviewProps,
+  Size,
+  getDynamicTemplate,
+  replacePlaceholders,
+} from '@pdfme/common';
 import { getDynamicHeightsForTable } from '@pdfme/schemas/utils';
 import UnitPager from './UnitPager.js';
 import Root from './Root.js';
@@ -37,8 +44,12 @@ const Preview = ({
   const [zoomLevel, setZoomLevel] = useState(1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
-  const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
+  const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+    template,
+    size,
+    zoomLevel,
+    maxZoom,
+  });
 
   const isForm = Boolean(onChangeInput);
 
@@ -87,7 +98,7 @@ const Preview = ({
   const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, name, value });
 
-  const handleOnChangeRenderer = (args: { key: string; value: any; }[], schema: SchemaForUI) => {
+  const handleOnChangeRenderer = (args: { key: string; value: any }[], schema: SchemaForUI) => {
     let isNeedInit = false;
     args.forEach(({ key: _key, value }) => {
       if (_key === 'content') {
@@ -98,9 +109,7 @@ const Preview = ({
         // TODO Improve this to allow schema types to determine whether the execution of getDynamicTemplate is required.
         if (schema.type === 'table') isNeedInit = true;
       } else {
-        const targetSchema = schemasList[pageCursor].find(
-          (s) => s.id === schema.id
-        ) as SchemaForUI;
+        const targetSchema = schemasList[pageCursor].find((s) => s.id === schema.id) as SchemaForUI;
         if (!targetSchema) return;
 
         // @ts-ignore
@@ -110,8 +119,8 @@ const Preview = ({
     if (isNeedInit) {
       init(template);
     }
-    setSchemasList([...schemasList])
-  }
+    setSchemasList([...schemasList]);
+  };
 
   if (error) {
     return <ErrorScreen size={size} error={error} />;
@@ -146,11 +155,13 @@ const Preview = ({
           pageSizes={pageSizes}
           backgrounds={backgrounds}
           renderSchema={({ schema, index }) => {
-            const value = schema.readOnly ? replacePlaceholders({
-              content: schema.content || '',
-              variables: { ...input, totalPages: schemasList.length, currentPage: index + 1, },
-              schemas: schemasList
-            }) : String(input && input[schema.name] || '');
+            const value = schema.readOnly
+              ? replacePlaceholders({
+                  content: schema.content || '',
+                  variables: { ...input, totalPages: schemasList.length, currentPage: index + 1 },
+                  schemas: schemasList,
+                })
+              : String((input && input[schema.name]) || '');
             return (
               <Renderer
                 key={schema.id}

package/src/components/Renderer.tsx

@@ -1,5 +1,16 @@
 import React, { useEffect, useContext, ReactNode, useRef, useMemo } from 'react';
-import { Dict, Mode, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema, Plugin, UIOptions, cloneDeep } from '@pdfme/common';
+import {
+  Dict,
+  Mode,
+  ZOOM,
+  UIRenderProps,
+  SchemaForUI,
+  BasePdf,
+  Schema,
+  Plugin,
+  UIOptions,
+  cloneDeep,
+} from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants.js';
 import { PluginsRegistry, OptionsContext, I18nContext, CacheContext } from '../contexts.js';
@@ -18,13 +29,13 @@ type RendererProps = Omit<
 };
 
 type ReRenderCheckProps = {
-  plugin: Plugin<any>,
-  value: string,
-  mode: Mode,
-  scale: number,
-  schema: SchemaForUI,
-  options: UIOptions,
-}
+  plugin: Plugin<any>;
+  value: string;
+  mode: Mode;
+  scale: number;
+  schema: SchemaForUI;
+  options: UIOptions;
+};
 
 export const useRerenderDependencies = (arg: ReRenderCheckProps) => {
   const { plugin, value, mode, scale, schema, options } = arg;
@@ -45,13 +56,12 @@ export const useRerenderDependencies = (arg: ReRenderCheckProps) => {
   }, [plugin.uninterruptedEditMode, value, mode, scale, schema, optionStr]);
 };
 
-
 const Wrapper = ({
   children,
   outline,
   onChangeHoveringSchemaId,
   schema,
-  selectable = true
+  selectable = true,
 }: RendererProps & { children: ReactNode }) => (
   <div
     title={schema.name}
@@ -71,16 +81,20 @@ const Wrapper = ({
       outline,
     }}
   >
-    {schema.required &&
-      <span style={{
-        color: 'red',
-        position: 'absolute',
-        top: -12,
-        left: -12,
-        fontSize: 18,
-        fontWeight: 700,
-      }}>*</span>
-    }
+    {schema.required && (
+      <span
+        style={{
+          color: 'red',
+          position: 'absolute',
+          top: -12,
+          left: -12,
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
+        *
+      </span>
+    )}
     {children}
   </div>
 );
@@ -94,11 +108,10 @@ const Renderer = (props: RendererProps) => {
   const i18n = useContext(I18nContext) as (key: keyof Dict | string) => string;
   const { token: theme } = antdTheme.useToken();
 
-  
   const ref = useRef<HTMLDivElement>(null);
   const _cache = useContext(CacheContext);
   const plugin = Object.values(pluginsRegistry || {}).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === schema.type
+    (plugin) => plugin?.propPanel.defaultSchema.type === schema.type,
   ) as Plugin<any> | undefined;
 
   if (!plugin || !plugin.ui) {

package/src/components/Root.tsx

@@ -15,7 +15,7 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
       ([key, { data }]) =>
         new FontFace(key, typeof data === 'string' ? `url(${data})` : data, {
           display: 'swap',
-        })
+        }),
     );
     const newFontFaces = fontFaces.filter((fontFace) => !document.fonts.has(fontFace));
 

package/src/components/Spinner.tsx

@@ -14,7 +14,7 @@ const Spinner: React.FC = () => {
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: '50%',
-    color: token.colorPrimary
+    color: token.colorPrimary,
   };
 
   const loaderStyle: React.CSSProperties = {

package/src/components/StaticSchema.tsx

@@ -3,26 +3,44 @@ import { isBlankPdf, replacePlaceholders, Template } from '@pdfme/common';
 import Renderer from './Renderer.js';
 import { uuid } from '../helper.js';
 
-const StaticSchema = (props: { template: Template, input: Record<string, string>, scale: number, totalPages: number, currentPage: number }) => {
-  const { template: { schemas, basePdf }, input, scale, totalPages, currentPage } = props;
+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}
-    />
-  ))}</>
-}
+  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;
+export default StaticSchema;

package/src/constants.ts

@@ -14,4 +14,4 @@ export const RIGHT_SIDEBAR_WIDTH = 400;
 
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';
 
-export const DEFAULT_MAX_ZOOM = 2;
+export const DEFAULT_MAX_ZOOM = 2;