react-configurable-grid
Version:
A simple configurable react grid inspired on grid-styled and react-bootstrap
2 lines (1 loc) • 2.44 kB
JavaScript
;var e,r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;var t=["nowrap","wrap","wrap-reverse"],n=["baseline","center","flex-end","flex-start","stretch"],a=n;var o,i={xs:"0px",sm:"576px",md:"768px",lg:"992px",xl:"1200px"},s=["xs","sm","md","lg","xl"],l="15px";function c(e,r){if(void 0===e&&(e={}),o=!0,"undefined"==typeof window||!document.querySelector("[data-grid]")){for(var c=0;s[c];c++)(e[s[c]]||null===e[s[c]])&&(i[s[c]]=e[s[c]]);if("string"==typeof e.gutter){var d=e.gutter.replace(/[0-9]+/,e.gutter.match(/\d/g).join("")/2);l=d}var f=function(){for(var e=".rcg-col{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 "+l+"}",r=Object.keys(i),t=0;r[t];t++){var n=r[t],a=i[n];if(null!==a)for(var o=1;o<=12;o++){var s=o/12*100;e+="@media(min-width:"+a+"){.rcg-col-"+n+"-"+o+"{max-width:"+s+"%;-ms-flex-preferred-size:"+s+"%;flex-basis:"+s+"%}}"}}return e}()+".rcg-row{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin: 0 -"+l+"}"+t.map(function(e){return".rcg-row-wrap--"+e+"{-ms-flex-wrap:"+e+";flex-wrap:"+e+"}"}).join("")+n.map(function(e){return".rcg-row-align--"+e+"{-webkit-box-align:"+e+";-ms-flex-align:"+e+";align-items:"+e+"}"}).join("")+a.map(function(e){return".rcg-row-justify--"+e+"{-webkit-box-pack:"+e+";-ms-flex-pack:"+e+";justify-content:"+e+"}"}).join(""),p='<style type="text/css" '+"data-grid"+">"+f+"</style>";return function(e,r){"undefined"==typeof window||document.querySelector("["+e+"]")||(document.head||document.getElementsByTagName("head")[0]).insertAdjacentHTML("beforeend",r)}("data-grid",p),r?p:f}}function d(e){var t=["rcg-col",e.className];o||c();for(var n=Object.assign({},e),a=0,i=s;a<i.length;a+=1){var l=i[a];e[l]&&(t.push("rcg-col-"+l+"-"+e[l]),delete n[l])}return delete n.component,r.createElement(e.component,Object.assign({},n,{className:t.join(" ")}),e.children)}d.defaultProps={component:"div",className:null};var f=["wrap","align","justify"];function p(e){for(var t=["rcg-row",e.className],n=Object.assign({},e),a=0,o=f;a<o.length;a+=1){var i=o[a];e[i]&&(t.push("rcg-row-"+i+"--"+e[i]),delete n[i])}return delete n.component,r.createElement(e.component,Object.assign({},n,{className:t.join(" ")}),e.children)}p.defaultProps={wrap:"wrap",align:"stretch",justify:"flex-start",component:"div",className:null},exports.Col=d,exports.Row=p,exports.configureGrid=c;