@pdfme/ui 4.1.0-dev.6 → 4.1.1-dev.2

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" | "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.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" | "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?: {
     cancel: string;
     field: string;
     fieldName: string;
@@ -51,6 +51,9 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     'schemas.text.fit': string;
     'schemas.text.dynamicFontSize': string;
     'schemas.text.format': string;
+    'schemas.mvt.typingInstructions': string;
+    'schemas.mvt.sampleField': string;
+    'schemas.mvt.variablesSampleData': string;
     'schemas.barcodes.barColor': string;
     'schemas.barcodes.includetext': string;
     'schemas.table.alternateBackgroundColor': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.1.0-dev.6",
+  "version": "4.1.1-dev.2",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

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

@@ -1,6 +1,6 @@
 import FormRender, { useForm } from 'form-render';
 import React, { useContext, useEffect, useState } from 'react';
-import type { Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
+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';
@@ -9,6 +9,7 @@ import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget';
 import WidgetRenderer from './WidgetRenderer';
 import ButtonGroupWidget from './ButtonGroupWidget';
+import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface";
 
 const { Text } = Typography;
 
@@ -75,22 +76,39 @@ const DetailView = (
   }, [form, activeSchema]);
 
   const handleWatch = (newSchema: any) => {
-    const changes = [];
+    let changes: ChangeSchemaItem[] = [];
     for (let key in newSchema) {
       if (['id', 'content'].includes(key)) continue;
+
+      // [position] Return the flattened position to its original form.
+      if (key === 'x') key = 'position.x';
+      if (key === 'y') key = 'position.y';
+
       if (newSchema[key] !== (activeSchema as any)[key]) {
         let value = newSchema[key];
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
         if (value === null && ['rotate', 'opacity'].includes(key)) value = undefined;
 
-        // [position] Return the flattened position to its original form.
-        if (key === 'x') key = 'position.x';
-        if (key === 'y') key = 'position.y';
         changes.push({ key, value, schemaId: activeSchema.id });
       }
     }
+
     if (changes.length) {
-      changeSchemas(changes);
+      // Only commit these schema changes if they have passed form validation
+      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)
+            ));
+          }
+          if (changes.length) {
+            changeSchemas(changes);
+          }
+        });
     }
   };
 
@@ -120,9 +138,9 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: 'select',
         props: { options: typeOptions },
         required: true,
-        span: 10,
+        span: 12,
       },
-      key: { title: i18n('fieldName'), type: 'string', required: true, span: 14 },
+      key: { title: i18n('fieldName'), type: 'string', required: true, span: 12 },
       '-': { 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 },

package/src/components/Renderer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useContext, ReactNode, useRef } from 'react';
-import { Dict, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema } from '@pdfme/common';
+import React, { useEffect, useMemo, useContext, ReactNode, useRef } from 'react';
+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';
@@ -17,6 +17,27 @@ type RendererProps = Omit<
   scale: number;
 };
 
+type ReRenderCheckProps = {
+  plugin: Plugin<any>,
+  value: string,
+  mode: Mode,
+  scale: number,
+  schema: SchemaForUI,
+  options: UIOptions,
+}
+
+const useRerenderDependencies = ({ plugin, value, mode, scale, schema, options }: ReRenderCheckProps) => {
+  const dependencies = useMemo(() => {
+    if (plugin.uninterruptedEditMode && mode === 'designer') {
+      return [mode];
+    } else {
+      return [value, mode, scale, JSON.stringify(schema), JSON.stringify(options)];
+    }
+  }, [value, mode, scale, schema, options]);
+
+  return dependencies;
+};
+
 const Wrapper = ({
   children,
   outline,
@@ -56,20 +77,22 @@ const Renderer = (props: RendererProps) => {
 
   const ref = useRef<HTMLDivElement>(null);
   const _cache = useRef<Map<any, any>>(new Map());
+  const plugin = Object.values(pluginsRegistry).find(
+    (plugin) => plugin?.propPanel.defaultSchema.type === schema.type
+  ) as Plugin<any>;
 
-  useEffect(() => {
-    if (ref.current && schema.type) {
-      const render = Object.values(pluginsRegistry).find(
-        (plugin) => plugin?.propPanel.defaultSchema.type === schema.type
-      )?.ui;
-
-      if (!render) {
-        console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found.
+  if (!plugin || !plugin.ui) {
+    console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found. 
 Check this document: https://pdfme.com/docs/custom-schemas`);
-        return;
-      }
+    return <></>;
+  }
 
+  const reRenderDependencies = useRerenderDependencies({plugin, value, mode, scale, schema, options});
+
+  useEffect(() => {
+    if (ref.current && schema.type) {
       ref.current.innerHTML = '';
+      const render = plugin.ui;
 
       void render({
         key: schema.key,
@@ -79,7 +102,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         rootElement: ref.current,
         mode,
         onChange,
-        stopEditing: stopEditing,
+        stopEditing,
         tabIndex,
         placeholder,
         options,
@@ -94,7 +117,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         ref.current.innerHTML = '';
       }
     };
-  }, [value, JSON.stringify(schema), JSON.stringify(options), mode, scale]);
+  }, reRenderDependencies);
 
   return (
     <Wrapper {...props}>

package/src/i18n.ts

@@ -53,6 +53,9 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Fit',
   'schemas.text.dynamicFontSize': 'Dynamic Font Size',
   'schemas.text.format': 'Format',
+  'schemas.mvt.typingInstructions': 'Add variables by typing words surrounded by curly brackets, e.g.',
+  'schemas.mvt.sampleField': 'name',
+  'schemas.mvt.variablesSampleData': 'Variables Sample Data',
   'schemas.barcodes.barColor': 'Bar Color',
   'schemas.barcodes.includetext': 'Include Text',
   'schemas.table.alternateBackgroundColor': 'Alternate Background Color',
@@ -113,6 +116,9 @@ const dictZh: { [key in keyof Dict]: string } = {
   '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': '交替背景颜色',
@@ -173,6 +179,9 @@ const dictJa: { [key in keyof Dict]: string } = {
   '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': '交互の背景色',
@@ -233,6 +242,9 @@ const dictKo: { [key in keyof Dict]: string } = {
   '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': '대체 배경색',
@@ -293,6 +305,9 @@ const dictAr: { [key in keyof Dict]: string } = {
   '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': 'لون الخلفية البديل',
@@ -353,6 +368,9 @@ const dictTh: { [key in keyof Dict]: string } = {
   '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': 'สีพื้นหลังสลับกัน',
@@ -415,6 +433,9 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Adatta',
   'schemas.text.dynamicFontSize': 'Dimensione font dinamica',
   'schemas.text.format': 'Formato',
+  'schemas.mvt.typingInstructions': 'Aggiungi variabili digitando parole circondate da parentesi graffe, ad es.',
+  'schemas.mvt.sampleField': 'nome',
+  'schemas.mvt.variablesSampleData': 'Dati di esempio variabili',
   'schemas.barcodes.barColor': 'Colore barra',
   'schemas.barcodes.includetext': 'Includi testo',
   'schemas.table.alternateBackgroundColor': 'Colore di Sfondo Alternato',
@@ -475,6 +496,9 @@ const dictPl: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Dopasowanie',
   'schemas.text.dynamicFontSize': 'Dynamiczny rozmiar czcionki',
   'schemas.text.format': 'Format',
+  'schemas.mvt.typingInstructions': 'Dodaj zmienne, wpisując słowa ujęte w nawiasy klamrowe, np.',
+  'schemas.mvt.sampleField': 'nazwa',
+  'schemas.mvt.variablesSampleData': 'Zmienne Przykładowe dane',
   'schemas.barcodes.barColor': 'Kolor paska',
   'schemas.barcodes.includetext': 'Dołącz tekst',
   'schemas.table.alternateBackgroundColor': 'Alternatywny kolor tła',
@@ -537,6 +561,9 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Anpassen',
   'schemas.text.dynamicFontSize': 'Dynamische Schriftgröße',
   'schemas.text.format': 'Format',
+  'schemas.mvt.typingInstructions': 'Fügen Sie Variablen hinzu, indem Sie Wörter in geschweiften Klammern eingeben, z. B.',
+  'schemas.mvt.sampleField': 'Name',
+  'schemas.mvt.variablesSampleData': 'Variablen Beispieldaten',
   'schemas.barcodes.barColor': 'Strichcodefarbe',
   'schemas.barcodes.includetext': 'Text anzeigen',
   'schemas.table.alternateBackgroundColor': 'Wechselnde Hintergrundfarbe',
@@ -599,6 +626,9 @@ const dictEs: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Ajustar',
   'schemas.text.dynamicFontSize': 'Tamaño de fuente dinámico',
   'schemas.text.format': 'Formato',
+  'schemas.mvt.typingInstructions': 'Agregue variables escribiendo palabras entre llaves, p.',
+  'schemas.mvt.sampleField': 'nombre',
+  'schemas.mvt.variablesSampleData': 'Variables Datos de muestra',
   'schemas.barcodes.barColor': 'Color de la barra',
   'schemas.barcodes.includetext': 'Incluir texto',
   'schemas.table.alternateBackgroundColor': 'Color de fondo alternativo',
@@ -625,7 +655,7 @@ const dictFr: { [key in keyof Dict]: string } = {
   fieldsList: 'Liste des champs',
   editField: 'Éditer le champ',
   type: 'Type',
-  errorOccurred:'Une erreur est survenue',
+  errorOccurred: 'Une erreur est survenue',
   errorBulkUpdateFieldName: "Impossible de confirmer le changement car le nombre d'éléments a changé.",
   commitBulkUpdateFieldName: 'Confirmer les changements',
   bulkUpdateFieldName: 'Modifier les noms de champs en masse',
@@ -659,6 +689,9 @@ const dictFr: { [key in keyof Dict]: string } = {
   'schemas.text.fit': 'Ajustement',
   'schemas.text.dynamicFontSize': 'Taille de police dynamique',
   'schemas.text.format': 'Format',
+  'schemas.mvt.typingInstructions': 'Ajoutez des variables en tapant des mots entourés d\'accolades, par ex.',
+  'schemas.mvt.sampleField': 'nom',
+  'schemas.mvt.variablesSampleData': 'Variables Exemples de données',
   'schemas.barcodes.barColor': 'Couleur de la barre',
   'schemas.barcodes.includetext': 'Inclure le texte',
   'schemas.table.alternateBackgroundColor': 'Couleur de fond alternative',