@pdfme/ui 4.2.2 → 4.2.3-dev.3

package/dist/types/class.d.ts

@@ -21,7 +21,6 @@ export declare abstract class BaseUIClass {
     getTemplate(): import("zod").objectOutputType<{
         schemas: import("zod").ZodArray<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodObject<{
             type: import("zod").ZodString;
-            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
@@ -40,7 +39,6 @@ export declare abstract class BaseUIClass {
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
             type: import("zod").ZodString;
-            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
@@ -59,7 +57,6 @@ export declare abstract class BaseUIClass {
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
             type: import("zod").ZodString;
-            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;

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

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

package/dist/types/helper.d.ts

@@ -36,7 +36,6 @@ export declare const template2SchemasList: (_template: Template) => Promise<{
     key: string;
     opacity?: number | undefined;
     rotate?: number | undefined;
-    icon?: string | undefined;
     content?: string | undefined;
     readOnly?: boolean | undefined;
 }[][]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.2.2",
+  "version": "4.2.3-dev.3",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/LeftSidebar.tsx

@@ -8,7 +8,7 @@ import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
 import Renderer from '../Renderer';
-import { PluginsRegistry } from '../../contexts';
+import { PluginsRegistry, OptionsContext } from '../../contexts';
 
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
   const { scale, basePdf, plugin } = props;
@@ -44,6 +44,7 @@ const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf
 const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
+  const options = useContext(OptionsContext);
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -76,6 +77,8 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
   >
     {Object.entries(pluginsRegistry).map(([label, plugin]) => {
       if (!plugin?.propPanel.defaultSchema) return null;
+      const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
+
       return <Draggable
         key={label}
         scale={scale}
@@ -87,8 +90,8 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
             setIsDragging(true);
           }}
           style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}>
-          {plugin.propPanel.defaultSchema.icon ?
-            <div dangerouslySetInnerHTML={{ __html: plugin.propPanel.defaultSchema.icon }} />
+          {icon ?
+            <div dangerouslySetInnerHTML={{ __html: icon }} />
             :
             <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
           }

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

@@ -13,14 +13,13 @@ import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interfac
 
 const { Text } = Typography;
 
-const DetailView = (
-  props: Pick<
-    SidebarProps,
+type DetailViewProps = Pick<SidebarProps,
     'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
-  > & {
-    activeSchema: SchemaForUI;
-  }
-) => {
+> & {
+  activeSchema: SchemaForUI;
+};
+
+const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
   const { size, changeSchemas, deselectSchema, activeSchema, activeElements } = props;
@@ -34,62 +33,41 @@ const DetailView = (
     [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
   }>({});
 
-  useEffect(() => {
-    const newWidgets: typeof widgets = {
-      AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
-      Divider: () => (
-        <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
-      ),
-      ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
-    };
-    for (const plugin of Object.values(pluginsRegistry)) {
-      const widgets = plugin?.propPanel.widgets || {};
-      Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
-        newWidgets[widgetKey] = (p) => (
-          <WidgetRenderer
-            {...p}
-            {...props}
-            options={options}
-            theme={token}
-            i18n={i18n as (key: keyof Dict | string) => string}
-            widget={widgetValue}
-          />
-        );
-      });
-    }
-    setWidgets(newWidgets);
-  }, [activeSchema, activeElements, pluginsRegistry, JSON.stringify(options)]);
-
-  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;
-
-    if (values.key !== (form.getValues() || {}).key) {
-      form.resetFields();
+  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;
+  form.setValues(values);
+
+  const handleWatch = (formSchema: any) => {
+    const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
+      if (typeof formValue === 'object') {
+        return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
+      }
+      return formValue !== schemaValue;
     }
 
-    form.setValues(values);
-  }, [form, activeSchema]);
-
-  const handleWatch = (newSchema: any) => {
     let changes: ChangeSchemaItem[] = [];
-    for (let key in newSchema) {
+    for (let key in formSchema) {
       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';
+      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 (newSchema[key] !== (activeSchema as any)[key]) {
-        let value = newSchema[key];
+      if (changed) {
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
         if (value === null && ['rotate', 'opacity'].includes(key)) value = undefined;
 
-        changes.push({ key, value, schemaId: activeSchema.id });
+        changes.push({key, value, schemaId: activeSchema.id});
       }
     }
 
@@ -203,6 +181,29 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     };
   }
 
+  const allWidgets: typeof widgets = {
+    AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
+    Divider: () => (
+        <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
+    ),
+    ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
+  };
+  for (const plugin of Object.values(pluginsRegistry)) {
+    const widgets = plugin?.propPanel.widgets || {};
+    Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
+      allWidgets[widgetKey] = (p) => (
+          <WidgetRenderer
+              {...p}
+              {...props}
+              options={options}
+              theme={token}
+              i18n={i18n as (key: keyof Dict | string) => string}
+              widget={widgetValue}
+          />
+      );
+    });
+  }
+
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
@@ -232,7 +233,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         <FormRender
           form={form}
           schema={propPanelSchema}
-          widgets={widgets}
+          widgets={allWidgets}
           watch={{ '#': handleWatch }}
           locale="en-US"
         />
@@ -241,4 +242,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   );
 };
 
-export default DetailView;
+const propsAreUnchanged = (prevProps: DetailViewProps, nextProps: DetailViewProps) => {
+  return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema)
+};
+
+export default React.memo(DetailView, propsAreUnchanged);

package/src/helper.ts

@@ -454,10 +454,15 @@ const handleTypeChange = (
       delete schema[key as keyof typeof schema];
     }
   });
+  // Apply attributes from new defaultSchema
   const propPanel = Object.values(pluginsRegistry).find(
     (plugin) => plugin?.propPanel.defaultSchema.type === value
   )?.propPanel;
-  Object.assign(schema, propPanel?.defaultSchema || {});
+  Object.keys(propPanel?.defaultSchema || {}).forEach((key) => {
+    if (!schema.hasOwnProperty(key)) {
+      (schema as any)[key] = propPanel?.defaultSchema[key];
+    }
+  });
 };
 
 export const changeSchemas = (args: {