feat: onAddOption

allows you to define an onAddOption method that will transfer the optionTemplate to add custom label or values. resolves #1098
kevinchappell · Aug 23, 2020 · 7824e08 · 7824e08
1 parent a091ba9
commit 7824e08
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/demo/js/demo.js b/src/demo/js/demo.js
@@ -213,6 +213,11 @@ jQuery(function($) {
     onAddField: fieldId => {
       setCurrentFieldIdValues(fieldId)
     },
+    onAddOption: (optionTemplate, optionIndex) => {
+      optionTemplate.label = `Option ${optionIndex + 1}`
+      optionTemplate.value = `option-${optionIndex + 1}`
+      return optionTemplate
+    },
     onClearAll: () => window.sessionStorage.removeItem('formData'),
     stickyControls: {
       enable: true,

diff --git a/src/js/config.js b/src/js/config.js
@@ -52,6 +52,7 @@ export const defaultOptions = {
     },
   },
   onAddField: (fieldId, fieldData) => fieldData,
+  onAddOption: noop,
   onClearAll: noop,
   onCloseFieldEdit: noop,
   onOpenFieldEdit: noop,

diff --git a/src/js/form-builder.js b/src/js/form-builder.js
@@ -1327,7 +1327,9 @@ const FormBuilder = function(opts, element, $) {
 
     const name = $firstOption.attr('name').replace(/-option$/, '')
 
-    $('.sortable-options', $optionWrap).append(selectFieldOptions(name, false, isMultiple))
+    const optionTemplate = { selected: false, label: '', value: '' }
+    const optionData = config.opts.onAddOption(optionTemplate, $('.sortable-options', $optionWrap).children().length)
+    $('.sortable-options', $optionWrap).append(selectFieldOptions(name, optionData, isMultiple))
   })
 
   $stage.on('mouseover mouseout', '.remove, .del-button', e =>