feat(column): add bootstrap grid/column support

bootstrap grid/column support (#859) bs grid support Authored-By: Jojoshua <Jojoshua@gmail.com>
kevinchappell · Nov 15, 2018 · e9cc23a · e9cc23a
1 parent 5054335
commit e9cc23a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/js/form-render.js b/src/js/form-render.js
@@ -82,10 +82,30 @@ class FormRender {
           className: 'rendered-form',
         })
         this.appendChild(renderedFormWrap)
+
         fields.forEach(field => {
-          renderedFormWrap.appendChild(field)
-          field.dispatchEvent(events.fieldRendered)
+          // Determine if rows are being used. If so, create the row and append to its row-{group}
+          // If the fields have row-, create & append to the appropriate row
+          const [ rowGroup ] = field.className.match(/row-([^\s]+)/)
+          if(rowGroup){           
+            const rowID = this.id ? `${this.id}-row-${rowGroup}` : `row-${rowGroup}`;
+
+            // Check if this rowID is created yet or not.            
+            let rowGroupNode = document.getElementById(rowID);
+            if(!rowGroupNode){ 
+              rowGroupNode = utils.markup('div', null, { id: rowID, className: 'row form-inline' });
+              renderedFormWrap.appendChild(rowGroupNode)
+            }
+            rowGroupNode.appendChild(field);              
+          }
+          else{   
+            // Append without row     
+            renderedFormWrap.appendChild(field)
+          }
+
+          field.dispatchEvent(events.fieldRendered) 
         })
+
       }
     }
 

diff --git a/src/js/layout.js b/src/js/layout.js
@@ -27,7 +27,22 @@ export default class layout {
         }
 
         // wrap the output in a form-group div & return
-        const className = data.id ? `fb-${data.type} form-group field-${data.id}` : ''
+        let className = data.id ? `fb-${data.type} form-group field-${data.id}` : ''
+
+        // Lift any col- and row- type class to the form-group wrapper. The row- class denotes the row group it should go to
+        if(data.className){
+          const classes = data.className.split(' ').filter(className => (/^col-(xs|sm|md|lg)-([^\s]+)/.test(className) || className.startsWith('row-')));
+          if(classes && classes.length > 0){
+            className += ` ${classes.join(' ')}`;
+
+            // Now that the col- types were lifted, remove from the actual input field
+            for (let index = 0; index < classes.length; index++) {
+              const element = classes[index];
+              field.classList.remove(element)
+            }
+          }
+        }
+
         return this.markup('div', [label, field], {
           className: className,
         })