@dvrd/dvr-controls 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -18,10 +18,10 @@
     "2": "ie >= 11"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-brands-svg-icons": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@types/dompurify": "2.4.0",
     "@types/js-cookie": "3.0.2",
@@ -42,7 +42,6 @@
     "react-color": "2.19.3",
     "react-dom": "18.2.0",
     "react-rnd": "10.3.7",
-    "react-router": "^6.8.0",
     "react-router-dom": "6.4.3",
     "typescript": "4.9.3",
     "uuid": "9.0.0"

package/src/js/navigator/navigator.tsx

@@ -3,7 +3,6 @@
  */
 
 import React from 'react';
-// import {RouteComponentProps, withRouter} from "react-router";
 import { useNavigate } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
 import {debug} from '../util/miscUtil';

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -10,7 +10,6 @@ import {
     directTimeout,
     dispatchCustomEvent,
     DvrdButton,
-    generateComponentId,
     generateUUID,
     IndexedObject,
     PDFElementParams,
@@ -48,10 +47,11 @@ interface Props {
     maxWidth?: string;
     supportMultiPage: boolean;
     options?: PDFOptions;
+    singleImage: boolean;
 }
 
 interface State {
-    elements: IndexedObject<React.ReactElement>;
+    elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }>;
     focusedElement: PdfElement | null;
     canUndo: boolean;
     canRedo: boolean;
@@ -62,25 +62,20 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
         values: {},
         disableElements: [],
         supportMultiPage: false,
+        singleImage: false,
     };
-
-    private readonly id: string = generateComponentId(this.props.id, true);
     private refObjects: IndexedObject<PdfElement>;
 
-    state: State = {
-        elements: {}, focusedElement: null, canRedo: false, canUndo: false,
-    };
-
     constructor(props: Props) {
         super(props);
         this.refObjects = {};
-        const elements: IndexedObject<React.ReactElement> = this.processItems(props.defaultItems);
+        const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = this.processItems(props.defaultItems);
         this.state = {elements, focusedElement: null, canRedo: false, canUndo: false};
     }
 
     processItems = (items?: DefaultPDFElementParams<any, any>[],
-                    convertUnits: boolean = true): IndexedObject<React.ReactElement> => {
-        const elements: IndexedObject<React.ReactElement> = {};
+                    convertUnits: boolean = true): IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> => {
+        const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = {};
         if (items?.length) {
             items = JSON.parse(JSON.stringify(items));
             if (items) {
@@ -154,12 +149,13 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
 
     onAddElement = (type: PDFElementType) => (evt: React.MouseEvent) => {
         evt.stopPropagation();
-        const id = generateUUID(), scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + 50,
-            {elements} = this.state;
+        const id = generateUUID();
+        const scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + 50;
+        const newElements = Object.assign({}, this.state.elements);
 
-        elements[id] = this.getElement(id,
+        newElements[id] = this.getElement(id,
             {dimensions: {width: 150, height: 100, left: 50, top: scrollTop}, type});
-        this.setState({elements: Object.assign({}, elements)});
+        this.setState({elements: newElements});
     };
 
     onSubmit = () => {
@@ -189,7 +185,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     };
 
     getElement = (id: string, config: DefaultPDFElementParams<any, any>,
-                  convertUnits: boolean = true): React.ReactElement => {
+                  convertUnits: boolean = true): { element: React.ReactElement, config: DefaultPDFElementParams<any, any> } => {
         const {dimensions, linkedID, persistent} = config;
         const position: { x: number; y: number } = {
             x: convertUnits ? ptToPx(dimensions?.left || 0) : (dimensions?.left || 0),
@@ -212,20 +208,38 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
             defaultSettings: {...config.dimensions, ...config.options},
             key,
         }
+        let element = <div/>;
         switch (config.type) {
             case PDFElementType.TEXT:
-                return <PdfText {...sharedProps} values={values} persistent={persistent} mainFont={mainFont}
-                                linkedID={linkedID}/>;
+                element = <PdfText {...sharedProps} values={values} persistent={persistent} mainFont={mainFont}
+                                   linkedID={linkedID}/>;
+                break;
             case PDFElementType.IMAGE:
-                return <PdfImage {...sharedProps} values={values} width={width} height={height}
-                                 persistent={persistent}/>;
+                element = <PdfImage {...sharedProps} values={values} width={width} height={height}
+                                    persistent={persistent}/>;
+                break;
             case PDFElementType.INVOICE_TABLE:
-                return <PdfInvoiceTable {...sharedProps} width={width} height={height} mainFont={mainFont}
-                                        persistent={PDFElementPersist.PERSISTENT}/>;
+                element = <PdfInvoiceTable {...sharedProps} width={width} height={height} mainFont={mainFont}
+                                           persistent={PDFElementPersist.PERSISTENT}/>;
+                break;
         }
-        return <div/>;
+        return {element, config};
     };
 
+    canRenderImageButton = (): boolean => {
+        if (this.props.disableElements.includes('image')) return false;
+        if (!this.props.singleImage) return true;
+        const {elements} = this.state;
+        const elementIds = Object.keys(elements);
+        if (elementIds.length) {
+            for (const id of elementIds) {
+                const config = elements[id].config;
+                if (config.type === PDFElementType.IMAGE) return false;
+            }
+        }
+        return true;
+    }
+
     renderElementButton = (icon: IconName, label: string, type: PDFElementType) => (
         <div className='element-button' onClick={this.onAddElement(type)}>
             <AwesomeIcon name={icon} className='element-icon'/>
@@ -257,12 +271,13 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                     <div>
                         <DvrdButton onClick={this.onSubmit} label='Opslaan'/>
                         {onClickProceed !== undefined &&
-                            <DvrdButton onClick={this.onClickProceed} label='Naar volgende stap' className='proceed-btn'/>}
+                            <DvrdButton onClick={this.onClickProceed} label='Naar volgende stap'
+                                        className='proceed-btn'/>}
                     </div>
                 </div>
                 <div/>
                 <div className='elements-container'>
-                    {!disableElements.includes('image') &&
+                    {this.canRenderImageButton() &&
                         this.renderElementButton('image', 'Afbeelding', PDFElementType.IMAGE)}
                     {!disableElements.includes('text') &&
                         this.renderElementButton('font', 'Tekst', PDFElementType.TEXT)}
@@ -287,7 +302,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                 <div className='pdf-paper' onClick={this.onResetElement}>
                     {Object.keys(elements).map((id: string) => (
                         <Fragment key={id}>
-                            {elements[id]}
+                            {elements[id].element}
                         </Fragment>
                     ))}
                 </div>