Hotfix: btn-undefined

src/js/config.js

@@ -73,6 +73,17 @@ export const defaultOptions = {
     };
 
 
+export const styles = {
+  btn: [
+    'default',
+    'danger',
+    'info',
+    'primary',
+    'success',
+    'warning'
+  ]
+};
+
 export const defaultI18n = {
       location: 'https://formbuilder.online/assets/lang/',
       langs: [
@@ -168,16 +179,12 @@ export const defaultI18n = {
           'size.m': 'Default',
           'size.lg': 'Large',
           style: 'Style',
-          styles: {
-            btn: {
-              'default': 'Default',
-              danger: 'Danger',
-              info: 'Info',
-              primary: 'Primary',
-              success: 'Success',
-              warning: 'Warning'
-            }
-          },
+          'styles.btn.default': 'Default',
+          'styles.btn.danger': 'Danger',
+          'styles.btn.info': 'Info',
+          'styles.btn.primary': 'Primary',
+          'styles.btn.success': 'Success',
+          'styles.btn.warning': 'Warning',
           subtype: 'Type',
           text: 'Text Field',
           textArea: 'Text Area',

src/js/form-builder.js

@@ -10,7 +10,7 @@ import utils from './utils';
 import events from './events';
 import layout from './layout';
 import Helpers from './helpers';
-import {defaultOptions, defaultI18n, config} from './config';
+import {defaultOptions, defaultI18n, config, styles} from './config';
 import control from './control';
 import './control/index';
 import controlCustom from './control/custom';
@@ -344,8 +344,6 @@ const FormBuilder = function(opts, element) {
        'textarea',
        'autocomplete'])) {
       field.className = field.className || 'form-control';
-    } else {
-      field.className = field.className;
     }
 
     let match = /(?:^|\s)btn-(.*?)(?:\s|$)/g.exec(field.className);
@@ -822,39 +820,40 @@ const FormBuilder = function(opts, element) {
   };
 
   const btnStyles = style => {
-    let styles = i18n.styles.btn;
     let styleField = '';
 
-    if (styles) {
-      let styleLabel = `<label>${i18n.style}</label>`;
-      styleField += h.input({
-        value: style,
-        name: style,
-        type: 'hidden',
-        className: 'btn-style'
-      }).outerHTML;
-      styleField += '<div class="btn-group" role="group">';
+    // corrects issue where 'undefined' was saved to formData
+    if (style === 'undefined') {
+      style = 'default';
+    }
 
-      Object.keys(styles).forEach(element => {
-        let classList = ['btn-xs', 'btn', `btn-${element}`];
-        if (style === element) {
-          classList.push('selected');
-        }
-        let btn = m('button', i18n.styles.btn[element], {
-          value: element,
-          type: 'button',
-          className: classList.join(' ')
-        }).outerHTML;
+    let styleLabel = `<label>${i18n.style}</label>`;
+    styleField += h.input({
+      value: style || 'default',
+      type: 'hidden',
+      className: 'btn-style'
+    }).outerHTML;
+    styleField += '<div class="btn-group" role="group">';
 
-        styleField += btn;
-      });
+    styles.btn.forEach(btnStyle => {
+      let classList = ['btn-xs', 'btn', `btn-${btnStyle}`];
+      if (style === btnStyle) {
+        classList.push('selected');
+      }
+      let btn = m('button', mi18n.get(`styles.btn.${btnStyle}`), {
+        value: btnStyle,
+        type: 'button',
+        className: classList.join(' ')
+      }).outerHTML;
 
-      styleField += '</div>';
+      styleField += btn;
+    });
 
-      styleField = m('div', [styleLabel, styleField], {
-        className: 'form-group style-wrap'
-      });
-    }
+    styleField += '</div>';
+
+    styleField = m('div', [styleLabel, styleField], {
+      className: 'form-group style-wrap'
+    });
 
     return styleField.outerHTML;
   };

src/js/form-render.js

@@ -238,10 +238,7 @@ class FormRender {
   $.fn.formRender = function(options) {
     let elems = this;
     let formRender = new FormRender(options);
-    elems.each(function(i) {
-      elems[i].dataset.formRender = formRender;
-      return formRender.render(elems[i]);
-    });
+    elems.each(i => formRender.render(elems[i]));
   };
 
   /**
@@ -255,10 +252,7 @@ class FormRender {
     options.dataType = typeof data === 'string' ? 'json' : 'xml';
     let formRender = new FormRender(options);
     let elems = this;
-    elems.each(function(i) {
-      elems[i].dataset.formRender = formRender;
-      return formRender.renderControl(elems[i]);
-    });
+    elems.each(i => formRender.renderControl(elems[i]));
     return elems;
   };
 })(jQuery);

src/js/helpers.js

@@ -223,9 +223,11 @@ export default class Helpers {
 
           fieldData.className = fieldData.className || fieldData.class;
 
-          let match = /(?:^|\s)btn-(.*?)(?:\s|$)/g.exec(fieldData.className);
-          if (match) {
-            fieldData.style = match[1];
+          if (fieldData.className) {
+            let match = /(?:^|\s)btn-(.*?)(?:\s|$)/g.exec(fieldData.className);
+            if (match) {
+              fieldData.style = match[1];
+            }
           }
 
           fieldData = utils.trimObj(fieldData);