@formio/js 5.0.0-rc.5

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

@@ -0,0 +1,256 @@
+import Field from '../field/Field';
+import NativePromise from 'native-promise-only';
+import _ from 'lodash';
+export default class Multivalue extends Field {
+    get dataValue() {
+        const parent = super.dataValue;
+        if (!parent && this.component.multiple) {
+            return [];
+        }
+        return parent;
+    }
+    set dataValue(value) {
+        super.dataValue = value;
+    }
+    get defaultValue() {
+        let value = super.defaultValue;
+        if (this.component.multiple) {
+            if (_.isArray(value)) {
+                value = !value.length ? [super.emptyValue] : value;
+            }
+            else {
+                value = [value];
+            }
+        }
+        return value;
+    }
+    get addAnother() {
+        return this.t(this.component.addAnother || 'Add Another');
+    }
+    useWrapper() {
+        return this.component.hasOwnProperty('multiple') && this.component.multiple;
+    }
+    render() {
+        // If single value field.
+        if (!this.useWrapper()) {
+            return super.render(`<div ref="element">
+          ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}
+        </div>`);
+        }
+        // Make sure dataValue is in the correct array format.
+        let dataValue = this.dataValue;
+        if (!Array.isArray(dataValue)) {
+            dataValue = dataValue ? [dataValue] : [];
+        }
+        // If multiple value field.
+        return super.render(this.renderTemplate('multiValueTable', {
+            rows: dataValue.map(this.renderRow.bind(this)).join(''),
+            disabled: this.disabled,
+            addAnother: this.addAnother,
+        }));
+    }
+    renderElement() {
+        return '';
+    }
+    renderRow(value, index) {
+        return this.renderTemplate('multiValueRow', {
+            index,
+            disabled: this.disabled,
+            element: `${this.renderElement(value, index)}`,
+        });
+    }
+    attach(dom) {
+        const superAttach = super.attach(dom);
+        this.loadRefs(dom, {
+            addButton: 'multiple',
+            input: 'multiple',
+            removeRow: 'multiple',
+            mask: 'multiple',
+            select: 'multiple',
+        });
+        const promises = [];
+        this.refs.input.forEach((element, index) => {
+            promises.push(this.attachElement.call(this, element, index));
+        });
+        if (!this.component.multiple) {
+            return NativePromise.all(promises);
+        }
+        this.refs.removeRow.forEach((removeButton, index) => {
+            this.addEventListener(removeButton, 'click', (event) => {
+                event.preventDefault();
+                this.removeValue(index);
+            });
+        });
+        // If single value field.
+        this.refs.addButton.forEach((addButton) => {
+            this.addEventListener(addButton, 'click', (event) => {
+                event.preventDefault();
+                this.addValue();
+            });
+        });
+        return superAttach.then(() => {
+            return NativePromise.all(promises);
+        });
+    }
+    detach() {
+        if (this.refs.input && this.refs.input.length) {
+            this.refs.input.forEach((input) => {
+                if (input.mask) {
+                    input.mask.destroy();
+                }
+                if (input.widget) {
+                    input.widget.destroy();
+                }
+            });
+        }
+        if (this.refs.mask && this.refs.mask.length) {
+            this.refs.mask.forEach((input) => {
+                if (input.mask) {
+                    input.mask.destroy();
+                }
+            });
+        }
+        super.detach();
+    }
+    /**
+     * Attach inputs to the element.
+     *
+     * @param element
+     * @param index
+     */
+    attachElement(element, index) {
+        this.addEventListener(element, this.inputInfo.changeEvent, () => {
+            // Delay update slightly to give input mask a chance to run.
+            const textCase = _.get(this.component, 'case', 'mixed');
+            if (textCase !== 'mixed') {
+                const { selectionStart, selectionEnd, } = element;
+                if (textCase === 'uppercase' && element.value) {
+                    element.value = element.value.toUpperCase();
+                }
+                if (textCase === 'lowercase' && element.value) {
+                    element.value = element.value.toLowerCase();
+                }
+                if (element.selectionStart && element.selectionEnd) {
+                    element.selectionStart = selectionStart;
+                    element.selectionEnd = selectionEnd;
+                }
+            }
+            try {
+                this.saveCaretPosition(element, index);
+            }
+            catch (err) {
+                console.warn('An error occurred while trying to save caret position', err);
+            }
+            // If a mask is present, delay the update to allow mask to update first.
+            if (element.mask) {
+                setTimeout(() => {
+                    return this.updateValue(null, {
+                        modified: (this.component.type !== 'hidden')
+                    }, index);
+                }, 1);
+            }
+            else {
+                return this.updateValue(null, {
+                    modified: (this.component.type !== 'hidden')
+                }, index);
+            }
+        });
+        if (!this.attachMultiMask(index)) {
+            const applyMask = () => {
+                this.setInputMask(element);
+                const valueMask = this.component.inputMask;
+                const displayMask = this.component.displayMask;
+                if (valueMask && displayMask && displayMask !== valueMask && this.refs.valueMaskInput) {
+                    this.setInputMask(this.refs.valueMaskInput, valueMask);
+                }
+            };
+            if (this.inputInfo.changeEvent === 'blur') {
+                this.addEventListener(element, this.inputInfo.changeEvent, () => {
+                    applyMask();
+                    this.dataValue = this.refs.input[0].value;
+                    if (this.checkComponentValidity()) {
+                        this.updateComponentValue(this.refs.input[0].value);
+                    }
+                });
+            }
+            else {
+                applyMask();
+            }
+        }
+    }
+    // Saves current caret position to restore it after the component is redrawn
+    saveCaretPosition(element, index) {
+        if (this.root?.focusedComponent?.path === this.path) {
+            this.root.currentSelection = { selection: [element.selectionStart, element.selectionEnd], index };
+        }
+    }
+    onSelectMaskHandler(event) {
+        this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));
+    }
+    getMaskPattern(maskName) {
+        if (!this.multiMasks) {
+            this.multiMasks = {};
+        }
+        if (this.multiMasks[maskName]) {
+            return this.multiMasks[maskName];
+        }
+        const mask = this.component.inputMasks.find(inputMask => inputMask.label === maskName);
+        this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;
+        return this.multiMasks[maskName];
+    }
+    attachMultiMask(index) {
+        if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {
+            return false;
+        }
+        const maskSelect = this.refs.select[index];
+        maskSelect.onchange = this.onSelectMaskHandler.bind(this);
+        maskSelect.maskInput = this.refs.mask[index];
+        this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);
+        return true;
+    }
+    updateMask(input, mask) {
+        if (!mask) {
+            return;
+        }
+        this.setInputMask(input, mask, !this.component.placeholder);
+        this.updateValue();
+    }
+    /**
+     * Adds a new empty value to the data array.
+     */
+    addNewValue(value) {
+        if (value === undefined) {
+            value = this.component.defaultValue ?
+                this.component.defaultValue : this.emptyValue;
+            // If default is an empty aray, default back to empty value.
+            if (Array.isArray(value) && value.length === 0) {
+                value = this.emptyValue;
+            }
+        }
+        let dataValue = this.dataValue || [];
+        if (!Array.isArray(dataValue)) {
+            dataValue = [dataValue];
+        }
+        if (Array.isArray(value)) {
+            dataValue = dataValue.concat(value);
+        }
+        else {
+            dataValue.push(value);
+        }
+        this.dataValue = dataValue;
+    }
+    /**
+     * Adds a new empty value to the data array, and add a new row to contain it.
+     */
+    addValue() {
+        this.addNewValue();
+        this.redraw();
+        this.checkConditions();
+        if (!this.isEmpty(this.dataValue)) {
+            this.restoreValue();
+        }
+        if (this.root) {
+            this.root.onChange();
+        }
+    }
+}

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -0,0 +1,130 @@
+export default class NestedComponent extends Field {
+    constructor(component: any, options: any, data: any);
+    type: string;
+    _collapsed: boolean;
+    set collapsed(arg: boolean);
+    get collapsed(): boolean;
+    collapse(value: any): any;
+    set rowIndex(arg: any);
+    get rowIndex(): any;
+    _rowIndex: any;
+    componentContext(): any;
+    getComponents(): any;
+    /**
+     * Perform a deep iteration over every component, including those
+     * within other container based components.
+     *
+     * @param {function} fn - Called for every component.
+     */
+    everyComponent(fn: Function, options: any): void;
+    hasComponent(component: any): boolean;
+    flattenComponents(): {};
+    /**
+     * Perform an iteration over each component within this container component.
+     *
+     * @param {function} fn - Called for each component
+     */
+    eachComponent(fn: Function): void;
+    /**
+     * Returns a component provided a key. This performs a deep search within the
+     * component tree.
+     *
+     * @param {string} key - The key of the component to retrieve.
+     * @param {function} fn - Called with the component once found.
+     * @return {Object} - The component that is located.
+     */
+    getComponent(path: any, fn: Function, originalPath: any): Object;
+    /**
+     * Return a component provided the Id of the component.
+     *
+     * @param {string} id - The Id of the component.
+     * @param {function} fn - Called with the component once it is retrieved.
+     * @return {Object} - The component retrieved.
+     */
+    getComponentById(id: string, fn: Function): Object;
+    /**
+     * Return a path of component's value.
+     *
+     * @param {Object} component - The component instance.
+     * @return {string} - The component's value path.
+     */
+    calculateComponentPath(component: Object): string;
+    /**
+     * Create a new component and add it to the components array.
+     *
+     * @param component
+     * @param data
+     */
+    createComponent(component: any, options: any, data: any, before: any, replacedComp: any): any;
+    getContainer(): any;
+    get componentComponents(): any;
+    get nestedKey(): string;
+    get templateName(): string;
+    components: any;
+    /**
+     *
+     * @param element
+     * @param data
+     */
+    addComponents(data: any, options: any): void;
+    /**
+     * Add a new component to the components array.
+     *
+     * @param {Object} component - The component JSON schema to add.
+     * @param {Object} data - The submission data object to house the data for this component.
+     * @param {HTMLElement} before - A DOM element to insert this element before.
+     * @return {Component} - The created component instance.
+     */
+    addComponent(component: Object, data: Object, before: HTMLElement, noAdd: any): Component;
+    beforeFocus(): void;
+    renderComponents(components: any): any;
+    attachComponentsLogic(components: any): void;
+    attachComponents(element: any, components: any, container: any): any;
+    /**
+     * Remove a component from the components array.
+     *
+     * @param {Component} component - The component to remove from the components.
+     * @param {Array<Component>} components - An array of components to remove this component from.
+     */
+    removeComponent(component: Component, components: Array<Component>, all?: boolean): void;
+    /**
+     * Removes a component provided the API key of that component.
+     *
+     * @param {string} key - The API key of the component to remove.
+     * @param {function} fn - Called once the component is removed.
+     * @return {null}
+     */
+    removeComponentByKey(key: string, fn: Function): null;
+    /**
+     * Removes a component provided the Id of the component.
+     *
+     * @param {string} id - The Id of the component to remove.
+     * @param {function} fn - Called when the component is removed.
+     * @return {null}
+     */
+    removeComponentById(id: string, fn: Function): null;
+    updateValue(value: any, flags?: {}): any;
+    checkData(data: any, flags: any, row: any, components: any): any;
+    checkConditions(data: any, flags: any, row: any): boolean;
+    clearOnHide(show: any): void;
+    restoreComponentsContext(): void;
+    /**
+     * Allow components to hook into the next page trigger to perform their own logic.
+     *
+     * @return {*}
+     */
+    beforePage(next: any): any;
+    calculateValue(data: any, flags: any, row: any): any;
+    isLastPage(): boolean;
+    isValid(data: any, dirty: any): any;
+    checkChildComponentsValidity(data: any, dirty: any, row: any, silentCheck: any, isParentValid: any): any;
+    checkValidity(data: any, dirty: any, row: any, silentCheck: any): any;
+    setPristine(pristine: any): void;
+    get isPristine(): any;
+    destroyComponents(all?: boolean): void;
+    get errors(): any;
+    setNestedValue(component: any, value: any, flags?: {}): any;
+    setValue(value: any, flags?: {}): any;
+    get lazyLoad(): any;
+}
+import Field from '../field/Field';

package/lib/mjs/components/_classes/nested/NestedComponent.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/mjs/components/_classes/nested/NestedComponent.form.js

@@ -0,0 +1,13 @@
+import Components from '../../Components';
+export default function (...extend) {
+    return Components.baseEditForm([
+        {
+            key: 'data',
+            ignore: true
+        },
+        {
+            key: 'validation',
+            ignore: true
+        }
+    ], ...extend);
+}