@pdfme/ui 2.1.0 → 2.2.1

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -6,13 +6,18 @@ import {
   DEFAULT_LINE_HEIGHT,
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
+  VERTICAL_ALIGN_TOP,
+  VERTICAL_ALIGN_MIDDLE,
+  VERTICAL_ALIGN_BOTTOM,
+  DEFAULT_VERTICAL_ALIGNMENT,
   DYNAMIC_FIT_VERTICAL,
   DYNAMIC_FIT_HORIZONTAL,
   DEFAULT_DYNAMIC_FIT,
 } from '@pdfme/common';
 import { FontContext } from '../../../../contexts';
+import Divider from '../../../Divider';
 import { SidebarProps } from '..';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import ColorInputSet from './FormComponents/ColorInputSet';
 
 const inputStyle = {
   width: '90%',
@@ -56,46 +61,6 @@ const NumberInputSet = (props: {
   );
 };
 
-const ColorInputSet = (props: {
-  label: string;
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onClear: () => void;
-}) => {
-  const { label, value, onChange, onClear } = props;
-  const formattedLabel = label.replace(/\s/g, '');
-
-  return (
-    <div style={{ width: '45%' }}>
-      <label htmlFor={`input-${formattedLabel}`}>{label}</label>
-      <div style={{ display: 'flex' }}>
-        <input
-          id={`input-${formattedLabel}`}
-          name={`input-${formattedLabel}`}
-          onChange={onChange}
-          value={value || '#ffffff'}
-          type="color"
-          style={inputStyle}
-        />
-        <button
-          onClick={onClear}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: 'none',
-            borderRadius: 2,
-            border: '1px solid #767676',
-            cursor: 'pointer',
-          }}
-        >
-          <XMarkIcon width={10} height={10} />
-        </button>
-      </div>
-    </div>
-  );
-};
-
 const SelectSet = (props: {
   label: string;
   value: string;
@@ -133,9 +98,11 @@ const CheckboxSet = (props: {
   checked: boolean | undefined;
 }) => {
   const { width, label, onChange, checked } = props;
+  const fieldId = 'input-' + label.replace(/\s/g, '');
 
   return (
     <label
+      htmlFor={fieldId}
       style={{
         display: 'flex',
         alignItems: 'center',
@@ -143,7 +110,7 @@ const CheckboxSet = (props: {
         width: `${width}`,
       }}
     >
-      <input type="checkbox" checked={checked} onChange={onChange} />
+      <input id={fieldId} type="checkbox" checked={checked} onChange={onChange} />
       {label}
     </label>
   );
@@ -154,6 +121,7 @@ const TextPropEditor = (
 ) => {
   const { changeSchemas, activeSchema } = props;
   const alignments = ['left', 'center', 'right'];
+  const verticalAlignments = [VERTICAL_ALIGN_TOP, VERTICAL_ALIGN_MIDDLE, VERTICAL_ALIGN_BOTTOM];
   const dynamicFits = [DYNAMIC_FIT_HORIZONTAL, DYNAMIC_FIT_VERTICAL];
   const font = useContext(FontContext);
   const fallbackFontName = getFallbackFontName(font);
@@ -161,182 +129,194 @@ const TextPropEditor = (
   if (activeSchema.type !== 'text') return <></>;
 
   return (
-    <section style={{ fontSize: '0.7rem' }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: '0.25rem',
-        }}
-      >
-        <SelectSet
-          label={'FontName'}
-          value={activeSchema.fontName ?? fallbackFontName}
-          options={Object.keys(font)}
-          onChange={(e) => {
-            changeSchemas([{ key: 'fontName', value: e.target.value, schemaId: activeSchema.id }]);
+    <>
+      <section style={{ fontSize: '0.7rem' }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '0.25rem',
           }}
-        />
+        >
+          <SelectSet
+            label={'FontName'}
+            value={activeSchema.fontName ?? fallbackFontName}
+            options={Object.keys(font)}
+            onChange={(e) => {
+              changeSchemas([{ key: 'fontName', value: e.target.value, schemaId: activeSchema.id }]);
+            }}
+          />
 
-        <SelectSet
-          label={'Alignment'}
-          value={activeSchema.alignment ?? 'left'}
-          options={alignments}
-          onChange={(e) =>
-            changeSchemas([{ key: 'alignment', value: e.target.value, schemaId: activeSchema.id }])
-          }
-        />
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: '0.25rem',
-        }}
-      >
-        <NumberInputSet
-          width="30%"
-          label={'FontSize(pt)'}
-          value={activeSchema.dynamicFontSize ? NaN : (activeSchema.fontSize ?? DEFAULT_FONT_SIZE)}
-          style={activeSchema.dynamicFontSize ? { background: '#ccc', cursor: 'not-allowed' } : {}}
-          disabled={!!activeSchema.dynamicFontSize}
-          onChange={(e) => {
-            changeSchemas([{ key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id }])
-          }}
-        />
-        <NumberInputSet
-          width="30%"
-          label={'LineHeight(em)'}
-          step={0.1}
-          value={activeSchema.lineHeight ?? DEFAULT_LINE_HEIGHT}
-          onChange={(e) =>
-            changeSchemas([
-              { key: 'lineHeight', value: Number(e.target.value), schemaId: activeSchema.id },
-            ])
-          }
-        />
+          <SelectSet
+            label={'Horizontal Align'}
+            value={activeSchema.alignment ?? 'left'}
+            options={alignments}
+            onChange={(e) =>
+              changeSchemas([{ key: 'alignment', value: e.target.value, schemaId: activeSchema.id }])
+            }
+          />
 
-        <NumberInputSet
-          width="40%"
-          label={'CharacterSpacing(pt)'}
-          step={0.1}
-          value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
-          onChange={async (e) => {
-            const currentCharacterSpacing = Number(e.target.value);
-            changeSchemas([
-              { key: 'characterSpacing', value: currentCharacterSpacing, schemaId: activeSchema.id, },
-            ]);
+          <SelectSet
+            label={'Vertical Align'}
+            value={activeSchema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT}
+            options={verticalAlignments}
+            onChange={(e) => {
+              changeSchemas([{ key: 'verticalAlignment', value: e.target.value, schemaId: activeSchema.id }]);
+            }}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '0.25rem',
           }}
-        />
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          flexWrap: 'wrap',
-          marginBottom: '0.25rem',
-        }}
-      >
-        <CheckboxSet
-          width="100%"
-          label="Use dynamic font size"
-          checked={Boolean(activeSchema.dynamicFontSize)}
-          onChange={(e) => {
-            changeSchemas([
-              {
-                key: 'dynamicFontSize', value: e.target.checked ? {
-                  min: activeSchema.fontSize || DEFAULT_FONT_SIZE,
-                  max: activeSchema.fontSize || DEFAULT_FONT_SIZE,
-                } : undefined, schemaId: activeSchema.id,
-              },
-            ]);
+        >
+          <NumberInputSet
+            width="30%"
+            label={'FontSize(pt)'}
+            value={activeSchema.dynamicFontSize ? NaN : (activeSchema.fontSize ?? DEFAULT_FONT_SIZE)}
+            style={activeSchema.dynamicFontSize ? { background: '#ccc', cursor: 'not-allowed' } : {}}
+            disabled={!!activeSchema.dynamicFontSize}
+            onChange={(e) => {
+              changeSchemas([{ key: 'fontSize', value: Number(e.target.value), schemaId: activeSchema.id }])
+            }}
+          />
+          <NumberInputSet
+            width="30%"
+            label={'LineHeight(em)'}
+            step={0.1}
+            value={activeSchema.lineHeight ?? DEFAULT_LINE_HEIGHT}
+            onChange={(e) =>
+              changeSchemas([
+                { key: 'lineHeight', value: Number(e.target.value), schemaId: activeSchema.id },
+              ])
+            }
+          />
+
+          <NumberInputSet
+            width="40%"
+            label={'CharacterSpacing(pt)'}
+            step={0.1}
+            value={activeSchema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}
+            onChange={async (e) => {
+              const currentCharacterSpacing = Number(e.target.value);
+              changeSchemas([
+                { key: 'characterSpacing', value: currentCharacterSpacing, schemaId: activeSchema.id, },
+              ]);
+            }}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            marginBottom: '0.25rem',
           }}
-        />
+        >
+          <CheckboxSet
+            width="100%"
+            label="Use dynamic font size"
+            checked={Boolean(activeSchema.dynamicFontSize)}
+            onChange={(e) => {
+              changeSchemas([
+                {
+                  key: 'dynamicFontSize', value: e.target.checked ? {
+                    min: activeSchema.fontSize || DEFAULT_FONT_SIZE,
+                    max: activeSchema.fontSize || DEFAULT_FONT_SIZE,
+                  } : undefined, schemaId: activeSchema.id,
+                },
+              ]);
+            }}
+          />
 
-        {activeSchema.dynamicFontSize && (
-          <>
-            <NumberInputSet
-              width="30%"
-              label={'FontSize Min(pt)'}
-              value={activeSchema.dynamicFontSize.min ?? Number(activeSchema.fontSize)}
-              minNumber={0}
-              style={
-                activeSchema.dynamicFontSize &&
-                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
-                  ? { background: 'rgb(200 0 0 / 30%)' }
-                  : {}
-              }
-              onChange={(e) => {
-                changeSchemas([{ key: 'dynamicFontSize.min', value: Number(e.target.value), schemaId: activeSchema.id }])
-              }}
-            />
+          {activeSchema.dynamicFontSize && (
+            <>
+              <NumberInputSet
+                width="30%"
+                label={'FontSize Min(pt)'}
+                value={activeSchema.dynamicFontSize.min ?? Number(activeSchema.fontSize)}
+                minNumber={0}
+                style={
+                  activeSchema.dynamicFontSize &&
+                    activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                    ? { background: 'rgb(200 0 0 / 30%)' }
+                    : {}
+                }
+                onChange={(e) => {
+                  changeSchemas([{ key: 'dynamicFontSize.min', value: Number(e.target.value), schemaId: activeSchema.id }])
+                }}
+              />
 
-            <NumberInputSet
-              width="30%"
-              label={'FontSize Max(pt)'}
-              value={activeSchema.dynamicFontSize.max ?? Number(activeSchema.fontSize)}
-              minNumber={0}
-              style={
-                activeSchema.dynamicFontSize &&
-                  activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
-                  ? { background: 'rgb(200 0 0 / 30%)' }
-                  : {}
-              }
-              onChange={(e) => {
-                changeSchemas([{ key: 'dynamicFontSize.max', value: Number(e.target.value), schemaId: activeSchema.id }])
-              }}
-            />
+              <NumberInputSet
+                width="30%"
+                label={'FontSize Max(pt)'}
+                value={activeSchema.dynamicFontSize.max ?? Number(activeSchema.fontSize)}
+                minNumber={0}
+                style={
+                  activeSchema.dynamicFontSize &&
+                    activeSchema.dynamicFontSize.max < activeSchema.dynamicFontSize.min
+                    ? { background: 'rgb(200 0 0 / 30%)' }
+                    : {}
+                }
+                onChange={(e) => {
+                  changeSchemas([{ key: 'dynamicFontSize.max', value: Number(e.target.value), schemaId: activeSchema.id }])
+                }}
+              />
 
-            <SelectSet
-              width="40%"
-              label={'Fit'}
-              value={activeSchema.dynamicFontSize.fit ?? DEFAULT_DYNAMIC_FIT}
-              options={dynamicFits}
-              onChange={(e) => {
-                changeSchemas([{ key: 'dynamicFontSize.fit', value: e.target.value, schemaId: activeSchema.id }])
-              }}
-            />
-          </>
-        )}
-      </div>
-      <div
-        style={{
-          marginBottom: '0.25rem',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <ColorInputSet
-          label={'FontColor'}
-          value={activeSchema.fontColor ?? '#000000'}
-          onChange={(e) =>
-            changeSchemas([{ key: 'fontColor', value: e.target.value, schemaId: activeSchema.id }])
-          }
-          onClear={() =>
-            changeSchemas([
-              { key: 'fontColor', value: DEFAULT_FONT_COLOR, schemaId: activeSchema.id },
-            ])
-          }
-        />
+              <SelectSet
+                width="40%"
+                label={'Fit'}
+                value={activeSchema.dynamicFontSize.fit ?? DEFAULT_DYNAMIC_FIT}
+                options={dynamicFits}
+                onChange={(e) => {
+                  changeSchemas([{ key: 'dynamicFontSize.fit', value: e.target.value, schemaId: activeSchema.id }])
+                }}
+              />
+            </>
+          )}
+        </div>
+        <div
+          style={{
+            marginBottom: '0.25rem',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <ColorInputSet
+            label={'FontColor'}
+            value={activeSchema.fontColor ?? '#000000'}
+            onChange={(e) =>
+              changeSchemas([{ key: 'fontColor', value: e.target.value, schemaId: activeSchema.id }])
+            }
+            onClear={() =>
+              changeSchemas([
+                { key: 'fontColor', value: DEFAULT_FONT_COLOR, schemaId: activeSchema.id },
+              ])
+            }
+          />
 
-        <ColorInputSet
-          label={'Background'}
-          value={activeSchema.backgroundColor ?? '#ffffff'}
-          onChange={(e) =>
-            changeSchemas([
-              { key: 'backgroundColor', value: e.target.value, schemaId: activeSchema.id },
-            ])
-          }
-          onClear={() =>
-            changeSchemas([{ key: 'backgroundColor', value: '', schemaId: activeSchema.id }])
-          }
-        />
-      </div>
-    </section>
+          <ColorInputSet
+            label={'Background'}
+            value={activeSchema.backgroundColor ?? '#ffffff'}
+            onChange={(e) =>
+              changeSchemas([
+                { key: 'backgroundColor', value: e.target.value, schemaId: activeSchema.id },
+              ])
+            }
+            onClear={() =>
+              changeSchemas([{ key: 'backgroundColor', value: '', schemaId: activeSchema.id }])
+            }
+          />
+        </div>
+      </section>
+      <Divider />
+    </>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
-import { SchemaForUI } from '@pdfme/common';
+import { SchemaForUI, isBarcodeSchema, isTextSchema } from '@pdfme/common';
+import { Bars3Icon } from '@heroicons/react/20/solid';
 import { I18nContext } from '../../../../contexts';
 import Divider from '../../../Divider';
 import { SidebarProps } from '../index';
@@ -7,18 +8,25 @@ import TextPropEditor from './TextPropEditor';
 import ExampleInputEditor from './ExampleInputEditor';
 import PositionAndSizeEditor from './PositionAndSizeEditor';
 import TypeAndKeyEditor from './TypeAndKeyEditor';
+import BarcodePropEditor from './BarCodePropEditor';
 
 const DetailView = (
-  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+  props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
   }
 ) => {
-  const { activeSchema } = props;
+  const { activeSchema, deselectSchema } = props;
   const i18n = useContext(I18nContext);
 
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+        <span
+          style={{ position: 'absolute', width: 20, padding: '5px', cursor: 'pointer' }}
+          onClick={deselectSchema}
+        >
+          <Bars3Icon />
+        </span>
         <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('editField')}
         </span>
@@ -29,11 +37,11 @@ const DetailView = (
         <Divider />
         <PositionAndSizeEditor {...props} />
         <Divider />
-        {activeSchema.type === 'text' && (
-          <>
-            <TextPropEditor {...props} />
-            <Divider />
-          </>
+        {isBarcodeSchema(activeSchema) && (
+          <BarcodePropEditor {...props} />
+        )}
+        {isTextSchema(activeSchema) && (
+          <TextPropEditor {...props} />
         )}
         <ExampleInputEditor {...props} />
       </div>

package/src/components/Designer/Sidebar/index.tsx

@@ -27,14 +27,15 @@ export type SidebarProps = {
     }[]
   ) => void;
   addSchema: () => void;
+  deselectSchema: () => void;
 };
 
 const Sidebar = (props: SidebarProps) => {
   const { height, size, activeElements, schemas, addSchema } = props;
 
   const i18n = useContext(I18nContext);
-  const fonts = useContext(FontContext);
-  const fallbackFont = getFallbackFontName(fonts);
+  const font = useContext(FontContext);
+  const fallbackFont = getFallbackFontName(font);
   const [open, setOpen] = useState(true);
 
   const getActiveSchemas = () => {

package/src/components/Designer/index.tsx

@@ -262,6 +262,7 @@ const TemplateEditor = ({
         }}
         onEditEnd={onEditEnd}
         addSchema={addSchema}
+        deselectSchema={onEditEnd}
       />
       <Main
         ref={mainRef}

package/src/components/Preview.tsx

@@ -6,7 +6,7 @@ import Root from './Root';
 import Error from './Error';
 import CtlBar from './CtlBar/index';
 import Paper from './Paper';
-import SchemaUI from './Schemas/SchemaUI';
+import Renderer from './Renderer';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
 import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
 
@@ -47,7 +47,8 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
   const handleChangeInput = ({ key, value }: { key: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, key, value });
 
-  const editable = Boolean(onChangeInput);
+  const isForm = Boolean(onChangeInput);
+
   const input = inputs[unitCursor];
 
   if (error) {
@@ -96,15 +97,14 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
           const { key } = schema;
           const data = (input && input[key]) || '';
           return (
-            <SchemaUI
+            <Renderer
               key={schema.id}
               schema={Object.assign(schema, { data })}
-              editable={editable}
+              mode={isForm ? 'form' : 'viewer'}
               placeholder={template.sampledata?.[0]?.[key] ?? ''}
               tabIndex={index + 100}
-              onStopEditing={() => { }}
               onChange={(value) => handleChangeInput({ key, value })}
-              outline={editable ? '1px dashed #4af' : 'transparent'}
+              outline={isForm ? '1px dashed #4af' : 'transparent'}
             />
           );
         }}

package/src/components/Renderer.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useContext, ReactNode, useRef } from 'react';
+import { ZOOM, SELECTABLE_CLASSNAME } from '../constants';
+import { RendererRegistry, OptionsContext } from '../contexts';
+import { RendererProps } from "../types"
+
+const Wrapper = ({
+  children,
+  outline,
+  onChangeHoveringSchemaId,
+  schema,
+}: RendererProps & { children: ReactNode }) => (
+  <div
+    title={schema.key}
+    onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
+    onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
+    className={SELECTABLE_CLASSNAME}
+    id={schema.id}
+    style={{
+      position: 'absolute',
+      cursor: 'pointer',
+      height: schema.height * ZOOM,
+      width: schema.width * ZOOM,
+      top: schema.position.y * ZOOM,
+      left: schema.position.x * ZOOM,
+      outline,
+    }}
+  >
+    {children}
+  </div>
+);
+
+const Renderer = (props: RendererProps) => {
+  const rendererRegistry = useContext(RendererRegistry);
+  const options = useContext(OptionsContext);
+
+  const { schema, mode, onChange, stopEditing, tabIndex, placeholder } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+
+  useEffect(() => {
+    if (ref.current && schema.type) {
+      const schemaType = schema.type as string;
+      const renderer = rendererRegistry[schemaType];
+      if (!renderer) {
+        console.error(`Renderer for type ${schema.type} not found`);
+        return;
+      }
+
+      ref.current.innerHTML = '';
+
+      const isForm = mode === 'form';
+
+      renderer.render({
+        value: schema.data,
+        schema,
+        rootElement: ref.current,
+        mode,
+        onChange: isForm ? onChange : undefined,
+        stopEditing: isForm ? stopEditing : undefined,
+        tabIndex,
+        placeholder,
+        options,
+      });
+    }
+    return () => {
+      if (ref.current) {
+        ref.current.innerHTML = '';
+      }
+    };
+  }, [JSON.stringify(schema), mode, options]);
+
+
+  return (
+    <Wrapper {...props}>
+      <div style={{ height: '100%', width: '100%' }} ref={ref} />
+    </Wrapper>
+  );
+};
+export default Renderer

package/src/contexts.ts

@@ -1,8 +1,13 @@
 import { createContext } from 'react';
 import { curriedI18n } from './i18n';
 import { DEFAULT_LANG } from './constants';
+import builtInRenderer from './builtInRenderer';
 import { getDefaultFont } from '@pdfme/common';
 
 export const I18nContext = createContext(curriedI18n(DEFAULT_LANG));
 
 export const FontContext = createContext(getDefaultFont());
+
+export const RendererRegistry = createContext(builtInRenderer);
+
+export const OptionsContext = createContext({});