@formio/js 5.0.0-rc.22 → 5.0.0-rc.23

package/lib/cjs/components/day/fixtures/comp6.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true,
+        },
+        {
+            label: 'Day',
+            hideInputLabels: false,
+            inputsLabelPosition: 'top',
+            useLocaleSettings: false,
+            tableView: false,
+            fields: {
+                day: {
+                    hide: true,
+                },
+                month: {
+                    hide: false,
+                },
+                year: {
+                    hide: false,
+                },
+            },
+            defaultValue: '00/00/0000',
+            key: 'day',
+            logic: [
+                {
+                    name: 'Disable when Test is empty',
+                    trigger: {
+                        type: 'simple',
+                        simple: {
+                            show: true,
+                            conjunction: 'all',
+                            conditions: [
+                                {
+                                    component: 'textField',
+                                    operator: 'isEmpty',
+                                },
+                            ],
+                        },
+                    },
+                    actions: [
+                        {
+                            name: 'Disable',
+                            type: 'property',
+                            property: {
+                                label: 'Disabled',
+                                value: 'disabled',
+                                type: 'boolean',
+                            },
+                            state: true,
+                        },
+                    ],
+                },
+            ],
+            type: 'day',
+            input: true,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/cjs/components/day/fixtures/index.d.ts

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

package/lib/cjs/components/day/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -14,3 +14,5 @@ const comp4_1 = __importDefault(require("./comp4"));
 exports.comp4 = comp4_1.default;
 const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
+const comp6_1 = __importDefault(require("./comp6"));
+exports.comp6 = comp6_1.default;

package/lib/cjs/utils/utils.js

@@ -258,9 +258,9 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                 return true;
             }
             const value = getComponentActualValue(conditionComponentPath, data, row);
-            const СonditionOperator = conditionOperators_1.default[operator];
-            return СonditionOperator
-                ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+            const ConditionOperator = conditionOperators_1.default[operator];
+            return ConditionOperator
+                ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
                 : true;
         });
         let result = false;

package/lib/mjs/components/_classes/component/Component.js

@@ -1506,16 +1506,16 @@ export default class Component extends Element {
             if (this.refs.input?.length) {
                 const { selection, index } = this.root.currentSelection;
                 let input = this.refs.input[index];
-                const isInputRangeSelectable = /text|search|password|tel|url/i.test(input.type || '');
+                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test(i?.type || '');
                 if (input) {
-                    if (isInputRangeSelectable) {
+                    if (isInputRangeSelectable(input)) {
                         input.setSelectionRange(...selection);
                     }
                 }
                 else {
                     input = this.refs.input[this.refs.input.length];
                     const lastCharacter = input.value?.length || 0;
-                    if (isInputRangeSelectable) {
+                    if (isInputRangeSelectable(input)) {
                         input.setSelectionRange(lastCharacter, lastCharacter);
                     }
                 }

package/lib/mjs/components/_classes/field/Field.d.ts

@@ -1,4 +1,5 @@
 export default class Field extends Component {
     render(element: any): any;
+    saveCaretPosition(element: any, index: any): void;
 }
 import Component from '../component/Component';

package/lib/mjs/components/_classes/field/Field.js

@@ -18,4 +18,17 @@ export default class Field extends Component {
             }));
         }
     }
+    // Saves current caret position to restore it after the component is redrawn
+    saveCaretPosition(element, index) {
+        if (this.root?.focusedComponent?.path === this.path) {
+            try {
+                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
+            }
+            catch (e) {
+                if (!(e instanceof DOMException)) {
+                    console.debug(e);
+                }
+            }
+        }
+    }
 }

package/lib/mjs/components/_classes/multivalue/Multivalue.d.ts

@@ -12,7 +12,6 @@ export default class Multivalue extends Field {
      * @param index
      */
     attachElement(element: any, index: any): void;
-    saveCaretPosition(element: any, index: any): void;
     onSelectMaskHandler(event: any): void;
     getMaskPattern(maskName: any): any;
     multiMasks: {} | undefined;

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -177,19 +177,6 @@ export default class Multivalue extends Field {
             }
         }
     }
-    // Saves current caret position to restore it after the component is redrawn
-    saveCaretPosition(element, index) {
-        if (this.root?.focusedComponent?.path === this.path) {
-            try {
-                this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
-            }
-            catch (e) {
-                if (!(e instanceof DOMException)) {
-                    console.debug(e);
-                }
-            }
-        }
-    }
     onSelectMaskHandler(event) {
         this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));
     }

package/lib/mjs/components/day/Day.d.ts

@@ -157,7 +157,6 @@ export default class DayComponent extends Field {
      * @return {null}
      */
     getValueAsString(value: any): null;
-    focus(): void;
     isPartialDay(value: any): boolean;
     getValidationFormat(): "DD-MM-YYYY" | "MM-DD-YYYY";
 }

package/lib/mjs/components/day/Day.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
-import Input from '../_classes/input/Input';
 import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
 export default class DayComponent extends Field {
     static schema(...extend) {
@@ -256,6 +255,17 @@ export default class DayComponent extends Field {
     attach(element) {
         this.loadRefs(element, { day: 'single', month: 'single', year: 'single', input: 'multiple' });
         const superAttach = super.attach(element);
+        const updateValueAndSaveFocus = (element, name) => () => {
+            try {
+                this.saveCaretPosition(element, name);
+            }
+            catch (err) {
+                console.warn('An error occurred while trying to save caret position', err);
+            }
+            this.updateValue(null, {
+                modified: true,
+            });
+        };
         if (this.shouldDisabled) {
             this.setDisabled(this.refs.day, true);
             this.setDisabled(this.refs.month, true);
@@ -265,9 +275,7 @@ export default class DayComponent extends Field {
             }
         }
         else {
-            this.addEventListener(this.refs.day, 'input', () => this.updateValue(null, {
-                modified: true
-            }));
+            this.addEventListener(this.refs.day, 'input', updateValueAndSaveFocus(this.refs.day, 'day'));
             // TODO: Need to rework this to work with day select as well.
             // Change day max input when month changes.
             this.addEventListener(this.refs.month, 'input', () => {
@@ -280,18 +288,14 @@ export default class DayComponent extends Field {
                 if (maxDay && day > maxDay) {
                     this.refs.day.value = this.refs.day.max;
                 }
-                this.updateValue(null, {
-                    modified: true
-                });
+                updateValueAndSaveFocus(this.refs.month, 'month')();
             });
-            this.addEventListener(this.refs.year, 'input', () => this.updateValue(null, {
-                modified: true
-            }));
+            this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));
             this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
                 modified: true
             }));
-            [this.refs.day, this.refs.month, this.refs.year].forEach((element) => {
-                Input.prototype.addFocusBlurEvents.call(this, element);
+            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {
+                super.addFocusBlurEvents(element);
             });
         }
         this.setValue(this.dataValue);
@@ -524,8 +528,11 @@ export default class DayComponent extends Field {
     getValueAsString(value) {
         return this.getDate(value) || '';
     }
-    focus() {
-        if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {
+    focus(field) {
+        if (field && typeof field === 'string' && this.refs[field]) {
+            this.refs[field].focus();
+        }
+        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {
             this.refs.day?.focus();
         }
         else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {
@@ -535,6 +542,18 @@ export default class DayComponent extends Field {
             this.refs.year?.focus();
         }
     }
+    restoreCaretPosition() {
+        if (this.root?.currentSelection) {
+            const { selection, index } = this.root.currentSelection;
+            if (this.refs[index]) {
+                const input = this.refs[index];
+                const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test(i?.type || '');
+                if (isInputRangeSelectable(input)) {
+                    input.setSelectionRange(...selection);
+                }
+            }
+        }
+    }
     isPartialDay(value) {
         if (!value) {
             return false;

package/lib/mjs/components/day/fixtures/comp6.d.ts

@@ -0,0 +1,81 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        fields?: undefined;
+        defaultValue?: undefined;
+        logic?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+            };
+            month: {
+                hide: boolean;
+            };
+            year: {
+                hide: boolean;
+            };
+        };
+        defaultValue: string;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                simple: {
+                    show: boolean;
+                    conjunction: string;
+                    conditions: {
+                        component: string;
+                        operator: string;
+                    }[];
+                };
+            };
+            actions: {
+                name: string;
+                type: string;
+                property: {
+                    label: string;
+                    value: string;
+                    type: string;
+                };
+                state: boolean;
+            }[];
+        }[];
+        type: string;
+        input: boolean;
+        applyMaskOn?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        applyMaskOn?: undefined;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        fields?: undefined;
+        defaultValue?: undefined;
+        logic?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/day/fixtures/comp6.js

@@ -0,0 +1,74 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true,
+        },
+        {
+            label: 'Day',
+            hideInputLabels: false,
+            inputsLabelPosition: 'top',
+            useLocaleSettings: false,
+            tableView: false,
+            fields: {
+                day: {
+                    hide: true,
+                },
+                month: {
+                    hide: false,
+                },
+                year: {
+                    hide: false,
+                },
+            },
+            defaultValue: '00/00/0000',
+            key: 'day',
+            logic: [
+                {
+                    name: 'Disable when Test is empty',
+                    trigger: {
+                        type: 'simple',
+                        simple: {
+                            show: true,
+                            conjunction: 'all',
+                            conditions: [
+                                {
+                                    component: 'textField',
+                                    operator: 'isEmpty',
+                                },
+                            ],
+                        },
+                    },
+                    actions: [
+                        {
+                            name: 'Disable',
+                            type: 'property',
+                            property: {
+                                label: 'Disabled',
+                                value: 'disabled',
+                                type: 'boolean',
+                            },
+                            state: true,
+                        },
+                    ],
+                },
+            ],
+            type: 'day',
+            input: true,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

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

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

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

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

package/lib/mjs/utils/utils.js

@@ -214,9 +214,9 @@ export function checkSimpleConditional(component, condition, row, data, instance
                 return true;
             }
             const value = getComponentActualValue(conditionComponentPath, data, row);
-            const СonditionOperator = ConditionOperators[operator];
-            return СonditionOperator
-                ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+            const ConditionOperator = ConditionOperators[operator];
+            return ConditionOperator
+                ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
                 : true;
         });
         let result = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.22",
+  "version": "5.0.0-rc.23",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -51,7 +51,7 @@
     "invalidate": "VERSION=$(yarn version);aws cloudfront create-invalidation --distribution-id E1MXNA5A4ZKRMZ --paths \"/$VERSION/*\"",
     "release": "yarn build-app && yarn deploy-s3",
     "tag": "VERSION=$(yarn version);git add -A; git commit -m \"Build $Version\";git push origin master;git tag v$VERSION;git push origin --tags;",
-    "dopublish": "npm test;gulp build;yarn tag;npm publish lib --tag=rc;",
+    "dopublish": "npm run build && npm run tag && npm publish",
     "lint": "gulp eslint",
     "serve": "jekyll serve --config _config.yml,_config.dev.yml",
     "test": "mocha 'src/**/*.unit.js'",