@dvrd/dvr-controls 0.0.34 → 0.0.38

package/package.json

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

package/src/js/date/style/dvrdDatePicker.scss

@@ -84,6 +84,7 @@
         opacity: 0;
         transition: color .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out;
         padding: .25rem;
+        user-select: none;
 
         &:hover {
           color: $color-gray-7;

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 };
+    settings: { img: string; persistent: PDFElementPersist; alignment?: ElementPosition;  display?: PDFDisplay };
 }
 
 export default class PdfImage extends PdfElement<Props, State> {
@@ -46,6 +46,7 @@ export default class PdfImage extends PdfElement<Props, State> {
                 img: props.values?.default_image || '',
                 persistent: PDFElementPersist.NOT_PERSISTENT,
                 alignment: undefined,
+                display: PDFDisplay.ALL_PAGES,
             }, props.defaultSettings),
             dragging: false,
         };
@@ -124,6 +125,7 @@ export default class PdfImage extends PdfElement<Props, State> {
                 img: this.image ?? nullify(settings.img),
                 persistent: settings.persistent,
                 alignment: settings.alignment,
+                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/pdfTemplateCreator.tsx

@@ -30,6 +30,7 @@ interface Props {
     mainFont: PdfFont;
     disableElements: ('text' | 'image' | 'invoiceTable')[];
     maxWidth?: string;
+    supportMultiPage: boolean;
 }
 
 interface State {
@@ -43,6 +44,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     static defaultProps = {
         values: {},
         disableElements: [],
+        supportMultiPage: false,
     };
 
     private readonly id: string = generateComponentId(this.props.id, true);
@@ -220,7 +222,9 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
 
     render = () => {
         const {elements, focusedElement, canUndo, canRedo,} = this.state,
-            {customVariables, onPreview, mainFont, disableElements, onClickProceed, maxWidth} = this.props;
+            {
+                customVariables, onPreview, mainFont, disableElements, onClickProceed, maxWidth, supportMultiPage
+            } = this.props;
         return (
             <div className='pdf-creator' onClick={this.onResetElement}
                  style={{maxWidth: maxWidth ?? '100%'}}>
@@ -229,17 +233,17 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                     <div>
                         <Button onClick={this.onSubmit} label='Opslaan'/>
                         {onClickProceed !== undefined &&
-                        <Button onClick={this.onClickProceed} label='Naar volgende stap' className='proceed-btn'/>}
+                            <Button onClick={this.onClickProceed} label='Naar volgende stap' className='proceed-btn'/>}
                     </div>
                 </div>
                 <div/>
                 <div className='elements-container'>
                     {!disableElements.includes('image') &&
-                    this.renderElementButton('image', 'Afbeelding', PDFElementType.IMAGE)}
+                        this.renderElementButton('image', 'Afbeelding', PDFElementType.IMAGE)}
                     {!disableElements.includes('text') &&
-                    this.renderElementButton('font', 'Tekst', PDFElementType.TEXT)}
+                        this.renderElementButton('font', 'Tekst', PDFElementType.TEXT)}
                     {!disableElements.includes('invoiceTable') &&
-                    this.renderElementButton('list', 'Factuurregels', PDFElementType.INVOICE_TABLE)}
+                        this.renderElementButton('list', 'Factuurregels', PDFElementType.INVOICE_TABLE)}
                     <div className='history'>
                         <div className={classNames('history-button', !canUndo && 'disabled')}
                              onClick={canUndo ? this.onUndo : voidFunction}
@@ -266,7 +270,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                 <div className='right-col'>
                     <PdfElementSettings element={focusedElement} onReset={this.onResetElement}
                                         customVariables={customVariables} font={mainFont}
-                                        onChangeFont={this.onChangeFont}/>
+                                        onChangeFont={this.onChangeFont} supportMultiPage={supportMultiPage}/>
                 </div>
             </div>
         )

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

@@ -5,26 +5,43 @@ import './style/pdfImageSettings.scss';
 
 import React, {PureComponent} from 'react';
 import PdfImage from "../../image/pdfImage";
-import {Button, 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;
+    supportMultiPage: boolean;
 }
 
 interface State {
     alignment?: ElementPosition;
+    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,
+            display: settings.display ?? PDFDisplay.ALL_PAGES,
         };
     }
 
+    onChangeDisplay = (value: PDFDisplay) => {
+        const {element} = this.props;
+        element.setSetting('display', value, () => {
+            this.setState({display: value});
+        })
+    }
+
     onToggleAlignment = (type: IconButtonType) => () => {
         const {alignment} = this.state, {element} = this.props;
         let nextAlignment: ElementPosition | undefined;
@@ -40,9 +57,14 @@ export default class PdfImageSettings extends PureComponent<Props, State> {
     }
 
     render = () => {
-        const {element} = this.props, {alignment} = 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>
+                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
+                </>}
+                <div className='divider'/>
                 <label className='settings-title'>Uitlijning</label>
                 <div className='alignment'>
                     <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.LEFT}

package/src/js/pdf/settings/pdfElementSettings.tsx

@@ -20,6 +20,7 @@ interface Props {
     element: PdfElement | null;
     customVariables?: PDFTextVariables;
     font: PdfFont;
+    supportMultiPage: boolean;
 }
 
 export default class PdfElementSettings extends PureComponent<Props> {
@@ -45,10 +46,12 @@ export default class PdfElementSettings extends PureComponent<Props> {
     };
 
     renderSettings = () => {
-        const {element, customVariables} = this.props;
+        const {element, customVariables, supportMultiPage} = this.props;
         if (element === null) return this.renderMainSettings();
-        if (element instanceof PdfText) return <PdfTextSettings element={element} customVariables={customVariables}/>;
-        if (element instanceof PdfImage) return <PdfImageSettings element={element}/>;
+        if (element instanceof PdfText) return <PdfTextSettings element={element} customVariables={customVariables}
+                                                                supportMultiPage={supportMultiPage}/>;
+        if (element instanceof PdfImage) return <PdfImageSettings element={element}
+                                                                  supportMultiPage={supportMultiPage}/>;
         if (element instanceof PdfInvoiceTable) return <PdfInvoiceTableSettings element={element}/>
         return null;
     };
@@ -74,7 +77,7 @@ export default class PdfElementSettings extends PureComponent<Props> {
                     <div className='buttons-container'>
                         <Button onClick={onReset} label='Oké' className='reset-btn'/>
                         {deleteAble &&
-                        <Button onClick={this.onClickDelete} label='Verwijderen' primary={false} textColor='red'/>}
+                            <Button onClick={this.onClickDelete} label='Verwijderen' primary={false} textColor='red'/>}
                     </div>
                 )}
             </div>

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

@@ -5,14 +5,23 @@ import './style/pdfTextSettings.scss';
 
 import React, {PureComponent} from 'react';
 import PdfText from "../../text/pdfText";
-import {ElementPosition, IndexedObject, PdfFont, PDFTextParams, PDFTextVariables} from "../../../util/interfaces";
-import {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";
 
 interface Props {
     element: PdfText;
     customVariables?: PDFTextVariables;
+    supportMultiPage: boolean;
 }
 
 interface State extends IndexedObject<any> {
@@ -24,8 +33,15 @@ interface State extends IndexedObject<any> {
     font: PdfFont;
     color: string;
     colorPickerActive: 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);
@@ -39,9 +55,17 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
             font: settings.font,
             color: settings.color,
             colorPickerActive: false,
+            display: settings.display ?? PDFDisplay.ALL_PAGES,
         };
     }
 
+    onChangeDisplay = (value: PDFDisplay) => {
+        const {element} = this.props;
+        element.setSetting('display', value, () => {
+            this.setState({display: value});
+        })
+    }
+
     onCloseColorPicker = () => {
         this.setState({colorPickerActive: false});
     };
@@ -125,10 +149,16 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
     );
 
     render = () => {
-        const {element} = this.props, {bold, underline, italic, alignment, colorPickerActive, color} = this.state,
+        const {element, supportMultiPage} = this.props,
+            {bold, underline, italic, alignment, colorPickerActive, color, display} = this.state,
             settings: PDFTextParams = element.getSettings();
         return (
             <div className='pdf-text-settings'>
+                {supportMultiPage && <>
+                    <label className='settings-title'>Weergave</label>
+                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
+                </>}
+                <div className='divider'/>
                 <div className='text-settings'>
                     <IconButton onClick={this.onToggleSetting} active={bold} type={IconButtonType.BOLD}
                                 title='Vet'/>

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;
@@ -34,6 +41,7 @@ interface Props {
 interface State {
     settings: PDFTextParams;
     dragging: boolean;
+    focused: boolean;
 }
 
 export default class PdfText extends PdfElement<Props, State> {
@@ -59,8 +67,10 @@ export default class PdfText extends PdfElement<Props, State> {
                 font: props.mainFont,
                 color: '#000',
                 persistent: PDFElementPersist.NOT_PERSISTENT,
+                display: PDFDisplay.ALL_PAGES,
             }, props.defaultSettings),
             dragging: false,
+            focused: false,
         }
         this.currentText = this.state.settings.text;
         this.events = [this.event, {eventName: 'onLinkedElementMoved', handler: this.onLinkedElementMoved}]
@@ -68,14 +78,23 @@ export default class PdfText extends PdfElement<Props, State> {
 
     private onBlur = (evt: React.FocusEvent<HTMLTextAreaElement>) => {
         this.lastKnownCursor = evt.target.selectionEnd || 0;
+        this.setState({focused: false}, this.setWidth);
         if (this.state.settings.text !== this.currentText) this.props.onSaveHistory();
     };
 
     private onFocus = (evt: React.FocusEvent) => {
         evt.stopPropagation();
+        this.setState({focused: true}, this.setWidth);
         this.currentText = this.state.settings.text;
+        this.onClick();
     };
 
+    getTextValue = (): string => {
+        const {settings, focused} = this.state, {values} = this.props;
+        if (focused) return settings.text;
+        return setPdfVariables(settings.text, values);
+    }
+
     public setSetting = (key: string, value: any, callback?: VoidFunction, save: boolean = true) => {
         this.setState({settings: Object.assign({}, this.state.settings, {[key]: value})}, () => {
             this.setWidth();
@@ -104,8 +123,9 @@ export default class PdfText extends PdfElement<Props, State> {
         this.onClick(evt);
     };
 
-    onClick = (evt: React.MouseEvent) => {
-        evt.stopPropagation();
+    onClick = (evt?: React.MouseEvent) => {
+        if (evt)
+            evt.stopPropagation();
         this.props.onFocusElement(this);
         if (this.draggable)
             this.draggable.setFocus();
@@ -168,13 +188,14 @@ 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} = settings,
+        const {settings} = this.state,
+            {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},
+            options: {fontSize: fontSize, bold, italic, text, underline, alignment, font, color, persistent, display},
             linkedID: linkedID,
         };
     }
@@ -215,7 +236,6 @@ export default class PdfText extends PdfElement<Props, State> {
     render = () => {
         const {settings, dragging} = this.state, {
             draggable,
-            values,
             defaultPosition,
             onSaveHistory,
             persistent
@@ -234,7 +254,7 @@ export default class PdfText extends PdfElement<Props, State> {
                     <div className='pdf-text-container'>
                     <textarea className='pdf-text-input' style={this.getTextStyle()}
                               readOnly={settings.disabled === true}
-                              value={sanitizeHtml(setPdfVariables(settings.text, values))} onChange={this.onChange}
+                              value={sanitizeHtml(this.getTextValue())} onChange={this.onChange}
                               rows={this.getRows()} onFocus={this.onFocus} onBlur={this.onBlur} onClick={this.onClick}
                               ref={(ref: HTMLTextAreaElement) => {
                                   this.field = ref

package/src/js/textField/dvrdNumberInput.tsx

@@ -33,6 +33,7 @@ interface Props {
     asCurrency: boolean;
     autoSelect?: boolean;
 }
+// TODO Add option to disable symbols (+,-)
 
 export default class DvrdNumberInput extends PureComponent<Props> {
     static defaultProps = {

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 };
-export type PDFTextParams = { bold: boolean; underline: boolean; italic: boolean; fontSize: number; text: string; alignment?: ElementPosition; disabled?: boolean, font: PdfFont, color: string; persistent: PDFElementPersist };
+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>; }