@formio/js 5.0.0-dev.5708.6c19568 → 5.0.0-dev.5710.e2e8388

package/lib/mjs/components/datagrid/DataGrid.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import { Components } from '../Components';
-import dragula from 'dragula';
+import Components from '../Components';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -39,6 +38,9 @@ export default class DataGridComponent extends NestedArrayComponent {
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
+        if (this.allowReorder) {
+            this.dragulaReady = this.getDragula();
+        }
         this.visibleColumns = {};
         this.prevHasAddButton = this.hasAddButton();
         this.checkColumns();
@@ -279,31 +281,25 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
-                moves: (_draggedElement, _oldParent, clickedElement) => {
-                    const clickedElementKey = clickedElement.getAttribute('data-key');
-                    const oldParentKey = _oldParent.getAttribute('data-key');
-                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container
-                    if (oldParentKey === clickedElementKey) {
-                        return clickedElement.classList.contains('formio-drag-button');
-                    }
+            this.dragulaReady.then((dragula) => {
+                // The drop event may call redraw twice which calls attach twice and because this block of code is asynchronous
+                // BOTH redraws may be called before this block of code runs (which causes this block of code to run twice sequentially).
+                // This causes two dragula() calls on the same container which breaks dragula. To fix this the return value must
+                // be saved in this.dragula and have its container contents reset if it exists
+                if (this.dragula && this.dragula.containers) {
+                    this.dragula.containers = [];
                 }
-            }).on('drop', this.onReorder.bind(this));
-            this.dragula.on('cloned', (el, original) => {
-                if (el && el.children && original && original.children) {
-                    _.each(original.children, (child, index) => {
-                        const styles = getComputedStyle(child, null);
-                        if (styles.cssText !== '') {
-                            el.children[index].style.cssText = styles.cssText;
+                this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
+                    moves: (_draggedElement, _oldParent, clickedElement) => {
+                        const clickedElementKey = clickedElement.getAttribute('data-key');
+                        const oldParentKey = _oldParent.getAttribute('data-key');
+                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container
+                        if (oldParentKey === clickedElementKey) {
+                            return clickedElement.classList.contains('formio-drag-button');
                         }
-                        else {
-                            const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                            }, '');
-                            el.children[index].style.cssText = cssText;
-                        }
-                    });
-                }
+                    }
+                }).on('drop', this.onReorder.bind(this))
+                    .on('cloned', this.onCloned.bind(this));
             });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
@@ -370,6 +366,22 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();
     }
+    onCloned(el, original) {
+        if (el && el.children && original && original.children) {
+            _.each(original.children, (child, index) => {
+                const styles = getComputedStyle(child, null);
+                if (styles.cssText !== '') {
+                    el.children[index].style.cssText = styles.cssText;
+                }
+                else {
+                    const cssText = Object.values(styles).reduce((css, propertyName) => {
+                        return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                    }, '');
+                    el.children[index].style.cssText = cssText;
+                }
+            });
+        }
+    }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
             const element = row[key].element;

package/lib/mjs/components/datamap/DataMap.js

@@ -3,7 +3,7 @@ import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
 import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
-import { Components } from '../Components';
+import Components from '../Components';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({

package/lib/mjs/components/number/Number.d.ts

@@ -31,7 +31,16 @@ export default class NumberComponent extends Input {
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;
-    parseValue(input: any): number;
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
+    parseValue(input: string | number): string | null;
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;

package/lib/mjs/components/number/Number.js

@@ -50,12 +50,12 @@ export default class NumberComponent extends Input {
             || this.options.properties?.decimalSeparator
             || separators.decimalSeparator;
         if (this.component.delimiter) {
-            if (this.options.hasOwnProperty('thousandsSeparator')) {
-                console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
-            }
-            this.delimiter = this.options.properties?.thousandsSeparator || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter = this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator || separators.delimiter;
         }
         else {
+            if (this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator) {
+                console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
+            }
             this.delimiter = '';
         }
         const requireDecimal = _.get(this.component, 'requireDecimal', false);
@@ -77,7 +77,7 @@ export default class NumberComponent extends Input {
             prefix: '',
             suffix: '',
             requireDecimal: _.get(this.component, 'requireDecimal', false),
-            thousandsSeparatorSymbol: _.get(this.component, 'thousandsSeparator', this.delimiter),
+            thousandsSeparatorSymbol: this.delimiter || '',
             decimalSymbol: _.get(this.component, 'decimalSymbol', this.decimalSeparator),
             decimalLimit: _.get(this.component, 'decimalLimit', this.decimalLimit),
             allowNegative: _.get(this.component, 'allowNegative', true),
@@ -144,6 +144,15 @@ export default class NumberComponent extends Input {
     setValueAt(index, value, flags = {}) {
         return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);
     }
+    /**
+     * Converts a string to a floating point number, formats the number based on the parsed float function
+     * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and then returns the
+     * formatted number back as a string
+     * Example Input: "123.456,22"
+     * Example Output: "123456,22"
+     * @param {string | number} input the numeric string to parse
+     * @returns {string | null} a parsed string
+     */
     parseValue(input) {
         if (typeof input === 'string') {
             input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');

package/lib/mjs/components/number/fixtures/comp9.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        thousandsSeparator: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/number/fixtures/comp9.js

@@ -0,0 +1,19 @@
+export default {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": true,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": ",",
+            "thousandsSeparator": "."
+        }
+    ]
+};

package/lib/mjs/components/number/fixtures/index.d.ts

@@ -6,4 +6,5 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
+import comp9 from './comp9';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9 };

package/lib/mjs/components/number/fixtures/index.js

@@ -6,4 +6,5 @@ import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };
+import comp9 from './comp9';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5708.6c19568",
+  "version": "5.0.0-dev.5710.e2e8388",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {