@dvrd/dvr-controls 1.1.2 → 1.1.4

package/package.json

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

package/src/js/pdf/element/pdfElement.tsx

@@ -13,6 +13,7 @@ import {generateComponentId} from "../../util/componentUtil";
 import {PAGE_WIDTH, pxToPt} from "../../util/pdfUtil";
 import classNames from 'classnames';
 import {AwesomeIcon, debug} from "../../../../index";
+import NumberString from "../../util/numberString";
 
 interface State {
     dragging: boolean;
@@ -52,7 +53,7 @@ export abstract class PdfElement<P extends SharedProps = any, S extends State =
         this.setState({dragging: false});
     };
 
-    setFont = (data: { previousFont: PdfFont, font: PdfFont }) => {
+    setFont = (data: {previousFont: PdfFont, font: PdfFont}) => {
         const {previousFont, font} = data, {settings} = this.state;
         if (settings.hasOwnProperty('font')) {
             if (settings['font'] === previousFont)
@@ -86,6 +87,7 @@ export abstract class PdfElement<P extends SharedProps = any, S extends State =
     };
 
     public changeSetting = (key: string) => (value: any) => {
+        if (value instanceof NumberString) value = value.nullNumberValue;
         this.setSetting(key, value);
     };
 
@@ -111,9 +113,9 @@ export abstract class PdfElement<P extends SharedProps = any, S extends State =
 }
 
 interface DraggableProps {
-    onDrag?: (position: { x: number; y: number; }) => void;
+    onDrag?: (position: {x: number; y: number;}) => void;
     onDragStart: VoidFunction;
-    onDragEnd: (position: { x: number; y: number; }) => void;
+    onDragEnd: (position: {x: number; y: number;}) => void;
     onDragged: VoidFunction;
     onResized: VoidFunction;
     onDelete?: MouseEventHandler;
@@ -128,7 +130,7 @@ interface DraggableProps {
     resizeable: boolean;
     resizeHoriz: boolean;
     resizeVert: boolean;
-    position?: { x: number; y: number };
+    position?: {x: number; y: number};
     lockAspect?: boolean;
     maxWidth: number;
     maxHeight: number;
@@ -140,7 +142,7 @@ interface DraggableProps {
 }
 
 interface DraggableState {
-    position: { x: number; y: number };
+    position: {x: number; y: number};
     width: number | string;
     height: number | string;
 }
@@ -183,11 +185,11 @@ export class PDFDraggable extends PureComponent<PropsWithChildren<DraggableProps
         }
     };
 
-    public setPosition = (position: { x?: number; y?: number }, callback?: VoidFunction) => {
+    public setPosition = (position: {x?: number; y?: number}, callback?: VoidFunction) => {
         this.setState({position: Object.assign({}, this.state.position, position)}, callback);
     };
 
-    public getPosition = (): { x: number; y: number } => this.state.position;
+    public getPosition = (): {x: number; y: number} => this.state.position;
 
     onDrag = (evt: any, data: DraggableData) => {
         const {onDrag, alignment} = this.props, {position} = this.state,
@@ -296,7 +298,7 @@ export class PDFDraggable extends PureComponent<PropsWithChildren<DraggableProps
                     <div className='options'>
                         {onEdit !== undefined && <AwesomeIcon name='pen' onClick={onEdit} className='action'/>}
                         {onDelete !== undefined &&
-                        <AwesomeIcon name='trash-alt' onClick={onDelete} className='action delete'/>}
+                            <AwesomeIcon name='trash-alt' onClick={onDelete} className='action delete'/>}
                     </div>
                 </div>
                 <div className={classNames('pdf-element', 'rnd', matchParentSize && 'match-size')} ref={forwardRef}

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

@@ -10,6 +10,7 @@ import {ElementPosition} from "../../../util/interfaces";
 import {fontItems} from "../../../util/pdfUtil";
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 import {ColorPicker, DVRDNumberInput, DvrdSelect} from "../../../../../index";
+import NumberString from "../../../util/numberString";
 
 interface Props {
     element: PdfInvoiceTable;
@@ -79,12 +80,13 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
         });
     };
 
-    onChangeWidth = (index: number) => (value: number) => {
+    onChangeWidth = (index: number) => (value: NumberString) => {
         const {element} = this.props, widths = element.getSettings().widths.slice(),
             remainder = this.getRemainingWidth(index);
+        let numValue = value.numberValue;
         debug('Remainder', {remainder});
-        if (value > remainder) value = remainder;
-        widths[index] = value;
+        if (numValue > remainder) numValue = remainder;
+        widths[index] = numValue;
         element.setSetting('widths', widths);
         this.setState({widths});
     };
@@ -121,7 +123,7 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
                              element: <span style={{cursor: 'text'}}>%</span>,
                              placement: ElementPosition.RIGHT,
                              allowPropagation: true
-                         }} asNumber unControlled/>
+                         }} unControlled/>
         );
     };
 
@@ -146,7 +148,6 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
                 <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,

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

@@ -183,7 +183,7 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
                                          element: <span style={{cursor: 'text'}}>px</span>,
                                          placement: ElementPosition.RIGHT,
                                          allowPropagation: true
-                                     }} wholeNumbers asNumber unControlled/>
+                                     }} wholeNumbers unControlled/>
                     <div className='settings-color-picker'>
                         <label className='picker-label'>Tekstkleur:</label>
                         <div className='color-preview' style={{backgroundColor: color}}

package/src/js/util/numberString.ts

@@ -27,7 +27,8 @@ export default class NumberString {
         if (!nullString) return null;
         const numValue = Number(nullString.replace(',', '.'));
         if (Number.isNaN(numValue)) return null;
-        return (this.zeroAsNull && !numValue) ? null : 0;
+        if(!numValue) return this.zeroAsNull ? null : 0;
+        return numValue;
     }
 
     setValue = (value: string | number): NumberString => {