@formio/js 5.0.0-dev.5543.afcff10 → 5.0.0-dev.5543.eaae5a6

package/lib/cjs/WebformBuilder.js

@@ -123,7 +123,7 @@ class WebformBuilder extends Component_1.default {
         }
         this.options.hooks = this.options.hooks || {};
         this.options.hooks.renderComponent = (html, { component, self }) => {
-            var _a;
+            var _a, _b;
             if (self.type === 'form' && !self.key) {
                 const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));
                 // The main webform shouldn't have this class as it adds extra styles.
@@ -136,6 +136,7 @@ class WebformBuilder extends Component_1.default {
                 html,
                 disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,
                 childComponent: component,
+                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -486,6 +487,7 @@ class WebformBuilder extends Component_1.default {
     attach(element) {
         this.on('change', (form) => {
             this.populateRecaptchaSettings(form);
+            this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
             this.loadRefs(element, {
@@ -819,6 +821,20 @@ class WebformBuilder extends Component_1.default {
                 return;
             }
         }
+        if (draggableComponent.uniqueComponent) {
+            let isCompAlreadyExists = false;
+            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {
+                if (component.key === draggableComponent.schema.key) {
+                    isCompAlreadyExists = true;
+                    return;
+                }
+            }, true);
+            if (isCompAlreadyExists) {
+                this.webform.redraw();
+                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+                return;
+            }
+        }
         if (target !== source) {
             // Ensure the key remains unique in its new container.
             builder_1.default.uniquify(this.findNamespaceRoot(target.formioComponent), info);
@@ -851,7 +867,7 @@ class WebformBuilder extends Component_1.default {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {
+        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.

package/lib/cjs/components/datagrid/DataGrid.js

@@ -198,7 +198,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);
     }
     get canAddColumn() {
-        return this.builderMode;
+        return this.builderMode && !this.options.design;
     }
     render() {
         const columns = this.getColumns();

package/lib/mjs/WebformBuilder.js

@@ -115,6 +115,7 @@ export default class WebformBuilder extends Component {
                 html,
                 disableBuilderActions: self?.component?.disableBuilderActions,
                 childComponent: component,
+                design: self?.options?.design
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -472,6 +473,7 @@ export default class WebformBuilder extends Component {
     attach(element) {
         this.on('change', (form) => {
             this.populateRecaptchaSettings(form);
+            this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
             this.loadRefs(element, {
@@ -804,6 +806,20 @@ export default class WebformBuilder extends Component {
                 return;
             }
         }
+        if (draggableComponent.uniqueComponent) {
+            let isCompAlreadyExists = false;
+            eachComponent(this.webform.components, (component) => {
+                if (component.key === draggableComponent.schema.key) {
+                    isCompAlreadyExists = true;
+                    return;
+                }
+            }, true);
+            if (isCompAlreadyExists) {
+                this.webform.redraw();
+                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+                return;
+            }
+        }
         if (target !== source) {
             // Ensure the key remains unique in its new container.
             BuilderUtils.uniquify(this.findNamespaceRoot(target.formioComponent), info);
@@ -836,7 +852,7 @@ export default class WebformBuilder extends Component {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {
+        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.

package/lib/mjs/components/datagrid/DataGrid.js

@@ -195,7 +195,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);
     }
     get canAddColumn() {
-        return this.builderMode;
+        return this.builderMode && !this.options.design;
     }
     render() {
         const columns = this.getColumns();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5543.afcff10",
+  "version": "5.0.0-dev.5543.eaae5a6",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",