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

package/src/components/Designer/LeftSidebar.tsx

@@ -1,49 +1,57 @@
 import React, { useContext, useState, useEffect } from 'react';
-import {
-  Schema,
-  Plugin,
-  BasePdf,
-} from '@pdfme/common';
+import { Schema, Plugin, BasePdf } from '@pdfme/common';
 import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
-import { CSS } from "@dnd-kit/utilities";
+import { CSS } from '@dnd-kit/utilities';
 import Renderer from '../Renderer.js';
 import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
 import { PluginsRegistry } from '../../contexts.js';
-import PluginIcon from "./PluginIcon.js";
+import PluginIcon from './PluginIcon.js';
 
-
-const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
+const Draggable = (props: {
+  plugin: Plugin<any>;
+  scale: number;
+  basePdf: BasePdf;
+  children: React.ReactNode;
+}) => {
   const { scale, basePdf, plugin } = props;
   const { token } = theme.useToken();
   const defaultSchema = plugin.propPanel.defaultSchema as Schema;
   const draggable = useDraggable({ id: defaultSchema.type, data: defaultSchema });
   const { listeners, setNodeRef, attributes, transform, isDragging } = draggable;
-  const style = { transform: CSS.Translate.toString(transform) }
+  const style = { transform: CSS.Translate.toString(transform) };
 
   return (
     <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {isDragging &&
+      {isDragging && (
         <div style={{ transform: `scale(${scale})` }}>
           <Renderer
             schema={{ ...defaultSchema, id: defaultSchema.type }}
             basePdf={basePdf}
             value={defaultSchema.content || ''}
-            onChangeHoveringSchemaId={() => { void 0 }}
+            onChangeHoveringSchemaId={() => {
+              void 0;
+            }}
             mode={'viewer'}
             outline={`1px solid ${token.colorPrimary}`}
             scale={scale}
           />
         </div>
-      }
-      <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>
-        {props.children}
-      </div>
+      )}
+      <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>{props.children}</div>
     </div>
   );
-}
+};
 
-const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
+const LeftSidebar = ({
+  height,
+  scale,
+  basePdf,
+}: {
+  height: number;
+  scale: number;
+  basePdf: BasePdf;
+}) => {
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
   const [isDragging, setIsDragging] = useState(false);
@@ -62,36 +70,36 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
     };
   }, [isDragging]);
 
-  return <div
-    style={{
-      left: 0,
-      right: 0,
-      position: 'absolute',
-      zIndex: 1,
-      height,
-      width: LEFT_SIDEBAR_WIDTH,
-      background: token.colorBgLayout,
-      textAlign: 'center',
-      overflow: isDragging ? 'visible' : 'auto',
-    }}
-  >
-    {Object.entries(pluginsRegistry).map(([label, plugin]) => {
-      if (!plugin?.propPanel.defaultSchema) return null;
+  return (
+    <div
+      style={{
+        left: 0,
+        right: 0,
+        position: 'absolute',
+        zIndex: 1,
+        height,
+        width: LEFT_SIDEBAR_WIDTH,
+        background: token.colorBgLayout,
+        textAlign: 'center',
+        overflow: isDragging ? 'visible' : 'auto',
+      }}
+    >
+      {Object.entries(pluginsRegistry).map(([label, plugin]) => {
+        if (!plugin?.propPanel.defaultSchema) return null;
 
-      return <Draggable
-        key={label}
-        scale={scale}
-        basePdf={basePdf}
-        plugin={plugin}>
-        <Button
-          onMouseDown={() => setIsDragging(true)}
-          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
-        >
-          <PluginIcon plugin={plugin} label={label} />
-        </Button>
-      </Draggable>
-    })}
-  </div>
-}
+        return (
+          <Draggable key={label} scale={scale} basePdf={basePdf} plugin={plugin}>
+            <Button
+              onMouseDown={() => setIsDragging(true)}
+              style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
+            >
+              <PluginIcon plugin={plugin} label={label} />
+            </Button>
+          </Draggable>
+        );
+      })}
+    </div>
+  );
+};
 
-export default LeftSidebar
+export default LeftSidebar;

package/src/components/Designer/PluginIcon.tsx

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
-import { Plugin } from "@pdfme/common";
+import { Plugin } from '@pdfme/common';
 import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
 
-
 interface PluginIconProps {
   plugin: Plugin<any>;
   label: string;
@@ -11,7 +10,12 @@ interface PluginIconProps {
   styles?: React.CSSProperties;
 }
 
-const getWithModifiedSize = (htmlString: string, label: string, size: number, styles?: React.CSSProperties) => {
+const getWithModifiedSize = (
+  htmlString: string,
+  label: string,
+  size: number,
+  styles?: React.CSSProperties,
+) => {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlString, 'text/html');
 
@@ -20,10 +24,10 @@ const getWithModifiedSize = (htmlString: string, label: string, size: number, st
       node.setAttribute('width', size.toString());
       node.setAttribute('height', size.toString());
     }
-    Array.from(node.children).forEach(child => modifyNode(child as HTMLElement));
+    Array.from(node.children).forEach((child) => modifyNode(child as HTMLElement));
   };
 
-  Array.from(doc.body.children).forEach(child => modifyNode(child as HTMLElement));
+  Array.from(doc.body.children).forEach((child) => modifyNode(child as HTMLElement));
 
   return (
     <div style={styles} title={label} dangerouslySetInnerHTML={{ __html: doc.body.innerHTML }} />
@@ -35,16 +39,25 @@ const PluginIcon = (props: PluginIconProps) => {
   const { token } = theme.useToken();
   const options = useContext(OptionsContext);
   const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
-  const iconStyles = { ...styles, color: token.colorText, display: 'flex', justifyContent: 'center' };
+  const iconStyles = {
+    ...styles,
+    color: token.colorText,
+    display: 'flex',
+    justifyContent: 'center',
+  };
 
   if (icon) {
     if (size) {
       return getWithModifiedSize(icon, label, size, iconStyles);
     }
-    return <div style={iconStyles} title={label} dangerouslySetInnerHTML={{ __html: icon }} />
+    return <div style={iconStyles} title={label} dangerouslySetInnerHTML={{ __html: icon }} />;
   }
 
-  return <div style={{ ...styles, overflow: 'hidden', fontSize: 10, }} title={label} >{label}</div>
+  return (
+    <div style={{ ...styles, overflow: 'hidden', fontSize: 10 }} title={label}>
+      {label}
+    </div>
+  );
 };
 
 export default PluginIcon;

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -10,7 +10,7 @@ import {
   AlignEndHorizontal,
   AlignVerticalSpaceAround,
   AlignHorizontalSpaceAround,
-} from 'lucide-react'
+} from 'lucide-react';
 import { round } from '../../../../helper.js';
 
 const AlignWidget = (props: PropPanelWidgetProps) => {
@@ -44,7 +44,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
         key: `position.${tgtPos}`,
         value: round(basePos - adjust(as[tgtSize]), 2),
         schemaId: as.id,
-      }))
+      })),
     );
   };
 
@@ -72,7 +72,7 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
         prev += index === 0 ? 0 : ass[index - 1][tgtSize] + unit;
         const value = round(boxPos + prev, 2);
         return { key: `position.${tgtPos}`, value, schemaId: as.id };
-      })
+      }),
     );
   };
   const layoutBtns: {
@@ -80,47 +80,47 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     icon: React.JSX.Element;
     onClick: () => void;
   }[] = [
-      {
-        id: 'left',
-        icon: <AlignStartVertical size={15} />,
-        onClick: () => align('left')
-      },
-      {
-        id: 'center',
-        icon: <AlignCenterVertical size={15} />,
-        onClick: () => align('center')
-      },
-      {
-        id: 'right',
-        icon: <AlignEndVertical size={15} />,
-        onClick: () => align('right')
-      },
-      {
-        id: 'top',
-        icon: <AlignStartHorizontal size={15} />,
-        onClick: () => align('top')
-      },
-      {
-        id: 'middle',
-        icon: <AlignCenterHorizontal size={15} />,
-        onClick: () => align('middle')
-      },
-      {
-        id: 'bottom',
-        icon: <AlignEndHorizontal size={15} />,
-        onClick: () => align('bottom')
-      },
-      {
-        id: 'vertical',
-        icon: <AlignVerticalSpaceAround size={15} />,
-        onClick: () => distribute('vertical')
-      },
-      {
-        id: 'horizontal',
-        icon: <AlignHorizontalSpaceAround size={15} />,
-        onClick: () => distribute('horizontal')
-      },
-    ];
+    {
+      id: 'left',
+      icon: <AlignStartVertical size={15} />,
+      onClick: () => align('left'),
+    },
+    {
+      id: 'center',
+      icon: <AlignCenterVertical size={15} />,
+      onClick: () => align('center'),
+    },
+    {
+      id: 'right',
+      icon: <AlignEndVertical size={15} />,
+      onClick: () => align('right'),
+    },
+    {
+      id: 'top',
+      icon: <AlignStartHorizontal size={15} />,
+      onClick: () => align('top'),
+    },
+    {
+      id: 'middle',
+      icon: <AlignCenterHorizontal size={15} />,
+      onClick: () => align('middle'),
+    },
+    {
+      id: 'bottom',
+      icon: <AlignEndHorizontal size={15} />,
+      onClick: () => align('bottom'),
+    },
+    {
+      id: 'vertical',
+      icon: <AlignVerticalSpaceAround size={15} />,
+      onClick: () => distribute('vertical'),
+    },
+    {
+      id: 'horizontal',
+      icon: <AlignHorizontalSpaceAround size={15} />,
+      onClick: () => distribute('horizontal'),
+    },
+  ];
 
   return (
     <Form.Item label={schema.title}>

package/src/components/Designer/RightSidebar/DetailView/ButtonGroupWidget.tsx

@@ -22,7 +22,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
         const oldValue = s[key] ?? false;
         const newValue = type === 'boolean' ? !oldValue : btn.value;
         return { key, value: newValue, schemaId: s.id };
-      })
+      }),
     );
   };
 
@@ -33,7 +33,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const ids = activeElements.map((ae) => ae.id);
     const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
     ass.forEach((s: Record<string, any>) => {
-      active = type === 'boolean' ? s[key] ?? false : s[key] === btn.value;
+      active = type === 'boolean' ? (s[key] ?? false) : s[key] === btn.value;
     });
     return active;
   };
@@ -43,7 +43,7 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
 
   const svgIcon = (svgString: string) => {
     const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(
-      replaceCurrentColor(svgString, token.colorText)
+      replaceCurrentColor(svgString, token.colorText),
     )}`;
     return <img width={17} height={17} src={svgDataUrl} />;
   };

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

@@ -1,6 +1,12 @@
 import { useForm } from 'form-render';
 import React, { useRef, useContext, useState, useEffect } from 'react';
-import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
+import type {
+  ChangeSchemaItem,
+  Dict,
+  SchemaForUI,
+  PropPanelWidgetProps,
+  PropPanelSchema,
+} from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
@@ -9,15 +15,22 @@ import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget.js';
 import WidgetRenderer from './WidgetRenderer.js';
 import ButtonGroupWidget from './ButtonGroupWidget.js';
-import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface.js";
+import { InternalNamePath, ValidateErrorEntity } from 'rc-field-form/es/interface.js';
 
 // Import FormRender as a default import
 import FormRenderComponent from 'form-render';
 
 const { Text } = Typography;
 
-type DetailViewProps = Pick<SidebarProps,
-  'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+type DetailViewProps = Pick<
+  SidebarProps,
+  | 'size'
+  | 'schemas'
+  | 'schemasList'
+  | 'pageSize'
+  | 'changeSchemas'
+  | 'activeElements'
+  | 'deselectSchema'
 > & {
   activeSchema: SchemaForUI;
 };
@@ -64,11 +77,11 @@ const DetailView = (props: DetailViewProps) => {
 
   useEffect(() => {
     const values: any = { ...activeSchema };
-    values.editable = !(values.readOnly)
+    values.editable = !values.readOnly;
     form.setValues(values);
   }, [activeSchema, form]);
 
-  useEffect(() => form.resetFields(), [activeSchema.id])
+  useEffect(() => form.resetFields(), [activeSchema.id]);
 
   useEffect(() => {
     uniqueSchemaName.current = (value: string): boolean => {
@@ -85,7 +98,8 @@ const DetailView = (props: DetailViewProps) => {
 
   const uniqueSchemaName = useRef((value: string): boolean => true);
 
-  const validateUniqueSchemaName = (_: any, value: string): boolean => uniqueSchemaName.current(value)
+  const validateUniqueSchemaName = (_: any, value: string): boolean =>
+    uniqueSchemaName.current(value);
 
   const handleWatch = debounce((formSchema: any) => {
     const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
@@ -93,7 +107,7 @@ const DetailView = (props: DetailViewProps) => {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
       }
       return formValue !== schemaValue;
-    }
+    };
 
     let changes: ChangeSchemaItem[] = [];
     for (const key in formSchema) {
@@ -121,15 +135,17 @@ const DetailView = (props: DetailViewProps) => {
 
     if (changes.length) {
       // Only commit these schema changes if they have passed form validation
-      form.validateFields()
+      form
+        .validateFields()
         .then(() => changeSchemas(changes))
         .catch((reason: ValidateErrorEntity) => {
           if (reason.errorFields.length) {
-            changes = changes.filter((change: ChangeSchemaItem) => !reason.errorFields.find((field: {
-              name: InternalNamePath;
-              errors: string[];
-            }) => field.name.includes(change.key)
-            ));
+            changes = changes.filter(
+              (change: ChangeSchemaItem) =>
+                !reason.errorFields.find((field: { name: InternalNamePath; errors: string[] }) =>
+                  field.name.includes(change.key),
+                ),
+            );
           }
           if (changes.length) {
             changeSchemas(changes);
@@ -139,7 +155,7 @@ const DetailView = (props: DetailViewProps) => {
   }, 100);
 
   const activePlugin = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type
+    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type,
   )!;
 
   const activePropPanelSchema = activePlugin?.propPanel.schema;
@@ -171,14 +187,26 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         type: 'string',
         required: true,
         span: 12,
-        rules: [{
-          validator: validateUniqueSchemaName,
-          message: i18n('validation.uniqueName'),
-        }],
-        props: { autoComplete: "off" }
+        rules: [
+          {
+            validator: validateUniqueSchemaName,
+            message: i18n('validation.uniqueName'),
+          },
+        ],
+        props: { autoComplete: 'off' },
+      },
+      editable: {
+        title: i18n('editable'),
+        type: 'boolean',
+        span: 8,
+        hidden: defaultSchema?.readOnly !== undefined,
+      },
+      required: {
+        title: i18n('required'),
+        type: 'boolean',
+        span: 16,
+        hidden: '{{!formData.editable}}',
       },
-      editable: { title: i18n('editable'), type: 'boolean', span: 8, hidden: defaultSchema?.readOnly !== undefined },
-      required: { title: i18n('required'), type: 'boolean', span: 16, hidden: "{{!formData.editable}}" },
       '-': { type: 'void', widget: 'Divider' },
       align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
       position: {
@@ -187,7 +215,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         properties: {
           x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
           y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
-        }
+        },
       },
       width: {
         title: i18n('width'),

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 import { I18nContext } from '../../../../contexts.js';
-import { GripVertical, CircleAlert, Lock } from 'lucide-react'
+import { GripVertical, CircleAlert, Lock } from 'lucide-react';
 import { Button, Typography } from 'antd';
 
 const { Text } = Typography;
@@ -48,7 +48,7 @@ const Item = React.memo(
         transform,
         ...props
       },
-      ref
+      ref,
     ) => {
       const i18n = useContext(I18nContext);
 
@@ -125,8 +125,8 @@ const Item = React.memo(
           </div>
         </li>
       );
-    }
-  )
+    },
+  ),
 );
 
 export default Item;