@pdfme/ui 2.1.0 → 2.2.1

package/src/class.ts

@@ -1,7 +1,9 @@
+import type { Renderer } from './types';
 import ReactDOM from 'react-dom';
 import { curriedI18n } from './i18n';
 import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
 import { debounce, flatten, cloneDeep } from './helper';
+import builtInRenderer from './builtInRenderer';
 import {
   Template,
   Size,
@@ -65,6 +67,10 @@ export abstract class BaseUIClass {
 
   private font: Font = getDefaultFont();
 
+  private rendererRegistry: Renderer = builtInRenderer;
+
+  private options = {};
+
   private readonly setSize = debounce(() => {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     this.size = {
@@ -79,22 +85,28 @@ export abstract class BaseUIClass {
   constructor(props: UIProps) {
     checkUIProps(props);
 
-    const { domContainer, template, options } = props;
-    const { lang, font } = options || {};
+    const { domContainer, template, options = {} } = props;
     this.domContainer = domContainer;
     this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
+    this.options = options;
     this.size = {
       height: this.domContainer!.clientHeight || window.innerHeight,
       width: this.domContainer!.clientWidth || window.innerWidth,
     };
     this.resizeObserver.observe(this.domContainer!);
 
+    const { lang, font } = options;
     if (lang) {
       this.lang = lang;
     }
     if (font) {
       this.font = font;
     }
+    // TODO: In the future, when we support custom schemas, we will create the registry using options.renderer instead of {}.
+    // if(renderer){
+    //   this.renderer = Object.assign(this.renderer, renderer);;
+    // }
+
   }
 
   protected getI18n() {
@@ -105,6 +117,14 @@ export abstract class BaseUIClass {
     return this.font;
   }
 
+  protected getRendererRegistry() {
+    return this.rendererRegistry;
+  }
+
+  protected getOptions() {
+    return this.options;
+  }
+
   public getTemplate() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
 

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

@@ -6,7 +6,6 @@ import React, {
   useEffect,
   forwardRef,
   useCallback,
-  useContext,
 } from 'react';
 import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
@@ -15,12 +14,11 @@ import { ZOOM, RULER_HEIGHT } from '../../../constants';
 import { usePrevious } from '../../../hooks';
 import { uuid, round, flatten } from '../../../helper';
 import Paper from '../../Paper';
-import SchemaUI from '../../Schemas/SchemaUI';
+import Renderer from '../../Renderer';
 import Selecto from './Selecto';
 import Moveable from './Moveable';
 import Guides from './Guides';
 import Mask from './Mask';
-import { FontContext } from '../../../contexts';
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
@@ -96,11 +94,9 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   } = props;
   const { onEdit, changeSchemas, removeSchemas, onChangeHoveringSchemaId, paperRefs } = props;
 
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   const verticalGuides = useRef<GuidesInterface[]>([]);
   const horizontalGuides = useRef<GuidesInterface[]>([]);
   const moveable = useRef<any>(null);
-  const font = useContext(FontContext);
 
   const [isPressShiftKey, setIsPressShiftKey] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -223,12 +219,6 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onClickMoveable = (e: OnClick) => {
     e.inputEvent.stopPropagation();
     setEditing(true);
-    const ic = inputRef.current;
-    if (!ic) return;
-    ic.focus();
-    if (ic.type !== 'file') {
-      ic.setSelectionRange(ic.value.length, ic.value.length);
-    }
   };
 
   return (
@@ -319,17 +309,16 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
           </>
         )}
         renderSchema={({ schema }) => (
-          <SchemaUI
+          <Renderer
             key={schema.id}
             schema={schema}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-            editable={editing && activeElements.map((ae) => ae.id).includes(schema.id)}
+            mode={editing && activeElements.map((ae) => ae.id).includes(schema.id) ? 'form' : 'viewer'}
             onChange={(value) => {
               changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
             }}
-            onStopEditing={() => setEditing(false)}
+            stopEditing={() => setEditing(false)}
             outline={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
-            ref={inputRef}
           />
         )}
       />

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

@@ -0,0 +1,81 @@
+import React, { CSSProperties, useContext } from 'react';
+import {
+  SchemaForUI,
+  DEFAULT_FONT_COLOR,
+  DEFAULT_BARCODE_BG_COLOR,
+  DEFAULT_BARCODE_COLOR,
+} from '@pdfme/common';
+import { I18nContext } from '../../../../contexts';
+import { SidebarProps } from '..';
+import ColorInputSet from './FormComponents/ColorInputSet';
+
+const BarcodePropEditor = (
+  props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
+) => {
+  const i18n = useContext(I18nContext);
+  const { changeSchemas, activeSchema } = props;
+
+  if (activeSchema.type === 'text' || activeSchema.type === 'image') return <></>;
+
+  const barcodeHasText = activeSchema.type !== 'qrcode' && activeSchema.type !== 'gs1datamatrix';
+  const colorInputStyles: CSSProperties = {
+    width: barcodeHasText ? '30%' : '45%',
+    marginBottom: '10px',
+  };
+
+  return (
+    <section style={{ fontSize: '0.7rem' }}>
+      <div
+        style={{
+          marginBottom: '1rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }}
+      >
+        <ColorInputSet
+          label={i18n('barColor')}
+          value={activeSchema.barcolor ?? DEFAULT_BARCODE_COLOR}
+          onChange={(e) => {
+            changeSchemas([{ key: 'barcolor', value: e.target.value, schemaId: activeSchema.id }]);
+          }}
+          onClear={() =>
+            changeSchemas([
+              { key: 'barcolor', value: DEFAULT_FONT_COLOR, schemaId: activeSchema.id },
+            ])
+          }
+          extraStyle={colorInputStyles}
+        />
+
+        <ColorInputSet
+          label={i18n('bgColor')}
+          value={activeSchema.backgroundcolor ?? DEFAULT_BARCODE_BG_COLOR}
+          onChange={(e) => {
+            changeSchemas([{ key: 'backgroundcolor', value: e.target.value, schemaId: activeSchema.id }])
+          }}
+          onClear={() => {
+            changeSchemas([{ key: 'backgroundcolor', value: '', schemaId: activeSchema.id }])
+          }}
+          extraStyle={colorInputStyles}
+        />
+
+        {barcodeHasText && (
+          <ColorInputSet
+            label={i18n('textColor')}
+            value={activeSchema.textcolor ?? DEFAULT_FONT_COLOR}
+            onChange={(e) => {
+              changeSchemas([{ key: 'textcolor', value: e.target.value, schemaId: activeSchema.id }])
+            }}
+            onClear={() => {
+              changeSchemas([{ key: 'textcolor', value: '', schemaId: activeSchema.id }])
+            }}
+            extraStyle={colorInputStyles}
+          />
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default BarcodePropEditor;

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { readFiles } from '../../../../helper';
-import { FontContext, I18nContext } from '../../../../contexts';
+import { I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
@@ -10,7 +10,6 @@ const ExampleInputEditor = (
 ) => {
   const { changeSchemas, activeSchema } = props;
   const i18n = useContext(I18nContext);
-  const fontData = useContext(FontContext);
 
   return (
     <div>

package/src/components/Designer/Sidebar/DetailView/FormComponents/ColorInputSet.tsx

@@ -0,0 +1,50 @@
+import React, { ChangeEvent, CSSProperties } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+const baseInputStyle: CSSProperties = {
+  color: '#333',
+  background: 'none',
+  borderRadius: 2,
+  border: '1px solid #767676',
+};
+
+const ColorInputSet = (props: {
+  label: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onClear: () => void;
+  extraStyle?: CSSProperties;
+}) => {
+  const { label, value, onChange, onClear, extraStyle } = props;
+  const fieldId = 'input-' + label.replace(/\s/g, '');
+
+  return (
+    <div style={{ width: '45%', ...extraStyle }}>
+      <label htmlFor={fieldId}>{label}</label>
+      <div style={{ display: 'flex' }}>
+        <input
+          id={fieldId}
+          name={fieldId}
+          onChange={onChange}
+          value={value}
+          type="color"
+          style={{ ...baseInputStyle, width: '90%' }}
+        />
+        <button
+          onClick={onClear}
+          style={{
+            ...baseInputStyle,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer',
+          }}
+        >
+          <XMarkIcon width={10} height={10} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ColorInputSet;

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

@@ -1,8 +1,7 @@
-import React, { CSSProperties, useContext } from 'react';
+import React, { CSSProperties } from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { round } from '../../../../helper';
 import { SidebarProps } from '../index';
-import { FontContext } from '../../../../contexts';
 
 const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
@@ -38,7 +37,6 @@ const PositionAndSizeEditor = (
     activeSchema: SchemaForUI;
   }
 ) => {
-  const font = useContext(FontContext);
   const { changeSchemas, schemas, activeSchema, activeElements, pageSize } = props;
 
   const align = (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {