Merge pull request #1500 from lucasnetau/pluginDisableAttr

feat: Allow control plugins to disable default attributes via the disableAttr key in the plugin definition

docs/formBuilder/overview.md

@@ -99,7 +99,19 @@ static get definition() {
   }
 }
 ```
-
+
+* `disabledAttrs` - used primarily by control plugins. This allows you to disable default attrs for a control plugin where attributes are not used by the plugin or serve no purpose.
+```javascript
+static get definition() {
+  return {
+    disabledAttrs: [
+      'description',
+      'placeholder',
+    ],
+  }
+}
+```  
+
 The label for a control in the list of form builder controls should be defined as the translation for the `type`. E.g. if you want to rename the label for a textarea, you would update the mi18n translation for `textarea`, or define an override in the `i18n` property.
 
 # Layouts

src/js/form-builder.js

@@ -587,6 +587,11 @@ function FormBuilder(opts, element, $) {
         useDefaultAttr.push(!typeDisabledAttrs.includes(attr))
       }
 
+      if (typeClass.definition.hasOwnProperty('disabledAttrs')) {
+        const userDisabledAttrs = typeClass.definition.disabledAttrs
+        useDefaultAttr.push(!userDisabledAttrs.includes(attr))
+      }
+
       if (typeClass.definition.hasOwnProperty('defaultAttrs')) {
         const userAttrs = Object.keys(typeClass.definition.defaultAttrs)
         useDefaultAttr.push(!userAttrs.includes(attr))

tests/form-builder-custom.test.js

@@ -0,0 +1,97 @@
+require('./setup-fb')
+require('./../src/js/form-builder.js')
+
+beforeAll(() => {
+  window.fbControls = []
+
+  window.fbControls.push(function(controlClass) {
+    class controlTest extends controlClass {
+      static get definition() {
+        return {
+          icon: 'T',
+          i18n: {
+            default: 'Test Control Plugin',
+          },
+          disabledAttrs: [
+            'description', 'placeholder',
+          ],
+          defaultAttrs:{
+            'Extra Content': {
+              'label': 'extracontent',
+              'value' : '',
+              'type': 'textarea'
+            }
+          }
+        }
+      }
+
+      build() {
+        this.dom = this.markup('div', null, this.config)
+        return {
+          field: this.dom,
+          layout: 'hidden',
+        }
+      }
+    }
+
+    // register this control for the following types & text subtypes
+    controlClass.register('testPlugin', controlTest)
+  })
+})
+
+describe('controlPlugins', () => {
+  test('ensure plugin appears in fieldTypes', async () => {
+    expect(window.fbControls).toHaveLength(1)
+    const config = {}
+
+    const fbWrap = $('<div>')
+    const fb = await $(fbWrap).formBuilder(config).promise
+
+    expect(fb.actions.getFieldTypes()).toContain('testPlugin')
+  })
+
+  test('add control plugin to stage', async () => {
+    const config = {}
+
+    const fbWrap = $('<div>')
+    const fb = await $(fbWrap).formBuilder(config).promise
+
+    const field = {
+      type: 'testPlugin',
+      class: 'form-control'
+    }
+    fb.actions.addField(field)
+
+    expect(fb.actions.getData()).toHaveLength(1)
+  })
+
+  test('control plugin can disable attrs', async () => {
+    const config = {}
+
+    const fbWrap = $('<div>')
+    const fb = await $(fbWrap).formBuilder(config).promise
+    const field = {
+      type: 'testPlugin',
+      class: 'form-control'
+    }
+    fb.actions.addField(field)
+
+    expect(fbWrap.find('.label-wrap')).toHaveLength(1)
+    expect(fbWrap.find('.description-wrap')).toHaveLength(0)
+    expect(fbWrap.find('.placeholder-wrap')).toHaveLength(0)
+  })
+
+  test('control plugin can set default attrs', async () => {
+    const config = {}
+
+    const fbWrap = $('<div>')
+    const fb = await $(fbWrap).formBuilder(config).promise
+    const field = {
+      type: 'testPlugin',
+      class: 'form-control'
+    }
+    fb.actions.addField(field)
+
+    expect(fbWrap.find('textarea[name="Extra Content"]')).toHaveLength(1)
+  })
+})

tests/form-builder.test.js

@@ -522,4 +522,30 @@ describe('FormBuilder disabling attributes', () => {
     expect(fbWrap.find('.className-wrap').css('display')).toBe('none')
     expect(fbWrap.find('.label-wrap').css('display')).toBe('block')
   })
+
+  test('attributes not on stage when disabled via typeUserDisabledAttrs', async () => {
+    const config = {
+      typeUserDisabledAttrs: {'text': ['label','description']},
+    }
+
+    const fbWrap = $('<div>')
+    const fb = await $(fbWrap).formBuilder(config).promise
+    const field = {
+      type: 'text',
+      class: 'form-control'
+    }
+    fb.actions.addField(field)
+    const field2 = {
+      type: 'textarea',
+      class: 'form-control'
+    }
+    fb.actions.addField(field2)
+    expect(fbWrap.find('.form-field[type="text"] .subtype-wrap')).toHaveLength(1)
+    expect(fbWrap.find('.form-field[type="text"] .label-wrap')).toHaveLength(0)
+    expect(fbWrap.find('.form-field[type="text"] .description-wrap')).toHaveLength(0)
+
+    expect(fbWrap.find('.form-field[type="textarea"] .subtype-wrap')).toHaveLength(1)
+    expect(fbWrap.find('.form-field[type="textarea"] .label-wrap')).toHaveLength(1)
+    expect(fbWrap.find('.form-field[type="textarea"] .description-wrap')).toHaveLength(1)
+  })
 })