@pdfme/ui 4.2.4-dev.11 → 4.2.4-dev.12

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" | "hexColorPrompt" | "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" | "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;
@@ -25,7 +25,8 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     addPageAfter: string;
     removePage: string;
     removePageConfirm: string;
-    hexColorPrompt: string;
+    'validation.uniqueName': string;
+    'validation.hexColor': string;
     'schemas.color': string;
     'schemas.borderWidth': string;
     'schemas.borderColor': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.2.4-dev.11",
+  "version": "4.2.4-dev.12",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

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

@@ -1,10 +1,10 @@
 import FormRender, { useForm } from 'form-render';
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useRef, useContext, useState, useEffect } from 'react';
 import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
 import { MenuOutlined } from '@ant-design/icons';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts';
-import { getSidebarContentHeight } from '../../../../helper';
+import { getSidebarContentHeight, debounce } from '../../../../helper';
 import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget';
 import WidgetRenderer from './WidgetRenderer';
@@ -22,7 +22,7 @@ type DetailViewProps = Pick<SidebarProps,
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, changeSchemas, deselectSchema, activeSchema } = props;
+  const { size, schemas, changeSchemas, deselectSchema, activeSchema } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
@@ -66,15 +66,28 @@ const DetailView = (props: DetailViewProps) => {
     values.y = values.position.y;
     delete values.position;
 
-    if (values.key !== (form.getValues() || {}).key) {
-      form.resetFields();
-    }
-
     form.setValues(values);
 
   }, [activeSchema, form]);
 
-  const handleWatch = (formSchema: any) => {
+  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;
+        }
+      }
+      return true;
+    };
+  }, [schemas, activeSchema]);
+
+  const uniqueSchemaKey = useRef((value: string): boolean => true);
+
+  const validateUniqueSchemaKey = (_: any, value: string): boolean => uniqueSchemaKey.current(value)
+
+  const handleWatch = debounce((formSchema: any) => {
     const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
       if (typeof formValue === 'object') {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
@@ -122,7 +135,7 @@ const DetailView = (props: DetailViewProps) => {
           }
         });
     }
-  };
+  }, 500);
 
   const activePlugin = Object.values(pluginsRegistry).find(
     (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type
@@ -152,7 +165,17 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         required: true,
         span: 12,
       },
-      key: { title: i18n('fieldName'), type: 'string', required: true, span: 12, props: { autocomplete: "off"} },
+      key: {
+        title: i18n('fieldName'),
+        type: 'string',
+        required: true,
+        span: 12,
+        rules: [{
+          validator: validateUniqueSchemaKey,
+          message: i18n('validation.uniqueName'),
+        }],
+        props: { autocomplete: "off" }
+      },
       required: { title: i18n('required'), type: 'boolean', span: 8, hidden: defaultSchema?.readOnly },
       '-': { type: 'void', widget: 'Divider' },
       align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
@@ -255,7 +278,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 };
 
 const propsAreUnchanged = (prevProps: DetailViewProps, nextProps: DetailViewProps) => {
-  return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema)
+  return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema);
 };
 
 export default React.memo(DetailView, propsAreUnchanged);

package/src/components/Designer/index.tsx

@@ -162,11 +162,20 @@ const TemplateEditor = ({
     const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [0, 0, 0, 0];
     const pageSize = pageSizes[pageCursor];
 
+    const newSchemaKey = (prefix: string) => {
+      let keyNum = schemasList[pageCursor].length + 1;
+      let newKey = prefix + keyNum;
+      while (schemasList[pageCursor].find((s) => s.key === newKey)) {
+        keyNum++;
+        newKey = prefix + keyNum;
+      }
+      return newKey;
+    };
     const ensureMiddleValue = (min: number, value: number, max: number) => Math.min(Math.max(min, value), max)
 
     const s = {
       id: uuid(),
-      key: `${i18n('field')}${schemasList[pageCursor].length + 1}`,
+      key: newSchemaKey(i18n('field')),
       ...defaultSchema,
       position: {
         x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),

package/src/i18n.ts

@@ -27,7 +27,8 @@ const dictEn: { [key in keyof Dict]: string } = {
   addPageAfter: 'Add Page After',
   removePage: 'Remove Current Page',
   removePageConfirm: 'Are you sure you want to delete this page? This action cannot be undone.',
-  hexColorPrompt: 'Please enter a valid hex color code.',
+  'validation.hexColor': 'Please enter a valid hex color code.',
+  'validation.uniqueName': 'Please enter a unique name.',
   'schemas.color': 'Color',
   'schemas.borderWidth': 'Border Width',
   'schemas.borderColor': 'Border Color',
@@ -91,7 +92,8 @@ const dictZh: { [key in keyof Dict]: string } = {
   addPageAfter: '在之后添加页面',
   removePage: '删除当前页面',
   removePageConfirm: '您确定要删除此页面吗？此操作无法撤销。',
-  hexColorPrompt: '请输入有效的十六进制颜色代码。',
+  'validation.hexColor': '请输入有效的十六进制颜色代码。',
+  'validation.uniqueName': '请输入一个唯一的名称。',
   'schemas.color': '颜色',
   'schemas.borderWidth': '边框宽度',
   'schemas.borderColor': '边框颜色',
@@ -155,7 +157,8 @@ const dictJa: { [key in keyof Dict]: string } = {
   addPageAfter: '次にページを追加',
   removePage: '現在のページを削除',
   removePageConfirm: 'ページを削除してもよろしいですか？この操作は元に戻せません。',
-  hexColorPrompt: '有効な16進数のカラーコードを入力してください。',
+  'validation.hexColor': '有効な16進数のカラーコードを入力してください。',
+  'validation.uniqueName': '一意の名前を入力してください。',
   'schemas.color': '色',
   'schemas.borderWidth': '枠線の太さ',
   'schemas.borderColor': '枠線の色',
@@ -219,7 +222,8 @@ const dictKo: { [key in keyof Dict]: string } = {
   addPageAfter: '다음에 페이지 추가',
   removePage: '현재 페이지 제거',
   removePageConfirm: '이 페이지를 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.',
-  hexColorPrompt: '유효한 16진수 색상 코드를 입력하세요.',
+  'validation.hexColor': '유효한 16진수 색상 코드를 입력하세요.',
+  'validation.uniqueName': '고유한 이름을 입력하세요.',
   'schemas.color': '색상',
   'schemas.borderWidth': '테두리 너비',
   'schemas.borderColor': '테두리 색상',
@@ -283,7 +287,8 @@ const dictAr: { [key in keyof Dict]: string } = {
   addPageAfter: 'إضافة صفحة بعد',
   removePage: 'احذف الصفحة الحالية',
   removePageConfirm: 'هل أنت متأكد من رغبتك في حذف هذه الصفحة؟ لا يمكن التراجع عن هذا الإجراء.',
-  hexColorPrompt: 'الرجاء إدخال رمز لون سداسي عشري صالح.',
+  'validation.hexColor': 'الرجاء إدخال رمز لون سداسي عشري صالح.',
+  'validation.uniqueName': 'الرجاء إدخال اسم فريد.',
   'schemas.color': 'اللون',
   'schemas.borderWidth': 'عرض الحدود',
   'schemas.borderColor': 'لون الحدود',
@@ -347,7 +352,8 @@ const dictTh: { [key in keyof Dict]: string } = {
   addPageAfter: 'เพิ่มหน้าถัดไป',
   removePage: 'ลบหน้าปัจจุบัน',
   removePageConfirm: 'คุณแน่ใจหรือไม่ว่าต้องการลบหน้านี้? การกระทำนี้ไม่สามารถย้อนกลับได้',
-  hexColorPrompt: 'กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง',
+  'validation.hexColor': 'กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง',
+  'validation.uniqueName': 'กรุณาระบุชื่อที่ไม่ซ้ำ',
   'schemas.color': 'สี',
   'schemas.borderWidth': 'ความกว้างของเส้นขอบ',
   'schemas.borderColor': 'สีขอบ',
@@ -413,7 +419,8 @@ const dictIt: { [key in keyof Dict]: string } = {
   removePage: 'Rimuovi la Pagina Corrente',
   removePageConfirm:
     'Sei sicuro di voler eliminare questa pagina? Questa azione non può essere annullata.',
-  hexColorPrompt: 'Inserisci un codice colore esadecimale valido.',
+  'validation.hexColor': 'Inserisci un codice colore esadecimale valido.',
+  'validation.uniqueName': 'Inserisci un nome univoco.',
   'schemas.color': 'Colore',
   'schemas.borderWidth': 'Spessore bordo',
   'schemas.borderColor': 'Colore bordo',
@@ -477,7 +484,8 @@ const dictPl: { [key in keyof Dict]: string } = {
   addPageAfter: 'Dodaj stronę po',
   removePage: 'Usuń Bieżącą Stronę',
   removePageConfirm: 'Czy na pewno chcesz usunąć tę stronę? Tej operacji nie można cofnąć.',
-  hexColorPrompt: 'Wprowadź poprawny kod koloru szesnastkowego.',
+  'validation.hexColor': 'Wprowadź poprawny kod koloru szesnastkowego.',
+  'validation.uniqueName': 'Proszę wpisać unikalną nazwę.',
   'schemas.color': 'Kolor',
   'schemas.borderWidth': 'Szerokość obramowania',
   'schemas.borderColor': 'Kolor obramowania',
@@ -543,7 +551,8 @@ const dictDe: { [key in keyof Dict]: string } = {
   removePage: 'Aktuelle Seite entfernen',
   removePageConfirm:
     'Sind Sie sicher, dass Sie diese Seite löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.',
-  hexColorPrompt: 'Bitte geben Sie einen gültigen Hex-Farbcode ein.',
+  'validation.hexColor': 'Bitte geben Sie einen gültigen Hex-Farbcode ein.',
+  'validation.uniqueName': 'Bitte geben Sie einen eindeutigen Namen ein.',
   'schemas.color': 'Farbe',
   'schemas.borderWidth': 'Rahmenbreite',
   'schemas.borderColor': 'Rahmenfarbe',
@@ -609,7 +618,8 @@ const dictEs: { [key in keyof Dict]: string } = {
   removePage: 'Eliminar página actual',
   removePageConfirm:
     '¿Estás seguro de que quieres eliminar esta página? Esta acción no se puede deshacer.',
-  hexColorPrompt: 'Introduce un código de color hexadecimal válido.',
+  'validation.hexColor': 'Introduce un código de color hexadecimal válido.',
+  'validation.uniqueName': 'Por favor, introduzca un nombre único.',
   'schemas.color': 'Color',
   'schemas.borderWidth': 'Ancho del borde',
   'schemas.borderColor': 'Color del borde',
@@ -673,7 +683,8 @@ const dictFr: { [key in keyof Dict]: string } = {
   addPageAfter: 'Ajouter une page après',
   removePage: 'Supprimer la page actuelle',
   removePageConfirm: 'Êtes-vous sûr de vouloir supprimer cette page ? Cette action est irréversible.',
-  hexColorPrompt: 'Veuillez entrer un code couleur hexadécimal valide.',
+  'validation.hexColor': 'Veuillez entrer un code couleur hexadécimal valide.',
+  'validation.uniqueName': 'Veuillez saisir un nom unique.',
   'schemas.color': 'Couleur',
   'schemas.borderWidth': 'Largeur de la bordure',
   'schemas.borderColor': 'Couleur de la bordure',