@dvrd/dvr-controls 0.0.37 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "description": "Custom web controls",
   "main": "index.ts",
   "scripts": {},

package/src/js/pdf/image/pdfImage.tsx

@@ -5,7 +5,7 @@ import './style/pdfImage.scss';
 
 import React, {MouseEventHandler} from 'react';
 import {
-    ElementPosition, IndexedObject, PDFElementParams, PDFElementPersist, PDFElementType, PDFImageParams
+    ElementPosition, IndexedObject, PDFDisplay, PDFElementParams, PDFElementPersist, PDFElementType, PDFImageParams
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
 import {nullify} from "../../util/miscUtil";
@@ -28,7 +28,7 @@ interface Props {
 
 interface State {
     dragging: boolean;
-    settings: { img: string; persistent: PDFElementPersist; alignment?: ElementPosition;  multiPage?: boolean };
+    settings: { img: string; persistent: PDFElementPersist; alignment?: ElementPosition;  display?: PDFDisplay };
 }
 
 export default class PdfImage extends PdfElement<Props, State> {
@@ -46,7 +46,7 @@ export default class PdfImage extends PdfElement<Props, State> {
                 img: props.values?.default_image || '',
                 persistent: PDFElementPersist.NOT_PERSISTENT,
                 alignment: undefined,
-                multiPage: false,
+                display: PDFDisplay.ALL_PAGES,
             }, props.defaultSettings),
             dragging: false,
         };
@@ -125,7 +125,7 @@ export default class PdfImage extends PdfElement<Props, State> {
                 img: this.image ?? nullify(settings.img),
                 persistent: settings.persistent,
                 alignment: settings.alignment,
-                multiPage: settings.multiPage,
+                display: settings.display,
             },
         };
     };

package/src/js/pdf/invoiceTable/pdfInvoiceTable.tsx

@@ -151,7 +151,7 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
                 <PDFDraggable dragging={dragging} draggable={draggable} onDragStart={this.onDragStart}
                               alignment={settings.alignment} elementLabel='Factuurregels' onDragEnd={this.onDragEnd}
                               position={defaultPosition} width={width} height={height} onEdit={this.onClick}
-                              onClickBar={this.onClickBar}
+                              onClickBar={this.onClickBar} matchParentSize
                               forwardRef={(ref: HTMLDivElement) => {
                                   this.element = ref
                               }} ref={(ref: PDFDraggable) => {

package/src/js/pdf/settings/image/pdfImageSettings.tsx

@@ -5,8 +5,9 @@ import './style/pdfImageSettings.scss';
 
 import React, {PureComponent} from 'react';
 import PdfImage from "../../image/pdfImage";
-import {Button, Checkbox, ElementPosition} from "../../../../../index";
+import {Button, DvrdSelect, ElementPosition, SelectItemShape} from "../../../../../index";
 import IconButton, {IconButtonType} from "../buttons/iconButton";
+import {PDFDisplay} from "../../../util/interfaces";
 
 interface Props {
     element: PdfImage;
@@ -15,25 +16,31 @@ interface Props {
 
 interface State {
     alignment?: ElementPosition;
-    multiPage: boolean;
+    display: PDFDisplay;
 }
 
+const displayItems: SelectItemShape[] = [
+    {value: PDFDisplay.ALL_PAGES, label: 'Alle pagina\'s'},
+    {value: PDFDisplay.FIRST_PAGE, label: 'Alleen eerste pagina'},
+    {value: PDFDisplay.LAST_PAGE, label: 'Alleen laatste pagina'},
+]
+
 export default class PdfImageSettings extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         const settings = props.element.getSettings();
         this.state = {
             alignment: settings.alignment,
-            multiPage: settings.multiPage ?? false,
+            display: settings.display ?? PDFDisplay.ALL_PAGES,
         };
     }
 
-    onToggleMultiPage = (checked: boolean) => {
+    onChangeDisplay = (value: PDFDisplay) => {
         const {element} = this.props;
-        element.setSetting('multiPage', checked, () => {
-            this.setState({multiPage: checked});
+        element.setSetting('display', value, () => {
+            this.setState({display: value});
         })
-    };
+    }
 
     onToggleAlignment = (type: IconButtonType) => () => {
         const {alignment} = this.state, {element} = this.props;
@@ -50,12 +57,12 @@ export default class PdfImageSettings extends PureComponent<Props, State> {
     }
 
     render = () => {
-        const {element, supportMultiPage} = this.props, {alignment, multiPage} = this.state;
+        const {element, supportMultiPage} = this.props, {alignment, display} = this.state;
         return (
             <div className='pdf-image-settings'>
                 {supportMultiPage && <>
                     <label className='settings-title'>Pagina's</label>
-                    <Checkbox checked={multiPage} onCheck={this.onToggleMultiPage} label={'Toon op alle pagina\'s'}/>
+                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
                 </>}
                 <div className='divider'/>
                 <label className='settings-title'>Uitlijning</label>

package/src/js/pdf/settings/text/pdfTextSettings.tsx

@@ -5,8 +5,16 @@ import './style/pdfTextSettings.scss';
 
 import React, {PureComponent} from 'react';
 import PdfText from "../../text/pdfText";
-import {ElementPosition, IndexedObject, PdfFont, PDFTextParams, PDFTextVariables} from "../../../util/interfaces";
-import {Checkbox, ColorPicker, fontItems, getPdfVariables, NumberField, Select} from "../../../../../index";
+import {
+    ElementPosition,
+    IndexedObject,
+    PDFDisplay,
+    PdfFont,
+    PDFTextParams,
+    PDFTextVariables,
+    SelectItemShape
+} from "../../../util/interfaces";
+import {ColorPicker, DvrdSelect, fontItems, getPdfVariables, NumberField, Select} from "../../../../../index";
 import classNames from 'classnames';
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 
@@ -25,9 +33,15 @@ interface State extends IndexedObject<any> {
     font: PdfFont;
     color: string;
     colorPickerActive: boolean;
-    multiPage: boolean;
+    display: PDFDisplay;
 }
 
+const displayItems: SelectItemShape[] = [
+    {value: PDFDisplay.ALL_PAGES, label: 'Alle pagina\'s'},
+    {value: PDFDisplay.FIRST_PAGE, label: 'Alleen eerste pagina'},
+    {value: PDFDisplay.LAST_PAGE, label: 'Alleen laatste pagina'},
+]
+
 export default class PdfTextSettings extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
@@ -41,16 +55,16 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
             font: settings.font,
             color: settings.color,
             colorPickerActive: false,
-            multiPage: settings.multiPage ?? false,
+            display: settings.display ?? PDFDisplay.ALL_PAGES,
         };
     }
 
-    onToggleMultiPage = (checked: boolean) => {
+    onChangeDisplay = (value: PDFDisplay) => {
         const {element} = this.props;
-        element.setSetting('multiPage', checked, () => {
-            this.setState({multiPage: checked});
+        element.setSetting('display', value, () => {
+            this.setState({display: value});
         })
-    };
+    }
 
     onCloseColorPicker = () => {
         this.setState({colorPickerActive: false});
@@ -136,13 +150,13 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
 
     render = () => {
         const {element, supportMultiPage} = this.props,
-            {bold, underline, italic, alignment, colorPickerActive, color, multiPage} = this.state,
+            {bold, underline, italic, alignment, colorPickerActive, color, display} = this.state,
             settings: PDFTextParams = element.getSettings();
         return (
             <div className='pdf-text-settings'>
                 {supportMultiPage && <>
-                    <label className='settings-title'>Pagina's</label>
-                    <Checkbox checked={multiPage} onCheck={this.onToggleMultiPage} label={'Toon op alle pagina\'s'}/>
+                    <label className='settings-title'>Weergave</label>
+                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
                 </>}
                 <div className='divider'/>
                 <div className='text-settings'>

package/src/js/pdf/text/pdfText.tsx

@@ -5,7 +5,14 @@ import './style/pdfText.scss';
 
 import React, {CSSProperties, MouseEventHandler} from 'react';
 import {
-    CustomAppEvent, IndexedObject, PDFElementParams, PDFElementPersist, PDFElementType, PdfFont, PDFTextParams,
+    CustomAppEvent,
+    IndexedObject,
+    PDFDisplay,
+    PDFElementParams,
+    PDFElementPersist,
+    PDFElementType,
+    PdfFont,
+    PDFTextParams,
     PDFTextVariables
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
@@ -14,7 +21,7 @@ import {merge} from 'lodash';
 import {PAGE_WIDTH, pxToPt, setPdfVariables, waitForFonts} from "../../util/pdfUtil";
 import {directTimeout} from "../../util/componentUtil";
 import {dispatchCustomEvent, showDialog} from "../../util/eventUtil";
-import {WithEvents, remToPx} from "../../../../";
+import {remToPx, WithEvents} from "../../../../";
 
 interface Props {
     onDelete: MouseEventHandler;
@@ -60,7 +67,7 @@ export default class PdfText extends PdfElement<Props, State> {
                 font: props.mainFont,
                 color: '#000',
                 persistent: PDFElementPersist.NOT_PERSISTENT,
-                multiPage: false,
+                display: PDFDisplay.ALL_PAGES,
             }, props.defaultSettings),
             dragging: false,
             focused: false,
@@ -182,13 +189,13 @@ export default class PdfText extends PdfElement<Props, State> {
 
     getParams = (convertPixels: boolean = true): PDFElementParams<PDFElementType.TEXT, PDFTextParams> => {
         const {settings} = this.state,
-            {bold, italic, text, underline, alignment, font, color, persistent, multiPage} = settings,
+            {bold, italic, text, underline, alignment, font, color, persistent, display} = settings,
             fontSize = convertPixels ? pxToPt(settings.fontSize) : settings.fontSize, {linkedID} = this.props;
         return {
             dimensions: this.getDimensions(convertPixels),
             key: this.id,
             type: PDFElementType.TEXT,
-            options: {fontSize: fontSize, bold, italic, text, underline, alignment, font, color, persistent, multiPage},
+            options: {fontSize: fontSize, bold, italic, text, underline, alignment, font, color, persistent, display},
             linkedID: linkedID,
         };
     }

package/src/js/util/interfaces.ts

@@ -91,15 +91,25 @@ export enum PDFElementSubType {INVOICE_TITLE = 'invoice_title'}
 export enum PDFElementPersist {CONFIRM = 'confirm', PERSISTENT = 'persistent', NOT_PERSISTENT = 'not-persistent'}
 
 export enum PdfFont {
-    LATO = 'lato', MERRIWEATHER = 'merriweather', NOTO_SANS = 'noto-sans', NOTO_SERIF = 'noto-serif',
-    OPEN_SANS = 'open-sans', PLAYFAIR = 'playfair', PT_SERIF = 'pt-serif', ROBOTO = 'roboto', ROBOTO_MONO = 'roboto-mono',
-    HELVETICA = 'helvetica', SOURCE_SANS_PRO = 'source-sans-pro'
+    LATO = 'lato',
+    MERRIWEATHER = 'merriweather',
+    NOTO_SANS = 'noto-sans',
+    NOTO_SERIF = 'noto-serif',
+    OPEN_SANS = 'open-sans',
+    PLAYFAIR = 'playfair',
+    PT_SERIF = 'pt-serif',
+    ROBOTO = 'roboto',
+    ROBOTO_MONO = 'roboto-mono',
+    HELVETICA = 'helvetica',
+    SOURCE_SANS_PRO = 'source-sans-pro'
 }
 
 export enum MediaType {VIDEO, IMAGE}
 
 export enum SideMenuMode {COMPACT, FULL}
 
+export enum PDFDisplay {FIRST_PAGE = 'first_page', LAST_PAGE = 'last_page', ALL_PAGES = 'all_pages'}
+
 // =========== TYPES
 export type OptionsMenuItem = {
     label: string;
@@ -139,8 +149,8 @@ export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedO
     key: string;
     linkedID?: string;
 }>
-export type PDFImageParams = { img: File | string | null, persistent: PDFElementPersist; alignment?: ElementPosition; multiPage?: boolean };
-export type PDFTextParams = { bold: boolean; underline: boolean; italic: boolean; fontSize: number; text: string; alignment?: ElementPosition; disabled?: boolean, font: PdfFont, color: string; persistent: PDFElementPersist; multiPage?: boolean };
+export type PDFImageParams = { img: File | string | null, persistent: PDFElementPersist; alignment?: ElementPosition; display?: PDFDisplay };
+export type PDFTextParams = { bold: boolean; underline: boolean; italic: boolean; fontSize: number; text: string; alignment?: ElementPosition; disabled?: boolean, font: PdfFont, color: string; persistent: PDFElementPersist; display?: PDFDisplay };
 export type PDFInvoiceTableParams = { fontSize: number; widths: number[], font: PdfFont, color: string, alignment?: ElementPosition; persistent: PDFElementPersist };
 export type PDFInvoiceWidths = { name: number; price: number; quantity: number; subtotal: number }
 export type PDFTextVariables = { company: IndexedObject<string>; client: IndexedObject<string>; invoice: IndexedObject<string>; }