From d0e9b94f1285417066d341a0c6f786e99ff7f168 Mon Sep 17 00:00:00 2001 From: alexandraRamanenka <60643585+alexandraRamanenka@users.noreply.github.com> Date: Mon, 20 Nov 2023 22:32:17 +0200 Subject: [PATCH] FIO-7208: Moved Tree component to the contrib library (#5359) * FIO-7208: Moved Tree component to the contrib library * Removed Tree component from tests --- src/components/builder.js | 2 - src/components/index.js | 2 - src/components/tree/Node.js | 227 -------- src/components/tree/Tree.form.js | 15 - src/components/tree/Tree.js | 520 ------------------ src/components/tree/Tree.unit.js | 207 ------- .../tree/editForm/Tree.edit.data.js | 7 - .../tree/editForm/Tree.edit.display.js | 10 - src/components/tree/fixtures/comp1.js | 23 - src/components/tree/fixtures/comp2.js | 80 --- src/components/tree/fixtures/comp3.js | 23 - src/components/tree/fixtures/comp4.js | 45 -- src/components/tree/fixtures/index.js | 5 - src/sass/formio.form.scss | 21 - .../testBasicComponentSettings/form.js | 14 - 15 files changed, 1201 deletions(-) delete mode 100644 src/components/tree/Node.js delete mode 100644 src/components/tree/Tree.form.js delete mode 100644 src/components/tree/Tree.js delete mode 100644 src/components/tree/Tree.unit.js delete mode 100644 src/components/tree/editForm/Tree.edit.data.js delete mode 100644 src/components/tree/editForm/Tree.edit.display.js delete mode 100644 src/components/tree/fixtures/comp1.js delete mode 100644 src/components/tree/fixtures/comp2.js delete mode 100644 src/components/tree/fixtures/comp3.js delete mode 100644 src/components/tree/fixtures/comp4.js delete mode 100644 src/components/tree/fixtures/index.js diff --git a/src/components/builder.js b/src/components/builder.js index 3884eacd90..c953dce0ff 100644 --- a/src/components/builder.js +++ b/src/components/builder.js @@ -37,7 +37,6 @@ import TagsForm from './tags/Tags.form'; import TextAreaForm from './textarea/TextArea.form'; import TextfieldForm from './textfield/TextField.form'; import TimeForm from './time/Time.form'; -import TreeForm from './tree/Tree.form'; import UnknownForm from './unknown/Unknown.form'; import UrlForm from './url/Url.form'; import WellForm from './well/Well.form'; @@ -80,7 +79,6 @@ Components.tags.editForm = TagsForm; Components.textarea.editForm = TextAreaForm; Components.textfield.editForm = TextfieldForm; Components.time.editForm = TimeForm; -Components.tree.editForm = TreeForm; Components.unknown.editForm = UnknownForm; Components.url.editForm = UrlForm; Components.well.editForm = WellForm; diff --git a/src/components/index.js b/src/components/index.js index 5ec679e647..9df2ad255a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -42,7 +42,6 @@ import TagsComponent from './tags/Tags'; import TextAreaComponent from './textarea/TextArea'; import TextFieldComponent from './textfield/TextField'; import TimeComponent from './time/Time'; -import TreeComponent from './tree/Tree'; import UnknownComponent from './unknown/Unknown'; import UrlComponent from './url/Url'; import WellComponent from './well/Well'; @@ -93,7 +92,6 @@ export default { textarea: TextAreaComponent, textfield: TextFieldComponent, time: TimeComponent, - tree: TreeComponent, unknown: UnknownComponent, url: UrlComponent, well: WellComponent, diff --git a/src/components/tree/Node.js b/src/components/tree/Node.js deleted file mode 100644 index 58db7167b8..0000000000 --- a/src/components/tree/Node.js +++ /dev/null @@ -1,227 +0,0 @@ -import _ from 'lodash'; - -export default class Node { - constructor( - parent, - { - data = {}, - children = [], - } = {}, - { - checkNode, - createComponents, - isNew = true, - removeComponents, - parentPath = '' - } = {}, - ) { - this.parent = parent; - this.previousData = {}; - this.persistentData = _.cloneDeep(data); - this.new = isNew; - this.createComponents = createComponents; - this.checkNode = checkNode; - this.removeComponents = removeComponents; - this.revertAvailable = false; - this.editing = false; - this.collapsed = false; - this.components = []; - this.children = []; - this.parentPath = parentPath; - - this.resetData(); - this.children = children.map((child, index) => new Node(this, child, { - checkNode, - createComponents, - isNew: false, - removeComponents, - parentPath: this.getChildrenPath(index), - })); -} - - get value() { - return this.new - ? null // Check the special case for empty root node. - : { - data: _.cloneDeep(this.persistentData), - children: this.children.filter((child) => !child.new).map((child) => child.value), - }; - } - - get isRoot() { - return this.parent === null; - } - - get changing() { - return this.new || this.editing; - } - - get hasChangingChildren() { - return this.changin || this.children.some((child) => child.hasChangingChildren); - } - - get hasData() { - return !_.isEmpty(this.persistentData); - } - - get hasChildren() { - return Array.isArray(this.children) && this.children.length > 0; - } - - getChildrenPath(index) { - return this.parentPath ? `${this.parentPath}.children[${index}]` : ''; - } - - eachChild(iteratee) { - iteratee(this); - this.children.forEach((child) => child.eachChild(iteratee)); - return this; - } - - getComponents() { - return this.children.reduce( - (components, child) => components.concat(child.getComponents()), - this.components, - ); - } - - validateNode() { - let valid = true; - this.getComponents().forEach(comp => { - comp.setPristine(false); - valid &= comp.checkValidity(null, false, this.persistentData); - }); - return valid; - } - - addChild() { - if (this.new) { - return null; - } - - const child = new Node(this, {}, { - checkNode: this.checkNode, - createComponents: this.createComponents, - isNew: true, - removeComponents: this.removeComponents, - parentPath: this.getChildrenPath(this.children.length), - }); - this.children = this.children.concat(child); - return child; - } - - removeChild(childToRemove) { - if (!this.new) { - this.children = this.children.filter((child) => child !== childToRemove); - } - - return this; - } - - edit() { - if (this.new) { - return this; - } - - this.editing = true; - return this.resetData(); - } - - save() { - const isValid = this.validateNode(); - if (this.changing && isValid) { - if (this.new) { - this.new = false; - } - else { - this.editing = false; - this.revertAvailable = true; - } - this.commitData(); - } - - return isValid; - } - - cancel() { - if (this.new) { - this.remove(); - } - else if (this.editing) { - this.editing = false; - this.resetData(); - } - - return this; - } - - remove() { - this.parent.removeChild(this); - this.parent = null; - this.clearComponents(); - return this; - } - - revert() { - if (!this.revertAvailable) { - return this; - } - - this.data = this.previousData; - return this.commitData(); - } - - commitData() { - this.previousData = this.persistentData; - this.persistentData = _.cloneDeep(this.data); - this.clearComponents(); - return this; - } - - resetData() { - this.data = _.cloneDeep(this.persistentData); - this.updateComponentsContext(); - return this; - } - - updateComponentsContext() { - if (this.changing) { - this.instantiateComponents(); - } - else { - this.clearComponents(); - } - - return this; - } - - instantiateComponents() { - this.components = this.createComponents(this.data, this); - this.components.forEach((component) => { - if (this.parentPath) { - const path = this.calculateComponentPath(component); - component.path = path; - } - }); - this.checkNode(this); - } - - clearComponents() { - this.removeComponents(this.components); - this.components = []; - } - - /** - * Return a path of component's value. - * - * @param {Object} component - The component instance. - * @return {string} - The component's value path. - */ - calculateComponentPath(component) { - let path = ''; - if (component.component.key) { - path = `${this.parentPath}.data.${component.component.key}`; - } - return path; - } -} diff --git a/src/components/tree/Tree.form.js b/src/components/tree/Tree.form.js deleted file mode 100644 index 2fe5c9a19b..0000000000 --- a/src/components/tree/Tree.form.js +++ /dev/null @@ -1,15 +0,0 @@ -import componentEditForm from '../_classes/component/Component.form'; -import TreeEditData from './editForm/Tree.edit.data'; -import TreeDisplayData from './editForm/Tree.edit.display'; -export default function(...extend) { - return componentEditForm([ - { - key: 'display', - components: TreeDisplayData, - }, - { - key: 'data', - components: TreeEditData, - }, - ], ...extend); -} diff --git a/src/components/tree/Tree.js b/src/components/tree/Tree.js deleted file mode 100644 index 67a5e7c683..0000000000 --- a/src/components/tree/Tree.js +++ /dev/null @@ -1,520 +0,0 @@ -import _ from 'lodash'; -import Component from '../_classes/component/Component'; -import Components from '../Components'; -import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent'; -import Node from './Node'; - -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', - weight: 40, - documentation: '/userguide/form-building/data-components#tree', - showPreview: false, - 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 Promise.all([ - super.attach(element), - this.attachNode(this.refs.root, this.treeRoot), - ]); - } - - attachNode(element, node) { - if (!element) { - return Promise.resolve(); - } - - let componentsPromise = Promise.resolve(); - let childrenPromise = Promise.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 Promise.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) - : Promise.resolve(); - } - - attachChildren(node) { - const childElements = node.refs.childNodes.children; - - return Promise.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(); - } - - getValueAsString(value, options) { - const getChildAsString = (value) => { - let result = (` - - - `); - result += ` - - `; - result += Object.keys(value.data).map((k) => (` - - - - `; - - result += (` - -
${k} - ${value.data[k]} -
- `)); - - if (value.children?.length !== 0) { - value.children?.forEach((v) => { - result += getChildAsString(v); - }); - } - - result += ` -
- `); - - return result; - }; - - if (options?.email) { - let result = ''; - result += getChildAsString(value); - return result; - } - - return super.getValueAsString(value, options); - } -} - -TreeComponent.prototype.hasChanged = Component.prototype.hasChanged; diff --git a/src/components/tree/Tree.unit.js b/src/components/tree/Tree.unit.js deleted file mode 100644 index f1c94e7812..0000000000 --- a/src/components/tree/Tree.unit.js +++ /dev/null @@ -1,207 +0,0 @@ -import assert from 'power-assert'; -import Harness from '../../../test/harness'; -import TreeComponent from './Tree'; -import { - comp1, - comp2, - comp3, - comp4 -} from './fixtures'; -import Webform from '../../Webform'; -import _ from 'lodash'; -import { Formio } from '../../Formio'; - -describe('Tree Component', () => { - it('Should set and render values in readOnly mode', function(done) { - Harness.testCreate(TreeComponent, comp1).then((component) => { - component.setValue({ - data: { - number: 111, - }, - children: [{ - data: { - number: 222, - }, - children: [{ - data: { - number: 333, - }, - children: [] - }] - }] - }); - - assert.equal(component.element.querySelectorAll('.tree__node-content').length, 3); - assert.equal(component.element.querySelectorAll('.editNode').length, 3); - - component.options.readOnly = true; - component.redraw(); - - const valueContainers = component.element.querySelectorAll('.col-sm-2'); - - assert.equal(component.element.querySelectorAll('.tree__node-content').length, 3); - assert.equal(component.element.querySelectorAll('.editNode').length, 0); - assert.equal(valueContainers[0].innerHTML.trim(), '111'); - assert.equal(valueContainers[1].innerHTML.trim(), '222'); - assert.equal(valueContainers[2].innerHTML.trim(), '333'); - - done(); - }); - }); - it('Should render tree and allow to save node with basic, layout and data component inside', function(done) { - Harness.testCreate(TreeComponent, comp2).then((component) => { - assert.equal(!!component.treeRoot.refs.content, true); - assert.equal(!!component.treeRoot.refs.cancelNode, true); - assert.equal(!!component.treeRoot.refs.saveNode, true); - assert.equal(!!component.treeRoot.refs.addChild, false); - assert.equal(!!component.treeRoot.refs.editNode, false); - assert.equal(!!component.treeRoot.refs.removeNode, false); - - const value = { - data: { - dataGrid: [{ textField: 'data grid 1st row text' }], - number: 3333, - select: '', - textArea: 'text area text', - }, - children: [] - }; - - const inputFields = { - 'data[tree][dataGrid][0][textField]': value.data.dataGrid[0].textField, - 'data[tree][number]':value.data.number, - 'data[tree][textArea]': value.data.textArea - }; - - const inputEvent = new Event('input'); - _.each(inputFields, (value, fieldName)=> { - const input = component.element.querySelector(`[name="${fieldName}"]`); - input.value = value; - input.dispatchEvent(inputEvent); - }); - - setTimeout(() => { - const clickEvent = new Event('click'); - component.treeRoot.refs.saveNode.dispatchEvent(clickEvent); - setTimeout(() => { - assert.equal(!!component.treeRoot.refs.content, true); - assert.equal(!!component.treeRoot.refs.cancelNode, false); - assert.equal(!!component.treeRoot.refs.saveNode, false); - assert.equal(!!component.treeRoot.refs.addChild, true); - assert.equal(!!component.treeRoot.refs.editNode, true); - assert.equal(!!component.treeRoot.refs.removeNode, true); - assert.deepEqual(component.getValue(), value, 'setvalue'); - - done(); - }); - }); - }); - }); - it('Should keep the node of parent tree opened when saving the node of a child tree', function(done) { - Harness.testCreate(TreeComponent, comp3).then((component) => { - assert.equal(!!component.treeRoot.refs.cancelNode, true); - assert.equal(!!component.treeRoot.refs.saveNode, true); - assert.equal(!!component.treeRoot.refs.editNode, false); - - const clickEvent = new Event('click'); - const childSaveNodeBtn = component.element.querySelector('.formio-component-tree1').querySelector('[ref="saveNode"]'); - - childSaveNodeBtn.dispatchEvent(clickEvent); - - setTimeout(() => { - assert.equal(!!component.treeRoot.refs.cancelNode, true); - assert.equal(!!component.treeRoot.refs.saveNode, true); - assert.equal(!!component.treeRoot.refs.editNode, false); - - const childTree = component.element.querySelector('.formio-component-tree1'); - const saveBtn = childTree.querySelector('[ref="saveNode"]'); - const editBtn = childTree.querySelector('[ref="editNode"]'); - - assert.equal(!!saveBtn, false); - assert.equal(!!editBtn, true); - - done(); - }); - }); - }); - it('Should allow to open node of a child tree for editing after opening parent tree node', function(done) { - Harness.testCreate(TreeComponent, comp3).then((component) => { - assert.equal(!!component.treeRoot.refs.cancelNode, true, 'Should show cancel btn for parent tree'); - assert.equal(!!component.treeRoot.refs.saveNode, true, 'Should show save btn for parent tree'); - assert.equal(!!component.treeRoot.refs.editNode, false, 'Should not show edit btn for parent node in editing tree'); - - assert.equal(!!component.treeRoot.components[0].treeRoot.refs.cancelNode, true, 'Should show cancel btn for child tree'); - assert.equal(!!component.treeRoot.components[0].treeRoot.refs.saveNode, true, 'Should show save btn for child tree'); - assert.equal(!!component.treeRoot.components[0].treeRoot.refs.editNode, false, 'Should not show edit btn for child tree in editing tree'); - - const clickEvent = new Event('click'); - const childSaveNodeBtn = component.treeRoot.components[0].treeRoot.refs.saveNode; - const parentSaveNodeBtn = component.treeRoot.refs.saveNode; - childSaveNodeBtn.dispatchEvent(clickEvent); - parentSaveNodeBtn.dispatchEvent(clickEvent); - - setTimeout(() => { - assert.equal(!!component.treeRoot.refs.cancelNode, false, 'Should not show cancel btn for parent tree'); - assert.equal(!!component.treeRoot.refs.saveNode, false, 'Should not show save btn for parent tree'); - assert.equal(!!component.treeRoot.refs.editNode, true, 'Should show edit btn for parent tree'); - - const parentEditNodeBtn = component.treeRoot.refs.editNode; - - parentEditNodeBtn.dispatchEvent(clickEvent); - - setTimeout(() => { - assert.equal(!!component.treeRoot.components[0].treeRoot.refs.saveNode, false, 'Should not show save btn for child tree'); - assert.equal(!!component.treeRoot.components[0].treeRoot.refs.editNode, true, 'Should show edit btn for child tree'); - - const childEditNodeBtn = component.treeRoot.components[0].treeRoot.refs.editNode; - - childEditNodeBtn.dispatchEvent(clickEvent); - - assert.equal(component.treeRoot.components[0].treeRoot.editing, true, 'Should set editing mode for child tree'); - assert.equal(!!component.treeRoot.components[0].treeRoot.refs.saveNode, true, 'Should show save btn for child tree'); - - done(); - }); - }); - }); - }); - - it('Should stop the submission if component didn\'t saved and has required fields', (done) => { - const formElement = document.createElement('div'); - const form = new Webform(formElement); - form.setForm(comp4).then(() => { - const submitButton = form.getComponent(['submit']); - assert.equal(submitButton.disabled, true, 'Submit button should being disabled'); - const tree = form.getComponent(['tree']); - const textField = tree.getComponents()[0].getComponent(['textField']); - textField.setValue('123'); - - setTimeout(() => { - assert.equal(submitButton.disabled, true, 'Submit button should being disabled'); - tree.saveNode(tree.treeRoot); - - setTimeout(() => { - assert.equal(submitButton.disabled, false, 'Submit button should being disabled'); - done(); - }, 300); - }, 300); - }).catch(done); - }); - - it('Should work with empty data and no defaults', (done) => { - const formElement = document.createElement('div'); - Formio.createForm(formElement, { - type: 'form', - components: [comp1], - display: 'form', - }, { noDefaults: true }) - .then((form) => { - setTimeout(() => { - const tree = form.getComponent(['tree']); - assert.equal(tree.treeRoot.new, true); - done(); - }, 300); - }) - .catch(done); - }); -}); diff --git a/src/components/tree/editForm/Tree.edit.data.js b/src/components/tree/editForm/Tree.edit.data.js deleted file mode 100644 index 296b37f4b5..0000000000 --- a/src/components/tree/editForm/Tree.edit.data.js +++ /dev/null @@ -1,7 +0,0 @@ -export default [ - { - key: 'multiple', - ignore: true - }, -]; -/* eslint-enable max-len */ diff --git a/src/components/tree/editForm/Tree.edit.display.js b/src/components/tree/editForm/Tree.edit.display.js deleted file mode 100644 index 5c563e9853..0000000000 --- a/src/components/tree/editForm/Tree.edit.display.js +++ /dev/null @@ -1,10 +0,0 @@ -export default [ - { - key: 'treeInfo', - weight: -10, - type: 'htmlelement', - tag: 'div', - className: 'alert alert-danger', - content: 'This component has been deprecated and will be removed in a future version of Formio.js.', - } -]; diff --git a/src/components/tree/fixtures/comp1.js b/src/components/tree/fixtures/comp1.js deleted file mode 100644 index 9e698b57be..0000000000 --- a/src/components/tree/fixtures/comp1.js +++ /dev/null @@ -1,23 +0,0 @@ -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 - }] -}; - diff --git a/src/components/tree/fixtures/comp2.js b/src/components/tree/fixtures/comp2.js deleted file mode 100644 index d7b1f9b358..0000000000 --- a/src/components/tree/fixtures/comp2.js +++ /dev/null @@ -1,80 +0,0 @@ -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 - }] - }] -}; diff --git a/src/components/tree/fixtures/comp3.js b/src/components/tree/fixtures/comp3.js deleted file mode 100644 index 922cdb4503..0000000000 --- a/src/components/tree/fixtures/comp3.js +++ /dev/null @@ -1,23 +0,0 @@ -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 - }] - }] -}; diff --git a/src/components/tree/fixtures/comp4.js b/src/components/tree/fixtures/comp4.js deleted file mode 100644 index 46ad419ca9..0000000000 --- a/src/components/tree/fixtures/comp4.js +++ /dev/null @@ -1,45 +0,0 @@ -export default { - type: 'form', - owner: null, - components: [ - { - label: 'Tree', - tableView: false, - key: 'tree', - type: 'tree', - input: true, - tree: true, - components: [ - { - title: 'Required validation', - collapsible: false, - key: 'panel', - type: 'panel', - label: 'Panel', - input: false, - tableView: false, - components: [ - { - label: 'Text Field', - tableView: true, - validate: { - required: true, - }, - key: 'textField', - type: 'textfield', - input: true, - }, - ], - }, - ], - }, - { - type: 'button', - label: 'Submit', - key: 'submit', - disableOnInvalid: true, - input: true, - tableView: false, - }, - ], -}; diff --git a/src/components/tree/fixtures/index.js b/src/components/tree/fixtures/index.js deleted file mode 100644 index f1a58d4b03..0000000000 --- a/src/components/tree/fixtures/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import comp1 from './comp1'; -import comp2 from './comp2'; -import comp3 from './comp3'; -import comp4 from './comp4'; -export { comp1, comp2, comp3, comp4 }; diff --git a/src/sass/formio.form.scss b/src/sass/formio.form.scss index dea8b35bcb..8070768fa1 100644 --- a/src/sass/formio.form.scss +++ b/src/sass/formio.form.scss @@ -859,10 +859,6 @@ body.formio-dialog-open { overflow-wrap: break-word; } -.tree-listgroup { - flex-direction: row; -} - .formio-component-submit button[disabled]+.has-error { display: block; } @@ -1105,23 +1101,6 @@ body.formio-dialog-open { color: inherit; } -.tree { - &__level { - &_even { - background-color: #f6f6f6; - } - } - - &__node-content { - margin-bottom: 10px; - overflow-wrap: break-word; - } - - &__node-children { - margin: 0; - } -} - .formio-select-autocomplete-input { /* we can't use display: none or visibility: hidden because autocomplete won't work on hidden field */ opacity: 0; diff --git a/test/forms/helpers/testBasicComponentSettings/form.js b/test/forms/helpers/testBasicComponentSettings/form.js index 7043dac5b6..060f36b979 100644 --- a/test/forms/helpers/testBasicComponentSettings/form.js +++ b/test/forms/helpers/testBasicComponentSettings/form.js @@ -652,20 +652,6 @@ export default { "type": "textfield", "input": true }] - }, { - "label": "Tree", - "tableView": false, - "key": "tree", - "type": "tree", - "input": true, - "tree": true, - "components": [{ - "label": "Text Field Tree", - "tableView": true, - "key": "textFieldTree", - "type": "textfield", - "input": true - }] }, { "label": "Upload", "tableView": false,