@formio/js 5.0.0-rc.5

package/lib/mjs/components/tree/Tree.js

@@ -0,0 +1,385 @@
+import _ from 'lodash';
+import Component from '../_classes/component/Component';
+import Components from '../Components';
+import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent';
+import Node from './Node';
+import NativePromise from 'native-promise-only';
+export default class TreeComponent extends NestedDataComponent {
+    static schema(...extend) {
+        return NestedDataComponent.schema({
+            label: 'Tree',
+            key: 'tree',
+            type: 'tree',
+            clearOnHide: true,
+            input: true,
+            tree: true,
+            components: [],
+            multiple: false,
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Tree',
+            icon: 'indent',
+            group: 'data',
+            weight: 40,
+            documentation: '/userguide/form-building/data-components#tree',
+            schema: TreeComponent.schema(),
+        };
+    }
+    constructor(...args) {
+        super(...args);
+        this.type = 'tree';
+    }
+    get emptyValue() {
+        return {};
+    }
+    get viewComponents() {
+        if (!this.viewComponentsInstantiated) {
+            this.viewComponentsInstantiated = true;
+            this._viewComponents = this.createComponents({});
+        }
+        return this._viewComponents;
+    }
+    init() {
+        if (this.builderMode) {
+            return super.init();
+        }
+        this.components = [];
+        this.componentOptions = {
+            ...this.options,
+            parent: this,
+            root: this.root || this,
+        };
+        this.disabled = this.shouldDisabled;
+        this.setRoot();
+        this.viewComponentsInstantiated = false;
+        this._viewComponents = [];
+    }
+    get disabled() {
+        return super.disabled;
+    }
+    set disabled(disabled) {
+        super.disabled = disabled;
+        this.viewComponents.forEach((component) => component.parentDisabled = disabled);
+    }
+    get isDefaultValueComponent() {
+        return !!this.options.editComponent && !!this.options.editForm && this.component.key === 'defaultValue';
+    }
+    destroy(all = false) {
+        if (!this.builderMode) {
+            this.removeComponents(this._viewComponents, all);
+        }
+        super.destroy(all);
+    }
+    createComponents(data, node) {
+        const components = this.componentComponents.map((component) => {
+            const componentInstance = Components.create(component, this.componentOptions, data);
+            componentInstance.init();
+            componentInstance.parentDisabled = this.disabled;
+            return componentInstance;
+        });
+        if (node) {
+            this.checkNode(this.data, node);
+        }
+        return components;
+    }
+    removeComponents(components, all = false) {
+        return components.map((component) => component.destroy(all));
+    }
+    render() {
+        if (this.builderMode) {
+            return super.render();
+        }
+        return super.render(this.renderTree(this.treeRoot));
+    }
+    renderTree(node = {}, odd = true) {
+        const childNodes = (node.hasChildren && !node.collapsed)
+            ? this.renderChildNodes(node.children, !odd)
+            : [];
+        const content = node.changing
+            ? this.renderEdit(node)
+            : this.renderView(node);
+        return this.renderTemplate('tree', {
+            odd,
+            childNodes,
+            content,
+            node,
+        });
+    }
+    renderChildNodes(nodes = [], odd) {
+        return nodes.map((node) => this.renderTree(node, odd));
+    }
+    renderEdit(node = {}) {
+        return this.renderTemplate('treeEdit', {
+            children: this.renderComponents(node.components),
+            node,
+        });
+    }
+    renderView(node = {}) {
+        return this.renderTemplate('treeView', {
+            values: this.viewComponents.map((component) => {
+                component.data = node.data;
+                component.checkComponentConditions(node.data);
+                return component.getView(component.dataValue);
+            }),
+            nodeData: node.data,
+            node,
+        });
+    }
+    attach(element) {
+        if (this.builderMode) {
+            return super.attach(element);
+        }
+        this.loadRefs(element, {
+            root: 'single',
+        });
+        return NativePromise.all([
+            super.attach(element),
+            this.attachNode(this.refs.root, this.treeRoot),
+        ]);
+    }
+    attachNode(element, node) {
+        if (!element) {
+            return NativePromise.resolve();
+        }
+        let componentsPromise = NativePromise.resolve();
+        let childrenPromise = NativePromise.resolve();
+        node.refs = _.reduce(element.children, (refs, child) => (child.hasAttribute('ref')
+            ? {
+                ...refs,
+                [child.getAttribute('ref')]: child,
+            }
+            : refs), {});
+        if (node.refs.content) {
+            this.attachActions(node);
+            componentsPromise = this.attachComponents(node);
+        }
+        if (node.refs.childNodes) {
+            childrenPromise = this.attachChildren(node);
+        }
+        return NativePromise.all([
+            componentsPromise,
+            childrenPromise,
+        ]);
+    }
+    attachActions(node) {
+        if (!node.editing) {
+            this.loadRefs.call(node, node.refs.content, {
+                addChild: 'single',
+                editNode: 'single',
+                removeNode: 'single',
+                revertNode: 'single',
+                toggleNode: 'single',
+            });
+        }
+        //load refs correctly (if there is nested tree)
+        this.loadRefs.call(node, node.refs.content.children[0]?.children[1] || node.refs.content, {
+            cancelNode: 'single',
+            saveNode: 'single',
+        });
+        if (node.refs.addChild) {
+            this.addEventListener(node.refs.addChild, 'click', () => {
+                this.addChild(node);
+            });
+        }
+        if (node.refs.cancelNode) {
+            this.addEventListener(node.refs.cancelNode, 'click', () => {
+                this.cancelNode(node);
+            });
+        }
+        if (node.refs.editNode) {
+            this.addEventListener(node.refs.editNode, 'click', () => {
+                this.editNode(node);
+            });
+        }
+        if (node.refs.removeNode) {
+            this.addEventListener(node.refs.removeNode, 'click', () => {
+                this.removeNode(node);
+            });
+        }
+        if (node.refs.revertNode) {
+            this.addEventListener(node.refs.revertNode, 'click', () => {
+                this.revertNode(node);
+            });
+        }
+        if (node.refs.saveNode) {
+            this.addEventListener(node.refs.saveNode, 'click', () => {
+                this.saveNode(node);
+            });
+        }
+        if (node.refs.toggleNode) {
+            this.addEventListener(node.refs.toggleNode, 'click', () => {
+                this.toggleNode(node);
+            });
+        }
+    }
+    attachComponents(node, ...args) {
+        if (this.builderMode) {
+            return super.attachComponents.call(this, node, ...args);
+        }
+        this.loadRefs.call(node, node.refs.content, {
+            nodeEdit: 'single',
+        });
+        return node.refs.nodeEdit
+            ? super.attachComponents(node.refs.nodeEdit, node.components)
+            : NativePromise.resolve();
+    }
+    attachChildren(node) {
+        const childElements = node.refs.childNodes.children;
+        return NativePromise.all(_.map(childElements, (childElement, index) => this.attachNode(childElement, node.children[index])));
+    }
+    setValue(value, flags = {}) {
+        const changed = this.updateValue(value, flags);
+        this.setRoot();
+        return changed;
+    }
+    addChild(parent) {
+        if (this.options.readOnly || parent.new) {
+            return;
+        }
+        this.hook('tree.addChild', {
+            parent,
+            component: this,
+        }, () => {
+            const child = parent.addChild();
+            this.redraw();
+            return child;
+        });
+    }
+    cancelNode(node) {
+        if (this.options.readOnly) {
+            return;
+        }
+        this.hook('tree.cancelNode', {
+            node,
+            component: this,
+        }, () => {
+            if (node.isRoot) {
+                if (node.persistentData && !_.isEmpty(node.persistentData)) {
+                    node.cancel();
+                    this.redraw();
+                }
+                else {
+                    this.removeRoot();
+                }
+            }
+            else {
+                node.cancel();
+                this.redraw();
+            }
+            return node;
+        });
+    }
+    editNode(node) {
+        if (this.options.readOnly || node.new) {
+            return;
+        }
+        this.hook('tree.editNode', {
+            node,
+            component: this,
+        }, () => {
+            node.edit();
+            this.redraw();
+            return node;
+        });
+    }
+    removeNode(node) {
+        if (this.options.readOnly || node.new) {
+            return;
+        }
+        this.hook('tree.removeNode', {
+            node,
+            component: this,
+        }, () => {
+            if (node.isRoot) {
+                this.removeRoot();
+            }
+            else {
+                node.remove();
+                this.updateTree();
+            }
+            return node;
+        });
+    }
+    revertNode(node) {
+        if (this.options.readOnly || !node.revertAvailable) {
+            return;
+        }
+        this.hook('tree.revertNode', {
+            node,
+            component: this,
+        }, () => {
+            node.revert();
+            this.updateTree();
+            return node;
+        });
+    }
+    saveNode(node) {
+        if (this.options.readOnly) {
+            return;
+        }
+        this.hook('tree.saveNode', {
+            node,
+            component: this,
+        }, () => {
+            const isSaved = node.save();
+            if (isSaved) {
+                this.updateTree();
+            }
+            return node;
+        });
+    }
+    toggleNode(node) {
+        this.hook('tree.toggleNode', {
+            node,
+            component: this,
+        }, () => {
+            node.collapsed = !node.collapsed;
+            this.redraw();
+            return node;
+        });
+    }
+    removeRoot() {
+        if (this.options.readOnly) {
+            return;
+        }
+        this.dataValue = this.defaultValue;
+        this.setRoot();
+        this.redraw();
+    }
+    setRoot() {
+        const value = this.getValue();
+        this.treeRoot = new Node(null, value, {
+            isNew: this.builderMode ? true : !value.data,
+            createComponents: this.createComponents.bind(this),
+            checkNode: this.checkNode.bind(this, this.data),
+            removeComponents: this.removeComponents,
+            parentPath: this.isDefaultValueComponent ? (this.path || this.component.key) : null,
+        });
+        this.hook('tree.setRoot', {
+            root: this.treeRoot,
+            component: this,
+        });
+        this.redraw();
+    }
+    getValue() {
+        return this.dataValue || {};
+    }
+    updateTree() {
+        this.updateValue(this.treeRoot.value);
+        this.redraw();
+    }
+    checkData(data, flags, row) {
+        return this.checkNode(data, this.treeRoot, flags, row);
+    }
+    checkNode(data, node, flags, row) {
+        return node.children.reduce((result, child) => this.checkNode(data, child, flags, row) && result, super.checkData(data, flags, node.data, node.components) && !node.editing && !node.new);
+    }
+    getComponents() {
+        return this.treeRoot && (this.isDefaultValueComponent || (!this.isDefaultValueComponent && !this.builderMode))
+            ? this.treeRoot.getComponents()
+            : super.getComponents();
+    }
+}
+TreeComponent.prototype.hasChanged = Component.prototype.hasChanged;

package/lib/mjs/components/tree/editForm/Tree.edit.data.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    key: string;
+    ignore: boolean;
+}[];
+export default _default;

package/lib/mjs/components/tree/editForm/Tree.edit.data.js

@@ -0,0 +1,7 @@
+export default [
+    {
+        key: 'multiple',
+        ignore: true
+    },
+];
+/* eslint-enable max-len */

package/lib/mjs/components/tree/fixtures/comp1.d.ts

@@ -0,0 +1,23 @@
+declare namespace _default {
+    const label: string;
+    const tableView: boolean;
+    const calculateServer: boolean;
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const tree: boolean;
+    const components: {
+        label: string;
+        mask: boolean;
+        spellcheck: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        calculateServer: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/tree/fixtures/comp1.js

@@ -0,0 +1,22 @@
+export default {
+    'label': 'Tree',
+    'tableView': true,
+    'calculateServer': false,
+    'key': 'tree',
+    'type': 'tree',
+    'input': true,
+    'tree': true,
+    'components': [{
+            'label': 'Number',
+            'mask': false,
+            'spellcheck': true,
+            'tableView': false,
+            'delimiter': false,
+            'requireDecimal': false,
+            'inputFormat': 'plain',
+            'calculateServer': false,
+            'key': 'number',
+            'type': 'number',
+            'input': true
+        }]
+};

package/lib/mjs/components/tree/fixtures/comp2.d.ts

@@ -0,0 +1,116 @@
+declare namespace _default {
+    const label: string;
+    const tableView: boolean;
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const tree: boolean;
+    const components: ({
+        label: string;
+        autoExpand: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        widget?: undefined;
+        data?: undefined;
+        selectThreshold?: undefined;
+        validate?: undefined;
+        indexeddb?: undefined;
+        collapsible?: undefined;
+        components?: undefined;
+        reorder?: undefined;
+        addAnotherPosition?: undefined;
+        layoutFixed?: undefined;
+        enableRowGroups?: undefined;
+        initEmpty?: undefined;
+        defaultValue?: undefined;
+    } | {
+        label: string;
+        widget: string;
+        tableView: boolean;
+        data: {
+            values: {
+                label: string;
+                value: string;
+            }[];
+        };
+        selectThreshold: number;
+        validate: {
+            onlyAvailableItems: boolean;
+        };
+        key: string;
+        type: string;
+        indexeddb: {
+            filter: {};
+        };
+        input: boolean;
+        autoExpand?: undefined;
+        collapsible?: undefined;
+        components?: undefined;
+        reorder?: undefined;
+        addAnotherPosition?: undefined;
+        layoutFixed?: undefined;
+        enableRowGroups?: undefined;
+        initEmpty?: undefined;
+        defaultValue?: undefined;
+    } | {
+        collapsible: boolean;
+        key: string;
+        type: string;
+        label: string;
+        input: boolean;
+        tableView: boolean;
+        components: {
+            label: string;
+            mask: boolean;
+            spellcheck: boolean;
+            tableView: boolean;
+            delimiter: boolean;
+            requireDecimal: boolean;
+            inputFormat: string;
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+        autoExpand?: undefined;
+        widget?: undefined;
+        data?: undefined;
+        selectThreshold?: undefined;
+        validate?: undefined;
+        indexeddb?: undefined;
+        reorder?: undefined;
+        addAnotherPosition?: undefined;
+        layoutFixed?: undefined;
+        enableRowGroups?: undefined;
+        initEmpty?: undefined;
+        defaultValue?: undefined;
+    } | {
+        label: string;
+        reorder: boolean;
+        addAnotherPosition: string;
+        layoutFixed: boolean;
+        enableRowGroups: boolean;
+        initEmpty: boolean;
+        tableView: boolean;
+        defaultValue: {}[];
+        key: string;
+        type: string;
+        input: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+        autoExpand?: undefined;
+        widget?: undefined;
+        data?: undefined;
+        selectThreshold?: undefined;
+        validate?: undefined;
+        indexeddb?: undefined;
+        collapsible?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/tree/fixtures/comp2.js

@@ -0,0 +1,80 @@
+export default {
+    'label': 'Tree',
+    'tableView': false,
+    'key': 'tree',
+    'type': 'tree',
+    'input': true,
+    'tree': true,
+    'components': [{
+            'label': 'Text Area',
+            'autoExpand': false,
+            'tableView': true,
+            'key': 'textArea',
+            'type': 'textarea',
+            'input': true
+        }, {
+            'label': 'Select',
+            'widget': 'choicesjs',
+            'tableView': true,
+            'data': {
+                'values': [{
+                        'label': 'a',
+                        'value': 'a'
+                    }, {
+                        'label': 'b',
+                        'value': 'b'
+                    }, {
+                        'label': 'c',
+                        'value': 'c'
+                    }]
+            },
+            'selectThreshold': 0.3,
+            'validate': {
+                'onlyAvailableItems': false
+            },
+            'key': 'select',
+            'type': 'select',
+            'indexeddb': {
+                'filter': {}
+            },
+            'input': true
+        }, {
+            'collapsible': false,
+            'key': 'panel',
+            'type': 'panel',
+            'label': 'Panel',
+            'input': false,
+            'tableView': false,
+            'components': [{
+                    'label': 'Number',
+                    'mask': false,
+                    'spellcheck': true,
+                    'tableView': false,
+                    'delimiter': false,
+                    'requireDecimal': false,
+                    'inputFormat': 'plain',
+                    'key': 'number',
+                    'type': 'number',
+                    'input': true
+                }]
+        }, {
+            'label': 'Data Grid',
+            'reorder': false,
+            'addAnotherPosition': 'bottom',
+            'layoutFixed': false,
+            'enableRowGroups': false,
+            'initEmpty': false,
+            'tableView': false,
+            'defaultValue': [{}],
+            'key': 'dataGrid',
+            'type': 'datagrid',
+            'input': true,
+            'components': [{
+                    'label': 'Text Field',
+                    'tableView': true,
+                    'key': 'textField',
+                    'type': 'textfield',
+                    'input': true
+                }]
+        }]
+};

package/lib/mjs/components/tree/fixtures/comp3.d.ts

@@ -0,0 +1,24 @@
+declare namespace _default {
+    const label: string;
+    const tableView: boolean;
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const tree: boolean;
+    const components: {
+        label: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        tree: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+    }[];
+}
+export default _default;

package/lib/mjs/components/tree/fixtures/comp3.js

@@ -0,0 +1,23 @@
+export default {
+    'label': 'Tree',
+    'tableView': false,
+    'key': 'tree',
+    'type': 'tree',
+    'input': true,
+    'tree': true,
+    'components': [{
+            'label': 'Tree',
+            'tableView': false,
+            'key': 'tree1',
+            'type': 'tree',
+            'input': true,
+            'tree': true,
+            'components': [{
+                    'label': 'Text Field',
+                    'tableView': true,
+                    'key': 'textField',
+                    'type': 'textfield',
+                    'input': true
+                }]
+        }]
+};