diff --git a/docs/formBuilder/overview.md b/docs/formBuilder/overview.md index 0a8046c63..8dd484b2a 100644 --- a/docs/formBuilder/overview.md +++ b/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 diff --git a/src/js/form-builder.js b/src/js/form-builder.js index 1d7ecc038..1a03e425e 100644 --- a/src/js/form-builder.js +++ b/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)) diff --git a/tests/form-builder-custom.test.js b/tests/form-builder-custom.test.js new file mode 100644 index 000000000..f55dbe8de --- /dev/null +++ b/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 = $('
') + const fb = await $(fbWrap).formBuilder(config).promise + + expect(fb.actions.getFieldTypes()).toContain('testPlugin') + }) + + test('add control plugin to stage', async () => { + const config = {} + + const fbWrap = $('
') + 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 = $('
') + 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 = $('
') + 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) + }) +}) \ No newline at end of file diff --git a/tests/form-builder.test.js b/tests/form-builder.test.js index 06ed06076..af753bb83 100644 --- a/tests/form-builder.test.js +++ b/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 = $('
') + 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) + }) }) \ No newline at end of file