Refactor code and fix warning (#524)

Author: hand-dot

packages/ui/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -1,5 +1,5 @@
 import FormRender, { useForm } from 'form-render';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
 import { MenuOutlined } from '@ant-design/icons';
@@ -14,31 +14,31 @@ import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interfac
 const { Text } = Typography;
 
 type DetailViewProps = Pick<SidebarProps,
-    'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+  'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
 > & {
   activeSchema: SchemaForUI;
 };
 
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, changeSchemas, deselectSchema, activeSchema, activeElements } = props;
+  const { size, changeSchemas, deselectSchema, activeSchema } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
 
-  const [widgets, setWidgets] = useState<{
-    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
-  }>({});
+  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;
+    form.setValues(values);
+
+  }, [activeSchema, form]);
 
-  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 => {
@@ -67,7 +67,7 @@ const DetailView = (props: DetailViewProps) => {
         // 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 });
       }
     }
 
@@ -76,11 +76,11 @@ const DetailView = (props: DetailViewProps) => {
       form.validateFields()
         .then(() => changeSchemas(changes))
         .catch((reason: ValidateErrorEntity) => {
-          if (reason.errorFields.length)  {
+          if (reason.errorFields.length) {
             changes = changes.filter((change: ChangeSchemaItem) => !reason.errorFields.find((field: {
-                name: InternalNamePath;
-                errors: string[];
-              }) => field.name.includes(change.key)
+              name: InternalNamePath;
+              errors: string[];
+            }) => field.name.includes(change.key)
             ));
           }
           if (changes.length) {
@@ -181,25 +181,27 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     };
   }
 
-  const allWidgets: typeof widgets = {
+  const allWidgets: {
+    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
+  } = {
     AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
     Divider: () => (
-        <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
+      <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}
-          />
+        <WidgetRenderer
+          {...p}
+          {...props}
+          options={options}
+          theme={token}
+          i18n={i18n as (key: keyof Dict | string) => string}
+          widget={widgetValue}
+        />
       );
     });
   }

packages/ui/src/components/Designer/index.tsx

@@ -19,6 +19,7 @@ import { I18nContext, PluginsRegistry } from '../../contexts';
 import {
   schemasList2template,
   uuid,
+  round,
   cloneDeep,
   template2SchemasList,
   getPagesScrollTopByIndex,
@@ -51,7 +52,7 @@ const TemplateEditor = ({
   onSaveTemplate: (t: Template) => void;
   onChangeTemplate: (t: Template) => void;
 } & {
-  onChangeTemplate: (t: Template) => void 
+  onChangeTemplate: (t: Template) => void
   onPageCursorChange: (newPageCursor: number) => void
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
@@ -253,7 +254,7 @@ const TemplateEditor = ({
           const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / scale;
           const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / scale;
 
-          const position = { x: px2mm(Math.max(0, moveX)), y: px2mm(Math.max(0, moveY)) }
+          const position = { x: round(px2mm(Math.max(0, moveX)), 2), y: round(px2mm(Math.max(0, moveY)), 2) }
 
           addSchema({ ...(active.data.current as Schema), position });
         }}

packages/ui/src/helper.ts

@@ -489,4 +489,4 @@ export const changeSchemas = (args: {
     return acc;
   }, cloneDeep(schemas));
   commitSchemas(newSchemas);
-};
+};