@dvrd/dvr-controls 1.0.30 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -3,7 +3,7 @@
  */
 import './style/pdfTemplateCreator.scss';
 
-import React, {Fragment, PureComponent} from 'react';
+import React, {Fragment, PureComponent, ReactElement} from 'react';
 import {
     AwesomeIcon,
     DefaultPDFElementParams,
@@ -48,6 +48,7 @@ interface Props {
     supportMultiPage: boolean;
     options?: PDFOptions;
     singleImage: boolean;
+    headerButtons?: Array<ReactElement>;
 }
 
 interface State {
@@ -69,12 +70,18 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         this.refObjects = {};
-        const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = 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<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> => {
+                    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));
@@ -185,7 +192,10 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     };
 
     getElement = (id: string, config: DefaultPDFElementParams<any, any>,
-                  convertUnits: boolean = true): { element: React.ReactElement, config: DefaultPDFElementParams<any, any> } => {
+                  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),
@@ -267,7 +277,10 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
             <div className='pdf-creator' onClick={this.onResetElement}
                  style={{maxWidth: maxWidth ?? '100%'}}>
                 <div className='footer-container'>
-                    {onPreview !== undefined ? <DvrdButton onClick={this.onPreview} label='Voorbeeld'/> : <div/>}
+                    <div className='left-buttons'>
+                        {onPreview !== undefined ? <DvrdButton onClick={this.onPreview} label='Voorbeeld'/> : <div/>}
+                        {this.props.headerButtons?.map((el: ReactElement, index: number) => React.cloneElement(el, {key: index}))}
+                    </div>
                     <div>
                         <DvrdButton onClick={this.onSubmit} label='Opslaan'/>
                         {onClickProceed !== undefined &&

package/src/js/pdf/style/pdfTemplateCreator.scss

@@ -111,6 +111,14 @@
     justify-content: space-between;
     align-items: center;
 
+    .left-buttons {
+      flex: 1;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: fit-content(100%);
+      grid-column-gap: 1rem;
+    }
+
     .proceed-btn {
       margin-left: 1rem;
     }