@dvrd/dvr-controls 0.0.33 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.33",
+  "version": "0.0.37",
   "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

@@ -28,7 +28,7 @@ interface Props {
 
 interface State {
     dragging: boolean;
-    settings: { img: string; persistent: PDFElementPersist; alignment?: ElementPosition };
+    settings: { img: string; persistent: PDFElementPersist; alignment?: ElementPosition;  multiPage?: boolean };
 }
 
 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,
+                multiPage: false,
             }, 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,
+                multiPage: settings.multiPage,
             },
         };
     };

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,15 +5,17 @@ import './style/pdfImageSettings.scss';
 
 import React, {PureComponent} from 'react';
 import PdfImage from "../../image/pdfImage";
-import {Button, ElementPosition} from "../../../../../index";
+import {Button, Checkbox, ElementPosition} from "../../../../../index";
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 
 interface Props {
     element: PdfImage;
+    supportMultiPage: boolean;
 }
 
 interface State {
     alignment?: ElementPosition;
+    multiPage: boolean;
 }
 
 export default class PdfImageSettings extends PureComponent<Props, State> {
@@ -22,9 +24,17 @@ export default class PdfImageSettings extends PureComponent<Props, State> {
         const settings = props.element.getSettings();
         this.state = {
             alignment: settings.alignment,
+            multiPage: settings.multiPage ?? false,
         };
     }
 
+    onToggleMultiPage = (checked: boolean) => {
+        const {element} = this.props;
+        element.setSetting('multiPage', checked, () => {
+            this.setState({multiPage: checked});
+        })
+    };
+
     onToggleAlignment = (type: IconButtonType) => () => {
         const {alignment} = this.state, {element} = this.props;
         let nextAlignment: ElementPosition | undefined;
@@ -40,9 +50,14 @@ export default class PdfImageSettings extends PureComponent<Props, State> {
     }
 
     render = () => {
-        const {element} = this.props, {alignment} = this.state;
+        const {element, supportMultiPage} = this.props, {alignment, multiPage} = 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'}/>
+                </>}
+                <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

@@ -6,13 +6,14 @@ 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 {Checkbox, ColorPicker, 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,6 +25,7 @@ interface State extends IndexedObject<any> {
     font: PdfFont;
     color: string;
     colorPickerActive: boolean;
+    multiPage: boolean;
 }
 
 export default class PdfTextSettings extends PureComponent<Props, State> {
@@ -39,9 +41,17 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
             font: settings.font,
             color: settings.color,
             colorPickerActive: false,
+            multiPage: settings.multiPage ?? false,
         };
     }
 
+    onToggleMultiPage = (checked: boolean) => {
+        const {element} = this.props;
+        element.setSetting('multiPage', checked, () => {
+            this.setState({multiPage: checked});
+        })
+    };
+
     onCloseColorPicker = () => {
         this.setState({colorPickerActive: false});
     };
@@ -125,10 +135,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, multiPage} = 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'}/>
+                </>}
+                <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

@@ -34,6 +34,7 @@ interface Props {
 interface State {
     settings: PDFTextParams;
     dragging: boolean;
+    focused: boolean;
 }
 
 export default class PdfText extends PdfElement<Props, State> {
@@ -59,8 +60,10 @@ export default class PdfText extends PdfElement<Props, State> {
                 font: props.mainFont,
                 color: '#000',
                 persistent: PDFElementPersist.NOT_PERSISTENT,
+                multiPage: false,
             }, props.defaultSettings),
             dragging: false,
+            focused: false,
         }
         this.currentText = this.state.settings.text;
         this.events = [this.event, {eventName: 'onLinkedElementMoved', handler: this.onLinkedElementMoved}]
@@ -68,14 +71,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 +116,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 +181,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, multiPage} = 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, multiPage},
             linkedID: linkedID,
         };
     }
@@ -215,7 +229,6 @@ export default class PdfText extends PdfElement<Props, State> {
     render = () => {
         const {settings, dragging} = this.state, {
             draggable,
-            values,
             defaultPosition,
             onSaveHistory,
             persistent
@@ -234,7 +247,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/select/dvrdSelectController.tsx

@@ -23,7 +23,7 @@ interface Props {
     itemClassName?: string;
     itemsPosition: 'top' | 'bottom';
     selectOnly: boolean;
-    optionsContainerHeight?: number | string;
+    optionsContainerHeight: number | string;
 }
 
 interface State {

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

@@ -139,8 +139,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; 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 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>; }