@formio/js 5.0.0-rc.5

package/lib/mjs/utils/ChoicesWrapper.js

@@ -0,0 +1,169 @@
+import Choices from '@formio/choices.js';
+/**
+ * TODO: REMOVE THIS ONCE THE PULL REQUEST HAS BEEN RESOLVED.
+ *
+ * https://github.com/jshjohnson/Choices/pull/788
+ *
+ * This is intentionally not part of the extended class, since other components use Choices and need this fix as well.
+ * @type {Choices._generatePlaceholderValue}
+ * @private
+ */
+Choices.prototype._generatePlaceholderValue = function () {
+    if (this._isSelectElement && this.passedElement.placeholderOption) {
+        const { placeholderOption } = this.passedElement;
+        return placeholderOption ? placeholderOption.text : false;
+    }
+    const { placeholder, placeholderValue } = this.config;
+    const { element: { dataset }, } = this.passedElement;
+    if (placeholder) {
+        if (placeholderValue) {
+            return placeholderValue;
+        }
+        if (dataset.placeholder) {
+            return dataset.placeholder;
+        }
+    }
+    return false;
+};
+export const KEY_CODES = {
+    BACK_KEY: 46,
+    DELETE_KEY: 8,
+    TAB_KEY: 9,
+    ENTER_KEY: 13,
+    A_KEY: 65,
+    ESC_KEY: 27,
+    UP_KEY: 38,
+    DOWN_KEY: 40,
+    PAGE_UP_KEY: 33,
+    PAGE_DOWN_KEY: 34,
+};
+class ChoicesWrapper extends Choices {
+    constructor(...args) {
+        super(...args);
+        this._onTabKey = this._onTabKey.bind(this);
+        this.isDirectionUsing = false;
+        this.shouldOpenDropDown = true;
+    }
+    _handleButtonAction(activeItems, element) {
+        if (!this._isSelectOneElement) {
+            return super._handleButtonAction(activeItems, element);
+        }
+        if (!activeItems ||
+            !element ||
+            !this.config.removeItems ||
+            !this.config.removeItemButton) {
+            return;
+        }
+        super._handleButtonAction(activeItems, element);
+    }
+    _onEnterKey(args) {
+        // Prevent dropdown form opening when removeItemButton was pressed using 'Enter' on keyboard
+        if (args.event.target.className === 'choices__button') {
+            this.shouldOpenDropDown = false;
+        }
+        super._onEnterKey(args);
+    }
+    _onDirectionKey(...args) {
+        if (!this._isSelectOneElement) {
+            return super._onDirectionKey(...args);
+        }
+        this.isDirectionUsing = true;
+        super._onDirectionKey(...args);
+        this.onSelectValue(...args);
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+            this.isDirectionUsing = false;
+        }, 250);
+    }
+    _onTabKey({ activeItems, hasActiveDropdown }) {
+        if (hasActiveDropdown) {
+            this._selectHighlightedChoice(activeItems);
+        }
+    }
+    _selectHighlightedChoice(activeItems) {
+        const highlightedChoice = this.dropdown.getChild(`.${this.config.classNames.highlightedState}`);
+        if (highlightedChoice) {
+            this._handleChoiceAction(activeItems, highlightedChoice);
+        }
+        event.preventDefault();
+    }
+    _onKeyDown(event) {
+        if (!this._isSelectOneElement) {
+            return super._onKeyDown(event);
+        }
+        const { target, keyCode, ctrlKey, metaKey } = event;
+        if (target !== this.input.element &&
+            !this.containerOuter.element.contains(target)) {
+            return;
+        }
+        const activeItems = this._store.activeItems;
+        const hasFocusedInput = this.input.isFocussed;
+        const hasActiveDropdown = this.dropdown.isActive;
+        const hasItems = this.itemList.hasChildren;
+        const keyString = String.fromCharCode(keyCode);
+        const { BACK_KEY, DELETE_KEY, TAB_KEY, ENTER_KEY, A_KEY, ESC_KEY, UP_KEY, DOWN_KEY, PAGE_UP_KEY, PAGE_DOWN_KEY, } = KEY_CODES;
+        const hasCtrlDownKeyPressed = ctrlKey || metaKey;
+        // If a user is typing and the dropdown is not active
+        if (!hasActiveDropdown && !this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
+            const currentValue = this.input.element.value;
+            this.input.element.value = currentValue ? `${currentValue}${keyString}` : keyString;
+            this.showDropdown();
+        }
+        // Map keys to key actions
+        const keyDownActions = {
+            [A_KEY]: this._onAKey,
+            [TAB_KEY]: this._onTabKey,
+            [ENTER_KEY]: this._onEnterKey,
+            [ESC_KEY]: this._onEscapeKey,
+            [UP_KEY]: this._onDirectionKey,
+            [PAGE_UP_KEY]: this._onDirectionKey,
+            [DOWN_KEY]: this._onDirectionKey,
+            [PAGE_DOWN_KEY]: this._onDirectionKey,
+            [DELETE_KEY]: this._onDeleteKey,
+            [BACK_KEY]: this._onDeleteKey,
+        };
+        // If keycode has a function, run it
+        if (keyDownActions[keyCode]) {
+            keyDownActions[keyCode]({
+                event,
+                target,
+                keyCode,
+                metaKey,
+                activeItems,
+                hasFocusedInput,
+                hasActiveDropdown,
+                hasItems,
+                hasCtrlDownKeyPressed,
+            });
+        }
+    }
+    onSelectValue({ event, activeItems, hasActiveDropdown }) {
+        if (hasActiveDropdown) {
+            this._selectHighlightedChoice(activeItems);
+        }
+        else if (this._isSelectOneElement) {
+            this.showDropdown();
+            event.preventDefault();
+        }
+    }
+    showDropdown(...args) {
+        if (!this.shouldOpenDropDown) {
+            this.shouldOpenDropDown = true;
+            return;
+        }
+        super.showDropdown(...args);
+    }
+    hideDropdown(...args) {
+        if (this.isDirectionUsing) {
+            return;
+        }
+        super.hideDropdown(...args);
+    }
+    _onBlur(...args) {
+        if (this._isScrollingOnIe) {
+            return;
+        }
+        super._onBlur(...args);
+    }
+}
+export default ChoicesWrapper;

package/lib/mjs/utils/Evaluator.d.ts

@@ -0,0 +1,4 @@
+export default Evaluator;
+declare namespace Evaluator {
+    function registerEvaluator(evaluator: any): void;
+}

package/lib/mjs/utils/Evaluator.js

@@ -0,0 +1,93 @@
+import _ from 'lodash';
+import stringHash from 'string-hash';
+const Evaluator = {
+    noeval: false,
+    protectedEval: false,
+    cache: {},
+    templateSettings: {
+        evaluate: /\{%([\s\S]+?)%\}/g,
+        interpolate: /\{\{([\s\S]+?)\}\}/g,
+        escape: /\{\{\{([\s\S]+?)\}\}\}/g
+    },
+    evaluator(func, ...params) {
+        if (Evaluator.noeval) {
+            console.warn('No evaluations allowed for this renderer.');
+            return _.noop;
+        }
+        if (typeof params[0] === 'object') {
+            params = _.keys(params[0]);
+        }
+        return new Function(...params, func);
+    },
+    template(template, hash) {
+        hash = hash || stringHash(template);
+        if (Evaluator.cache[hash]) {
+            return Evaluator.cache[hash];
+        }
+        try {
+            // Ensure we handle copied templates from the ejs files.
+            template = template.replace(/ctx\./g, '');
+            return (Evaluator.cache[hash] = _.template(template, Evaluator.templateSettings));
+        }
+        catch (err) {
+            console.warn('Error while processing template', err, template);
+        }
+    },
+    interpolate(rawTemplate, data, _options) {
+        // Ensure reverse compatability.
+        const options = _.isObject(_options) ? _options : { noeval: _options };
+        if (typeof rawTemplate === 'function') {
+            try {
+                return rawTemplate(data);
+            }
+            catch (err) {
+                console.warn('Error interpolating template', err, data);
+                return err.message;
+            }
+        }
+        rawTemplate = String(rawTemplate);
+        let template;
+        if (Evaluator.noeval || options.noeval) {
+            // No cached template methods available. Use poor-mans interpolate without eval.
+            return rawTemplate.replace(/({{\s*(.*?)\s*}})/g, (match, $1, $2) => {
+                // Allow for conditional values.
+                const parts = $2.split('||').map(item => item.trim());
+                let value = '';
+                let path = '';
+                for (let i = 0; i < parts.length; i++) {
+                    path = parts[i];
+                    value = _.get(data, path);
+                    if (value) {
+                        break;
+                    }
+                }
+                if (options.data) {
+                    _.set(options.data, path, value);
+                }
+                return value;
+            });
+        }
+        else {
+            template = Evaluator.template(rawTemplate);
+        }
+        if (typeof template === 'function') {
+            try {
+                return template(data);
+            }
+            catch (err) {
+                console.warn('Error interpolating template', err, rawTemplate, data);
+                return err.message;
+            }
+        }
+        return template;
+    },
+    evaluate(func, args) {
+        return Array.isArray(args) ? func(...args) : func(args);
+    }
+};
+Evaluator.registerEvaluator = (evaluator) => {
+    Object.keys(evaluator).forEach((key) => {
+        Evaluator[key] = evaluator[key];
+    });
+};
+export default Evaluator;

package/lib/mjs/utils/builder.d.ts

@@ -0,0 +1,22 @@
+declare namespace _default {
+    /**
+     * Appends a number to a component.key to keep it unique
+     *
+     * @param {Object} form
+     *   The components parent form.
+     * @param {Object} component
+     *   The component to uniquify
+     */
+    function uniquify(container: any, component: Object): boolean;
+    namespace additionalShortcuts {
+        const button: string[];
+    }
+    function getAlphaShortcuts(): any;
+    function getAdditionalShortcuts(type: any): any;
+    function getBindedShortcuts(components: any, input: any): any[];
+    function getAvailableShortcuts(form: any, component: any): {
+        label: string;
+        value: string;
+    }[];
+}
+export default _default;

package/lib/mjs/utils/builder.js

@@ -0,0 +1,79 @@
+import _ from 'lodash';
+import { eachComponent, uniqueKey } from './utils';
+export default {
+    /**
+     * Appends a number to a component.key to keep it unique
+     *
+     * @param {Object} form
+     *   The components parent form.
+     * @param {Object} component
+     *   The component to uniquify
+     */
+    uniquify(container, component) {
+        let changed = false;
+        const formKeys = {};
+        eachComponent(container, (comp) => {
+            formKeys[comp.key] = true;
+            if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(comp.type) || comp.tree || comp.arrayTree) {
+                return true;
+            }
+        }, true);
+        // Recurse into all child components.
+        eachComponent([component], (component) => {
+            // Skip key uniquification if this component doesn't have a key.
+            if (!component.key) {
+                return;
+            }
+            const newKey = uniqueKey(formKeys, component.key);
+            if (newKey !== component.key) {
+                component.key = newKey;
+                changed = true;
+            }
+            formKeys[newKey] = true;
+            if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) || component.tree || component.arrayTree) {
+                return true;
+            }
+        }, true);
+        return changed;
+    },
+    additionalShortcuts: {
+        button: [
+            'Enter',
+            'Esc'
+        ]
+    },
+    getAlphaShortcuts() {
+        return _.range('A'.charCodeAt(), 'Z'.charCodeAt() + 1).map((charCode) => String.fromCharCode(charCode));
+    },
+    getAdditionalShortcuts(type) {
+        return this.additionalShortcuts[type] || [];
+    },
+    getBindedShortcuts(components, input) {
+        const result = [];
+        eachComponent(components, (component) => {
+            if (component === input) {
+                return;
+            }
+            if (component.shortcut) {
+                result.push(component.shortcut);
+            }
+            if (component.values) {
+                component.values.forEach((value) => {
+                    if (value.shortcut) {
+                        result.push(value.shortcut);
+                    }
+                });
+            }
+        }, true);
+        return result;
+    },
+    getAvailableShortcuts(form, component) {
+        if (!component) {
+            return [];
+        }
+        return [''].concat(_.difference(this.getAlphaShortcuts().concat(this.getAdditionalShortcuts(component.type)), this.getBindedShortcuts(form.components, component))).map((shortcut) => ({
+            label: shortcut,
+            value: shortcut,
+        }));
+    }
+};

package/lib/mjs/utils/calendarUtils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Checks the value for a min date and max date.
+ *
+ * @param {moment} value
+ *   The value to check.
+ * @param {[String]} format
+ *   A moment formats.
+ * @param {Date} maxDate
+ *   The max date.
+ * @param {Date} minDate
+ *   The min date.
+ * * @return {{message: string, result: boolean}}
+ */
+export function lessOrGreater(value: typeof moment, format: [string], maxDate: Date, minDate: Date): {
+    message: string;
+    result: boolean;
+};
+/**
+ * Checks the entered date for validity.
+ *
+ * @param {String} value
+ *   The value to check.
+ * @param {[String]} format
+ *   A moment formats.
+ * @param {Date} maxDate
+ *   The max date.
+ * @param {Date} minDate
+ *   The min date.
+ * * @return {{message: string, result: boolean}}
+ */
+export function checkInvalidDate(value: string, format: [string], minDate: Date, maxDate: Date): {
+    message: string;
+    result: boolean;
+};
+export namespace CALENDAR_ERROR_MESSAGES {
+    const INVALID: string;
+    const INCOMPLETE: string;
+    function greater(date: any, format: any): string;
+    function less(date: any, format: any): string;
+}
+import moment from 'moment';

package/lib/mjs/utils/calendarUtils.js

@@ -0,0 +1,128 @@
+import moment from 'moment';
+import _ from 'lodash';
+export const CALENDAR_ERROR_MESSAGES = {
+    INVALID: 'You entered the Invalid Date',
+    INCOMPLETE: 'You entered an incomplete date.',
+    greater(date, format) {
+        return `The entered date is greater than ${date.format(format)}`;
+    },
+    less(date, format) {
+        return `The entered date is less than ${date.format(format)}`;
+    }
+};
+/**
+ * Builds the response for checkInvalidDate.
+ *
+ * @param {String} message
+ *   The message for response.
+ * @param {Boolean} result
+ *   The boolean flag for response.
+ * * @return {{message: string, result: boolean}}
+ */
+function buildResponse(message, result) {
+    return {
+        message,
+        result
+    };
+}
+/**
+ * Checks the value for a min date and max date.
+ *
+ * @param {moment} value
+ *   The value to check.
+ * @param {[String]} format
+ *   A moment formats.
+ * @param {Date} maxDate
+ *   The max date.
+ * @param {Date} minDate
+ *   The min date.
+ * * @return {{message: string, result: boolean}}
+ */
+export function lessOrGreater(value, format, maxDate, minDate) {
+    let message = '';
+    let result = true;
+    if (maxDate && value.isValid()) {
+        const maxDateMoment = moment(maxDate, format);
+        if (value > maxDateMoment) {
+            message = CALENDAR_ERROR_MESSAGES.greater(maxDateMoment, format);
+            result = false;
+        }
+    }
+    if (minDate && value.isValid()) {
+        const minDateMoment = moment(minDate, format);
+        if (value < minDateMoment) {
+            message = CALENDAR_ERROR_MESSAGES.less(minDateMoment, format);
+            result = false;
+        }
+    }
+    return {
+        message,
+        result
+    };
+}
+/**
+ * Checks the entered date for validity.
+ *
+ * @param {String} value
+ *   The value to check.
+ * @param {[String]} format
+ *   A moment formats.
+ * @param {Date} maxDate
+ *   The max date.
+ * @param {Date} minDate
+ *   The min date.
+ * * @return {{message: string, result: boolean}}
+ */
+export function checkInvalidDate(value, format, minDate, maxDate) {
+    const date = moment(value, format, true);
+    const isValidDate = date.isValid();
+    if (!isValidDate) {
+        const delimeters = value.match(/[^a-z0-9_]/gi);
+        const delimetersRegEx = new RegExp(delimeters.join('|'), 'gi');
+        const inputParts = value.replace(/_*/gi, '').split(delimetersRegEx);
+        const formatParts = format[1] ? format[1].split(delimetersRegEx) : format[0].split(delimetersRegEx);
+        const timeIndex = _.findIndex(formatParts, (part, index) => part.length === 1 && index === formatParts.length - 1);
+        const yearIndex = _.findIndex(formatParts, part => part.match(/yyyy/gi));
+        if (inputParts[yearIndex] / 1000 < 1) {
+            return buildResponse(CALENDAR_ERROR_MESSAGES.INVALID, false);
+        }
+        if (inputParts[0].length === formatParts[0].length) {
+            const modifiedParts = inputParts.map((part, index) => {
+                let partValue = part;
+                if (!part && index === timeIndex) {
+                    partValue = 'AM';
+                }
+                else if (!part) {
+                    partValue = '01';
+                }
+                if (delimeters[index]) {
+                    partValue = `${partValue}${delimeters[index]}`;
+                }
+                return partValue;
+            });
+            const problemDate = moment(modifiedParts.join(''), format, true);
+            if (problemDate.isValid()) {
+                const checkedLessOrGreater = lessOrGreater(problemDate, format[0], maxDate, minDate);
+                if (!checkedLessOrGreater.result) {
+                    const { message, result } = checkedLessOrGreater;
+                    return buildResponse(message, result);
+                }
+                return buildResponse(CALENDAR_ERROR_MESSAGES.INCOMPLETE, false);
+            }
+            else {
+                return buildResponse(CALENDAR_ERROR_MESSAGES.INVALID, false);
+            }
+        }
+        else {
+            return buildResponse(CALENDAR_ERROR_MESSAGES.INVALID, false);
+        }
+    }
+    else if (isValidDate && value.indexOf('_') === -1) {
+        const checkedLessOrGreater = lessOrGreater(date, format[0], maxDate, minDate);
+        if (!checkedLessOrGreater.result) {
+            const { message, result } = checkedLessOrGreater;
+            return buildResponse(message, result);
+        }
+    }
+    return buildResponse('', true);
+}

package/lib/mjs/utils/conditionOperators/ConditionOperator.d.ts

@@ -0,0 +1,7 @@
+export default class ConditionOperator {
+    static get operatorKey(): string;
+    static get displayedName(): string;
+    static get requireValue(): boolean;
+    execute(options: any): boolean;
+    getResult(options?: {}): any;
+}

package/lib/mjs/utils/conditionOperators/ConditionOperator.js

@@ -0,0 +1,23 @@
+import _ from 'lodash';
+/* eslint-disable no-unused-vars */
+export default class ConditionOperator {
+    static get operatorKey() {
+        return '';
+    }
+    static get displayedName() {
+        return '';
+    }
+    static get requireValue() {
+        return true;
+    }
+    execute(options) {
+        return true;
+    }
+    getResult(options = {}) {
+        const { value } = options;
+        if (_.isArray(value)) {
+            return _.some(value, valueItem => this.execute({ ...options, value: valueItem }));
+        }
+        return this.execute(options);
+    }
+}

package/lib/mjs/utils/conditionOperators/DateGreaterThan.d.ts

@@ -0,0 +1,13 @@
+export default class DateGeaterThan extends ConditionOperator {
+    getFormattedDates({ value, comparedValue, conditionTriggerComponent }: {
+        value: any;
+        comparedValue: any;
+        conditionTriggerComponent: any;
+    }): {
+        date: moment.Moment;
+        comparedDate: moment.Moment;
+    };
+    execute(options: any, functionName?: string): any;
+}
+import ConditionOperator from './ConditionOperator';
+import moment from 'moment';

package/lib/mjs/utils/conditionOperators/DateGreaterThan.js

@@ -0,0 +1,31 @@
+import ConditionOperator from './ConditionOperator';
+import moment from 'moment';
+export default class DateGeaterThan extends ConditionOperator {
+    static get operatorKey() {
+        return 'dateGreaterThan';
+    }
+    static get displayedName() {
+        return 'Greater Than';
+    }
+    getFormattedDates({ value, comparedValue, conditionTriggerComponent }) {
+        const hasValidationFormat = conditionTriggerComponent ? conditionTriggerComponent.getValidationFormat : null;
+        const date = hasValidationFormat ? moment(value, conditionTriggerComponent.getValidationFormat()) : moment(value);
+        const comparedDate = hasValidationFormat ? moment(comparedValue, conditionTriggerComponent.getValidationFormat()) : moment(comparedValue);
+        return { date, comparedDate };
+    }
+    execute(options, functionName = 'isAfter') {
+        const { value, instance, conditionComponentPath } = options;
+        if (!value) {
+            return false;
+        }
+        let conditionTriggerComponent = null;
+        if (instance && instance.root) {
+            conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+        }
+        if (conditionTriggerComponent && conditionTriggerComponent.isPartialDay && conditionTriggerComponent.isPartialDay(value)) {
+            return false;
+        }
+        const { date, comparedDate } = this.getFormattedDates({ ...options, conditionTriggerComponent });
+        return date[functionName](comparedDate);
+    }
+}

package/lib/mjs/utils/conditionOperators/DateGreaterThanOrEqual.d.ts

@@ -0,0 +1,4 @@
+export default class DateGreaterThanOrEqual extends DateGeaterThan {
+    execute(options: any): any;
+}
+import DateGeaterThan from './DateGreaterThan';

package/lib/mjs/utils/conditionOperators/DateGreaterThanOrEqual.js

@@ -0,0 +1,12 @@
+import DateGeaterThan from './DateGreaterThan';
+export default class DateGreaterThanOrEqual extends DateGeaterThan {
+    static get operatorKey() {
+        return 'dateGreaterThanOrEqual';
+    }
+    static get displayedName() {
+        return 'Greater Than Or Equal To';
+    }
+    execute(options) {
+        return super.execute(options, 'isSameOrAfter');
+    }
+}

package/lib/mjs/utils/conditionOperators/DateLessThan.d.ts

@@ -0,0 +1,4 @@
+export default class DateLessThan extends DateGeaterThan {
+    execute(options: any): any;
+}
+import DateGeaterThan from './DateGreaterThan';

package/lib/mjs/utils/conditionOperators/DateLessThan.js

@@ -0,0 +1,12 @@
+import DateGeaterThan from './DateGreaterThan';
+export default class DateLessThan extends DateGeaterThan {
+    static get operatorKey() {
+        return 'dateLessThan';
+    }
+    static get displayedName() {
+        return 'Less Than';
+    }
+    execute(options) {
+        return super.execute(options, 'isBefore');
+    }
+}

package/lib/mjs/utils/conditionOperators/DateLessThanOrEqual.d.ts

@@ -0,0 +1,4 @@
+export default class DateLessThanOrEqual extends DateGeaterThan {
+    execute(options: any): any;
+}
+import DateGeaterThan from './DateGreaterThan';

package/lib/mjs/utils/conditionOperators/DateLessThanOrEqual.js

@@ -0,0 +1,12 @@
+import DateGeaterThan from './DateGreaterThan';
+export default class DateLessThanOrEqual extends DateGeaterThan {
+    static get operatorKey() {
+        return 'dateLessThanOrEqual';
+    }
+    static get displayedName() {
+        return 'Less Than Or Equal To';
+    }
+    execute(options) {
+        return super.execute(options, 'isSameOrBefore');
+    }
+}

package/lib/mjs/utils/conditionOperators/EndsWith.d.ts

@@ -0,0 +1,7 @@
+export default class EndsWith extends ConditionOperator {
+    execute({ value, comparedValue }: {
+        value: any;
+        comparedValue: any;
+    }): any;
+}
+import ConditionOperator from './ConditionOperator';