From e9cc23a5285a119e638e4a55976c7319c0dee943 Mon Sep 17 00:00:00 2001
From: Jojoshua <Jojoshua@gmail.com>
Date: Wed, 14 Nov 2018 23:28:33 -0500
Subject: [PATCH] feat(column): add bootstrap grid/column support

bootstrap grid/column support (#859)
bs grid support

Authored-By: Jojoshua <Jojoshua@gmail.com>
---
 src/js/form-render.js | 24 ++++++++++++++++++++++--
 src/js/layout.js      | 17 ++++++++++++++++-
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/js/form-render.js b/src/js/form-render.js
index 293d1482d..d51fa1ecc 100755
--- 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
index 2faa9a990..603be7b41 100755
--- 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,
         })