@dvrd/dvr-controls 1.0.17 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": ["src/**/*"],

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

@@ -41,6 +41,7 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
                 fontSize: 12,
                 font: props.mainFont,
                 color: '#000',
+                headerColor: '#000',
                 alignment: ElementPosition.CENTER,
                 persistent: PDFElementPersist.NOT_PERSISTENT,
             }, props.defaultSettings),
@@ -59,6 +60,7 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
                 fontSize,
                 font: settings.font,
                 color: settings.color,
+                headerColor: settings.headerColor,
                 alignment: settings.alignment,
                 persistent: settings.persistent,
             },
@@ -82,11 +84,12 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
     };
 
     private getRowStyle = (isHeadRow: boolean = false): React.CSSProperties => {
-        const {widths, fontSize, font, color} = this.state.settings,
+        const {widths, fontSize, font, color, headerColor} = this.state.settings,
             style: React.CSSProperties = {fontSize, fontFamily: font, color};
         if (isHeadRow) {
             style.fontWeight = font === PdfFont.HELVETICA ? 600 : 500;
             style.borderBottom = '2px solid #d8d8d8';
+            style.color = headerColor;
         }
         style.gridTemplateColumns = widths.join('% ') + '%';
         return style;
@@ -145,7 +148,13 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
     };
 
     render = () => {
-        const {dragging, settings} = this.state, {draggable, defaultPosition, width, height, onSaveHistory} = this.props;
+        const {dragging, settings} = this.state, {
+            draggable,
+            defaultPosition,
+            width,
+            height,
+            onSaveHistory
+        } = this.props;
         return (
             <WithEvents events={this.event}>
                 <PDFDraggable dragging={dragging} draggable={draggable} onDragStart={this.onDragStart}
@@ -160,7 +169,7 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
                               onResized={onSaveHistory} onDragged={onSaveHistory}>
                     <div className='pdf-invoice-table' onClick={this.onClick}>
                         <div className='invoice-line' style={this.getRowStyle(true)}>
-                            <span>Productnaam</span>
+                            <span>Omschrijving</span>
                             <span>Aantal</span>
                             <span>Bedrag</span>
                             <span>BTW</span>

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -5,9 +5,24 @@ import './style/pdfTemplateCreator.scss';
 
 import React, {Fragment, PureComponent} from 'react';
 import {
-    AwesomeIcon, Button, DefaultPDFElementParams, directTimeout, dispatchCustomEvent, generateComponentId,
-    IndexedObject, PDFElementParams, PDFElementPersist, PDFElementType, PdfFont, PDFSubmitHandler, PDFTextVariables,
-    ptToPx, setElementSettings, voidFunction, generateUUID
+    AwesomeIcon,
+    DefaultPDFElementParams,
+    directTimeout,
+    dispatchCustomEvent,
+    DvrdButton,
+    generateComponentId,
+    generateUUID,
+    IndexedObject,
+    PDFElementParams,
+    PDFElementPersist,
+    PDFElementType,
+    PdfFont,
+    PDFOptions,
+    PDFSubmitHandler,
+    PDFTextVariables,
+    ptToPx,
+    setElementSettings,
+    voidFunction
 } from "../../../";
 import PdfText from "./text/pdfText";
 import classNames from 'classnames';
@@ -16,7 +31,7 @@ import PdfElementSettings from "./settings/pdfElementSettings";
 import PdfImage from "./image/pdfImage";
 import PdfInvoiceTable from "./invoiceTable/pdfInvoiceTable";
 import {addToHistory, canRedo, canUndo, clearHistory, redo, undo} from "./history/pdfHistory";
-import { IconName } from '@fortawesome/fontawesome-svg-core';
+import {IconName} from '@fortawesome/fontawesome-svg-core';
 
 interface Props {
     onClickProceed?: PDFSubmitHandler;
@@ -32,6 +47,7 @@ interface Props {
     disableElements: ('text' | 'image' | 'invoiceTable')[];
     maxWidth?: string;
     supportMultiPage: boolean;
+    options?: PDFOptions;
 }
 
 interface State {
@@ -174,11 +190,15 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
 
     getElement = (id: string, config: DefaultPDFElementParams<any, any>,
                   convertUnits: boolean = true): React.ReactElement => {
-        const {dimensions, linkedID, persistent} = config, position: { x: number; y: number } = {
-                x: convertUnits ? ptToPx(dimensions?.left || 0) : (dimensions?.left || 0),
-                y: convertUnits ? ptToPx(dimensions?.top || 0) : (dimensions?.top || 0),
-            }, width = dimensions?.width, height = dimensions?.height, {values, mainFont} = this.props,
-            key: string = generateUUID();
+        const {dimensions, linkedID, persistent} = config;
+        const position: { x: number; y: number } = {
+            x: convertUnits ? ptToPx(dimensions?.left || 0) : (dimensions?.left || 0),
+            y: convertUnits ? ptToPx(dimensions?.top || 0) : (dimensions?.top || 0),
+        };
+        const width = dimensions?.width;
+        const height = dimensions?.height;
+        const {values, mainFont} = this.props;
+        const key: string = generateUUID();
         const sharedProps = {
             defaultPosition: position,
             onDelete: this.onDeleteElement(id),
@@ -224,17 +244,20 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     render = () => {
         const {elements, focusedElement, canUndo, canRedo,} = this.state,
             {
-                customVariables, onPreview, mainFont, disableElements, onClickProceed, maxWidth, supportMultiPage
+                customVariables, onPreview, mainFont, onClickProceed, maxWidth
             } = this.props;
+        const disableElements = this.props.options?.disableElements ?? this.props.disableElements;
+        const supportMultiPage = this.props.options?.supportMultiPage ?? this.props.supportMultiPage;
+        const enableTableHeaderColor = this.props.options?.enableTableHeaderColor;
         return (
             <div className='pdf-creator' onClick={this.onResetElement}
                  style={{maxWidth: maxWidth ?? '100%'}}>
                 <div className='footer-container'>
-                    {onPreview !== undefined ? <Button onClick={this.onPreview} label='Voorbeeld'/> : <div/>}
+                    {onPreview !== undefined ? <DvrdButton onClick={this.onPreview} label='Voorbeeld'/> : <div/>}
                     <div>
-                        <Button onClick={this.onSubmit} label='Opslaan'/>
+                        <DvrdButton onClick={this.onSubmit} label='Opslaan'/>
                         {onClickProceed !== undefined &&
-                            <Button onClick={this.onClickProceed} label='Naar volgende stap' className='proceed-btn'/>}
+                            <DvrdButton onClick={this.onClickProceed} label='Naar volgende stap' className='proceed-btn'/>}
                     </div>
                 </div>
                 <div/>
@@ -258,7 +281,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                         </div>
                     </div>
                     <div className='history-reset'>
-                        <Button onClick={this.onReset} label='Reset'/>
+                        <DvrdButton onClick={this.onReset} label='Reset'/>
                     </div>
                 </div>
                 <div className='pdf-paper' onClick={this.onResetElement}>
@@ -271,6 +294,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                 <div className='right-col'>
                     <PdfElementSettings element={focusedElement} onReset={this.onResetElement}
                                         customVariables={customVariables} font={mainFont}
+                                        enableTableHeaderColor={enableTableHeaderColor}
                                         onChangeFont={this.onChangeFont} supportMultiPage={supportMultiPage}/>
                 </div>
             </div>

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

@@ -5,7 +5,7 @@ import './style/pdfImageSettings.scss';
 
 import React, {PureComponent} from 'react';
 import PdfImage from "../../image/pdfImage";
-import {Button, DvrdSelect, ElementPosition, SelectItemShape} from "../../../../../index";
+import {Button, DvrdButton, DvrdSelect, ElementPosition, SelectItemShape} from "../../../../../index";
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 import {PDFDisplay} from "../../../util/interfaces";
 
@@ -62,7 +62,7 @@ export default class PdfImageSettings extends PureComponent<Props, State> {
             <div className='pdf-image-settings'>
                 {supportMultiPage && <>
                     <label className='settings-title'>Pagina's</label>
-                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
+                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems} unControlled/>
                 </>}
                 <div className='divider'/>
                 <label className='settings-title'>Uitlijning</label>
@@ -75,7 +75,7 @@ export default class PdfImageSettings extends PureComponent<Props, State> {
                                 type={IconButtonType.RIGHT} title='Rechts'/>
                 </div>
                 <div className='divider'/>
-                <Button onClick={element.onChooseFile} label='Kies afbeelding'/>
+                <DvrdButton onClick={element.onChooseFile} label='Kies afbeelding'/>
             </div>
         )
     }

package/src/js/pdf/settings/invoiceTable/pdfInvoiceTableSettings.tsx

@@ -5,25 +5,27 @@ import './style/pdfInvoiceTableSettings.scss';
 
 import React, {PureComponent} from 'react';
 import PdfInvoiceTable from "../../invoiceTable/pdfInvoiceTable";
-import NumberInput from "../../../input/number/numberInput";
 import {debug} from "../../../util/miscUtil";
 import {ElementPosition} from "../../../util/interfaces";
 import {fontItems} from "../../../util/pdfUtil";
-import {ColorPicker, Select} from "../../../../../index";
+import {ColorPicker, DvrdNumberInput, DvrdSelect} from "../../../../../index";
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 
 interface Props {
     element: PdfInvoiceTable;
+    headColorEnabled?: boolean;
 }
 
 interface State {
     widths: number[];
     color: string;
+    headerColor: string;
     colorPickerActive: boolean;
+    headColorPickerActive: boolean;
     alignment?: ElementPosition;
 }
 
-const TITLES = ['Productnaam', 'Aantal', 'Prijs', 'BTW', 'Subtotaal'];
+const TITLES = ['Omschrijving', 'Aantal', 'Prijs', 'BTW', 'Subtotaal'];
 
 export default class PdfInvoiceTableSettings extends PureComponent<Props, State> {
     constructor(props: Props) {
@@ -32,7 +34,9 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
         this.state = {
             widths: settings.widths,
             color: settings.color,
+            headerColor: settings.headerColor,
             colorPickerActive: false,
+            headColorPickerActive: false,
             alignment: settings.alignment,
         };
     }
@@ -56,6 +60,25 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
         });
     };
 
+    onCloseHeadColorPicker = () => {
+        this.setState({headColorPickerActive: false});
+    };
+
+    onOpenHeadColorPicker = () => {
+        this.setState({headColorPickerActive: true});
+    };
+
+    onPickHeadColor = (close: boolean = true) => (color: string) => {
+        const {element} = this.props;
+        if (close)
+            this.setState({headColorPickerActive: false, headerColor: color}, () => {
+                element.setSetting('headerColor', color)
+            });
+        else this.setState({headerColor: color}, () => {
+            element.setSetting('headerColor', color, undefined, false);
+        });
+    };
+
     onChangeWidth = (index: number) => (value: number) => {
         const {element} = this.props, widths = element.getSettings().widths.slice(),
             remainder = this.getRemainingWidth(index);
@@ -93,18 +116,19 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
     renderWidth = (value: number, index: number) => {
         const title = TITLES[index];
         return (
-            <NumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
+            <DvrdNumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
                          ornaments={{
                              element: <span style={{cursor: 'text'}}>%</span>,
                              placement: ElementPosition.RIGHT,
                              allowPropagation: true
-                         }} asNumber/>
+                         }} asNumber unControlled/>
         );
     };
 
     render = () => {
-        const {widths, colorPickerActive, color, alignment} = this.state, {element} = this.props,
-            settings = element.getSettings();
+        const {widths, colorPickerActive, color, alignment, headerColor, headColorPickerActive} = this.state;
+        const {element, headColorEnabled} = this.props;
+        const settings = element.getSettings();
         return (
             <div className='pdf-invoice-table-settings'>
                 <label className='settings-label'>Kolom breedtes</label>
@@ -119,14 +143,15 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
                 {widths.map(this.renderWidth)}
                 <div className='divider'/>
                 <label className='settings-label'>Tekstgrootte</label>
-                <Select items={fontItems} value={settings.font} onSelect={element.changeSetting('font')}
-                        label='Lettertype' selectOnly unControlled itemsHeight='15rem' fullWidth/>
-                <NumberInput value={settings.fontSize.toString()} onChange={element.changeSetting('fontSize')} asNumber
-                             ornaments={{
-                                 element: <span style={{cursor: 'text'}}>px</span>,
-                                 placement: ElementPosition.RIGHT,
-                                 allowPropagation: true
-                             }} wholeNumbers unControlled/>
+                <DvrdSelect items={fontItems} value={settings.font} onChange={element.changeSetting('font')}
+                            label='Lettertype' optionsContainerHeight='15rem' unControlled/>
+                <DvrdNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
+                                 asNumber
+                                 ornaments={{
+                                     element: <span style={{cursor: 'text'}}>px</span>,
+                                     placement: ElementPosition.RIGHT,
+                                     allowPropagation: true
+                                 }} wholeNumbers unControlled/>
                 <div className='settings-color-picker'>
                     <label className='picker-label'>Tekstkleur:</label>
                     <div className='color-preview' style={{backgroundColor: color}}
@@ -135,6 +160,15 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
                                  onPreChange={this.onPickColor(false)} color={settings.color}
                                  visible={colorPickerActive} className='text-color-picker' transparent/>
                 </div>
+                {!!headColorEnabled && <div className='settings-color-picker'>
+                    <label className='picker-label'>Kleur kopregel:</label>
+                    <div className='color-preview' style={{backgroundColor: headerColor}}
+                         onClick={this.onOpenHeadColorPicker}/>
+                    <ColorPicker onClose={this.onCloseHeadColorPicker} onSubmit={this.onPickHeadColor()}
+                                 closeable={false} onPreChange={this.onPickHeadColor(false)}
+                                 color={settings.headerColor} visible={headColorPickerActive}
+                                 className='text-color-picker' transparent/>
+                </div>}
             </div>
         )
     }

package/src/js/pdf/settings/invoiceTable/style/pdfInvoiceTableSettings.scss

@@ -8,6 +8,7 @@
   display: grid;
   grid-template-columns: repeat(2, calc(50% - .125rem));
   grid-gap: .5rem;
+  align-items: end;
 
   .center-btn {
     grid-column-start: span 2;

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

@@ -6,21 +6,24 @@ import './style/pdfElementSettings.scss';
 import React, {MouseEventHandler, PureComponent} from 'react';
 import {PdfElement} from "../element/pdfElement";
 import PdfText from "../text/pdfText";
-import {PDFElementPersist, PdfFont, PDFTextVariables} from "../../util/interfaces";
-import {Button, fontItems, Select, showDialog, stopPropagation} from "../../../../";
+import {ChangeFunction, PDFElementPersist, PdfFont, PDFTextVariables} from "../../util/interfaces";
+import {fontItems, showDialog, stopPropagation} from "../../../../";
 import PdfTextSettings from "./text/pdfTextSettings";
 import PdfImage from "../image/pdfImage";
 import PdfImageSettings from "./image/pdfImageSettings";
 import PdfInvoiceTable from "../invoiceTable/pdfInvoiceTable";
 import PdfInvoiceTableSettings from "./invoiceTable/pdfInvoiceTableSettings";
+import DvrdButton from "../../button/dvrdButton";
+import DvrdSelect from '../../select/dvrdSelectController';
 
 interface Props {
     onReset: MouseEventHandler;
-    onChangeFont: (font: PdfFont) => void;
+    onChangeFont: ChangeFunction;
     element: PdfElement | null;
     customVariables?: PDFTextVariables;
     font: PdfFont;
     supportMultiPage: boolean;
+    enableTableHeaderColor?: boolean;
 }
 
 export default class PdfElementSettings extends PureComponent<Props> {
@@ -46,13 +49,14 @@ export default class PdfElementSettings extends PureComponent<Props> {
     };
 
     renderSettings = () => {
-        const {element, customVariables, supportMultiPage} = this.props;
+        const {element, customVariables, supportMultiPage, enableTableHeaderColor} = this.props;
         if (element === null) return this.renderMainSettings();
         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}/>
+        if (element instanceof PdfInvoiceTable) return <PdfInvoiceTableSettings element={element}
+                                                                                headColorEnabled={enableTableHeaderColor}/>
         return null;
     };
 
@@ -60,8 +64,8 @@ export default class PdfElementSettings extends PureComponent<Props> {
         const {font, onChangeFont} = this.props;
         return (
             <div className='main-settings'>
-                <Select items={fontItems} value={font} onSelect={onChangeFont} label='Standaard lettertype'
-                        selectOnly fullWidth/>
+                <DvrdSelect items={fontItems} value={font} onChange={onChangeFont} label='Standaard lettertype'
+                            unControlled/>
             </div>
         )
     };
@@ -75,9 +79,10 @@ export default class PdfElementSettings extends PureComponent<Props> {
                 {this.renderSettings()}
                 {element !== null && (
                     <div className='buttons-container'>
-                        <Button onClick={onReset} label='Oké' className='reset-btn'/>
+                        <DvrdButton onClick={onReset} label='Oké' className='reset-btn'/>
                         {deleteAble &&
-                            <Button onClick={this.onClickDelete} label='Verwijderen' primary={false} textColor='red'/>}
+                            <DvrdButton onClick={this.onClickDelete} label='Verwijderen' customContrastColor='red'
+                                        secondary/>}
                     </div>
                 )}
             </div>

package/src/js/pdf/settings/style/pdfElementSettings.scss

@@ -36,9 +36,11 @@
     display: flex;
     align-items: center;
     position: relative;
+    grid-column-start: span 2;
 
     .picker-label {
       margin-right: .5rem;
+      width: 7.5rem;
     }
 
     .color-preview {

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

@@ -14,7 +14,7 @@ import {
     PDFTextVariables,
     SelectItemShape
 } from "../../../util/interfaces";
-import {ColorPicker, DvrdSelect, fontItems, getPdfVariables, NumberField, Select} from "../../../../../index";
+import {ColorPicker, DvrdNumberInput, DvrdSelect, fontItems, getPdfVariables} from "../../../../../index";
 import classNames from 'classnames';
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 
@@ -156,7 +156,7 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
             <div className='pdf-text-settings'>
                 {supportMultiPage && <>
                     <label className='settings-title'>Weergave</label>
-                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
+                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems} unControlled/>
                 </>}
                 <div className='divider'/>
                 <div className='text-settings'>
@@ -175,16 +175,15 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
                 </div>
                 <div className='divider'/>
                 <div className='font-settings'>
-                    <Select items={fontItems} value={settings.font} onSelect={element.changeSetting('font')}
-                            label='Lettertype' selectOnly unControlled itemsHeight='15rem' fullWidth/>
-                    <NumberField value={settings.fontSize.toString()} onChange={element.changeSetting('fontSize')}
-                                 label='Tekstgrootte' className='font-size'
-                                 ornaments={{
-                                     element: <span style={{cursor: 'text'}}>px</span>,
-                                     placement: ElementPosition.RIGHT,
-                                     allowPropagation: true
-                                 }} wholeNumbers
-                                 asNumber unControlled/>
+                    <DvrdSelect items={fontItems} value={settings.font} onChange={element.changeSetting('font')}
+                                label='Lettertype' optionsContainerHeight='15rem' unControlled/>
+                    <DvrdNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
+                                     label='Tekstgrootte' className='font-size'
+                                     ornaments={{
+                                         element: <span style={{cursor: 'text'}}>px</span>,
+                                         placement: ElementPosition.RIGHT,
+                                         allowPropagation: true
+                                     }} wholeNumbers asNumber unControlled/>
                     <div className='settings-color-picker'>
                         <label className='picker-label'>Tekstkleur:</label>
                         <div className='color-preview' style={{backgroundColor: color}}

package/src/js/select/dvrdSelectController.tsx

@@ -24,10 +24,12 @@ interface Props {
     itemsPosition: 'top' | 'bottom';
     selectOnly: boolean;
     optionsContainerHeight: number | string;
+    unControlled?: boolean;
 }
 
 interface State {
     searchValue: string;
+    value: string | number;
 }
 
 export default class DvrdSelectController extends PureComponent<Props, State> {
@@ -41,10 +43,12 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
 
     state: State = {
         searchValue: '',
+        value: this.props.value,
     };
 
-    onChange = (value: string) => () => {
+    onChange = (value: string | number) => () => {
         this.props.onChange(value);
+        this.setState({value});
     };
 
     onChangeSearch = (evt: React.ChangeEvent<HTMLInputElement>) => {
@@ -65,8 +69,9 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
     render = () => {
         const {
             arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
-            itemClassName, errorClassName, disabled, value, itemsPosition, selectOnly, optionsContainerHeight
+            itemClassName, errorClassName, disabled, itemsPosition, selectOnly, optionsContainerHeight, unControlled
         } = this.props, {searchValue} = this.state;
+        const value = !!unControlled ? this.state.value : this.props.value;
         return (
             <DvrdSelect onChange={this.onChange} value={value} items={this.getItems()} disabled={disabled}
                         errorClassName={errorClassName} itemClassName={itemClassName}

package/src/js/textField/dvrdNumberInput.tsx

@@ -32,21 +32,34 @@ interface Props {
     asNumber?: boolean;
     asCurrency: boolean;
     autoSelect?: boolean;
+    unControlled?: boolean;
 }
+
 // TODO Add option to disable symbols (+,-)
 
-export default class DvrdNumberInput extends PureComponent<Props> {
+interface State {
+    value: number | string;
+}
+
+export default class DvrdNumberInput extends PureComponent<Props, State> {
     static defaultProps = {
         asCurrency: false,
         wholeNumbers: false,
         multipleSeparators: false,
     }
 
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            value: props.value,
+        };
+    }
+
+
     onKeyDown = (evt: React.KeyboardEvent) => {
-        const {onKeyDown, asCurrency, wholeNumbers, inputProps, asNumber, value, multipleSeparators} = this.props, {
-            key,
-            target
-        } = evt;
+        const {onKeyDown, asCurrency, wholeNumbers, inputProps, asNumber, multipleSeparators} = this.props;
+        const {value} = this.state;
+        const {key, target} = evt;
         let numValue = Number(value);
         // Allow only number and simple edit keys
         if (!/\d|Backspace|ArrowRight|ArrowLeft|ArrowUp|ArrowDown|Escape|Esc|Enter|[,.\-+]|Tab/.test(key) &&
@@ -134,8 +147,10 @@ export default class DvrdNumberInput extends PureComponent<Props> {
     };
 
     render = () => {
+        const value = this.props.unControlled ? this.state.value : this.props.value;
         return (
-            <DvrdInputController {...this.props} onChange={this.onChange} onKeyDown={this.onKeyDown}/>
+            <DvrdInputController {...this.props} value={value} onChange={this.onChange} onKeyDown={this.onKeyDown}
+                                 unControlled={false}/>
         );
     }
 }

package/src/js/util/interfaces.ts

@@ -59,6 +59,13 @@ export interface DialogConfig {
     textColor?: string;
 }
 
+export interface PDFOptions {
+    disableElements?: Array<'text' | 'image' | 'invoiceTable'>;
+    maxWidth?: number | string;
+    supportMultiPage?: boolean;
+    enableTableHeaderColor?: boolean;
+}
+
 // =========== ENUMS
 
 export enum ModeEnum {DETAIL = 'detail', EDIT = 'edit', NEW = 'new'}
@@ -152,7 +159,15 @@ export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedO
 }>
 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 PDFInvoiceTableParams = {
+    fontSize: number;
+    widths: number[];
+    font: PdfFont;
+    color: string;
+    headerColor: 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>; }
 export type PDFSubmitHandler = (items: PDFElementParams<any, any>[], callback?: VoidFunction) => void;