feat: add disable form actions option

Draggable · Mar 8, 2020 · df59eae · df59eae
1 parent 5bdf692
commit df59eae
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 47 deletions.
diff --git a/docs/options/controls/README.md b/docs/options/controls/README.md
@@ -7,7 +7,7 @@ Control options can be used to disable, extend and modify the Formeo's control p
 | [sortable](#sortable)         | String | allow controls to be reordered by users                                             | `true`                                       | `false`                        |
 | [disable](#disable)           | Object | disable built-in elements or groups                                                 | `{elements: ['number']}`                     | `{}`                           |
 | [elements](#elements)         | Array  | define custom elements                                                              | [see below](#elements)                       | `[]`                           |
-| [elementOrder](#elementOrder) | Array  | set order of elements in a group                                                    | `{html: ['header', 'paragraph', 'divider']}` | `[]`                           |
+| [elementOrder](#elementOrder) | Object | set order of elements in a group                                                    | `{html: ['header', 'paragraph', 'divider']}` | `[]`                           |
 | [groups](#groups)             | Array  | define custom [control groups](../../controls/#control-groups) beyond the default 3 | [see below](#groups)                         | `[]`                           |
 | [groupOrder](#groupOrder)     | Array  | set order of [control groups](../../controls/#control-groups)                       | `['html', 'layout']`                         | `['common', 'html', 'layout']` |
 
@@ -33,8 +33,8 @@ Disable built-in elements or groups
 const controlOptions = {
   disable: {
     elements: ['number'],
-    groups: ['layout']
-  }
+    groups: ['layout'],
+  },
 }
 
 const formeoOptions = {
@@ -46,7 +46,7 @@ const formeo = new FormeoEditor(formeoOptions)
 
 ## elements
 
-Define a custom element. Does *not* remove existing elements.
+Define a custom element. Does _not_ remove existing elements.
 
 ```javascript
 const controlOptions = {
@@ -56,25 +56,28 @@ const controlOptions = {
       config: {
         label: 'Email',
         disabledAttrs: ['type'], // Attributes hidden from the user
-        lockedAttrs: [] // Attributes that cannot be deleted
+        lockedAttrs: [], // Attributes that cannot be deleted
       },
       meta: {
         group: 'common',
         id: 'email',
         icon: 'email', // Icon name in icon set
       },
-      attrs: { // actual attributes on the HTML element, and their default values
+      attrs: {
+        // actual attributes on the HTML element, and their default values
         type: 'email', // type field is important if tag==input
         name: 'email',
       },
-      options: [ // Used for element types like radio buttons
+      options: [
+        // Used for element types like radio buttons
         // {label: 'Option 1', value: 'opt1', selected: true}
       ],
     },
   ],
-  elementOrder: { // Must be set in conjunction or it may not appear in the group
-    common: ['email', /* ...rest of the elements */]
-  }
+  elementOrder: {
+    // Must be set in conjunction or it may not appear in the group
+    common: ['email' /* ...rest of the elements */],
+  },
 }
 
 const formeoOptions = {
@@ -91,8 +94,8 @@ Set the element order within a control group. May be overridden if [sortable](#s
 ```javascript
 const controlOptions = {
   elementOrder: {
-    html: ['header', 'paragraph', 'divider']
-  }
+    html: ['header', 'paragraph', 'divider'],
+  },
 }
 
 const formeoOptions = {
@@ -104,7 +107,7 @@ const formeo = new FormeoEditor(formeoOptions)
 
 ## groups
 
-Define a custom [control group](../../controls/#control-groups) beyond the default 3. Does *not* remove existing groups
+Define a custom [control group](../../controls/#control-groups) beyond the default 3. Does _not_ remove existing groups
 
 ```javascript
 const controlOptions = {
@@ -113,7 +116,7 @@ const controlOptions = {
       id: 'mygroup',
       label: 'My Amazing Group!',
       elementOrder: ['myelement'],
-    }
+    },
   ],
 }
 

diff --git a/src/js/components/controls/index.js b/src/js/components/controls/index.js
@@ -1,7 +1,6 @@
 import Sortable from 'sortablejs'
 import i18n from 'mi18n'
 import cloneDeep from 'lodash/cloneDeep'
-import merge from 'lodash/merge'
 import actions from '../../common/actions'
 import { indexOfNode, orderObjectsBy, get } from '../../common/helpers'
 import events from '../../common/events'
@@ -17,6 +16,7 @@ import Components, { Stages, Rows } from '..'
 import layoutControls from './layout'
 import formControls from './form'
 import htmlControls from './html'
+import defaultOptions from './options'
 
 const defaultElements = [...formControls, ...htmlControls, ...layoutControls]
 
@@ -27,32 +27,6 @@ export class Controls {
   constructor() {
     const _this = this
     this.data = new Map()
-    this.defaults = {
-      sortable: true,
-      elementOrder: {},
-      groups: [
-        {
-          id: 'layout',
-          label: 'controls.groups.layout',
-          elementOrder: ['row', 'column'],
-        },
-        {
-          id: 'common',
-          label: 'controls.groups.form',
-          elementOrder: ['button', 'checkbox'],
-        },
-        {
-          id: 'html',
-          label: 'controls.groups.html',
-          elementOrder: ['header', 'block-text'],
-        },
-      ],
-      disable: {
-        groups: [],
-        elements: [],
-      },
-      elements: [],
-    }
 
     this.controlEvents = {
       focus: ({ target }) => {
@@ -89,7 +63,7 @@ export class Controls {
    * @return {Array} elementControls
    */
   registerControls() {
-    this.controls = this.options.elements.map(Element => {
+    this.controls = this.elements.map(Element => {
       const isControl = typeof Element === 'function'
       const control = isControl ? new Element() : new Control(Element)
       const {
@@ -281,9 +255,14 @@ export class Controls {
       controlClass += ' formeo-sticky'
     }
 
+    const content = [groupsWrap]
+    if (!this.options.disable.formActions) {
+      content.push(formActions)
+    }
+
     const element = dom.create({
       className: controlClass,
-      content: [groupsWrap, formActions],
+      content,
     })
     const groups = element.getElementsByClassName('control-group')
 
@@ -396,12 +375,11 @@ export class Controls {
   }
 
   applyOptions = (controlOptions = {}) => {
-    this.options = {}
-    const { groupOrder = [], elements = [], container } = controlOptions
+    const { container, elements, groupOrder, ...options } = { ...defaultOptions, controlOptions }
     this.container = container
     this.groupOrder = unique(groupOrder.concat(['common', 'html', 'layout']))
-    this.options = merge(this.defaults, controlOptions)
-    this.options.elements = elements.concat(defaultElements)
+    this.elements = elements.concat(defaultElements)
+    this.options = options
   }
 }