react-flex-grid-system
Version:
Grid system based on styled-components and flexbox for React
2 lines (1 loc) • 6.67 kB
JavaScript
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("prop-types"),require("styled-components"),require("lodash.isinteger")):"function"==typeof define&&define.amd?define(["exports","prop-types","styled-components","lodash.isinteger"],e):e((n=n||self)["reac-flex-grid-system"]={},n.PropTypes,n.styled,n._.isInteger)}(this,function(n,r,u,t){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var e="default"in u?u.default:u;function o(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),r.push.apply(r,t)}return r}function f(i){for(var n=1;n<arguments.length;n++){var u=null!=arguments[n]?arguments[n]:{};n%2?o(Object(u),!0).forEach(function(n){var e,r,t;e=i,t=u[r=n],r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(u)):o(Object(u)).forEach(function(n){Object.defineProperty(i,n,Object.getOwnPropertyDescriptor(u,n))})}return i}function i(n,e){return e||(e=n.slice(0)),n.raw=e,n}function c(){var n=i(["\n @media "," {\n ","\n }\n "]);return c=function(){return n},n}t=t&&t.hasOwnProperty("default")?t.default:t;var a="flexboxgrid",d={gridSize:12,gutterWidth:1,rowMaxWidth:90,outerMargin:{xs:2,sm:2,md:2,lg:2},mediaQuery:"only screen",container:{sm:46,md:61,lg:76},breakpoints:{xs:0,sm:48,md:64,lg:75}},s=[],l=function(n){var e=n.theme&&n.theme[a]||{},i=f({},d,{},e,{container:f({},d.container,{},e.container),breakpoints:f({},d.breakpoints,{},e.breakpoints)});return i.media=Object.keys(i.breakpoints).reduce(function(n,e){var r,t=i.breakpoints[e];return n[e]=(r=[i.mediaQuery,0!==e&&"(min-width: "+t+"em)"].filter(Boolean).join(" and "),function(){return u.css(c(),r,u.css.apply(void 0,arguments))}),n},{}),i},p=["xs","sm","md","lg"];function m(n){var e,r=(e=n,JSON.stringify(e.theme&&e.theme[a]||{}));if(s[0]===r)return s[1];var t=l(n);return s[0]=r,s[1]=t}function g(){var n=i(["\n padding-right: ","rem;\n padding-left: ","rem;\n "]);return g=function(){return n},n}function b(){var n=i(["\n ","\n "]);return b=function(){return n},n}function y(){var n=i(["\n width: ","rem;\n padding-right: ","rem;\n padding-left: ","rem;\n "]);return y=function(){return n},n}function v(){var n=i(["\n ","\n "]);return v=function(){return n},n}function O(){var n=i(["\n margin-right: auto;\n margin-left: auto;\n\n ","\n ","\n"]);return O=function(){return n},n}var x=e.div(O(),function(n){return!n.fluid&&u.css(v(),p.map(function(e){return m(n).container[e]&&m(n).media[e](y(),function(n){return m(n).container[e]},function(n){return m(n).outerMargin[e]},function(n){return m(n).outerMargin[e]})}))},function(n){return u.css(b(),p.map(function(e){return m(n).outerMargin[e]&&m(n).media[e](g(),function(n){return m(n).outerMargin[e]},function(n){return m(n).outerMargin[e]})}))});function h(){var n=i(["\n order: 1;\n "]);return h=function(){return n},n}function w(){var n=i(["\n order: -1;\n "]);return w=function(){return n},n}function j(){var n=i(["\n justify-content: space-between;\n "]);return j=function(){return n},n}function P(){var n=i(["\n justify-content: space-around;\n "]);return P=function(){return n},n}function k(){var n=i(["\n align-items: flex-end;\n "]);return k=function(){return n},n}function M(){var n=i(["\n align-items: center;\n "]);return M=function(){return n},n}function S(){var n=i(["\n align-items: flex-start;\n "]);return S=function(){return n},n}function z(){var n=i(["\n justify-content: flex-end;\n "]);return z=function(){return n},n}function W(){var n=i(["\n justify-content: center;\n "]);return W=function(){return n},n}function N(){var n=i(["\n justify-content: flex-start;\n "]);return N=function(){return n},n}function T(){var n=i(["\n box-sizing: border-box;\n display: flex;\n flex: 0 1 auto;\n flex-direction: row;\n flex-wrap: wrap;\n margin-right: ","rem;\n margin-left: ","rem;\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n"]);return T=function(){return n},n}x.displayName="Grid",x.propTypes={fluid:r.bool,children:r.node};var D=r.oneOf(p),_=e.div(T(),function(n){return m(n).gutterWidth/2*-1},function(n){return m(n).gutterWidth/2*-1},function(n){return n.reverse&&"\n flex-direction: row-reverse;\n "},function(n){return n.start&&m(n).media[n.start](N())},function(n){return n.center&&m(n).media[n.center](W())},function(n){return n.end&&m(n).media[n.end](z())},function(n){return n.top&&m(n).media[n.top](S())},function(n){return n.middle&&m(n).media[n.middle](M())},function(n){return n.bottom&&m(n).media[n.bottom](k())},function(n){return n.around&&m(n).media[n.around](P())},function(n){return n.between&&m(n).media[n.between](j())},function(n){return n.first&&m(n).media[n.first](w())},function(n){return n.last&&m(n).media[n.last](h())});function q(){var n=i(["\n margin-left: ","%;\n "]);return q=function(){return n},n}function C(){var n=i(["",""]);return C=function(){return n},n}function E(){var n=i(["\n box-sizing: border-box;\n flex: 0 0 auto;\n padding-right: ","rem;\n padding-left: ","rem;\n\n ","\n\n ","\n\n ","\n"]);return E=function(){return n},n}_.displayName="Row",_.propTypes={reverse:r.bool,start:D,center:D,end:D,top:D,middle:D,bottom:D,around:D,between:D,first:D,last:D,children:r.node};var B=r.oneOfType([r.number,r.bool]),G=p.map(function(n){return n+"Offset"}),Q=p.reduce(function(n,e){return n[e]=B,n[e+"Offset"]=r.number,n},{}),R=e.div(E(),function(n){return m(n).gutterWidth/2},function(n){return m(n).gutterWidth/2},function(n){return n.reverse&&"\n flex-direction: column-reverse;\n "},function(e){return Object.keys(e).filter(function(n){return~p.indexOf(n)}).sort(function(n,e){return p.indexOf(n)-p.indexOf(e)}).map(function(n){return m(e).media[n](C(),t(e[n])?"\n flex-basis: "+100/m(e).gridSize*e[n]+"%;\n max-width: "+100/m(e).gridSize*e[n]+"%;\n display: block;\n ":e[n]?"\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n display: block;\n ":"display: none;")})},function(e){return Object.keys(e).filter(function(n){return~G.indexOf(n)}).map(function(n){return m(e).media[n.replace(/Offset$/,"")](q(),100/m(e).gridSize*e[n])})});R.displayName="Col",R.propTypes=f({},Q,{reverse:r.bool,children:r.node}),n.BASE_CONF=d,n.Col=R,n.Grid=x,n.Row=_,n.config=m,Object.defineProperty(n,"__esModule",{value:!0})});