@pdfme/ui 5.3.8-dev.57 → 5.3.8-dev.59

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

@@ -1,6 +1,12 @@
 import { useForm } from 'form-render';
 import React, { useRef, useContext, useState, useEffect } from 'react';
-import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
+import type {
+  ChangeSchemaItem,
+  Dict,
+  SchemaForUI,
+  PropPanelWidgetProps,
+  PropPanelSchema,
+} from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
@@ -9,15 +15,22 @@ import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget.js';
 import WidgetRenderer from './WidgetRenderer.js';
 import ButtonGroupWidget from './ButtonGroupWidget.js';
-import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface.js";
+import { InternalNamePath, ValidateErrorEntity } from 'rc-field-form/es/interface.js';
 
 // Import FormRender as a default import
 import FormRenderComponent from 'form-render';
 
 const { Text } = Typography;
 
-type DetailViewProps = Pick<SidebarProps,
-  'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+type DetailViewProps = Pick<
+  SidebarProps,
+  | 'size'
+  | 'schemas'
+  | 'schemasList'
+  | 'pageSize'
+  | 'changeSchemas'
+  | 'activeElements'
+  | 'deselectSchema'
 > & {
   activeSchema: SchemaForUI;
 };
@@ -64,11 +77,11 @@ const DetailView = (props: DetailViewProps) => {
 
   useEffect(() => {
     const values: any = { ...activeSchema };
-    values.editable = !(values.readOnly)
+    values.editable = !values.readOnly;
     form.setValues(values);
   }, [activeSchema, form]);
 
-  useEffect(() => form.resetFields(), [activeSchema.id])
+  useEffect(() => form.resetFields(), [activeSchema.id]);
 
   useEffect(() => {
     uniqueSchemaName.current = (value: string): boolean => {
@@ -85,7 +98,8 @@ const DetailView = (props: DetailViewProps) => {
 
   const uniqueSchemaName = useRef((value: string): boolean => true);
 
-  const validateUniqueSchemaName = (_: any, value: string): boolean => uniqueSchemaName.current(value)
+  const validateUniqueSchemaName = (_: any, value: string): boolean =>
+    uniqueSchemaName.current(value);
 
   const handleWatch = debounce((formSchema: any) => {
     const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
@@ -93,7 +107,7 @@ const DetailView = (props: DetailViewProps) => {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
       }
       return formValue !== schemaValue;
-    }
+    };
 
     let changes: ChangeSchemaItem[] = [];
     for (const key in formSchema) {
@@ -121,15 +135,17 @@ const DetailView = (props: DetailViewProps) => {
 
     if (changes.length) {
       // Only commit these schema changes if they have passed form validation
-      form.validateFields()
+      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)
-            ));
+            changes = changes.filter(
+              (change: ChangeSchemaItem) =>
+                !reason.errorFields.find((field: { name: InternalNamePath; errors: string[] }) =>
+                  field.name.includes(change.key),
+                ),
+            );
           }
           if (changes.length) {
             changeSchemas(changes);
@@ -139,7 +155,7 @@ const DetailView = (props: DetailViewProps) => {
   }, 100);
 
   const activePlugin = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type
+    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type,
   )!;
 
   const activePropPanelSchema = activePlugin?.propPanel.schema;
@@ -171,14 +187,26 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         type: 'string',
         required: true,
         span: 12,
-        rules: [{
-          validator: validateUniqueSchemaName,
-          message: i18n('validation.uniqueName'),
-        }],
-        props: { autoComplete: "off" }
+        rules: [
+          {
+            validator: validateUniqueSchemaName,
+            message: i18n('validation.uniqueName'),
+          },
+        ],
+        props: { autoComplete: 'off' },
+      },
+      editable: {
+        title: i18n('editable'),
+        type: 'boolean',
+        span: 8,
+        hidden: defaultSchema?.readOnly !== undefined,
+      },
+      required: {
+        title: i18n('required'),
+        type: 'boolean',
+        span: 16,
+        hidden: '{{!formData.editable}}',
       },
-      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' },
       position: {
@@ -187,7 +215,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         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'),

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.js';
-import { GripVertical, CircleAlert, Lock } from 'lucide-react'
+import { GripVertical, CircleAlert, Lock } from 'lucide-react';
 import { Button, Typography } from 'antd';
 
 const { Text } = Typography;
@@ -48,7 +48,7 @@ const Item = React.memo(
         transform,
         ...props
       },
-      ref
+      ref,
     ) => {
       const i18n = useContext(I18nContext);
 
@@ -125,8 +125,8 @@ const Item = React.memo(
           </div>
         </li>
       );
-    }
-  )
+    },
+  ),
 );
 
 export default Item;

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

@@ -21,13 +21,13 @@ import { PluginsRegistry } from '../../../../contexts.js';
 import Item from './Item.js';
 import SelectableSortableItem from './SelectableSortableItem.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon.js";
+import PluginIcon from '../../PluginIcon.js';
 
 const SelectableSortableContainer = (
   props: Pick<
     SidebarProps,
     'schemas' | 'onEdit' | 'onSortEnd' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
-  >
+  >,
 ) => {
   const { token } = theme.useToken();
   const { schemas, onEdit, onSortEnd, hoveringSchemaId, onChangeHoveringSchemaId } = props;
@@ -37,7 +37,7 @@ const SelectableSortableContainer = (
   const pluginsRegistry = useContext(PluginsRegistry);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 15 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
 
   const isItemSelected = (itemId: string): boolean =>
@@ -59,17 +59,25 @@ const SelectableSortableContainer = (
   };
 
   const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
-    const thisSchema = (typeof inSchema === 'string') ? schemas.find((schema) => schema.id === inSchema) : inSchema;
+    const thisSchema =
+      typeof inSchema === 'string' ? schemas.find((schema) => schema.id === inSchema) : inSchema;
 
     const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
-      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type
+      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type,
     )!;
 
     if (!activePlugin) {
-      return <></>
+      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 (
@@ -90,7 +98,7 @@ const SelectableSortableContainer = (
                 return ret;
               }
               return ret.filter((schema) => schema !== selectedItem);
-            }, schemas)
+            }, schemas),
           );
         }
       }}
@@ -106,7 +114,7 @@ const SelectableSortableContainer = (
           newSchemas.splice(
             overIndex + 1,
             0,
-            ...selectedSchemas.filter((item) => item.id !== activeId)
+            ...selectedSchemas.filter((item) => item.id !== activeId),
           );
           onSortEnd(newSchemas);
           setSelectedSchemas([]);
@@ -133,8 +141,9 @@ 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}
@@ -150,43 +159,43 @@ const SelectableSortableContainer = (
         </div>
         {createPortal(
           <DragOverlay adjustScale>
-            {activeId ? (
-              (() => {
-                const activeSchema = schemas.find((schema) => schema.id === activeId);
-                if (!activeSchema) return null;
-                return (
-                  <>
-                    <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                      <Item
-                        icon={getPluginIcon(activeId)}
-                        value={activeSchema.name}
-                        required={activeSchema.required}
-                        readOnly={activeSchema.readOnly}
-                        style={{ background: token.colorPrimary }}
-                        dragOverlay
-                      />
-                    </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.name}
-                            required={item.required}
-                            readOnly={item.readOnly}
-                            style={{ background: token.colorPrimary }}
-                            dragOverlay
-                          />
-                        ))}
-                    </ul>
-                  </>
-                );
-              })()
-            ) : null}
+            {activeId
+              ? (() => {
+                  const activeSchema = schemas.find((schema) => schema.id === activeId);
+                  if (!activeSchema) return null;
+                  return (
+                    <>
+                      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                        <Item
+                          icon={getPluginIcon(activeId)}
+                          value={activeSchema.name}
+                          required={activeSchema.required}
+                          readOnly={activeSchema.readOnly}
+                          style={{ background: token.colorPrimary }}
+                          dragOverlay
+                        />
+                      </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.name}
+                              required={item.required}
+                              readOnly={item.readOnly}
+                              style={{ background: token.colorPrimary }}
+                              dragOverlay
+                            />
+                          ))}
+                      </ul>
+                    </>
+                  );
+                })()
+              : null}
           </DragOverlay>,
-          document.body
+          document.body,
         )}
       </>
     </DndContext>

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

@@ -5,7 +5,7 @@ import { PluginsRegistry, I18nContext } from '../../../../contexts.js';
 import Item from './Item.js';
 import { useMountStatus } from '../../../../hooks.js';
 import { theme } from 'antd';
-import PluginIcon from "../../PluginIcon.js";
+import PluginIcon from '../../PluginIcon.js';
 
 interface Props {
   isSelected: boolean;
@@ -43,10 +43,9 @@ const SelectableSortableItem = ({
   };
 
   const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
-    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type
+    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type,
   )!;
 
-
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.name) {
     status = 'is-warning';

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

@@ -21,7 +21,7 @@ const ListView = (
     | 'hoveringSchemaId'
     | 'onChangeHoveringSchemaId'
     | 'changeSchemas'
-  >
+  >,
 ) => {
   const {
     schemas,
@@ -48,7 +48,7 @@ const ListView = (
           key: 'name',
           value,
           schemaId: schemas[index].id,
-        }))
+        })),
       );
       setIsBulkUpdateFieldNamesMode(false);
     }
@@ -89,7 +89,14 @@ const ListView = (
             onEdit={onEdit}
           />
         )}
-        <div style={{ paddingTop: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+        <div
+          style={{
+            paddingTop: '0.5rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}
+        >
           {isBulkUpdateFieldNamesMode ? (
             <>
               <Button size="small" type="text" onClick={commitBulk}>

package/src/components/Designer/index.tsx

@@ -40,7 +40,7 @@ const scaleDragPosAdjustment = (adjustment: number, scale: number): number => {
   if (scale > 1) return adjustment * (scale - 1);
   if (scale < 1) return adjustment * -(1 - scale);
   return 0;
-}
+};
 
 const TemplateEditor = ({
   template,
@@ -53,8 +53,8 @@ const TemplateEditor = ({
   onSaveTemplate: (t: Template) => void;
   onChangeTemplate: (t: Template) => void;
 } & {
-  onChangeTemplate: (t: Template) => void
-  onPageCursorChange: (newPageCursor: number) => void
+  onChangeTemplate: (t: Template) => void;
+  onPageCursorChange: (newPageCursor: number) => void;
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
@@ -74,8 +74,12 @@ const TemplateEditor = ({
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
-  const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
+  const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+    template,
+    size,
+    zoomLevel,
+    maxZoom,
+  });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);
@@ -94,7 +98,7 @@ const TemplateEditor = ({
     pageCursor,
     onChangePageCursor: (p) => {
       setPageCursor(p);
-      onPageCursorChange(p)
+      onPageCursorChange(p);
       onEditEnd();
     },
   });
@@ -108,7 +112,7 @@ const TemplateEditor = ({
       setSchemasList(_schemasList);
       onChangeTemplate(schemasList2template(_schemasList, template.basePdf));
     },
-    [template, schemasList, pageCursor, onChangeTemplate]
+    [template, schemasList, pageCursor, onChangeTemplate],
   );
 
   const removeSchemas = useCallback(
@@ -116,7 +120,7 @@ const TemplateEditor = ({
       commitSchemas(schemasList[pageCursor].filter((schema) => !ids.includes(schema.id)));
       onEditEnd();
     },
-    [schemasList, pageCursor, commitSchemas]
+    [schemasList, pageCursor, commitSchemas],
   );
 
   const changeSchemas: ChangeSchemas = useCallback(
@@ -130,7 +134,7 @@ const TemplateEditor = ({
         commitSchemas,
       });
     },
-    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf]
+    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf],
   );
 
   useInitEvents({
@@ -161,29 +165,42 @@ const TemplateEditor = ({
   }, []);
 
   const addSchema = (defaultSchema: Schema) => {
-    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [0, 0, 0, 0];
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf)
+      ? template.basePdf.padding
+      : [0, 0, 0, 0];
     const pageSize = pageSizes[pageCursor];
 
     const newSchemaName = (prefix: string) => {
       let index = schemasList.reduce((acc, page) => acc + page.length, 1);
       let newName = prefix + index;
-      while (schemasList.some(page => page.find((s) => s.name === newName))) {
+      while (schemasList.some((page) => page.find((s) => s.name === newName))) {
         index++;
         newName = prefix + index;
       }
       return newName;
     };
-    const ensureMiddleValue = (min: number, value: number, max: number) => Math.min(Math.max(min, value), max)
+    const ensureMiddleValue = (min: number, value: number, max: number) =>
+      Math.min(Math.max(min, value), max);
 
     const s = {
       id: uuid(),
       ...defaultSchema,
       name: newSchemaName(i18n('field')),
       position: {
-        x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),
-        y: ensureMiddleValue(paddingTop, defaultSchema.position.y, pageSize.height - paddingBottom - defaultSchema.height),
+        x: ensureMiddleValue(
+          paddingLeft,
+          defaultSchema.position.x,
+          pageSize.width - paddingRight - defaultSchema.width,
+        ),
+        y: ensureMiddleValue(
+          paddingTop,
+          defaultSchema.position.y,
+          pageSize.height - paddingBottom - defaultSchema.height,
+        ),
       },
-      required: defaultSchema.readOnly ? false : options.requiredByDefault || defaultSchema.required || false,
+      required: defaultSchema.readOnly
+        ? false
+        : options.requiredByDefault || defaultSchema.required || false,
     } as SchemaForUI;
 
     if (defaultSchema.position.y === 0) {
@@ -213,7 +230,8 @@ const TemplateEditor = ({
     setTimeout(
       () =>
         canvasRef.current &&
-        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)), 0)
+        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)),
+        0),
     );
   };
 
@@ -262,13 +280,17 @@ const TemplateEditor = ({
           const dragStartLeft = active.rect.current.initial?.left || 0;
           const dragStartTop = active.rect.current.initial?.top || 0;
 
-          const canvasLeftOffsetFromPageCorner = pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
+          const canvasLeftOffsetFromPageCorner =
+            pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
           const canvasTopOffsetFromPageCorner = pageRect.top - dragStartTop;
 
           const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / scale;
           const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / scale;
 
-          const position = { x: round(px2mm(Math.max(0, moveX)), 2), y: round(px2mm(Math.max(0, moveY)), 2) }
+          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 });
         }}
@@ -307,7 +329,7 @@ const TemplateEditor = ({
             schemas={schemasList[pageCursor] ?? []}
             changeSchemas={changeSchemas}
             onSortEnd={onSortEnd}
-            onEdit={id => {
+            onEdit={(id) => {
               const editingElem = document.getElementById(id);
               editingElem && onEdit([editingElem]);
             }}

package/src/components/Preview.tsx

@@ -1,5 +1,12 @@
 import React, { useRef, useState, useEffect, useContext } from 'react';
-import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate, replacePlaceholders } from '@pdfme/common';
+import {
+  Template,
+  SchemaForUI,
+  PreviewProps,
+  Size,
+  getDynamicTemplate,
+  replacePlaceholders,
+} from '@pdfme/common';
 import { getDynamicHeightsForTable } from '@pdfme/schemas/utils';
 import UnitPager from './UnitPager.js';
 import Root from './Root.js';
@@ -37,8 +44,12 @@ const Preview = ({
   const [zoomLevel, setZoomLevel] = useState(1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
-  const { backgrounds, pageSizes, scale, error, refresh } =
-    useUIPreProcessor({ template, size, zoomLevel, maxZoom });
+  const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+    template,
+    size,
+    zoomLevel,
+    maxZoom,
+  });
 
   const isForm = Boolean(onChangeInput);
 
@@ -87,7 +98,7 @@ const Preview = ({
   const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, name, value });
 
-  const handleOnChangeRenderer = (args: { key: string; value: any; }[], schema: SchemaForUI) => {
+  const handleOnChangeRenderer = (args: { key: string; value: any }[], schema: SchemaForUI) => {
     let isNeedInit = false;
     args.forEach(({ key: _key, value }) => {
       if (_key === 'content') {
@@ -98,9 +109,7 @@ const Preview = ({
         // TODO Improve this to allow schema types to determine whether the execution of getDynamicTemplate is required.
         if (schema.type === 'table') isNeedInit = true;
       } else {
-        const targetSchema = schemasList[pageCursor].find(
-          (s) => s.id === schema.id
-        ) as SchemaForUI;
+        const targetSchema = schemasList[pageCursor].find((s) => s.id === schema.id) as SchemaForUI;
         if (!targetSchema) return;
 
         // @ts-ignore
@@ -110,8 +119,8 @@ const Preview = ({
     if (isNeedInit) {
       init(template);
     }
-    setSchemasList([...schemasList])
-  }
+    setSchemasList([...schemasList]);
+  };
 
   if (error) {
     return <ErrorScreen size={size} error={error} />;
@@ -146,11 +155,13 @@ const Preview = ({
           pageSizes={pageSizes}
           backgrounds={backgrounds}
           renderSchema={({ schema, index }) => {
-            const value = schema.readOnly ? replacePlaceholders({
-              content: schema.content || '',
-              variables: { ...input, totalPages: schemasList.length, currentPage: index + 1, },
-              schemas: schemasList
-            }) : String(input && input[schema.name] || '');
+            const value = schema.readOnly
+              ? replacePlaceholders({
+                  content: schema.content || '',
+                  variables: { ...input, totalPages: schemasList.length, currentPage: index + 1 },
+                  schemas: schemasList,
+                })
+              : String((input && input[schema.name]) || '');
             return (
               <Renderer
                 key={schema.id}