@pdfme/ui 4.2.5 → 4.3.0

package/dist/types/components/Designer/RightSidebar/DetailView/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SchemaForUI } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
-type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
+type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
 };
 declare const _default: React.MemoExoticComponent<(props: DetailViewProps) => React.JSX.Element>;

package/dist/types/components/Designer/RightSidebar/ListView/Item.d.ts

@@ -7,6 +7,7 @@ interface Props {
     status?: 'is-warning' | 'is-danger';
     title?: string;
     required?: boolean;
+    readOnly?: boolean;
     dragOverlay?: boolean;
     onClick?: () => void;
     onMouseEnter?: () => void;

package/dist/types/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
+export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "field" | "fieldName" | "align" | "edit" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
@@ -11,6 +11,7 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     rotate: string;
     edit: string;
     required: string;
+    editable: string;
     plsInputName: string;
     fieldMustUniq: string;
     notUniq: string;

package/dist/types/types.d.ts

@@ -7,6 +7,7 @@ export type SidebarProps = {
     pageSize: Size;
     activeElements: HTMLElement[];
     schemas: SchemaForUI[];
+    schemasList: SchemaForUI[][];
     onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
     onEdit: (id: string) => void;
     onEditEnd: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.2.5",
+  "version": "4.3.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/PluginIcon.tsx

@@ -38,10 +38,10 @@ const PluginIcon = (props: PluginIconProps) => {
     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, }}>{label}</div>
+  return <div style={{ ...styles, overflow: 'hidden', fontSize: 10, }} title={label} >{label}</div>
 };
 
 export default PluginIcon;

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

@@ -14,7 +14,7 @@ import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interfac
 const { Text } = Typography;
 
 type DetailViewProps = Pick<SidebarProps,
-  'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+  'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
 > & {
   activeSchema: SchemaForUI;
 };
@@ -22,7 +22,7 @@ type DetailViewProps = Pick<SidebarProps,
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, schemas, changeSchemas, deselectSchema, activeSchema } = props;
+  const { size, schemasList, changeSchemas, deselectSchema, activeSchema } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
@@ -61,27 +61,24 @@ const DetailView = (props: DetailViewProps) => {
 
   useEffect(() => {
     const values: any = { ...activeSchema };
-    // [position] Change the nested position object into a flat, as a three-column layout is difficult to implement
-    values.x = values.position.x;
-    values.y = values.position.y;
-    delete values.position;
-
+    values.editable = !(values.readOnly)
     form.setValues(values);
-
   }, [activeSchema, form]);
 
   useEffect(() => form.resetFields(), [activeSchema.id])
 
   useEffect(() => {
     uniqueSchemaKey.current = (value: string): boolean => {
-      for (const s of Object.values(schemas)) {
-        if (s.key === value && s.id !== activeSchema.id) {
-          return false;
+      for (const page of schemasList) {
+        for (const s of Object.values(page)) {
+          if (s.key === value && s.id !== activeSchema.id) {
+            return false;
+          }
         }
       }
       return true;
     };
-  }, [schemas, activeSchema]);
+  }, [schemasList, activeSchema]);
 
   const uniqueSchemaKey = useRef((value: string): boolean => true);
 
@@ -96,23 +93,24 @@ const DetailView = (props: DetailViewProps) => {
     }
 
     let changes: ChangeSchemaItem[] = [];
-    for (let key in formSchema) {
+    for (const key in formSchema) {
       if (['id', 'content'].includes(key)) continue;
 
       let value = formSchema[key];
-      let changed = false;
-
-      if (['x', 'y'].includes(key)) {
-        // [position] Return the flattened position to its original form.
-        changed = value !== (activeSchema as any)['position'][key];
-        key = 'position.' + key;
-      } else {
-        changed = formAndSchemaValuesDiffer(value, (activeSchema as any)[key]);
-      }
-
-      if (changed) {
+      if (formAndSchemaValuesDiffer(value, (activeSchema as any)[key])) {
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
-        if (value === null && ['rotate', 'opacity'].includes(key)) value = undefined;
+        if (value === null && ['rotate', 'opacity'].includes(key)) {
+          value = undefined;
+        }
+
+        if (key === 'editable') {
+          const readOnlyValue = !value;
+          changes.push({ key: 'readOnly', value: readOnlyValue, schemaId: activeSchema.id });
+          if (readOnlyValue) {
+            changes.push({ key: 'required', value: false, schemaId: activeSchema.id });
+          }
+          continue;
+        }
 
         changes.push({ key, value, schemaId: activeSchema.id });
       }
@@ -135,7 +133,7 @@ const DetailView = (props: DetailViewProps) => {
           }
         });
     }
-  }, 500);
+  }, 100);
 
   const activePlugin = Object.values(pluginsRegistry).find(
     (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type
@@ -174,28 +172,26 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           validator: validateUniqueSchemaKey,
           message: i18n('validation.uniqueName'),
         }],
-        props: { autocomplete: "off" }
+        props: { autoComplete: "off" }
       },
-      required: { title: i18n('required'), type: 'boolean', span: 8, hidden: defaultSchema?.readOnly },
+      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' },
-      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 },
-      rotate: {
-        title: i18n('rotate'),
-        type: 'number',
-        widget: 'inputNumber',
-        disabled: defaultSchema?.rotate === undefined,
-        max: 360,
-        props: { min: 0 },
-        span: 8,
+      position: {
+        type: 'object',
+        widget: 'card',
+        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'),
         type: 'number',
         widget: 'inputNumber',
         required: true,
-        span: 8,
+        span: 6,
         props: { min: 0 },
       },
       height: {
@@ -203,24 +199,35 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         type: 'number',
         widget: 'inputNumber',
         required: true,
-        span: 8,
+        span: 6,
         props: { min: 0 },
       },
+      rotate: {
+        title: i18n('rotate'),
+        type: 'number',
+        widget: 'inputNumber',
+        disabled: defaultSchema?.rotate === undefined,
+        max: 360,
+        props: { min: 0 },
+        span: 6,
+      },
       opacity: {
         title: i18n('opacity'),
         type: 'number',
         widget: 'inputNumber',
         disabled: defaultSchema?.opacity === undefined,
         props: { step: 0.1, min: 0, max: 1 },
-        span: 8,
+        span: 6,
       },
     },
   };
 
   if (typeof activePropPanelSchema === 'function') {
+    const { schemasList: _, ...propPanelProps } = props;
+
     const apps =
       activePropPanelSchema({
-        ...props,
+        ...propPanelProps,
         options,
         theme: token,
         i18n: i18n as (key: keyof Dict | string) => string,

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';
-import { HolderOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { HolderOutlined, ExclamationCircleOutlined, LockOutlined } from '@ant-design/icons';
 import { Button, Typography } from 'antd';
 
 const { Text } = Typography;
@@ -13,6 +13,7 @@ interface Props {
   status?: 'is-warning' | 'is-danger';
   title?: string;
   required?: boolean;
+  readOnly?: boolean;
   dragOverlay?: boolean;
   onClick?: () => void;
   onMouseEnter?: () => void;
@@ -33,6 +34,7 @@ const Item = React.memo(
         status,
         title,
         required,
+        readOnly,
         style,
         dragOverlay,
         onClick,
@@ -116,6 +118,7 @@ const Item = React.memo(
                   {status === 'is-danger' ? i18n('notUniq') : ''}
                 </span>
               )}
+              {readOnly && <LockOutlined style={{ marginLeft: '0.5rem' }} />}
               {required && <span style={{ color: 'red', marginLeft: '0.5rem' }}>*</span>}
             </Text>
           </div>

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

@@ -58,7 +58,7 @@ const SelectableSortableContainer = (
     }
   };
 
-  const getPluginIcon = (inSchema: string|SchemaForUI): ReactNode => {
+  const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
     const thisSchema = (typeof inSchema === 'string') ? schemas.find((schema) => schema.id === inSchema) : inSchema;
 
     const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
@@ -69,7 +69,7 @@ const SelectableSortableContainer = (
       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 (
@@ -133,9 +133,8 @@ 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}
@@ -152,31 +151,39 @@ const SelectableSortableContainer = (
         {createPortal(
           <DragOverlay adjustScale>
             {activeId ? (
-              <>
-                <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                  <Item
-                    icon={getPluginIcon(activeId)}
-                    value={schemas.find((schema) => schema.id === activeId)!.key}
-                    required={schemas.find((schema) => schema.id === activeId)!.required}
-                    style={{ background: token.colorPrimary }}
-                    dragOverlay
-                  />
-                </ul>
-                <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                  {selectedSchemas
-                    .filter((item) => item.id !== activeId)
-                    .map((item) => (
+              (() => {
+                const activeSchema = schemas.find((schema) => schema.id === activeId);
+                if (!activeSchema) return null;
+                return (
+                  <>
+                    <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                       <Item
-                        icon={getPluginIcon(item)}
-                        key={item.id}
-                        value={item.key}
-                        required={item.required}
+                        icon={getPluginIcon(activeId)}
+                        value={activeSchema.key}
+                        required={activeSchema.required}
+                        readOnly={activeSchema.readOnly}
                         style={{ background: token.colorPrimary }}
                         dragOverlay
                       />
-                    ))}
-                </ul>
-              </>
+                    </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.key}
+                            required={item.required}
+                            readOnly={item.readOnly}
+                            style={{ background: token.colorPrimary }}
+                            dragOverlay
+                          />
+                        ))}
+                    </ul>
+                  </>
+                );
+              })()
             ) : null}
           </DragOverlay>,
           document.body

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

@@ -77,6 +77,7 @@ const SelectableSortableItem = ({
       status={status}
       title={title}
       required={schema.required}
+      readOnly={schema.readOnly}
       style={{ ...selectedStyle, ...style }}
       dragging={isDragging}
       sorting={isSorting}

package/src/components/Designer/index.tsx

@@ -163,9 +163,9 @@ const TemplateEditor = ({
     const pageSize = pageSizes[pageCursor];
 
     const newSchemaKey = (prefix: string) => {
-      let keyNum = schemasList[pageCursor].length + 1;
+      let keyNum = schemasList.reduce((acc, page) => acc + page.length, 1);
       let newKey = prefix + keyNum;
-      while (schemasList[pageCursor].find((s) => s.key === newKey)) {
+      while (schemasList.some(page => page.find((s) => s.key === newKey))) {
         keyNum++;
         newKey = prefix + keyNum;
       }
@@ -298,6 +298,7 @@ const TemplateEditor = ({
           size={size}
           pageSize={pageSizes[pageCursor] ?? []}
           activeElements={activeElements}
+          schemasList={schemasList}
           schemas={schemasList[pageCursor] ?? []}
           changeSchemas={changeSchemas}
           onSortEnd={onSortEnd}

package/src/i18n.ts

@@ -11,6 +11,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   opacity: 'Opacity',
   rotate: 'Rotate',
   required: 'Required',
+  editable: 'Editable',
   edit: 'Edit',
   plsInputName: 'Please input name',
   fieldMustUniq: 'Name of field is not unique',
@@ -77,6 +78,7 @@ const dictZh: { [key in keyof Dict]: string } = {
   opacity: '透明度',
   rotate: '旋转',
   required: '必需的',
+  editable: '可编辑的',
   edit: '编辑',
   plsInputName: '请输入名称',
   fieldMustUniq: '字段名称必须唯一',
@@ -142,6 +144,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   opacity: '不透明度',
   rotate: '回転',
   required: '必須',
+  editable: '編集可能',
   edit: '編集する',
   plsInputName: '項目名を入力してください',
   fieldMustUniq: '他の入力項目名と被っています',
@@ -207,6 +210,7 @@ const dictKo: { [key in keyof Dict]: string } = {
   opacity: '투명도',
   rotate: '회전',
   required: '필수의',
+  editable: '편집 가능한',
   edit: '편집',
   plsInputName: '이름을 입력하세요',
   fieldMustUniq: '필드 이름은 유일해야 합니다',
@@ -272,6 +276,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   opacity: 'الشفافية',
   rotate: 'تدوير',
   required: 'مطلوب',
+  editable:'قابل للتحرير',
   edit: 'تعديل',
   plsInputName: 'الرجاء إدخال الاسم',
   fieldMustUniq: 'يجب أن يكون الحقل فريداً',
@@ -337,6 +342,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   opacity: 'ความทึบ',
   rotate: 'หมุน',
   required: 'ที่จำเป็น',
+  editable: 'แก้ไขได้',
   edit: 'แก้ไข',
   plsInputName: 'กรุณาใส่ชื่อ',
   fieldMustUniq: 'ชื่อฟิลด์ต้องไม่ซ้ำกัน',
@@ -402,6 +408,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   opacity: 'Opacità',
   rotate: 'Ruota',
   required: 'Necessaria',
+  editable: 'Modificabile',
   edit: 'Modifica',
   plsInputName: 'Inserisci il nome per favore',
   fieldMustUniq: 'Il nome del campo non è univoco',
@@ -469,6 +476,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   opacity: 'przezroczystość',
   rotate: 'Obrót',
   required: 'Wymagany',
+  editable: 'Edytowalny',
   edit: 'Edytuj',
   plsInputName: 'Wymagane wprowadzenie klucza pola',
   fieldMustUniq: 'Klucz pola nie jest unikalny',
@@ -534,6 +542,7 @@ const dictDe: { [key in keyof Dict]: string } = {
   opacity: 'Opazität',
   rotate: 'Drehen',
   required: 'Erforderlich',
+  editable: 'Bearbeitbar',
   edit: 'Bearbeiten',
   plsInputName: 'Bitte geben Sie einen Namen ein',
   fieldMustUniq: 'Feldname ist nicht eindeutig',
@@ -601,6 +610,7 @@ const dictEs: { [key in keyof Dict]: string } = {
   opacity: 'Opacidad',
   rotate: 'Rotar',
   required: 'Requerido',
+  editable: 'Editable',
   edit: 'Editar',
   plsInputName: 'Introduce el nombre',
   fieldMustUniq: 'El nombre del campo no es único',
@@ -668,6 +678,7 @@ const dictFr: { [key in keyof Dict]: string } = {
   opacity: 'Opacité',
   rotate: 'Rotation',
   required: 'Requis',
+  editable: 'Modifiable',
   edit: 'Éditer',
   plsInputName: 'Veuillez saisir le nom',
   fieldMustUniq:"Le nom du champ n'est pas unique",

package/src/types.ts

@@ -8,6 +8,7 @@ export type SidebarProps = {
   pageSize: Size;
   activeElements: HTMLElement[];
   schemas: SchemaForUI[];
+  schemasList: SchemaForUI[][];
   onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
   onEdit: (id: string) => void;
   onEditEnd: () => void;