diff --git a/es/components.js b/es/components.js index 22bd0a0..a988880 100644 --- a/es/components.js +++ b/es/components.js @@ -26,11 +26,13 @@ var MediaQueryWrapper = function MediaQueryWrapper() { export { MediaQueryWrapper }; MediaQueryWrapper.propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + component: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.string]), dispatch: PropTypes.func.isRequired, fakeWidth: PropTypes.number.isRequired }; MediaQueryWrapper.defaultProps = { - children: null + children: null, + component: 'div' }; export var responsiveWrapper = function responsiveWrapper() { var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; diff --git a/es/components.js.map b/es/components.js.map index 7f616e2..70ce162 100644 --- a/es/components.js.map +++ b/es/components.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/components.js"],"names":["React","PropTypes","MediaQuery","connect","breakPoints","MediaQueryWrapper","props","dispatch","fakeWidth","children","other","values","deviceWidth","width","propTypes","oneOfType","node","func","isRequired","number","defaultProps","responsiveWrapper","state","responsive","XsScreen","maxWidth","sm","SmScreen","query","md","MdScreen","lg","LgScreen","XsScreenHidden","minWidth","SmScreenHidden","MdScreenHidden","LgScreenHidden","PhoneScreen","TabletScreen","DesktopScreen","MobileScreen","PhoneScreenHidden","TabletScreenHidden","DesktopScreenHidden","MobileScreenHidden"],"mappings":";;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,SAASC,OAAT,QAAwB,aAAxB;AACA,SAASC,WAAT,QAA4B,YAA5B;;AAEO,IAAMC,oBAAoB,SAApBA,iBAAoB,GAAgB;AAAA,MAAfC,KAAe,uEAAP,EAAO;;AAAA,MAG7CC,QAH6C,GAI3CD,KAJ2C,CAG7CC,QAH6C;AAAA,MAGnCC,SAHmC,GAI3CF,KAJ2C,CAGnCE,SAHmC;AAAA,MAGxBC,QAHwB,GAI3CH,KAJ2C,CAGxBG,QAHwB;AAAA,MAGXC,KAHW,4BAI3CJ,KAJ2C;;AAK/C,MAAMK,SAAS;AAAEC,iBAAaJ,SAAf;AAA0BK,WAAOL;AAAjC,GAAf;AACA,SACE,oBAAC,UAAD,eAAgBE,KAAhB,EAA2B;AAAEC;AAAF,GAA3B,GACGF,QADH,CADF;AAKD,CAXM;;;AAaPJ,kBAAkBS,SAAlB,GAA8B;AAC5BL,YAAUR,UAAUc,SAAV,CAAoB,CAACd,UAAUe,IAAX,EAAiBf,UAAUgB,IAA3B,CAApB,CADkB;AAE5BV,YAAUN,UAAUgB,IAAV,CAAeC,UAFG;AAG5BV,aAAWP,UAAUkB,MAAV,CAAiBD;AAHA,CAA9B;AAMAb,kBAAkBe,YAAlB,GAAiC;AAC/BX,YAAU;AADqB,CAAjC;AAIA,OAAO,IAAMY,oBAAoB,SAApBA,iBAAoB;AAAA,MAACf,KAAD,uEAAS,EAAT;AAAA,SAC/BH,QAAQ;AAAA;AAAYK,iBAAWc,MAAMC,UAAN,CAAiBf;AAAxC,OAAsDF,KAAtD;AAAA,GAAR,EAAwED,iBAAxE,CAD+B;AAAA,CAA1B;AAGP,OAAO,IAAMmB,WAAWH,kBAAkB;AAAEI,YAAUrB,YAAYsB,EAAZ,GAAiB;AAA7B,CAAlB,CAAjB;AACP,OAAO,IAAMC,WAAWN,kBAAkB;AAAEO,+BAAsBxB,YAAYsB,EAAlC,iCAA2DtB,YAAYyB,EAAZ,GAAiB,CAA5E;AAAF,CAAlB,CAAjB;AACP,OAAO,IAAMC,WAAWT,kBAAkB;AAAEO,+BAAsBxB,YAAYyB,EAAlC,iCAA2DzB,YAAY2B,EAAZ,GAAiB,CAA5E;AAAF,CAAlB,CAAjB;AACP,OAAO,IAAMC,WAAWX,kBAAkB;AAAEO,+BAAsBxB,YAAY2B,EAAlC;AAAF,CAAlB,CAAjB;AAEP,OAAO,IAAME,iBAAiBZ,kBAAkB;AAAEa,YAAU9B,YAAYsB;AAAxB,CAAlB,CAAvB;AACP,OAAO,IAAMS,iBAAiBd,kBAAkB;AAAEO,+BAAsBxB,YAAYsB,EAAZ,GAAiB,CAAvC,8BAA4DtB,YAAYyB,EAAxE;AAAF,CAAlB,CAAvB;AACP,OAAO,IAAMO,iBAAiBf,kBAAkB;AAAEO,+BAAsBxB,YAAYyB,EAAZ,GAAiB,CAAvC,8BAA4DzB,YAAY2B,EAAxE;AAAF,CAAlB,CAAvB;AACP,OAAO,IAAMM,iBAAiBhB,kBAAkB;AAAEI,YAAUrB,YAAY2B,EAAZ,GAAiB;AAA7B,CAAlB,CAAvB;AAEP,SAASP,YAAYc,WAArB;AACA,SAASX,YAAYY,YAArB;AACA,OAAO,IAAMC,gBAAgBnB,kBAAkB;AAAEa,YAAU9B,YAAYyB;AAAxB,CAAlB,CAAtB;AACP,OAAO,IAAMY,eAAepB,kBAAkB;AAAEI,YAAUrB,YAAYyB,EAAZ,GAAiB;AAA7B,CAAlB,CAArB;AAEP,SAASI,kBAAkBS,iBAA3B;AACA,SAASP,kBAAkBQ,kBAA3B;AACA,SAASF,gBAAgBG,mBAAzB;AACA,SAASJ,iBAAiBK,kBAA1B","file":"components.js","sourcesContent":["// see also components/ScreenSize for another way to consume this data\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport MediaQuery from 'react-responsive'\nimport { connect } from 'react-redux'\nimport { breakPoints } from './defaults'\n\nexport const MediaQueryWrapper = (props = {}) => {\n // eslint-disable-next-line no-unused-vars\n const {\n dispatch, fakeWidth, children, ...other\n } = props\n const values = { deviceWidth: fakeWidth, width: fakeWidth }\n return (\n \n {children}\n \n )\n}\n\nMediaQueryWrapper.propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n dispatch: PropTypes.func.isRequired,\n fakeWidth: PropTypes.number.isRequired,\n}\n\nMediaQueryWrapper.defaultProps = {\n children: null,\n}\n\nexport const responsiveWrapper = (props = {}) =>\n connect(state => ({ fakeWidth: state.responsive.fakeWidth, ...props }))(MediaQueryWrapper)\n\nexport const XsScreen = responsiveWrapper({ maxWidth: breakPoints.sm - 1 })\nexport const SmScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.sm}px) and (max-width: ${breakPoints.md - 1}px)` })\nexport const MdScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.md}px) and (max-width: ${breakPoints.lg - 1}px)` })\nexport const LgScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.lg}px)` })\n\nexport const XsScreenHidden = responsiveWrapper({ minWidth: breakPoints.sm })\nexport const SmScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.sm - 1}px), (min-width: ${breakPoints.md}px)` })\nexport const MdScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.md - 1}px), (min-width: ${breakPoints.lg}px)` })\nexport const LgScreenHidden = responsiveWrapper({ maxWidth: breakPoints.lg - 1 })\n\nexport { XsScreen as PhoneScreen }\nexport { SmScreen as TabletScreen }\nexport const DesktopScreen = responsiveWrapper({ minWidth: breakPoints.md })\nexport const MobileScreen = responsiveWrapper({ maxWidth: breakPoints.md - 1 })\n\nexport { XsScreenHidden as PhoneScreenHidden }\nexport { SmScreenHidden as TabletScreenHidden }\nexport { MobileScreen as DesktopScreenHidden }\nexport { DesktopScreen as MobileScreenHidden }\n"]} \ No newline at end of file +{"version":3,"sources":["../src/components.js"],"names":["React","PropTypes","MediaQuery","connect","breakPoints","MediaQueryWrapper","props","dispatch","fakeWidth","children","other","values","deviceWidth","width","propTypes","oneOfType","node","func","component","string","isRequired","number","defaultProps","responsiveWrapper","state","responsive","XsScreen","maxWidth","sm","SmScreen","query","md","MdScreen","lg","LgScreen","XsScreenHidden","minWidth","SmScreenHidden","MdScreenHidden","LgScreenHidden","PhoneScreen","TabletScreen","DesktopScreen","MobileScreen","PhoneScreenHidden","TabletScreenHidden","DesktopScreenHidden","MobileScreenHidden"],"mappings":"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","file":"components.js","sourcesContent":["// see also components/ScreenSize for another way to consume this data\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport MediaQuery from 'react-responsive'\nimport { connect } from 'react-redux'\nimport { breakPoints } from './defaults'\n\nexport const MediaQueryWrapper = (props = {}) => {\n // eslint-disable-next-line no-unused-vars\n const {\n dispatch, fakeWidth, children, ...other\n } = props\n const values = { deviceWidth: fakeWidth, width: fakeWidth }\n return (\n \n {children}\n \n )\n}\n\nMediaQueryWrapper.propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n component: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.string]),\n dispatch: PropTypes.func.isRequired,\n fakeWidth: PropTypes.number.isRequired,\n}\n\nMediaQueryWrapper.defaultProps = {\n children: null,\n component: 'div',\n}\n\nexport const responsiveWrapper = (props = {}) =>\n connect(state => ({ fakeWidth: state.responsive.fakeWidth, ...props }))(MediaQueryWrapper)\n\nexport const XsScreen = responsiveWrapper({ maxWidth: breakPoints.sm - 1 })\nexport const SmScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.sm}px) and (max-width: ${breakPoints.md - 1}px)` })\nexport const MdScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.md}px) and (max-width: ${breakPoints.lg - 1}px)` })\nexport const LgScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.lg}px)` })\n\nexport const XsScreenHidden = responsiveWrapper({ minWidth: breakPoints.sm })\nexport const SmScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.sm - 1}px), (min-width: ${breakPoints.md}px)` })\nexport const MdScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.md - 1}px), (min-width: ${breakPoints.lg}px)` })\nexport const LgScreenHidden = responsiveWrapper({ maxWidth: breakPoints.lg - 1 })\n\nexport { XsScreen as PhoneScreen }\nexport { SmScreen as TabletScreen }\nexport const DesktopScreen = responsiveWrapper({ minWidth: breakPoints.md })\nexport const MobileScreen = responsiveWrapper({ maxWidth: breakPoints.md - 1 })\n\nexport { XsScreenHidden as PhoneScreenHidden }\nexport { SmScreenHidden as TabletScreenHidden }\nexport { MobileScreen as DesktopScreenHidden }\nexport { DesktopScreen as MobileScreenHidden }\n"]} \ No newline at end of file diff --git a/lib/components.js b/lib/components.js index 54b520e..dad4831 100644 --- a/lib/components.js +++ b/lib/components.js @@ -39,11 +39,13 @@ var MediaQueryWrapper = function MediaQueryWrapper() { exports.MediaQueryWrapper = MediaQueryWrapper; MediaQueryWrapper.propTypes = { children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), + component: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func, _propTypes.default.string]), dispatch: _propTypes.default.func.isRequired, fakeWidth: _propTypes.default.number.isRequired }; MediaQueryWrapper.defaultProps = { - children: null + children: null, + component: 'div' }; var responsiveWrapper = function responsiveWrapper() { diff --git a/lib/components.js.map b/lib/components.js.map index 3158bf4..b7467ea 100644 --- a/lib/components.js.map +++ b/lib/components.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/components.js"],"names":["MediaQueryWrapper","props","dispatch","fakeWidth","children","other","values","deviceWidth","width","propTypes","oneOfType","node","func","isRequired","number","defaultProps","responsiveWrapper","state","responsive","XsScreen","maxWidth","sm","SmScreen","query","md","MdScreen","lg","LgScreen","XsScreenHidden","minWidth","SmScreenHidden","MdScreenHidden","LgScreenHidden","DesktopScreen","MobileScreen"],"mappings":";;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEO,IAAMA,oBAAoB,SAApBA,iBAAoB,GAAgB;AAAA,MAAfC,KAAe,uEAAP,EAAO;AAAA,MAG7CC,QAH6C,GAI3CD,KAJ2C,CAG7CC,QAH6C;AAAA,MAGnCC,SAHmC,GAI3CF,KAJ2C,CAGnCE,SAHmC;AAAA,MAGxBC,QAHwB,GAI3CH,KAJ2C,CAGxBG,QAHwB;AAAA,MAGXC,KAHW,0CAI3CJ,KAJ2C;AAK/C,MAAMK,SAAS;AAAEC,iBAAaJ,SAAf;AAA0BK,WAAOL;AAAjC,GAAf;AACA,SACE,kFAAgBE,KAAhB,EAA2B;AAAEC;AAAF,GAA3B,GACGF,QADH,CADF;AAKD,CAXM;;;AAaPJ,kBAAkBS,SAAlB,GAA8B;AAC5BL,YAAU,mBAAUM,SAAV,CAAoB,CAAC,mBAAUC,IAAX,EAAiB,mBAAUC,IAA3B,CAApB,CADkB;AAE5BV,YAAU,mBAAUU,IAAV,CAAeC,UAFG;AAG5BV,aAAW,mBAAUW,MAAV,CAAiBD;AAHA,CAA9B;AAMAb,kBAAkBe,YAAlB,GAAiC;AAC/BX,YAAU;AADqB,CAAjC;;AAIO,IAAMY,oBAAoB,SAApBA,iBAAoB;AAAA,MAACf,KAAD,uEAAS,EAAT;AAAA,SAC/B,yBAAQ;AAAA;AAAYE,iBAAWc,MAAMC,UAAN,CAAiBf;AAAxC,OAAsDF,KAAtD;AAAA,GAAR,EAAwED,iBAAxE,CAD+B;AAAA,CAA1B;;;AAGA,IAAMmB,WAAWH,kBAAkB;AAAEI,YAAU,sBAAYC,EAAZ,GAAiB;AAA7B,CAAlB,CAAjB;;AACA,IAAMC,WAAWN,kBAAkB;AAAEO,+BAAsB,sBAAYF,EAAlC,iCAA2D,sBAAYG,EAAZ,GAAiB,CAA5E;AAAF,CAAlB,CAAjB;;AACA,IAAMC,WAAWT,kBAAkB;AAAEO,+BAAsB,sBAAYC,EAAlC,iCAA2D,sBAAYE,EAAZ,GAAiB,CAA5E;AAAF,CAAlB,CAAjB;;AACA,IAAMC,WAAWX,kBAAkB;AAAEO,+BAAsB,sBAAYG,EAAlC;AAAF,CAAlB,CAAjB;;AAEA,IAAME,iBAAiBZ,kBAAkB;AAAEa,YAAU,sBAAYR;AAAxB,CAAlB,CAAvB;;AACA,IAAMS,iBAAiBd,kBAAkB;AAAEO,+BAAsB,sBAAYF,EAAZ,GAAiB,CAAvC,8BAA4D,sBAAYG,EAAxE;AAAF,CAAlB,CAAvB;;AACA,IAAMO,iBAAiBf,kBAAkB;AAAEO,+BAAsB,sBAAYC,EAAZ,GAAiB,CAAvC,8BAA4D,sBAAYE,EAAxE;AAAF,CAAlB,CAAvB;;AACA,IAAMM,iBAAiBhB,kBAAkB;AAAEI,YAAU,sBAAYM,EAAZ,GAAiB;AAA7B,CAAlB,CAAvB;;AAIA,IAAMO,gBAAgBjB,kBAAkB;AAAEa,YAAU,sBAAYL;AAAxB,CAAlB,CAAtB;;AACA,IAAMU,eAAelB,kBAAkB;AAAEI,YAAU,sBAAYI,EAAZ,GAAiB;AAA7B,CAAlB,CAArB","file":"components.js","sourcesContent":["// see also components/ScreenSize for another way to consume this data\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport MediaQuery from 'react-responsive'\nimport { connect } from 'react-redux'\nimport { breakPoints } from './defaults'\n\nexport const MediaQueryWrapper = (props = {}) => {\n // eslint-disable-next-line no-unused-vars\n const {\n dispatch, fakeWidth, children, ...other\n } = props\n const values = { deviceWidth: fakeWidth, width: fakeWidth }\n return (\n \n {children}\n \n )\n}\n\nMediaQueryWrapper.propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n dispatch: PropTypes.func.isRequired,\n fakeWidth: PropTypes.number.isRequired,\n}\n\nMediaQueryWrapper.defaultProps = {\n children: null,\n}\n\nexport const responsiveWrapper = (props = {}) =>\n connect(state => ({ fakeWidth: state.responsive.fakeWidth, ...props }))(MediaQueryWrapper)\n\nexport const XsScreen = responsiveWrapper({ maxWidth: breakPoints.sm - 1 })\nexport const SmScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.sm}px) and (max-width: ${breakPoints.md - 1}px)` })\nexport const MdScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.md}px) and (max-width: ${breakPoints.lg - 1}px)` })\nexport const LgScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.lg}px)` })\n\nexport const XsScreenHidden = responsiveWrapper({ minWidth: breakPoints.sm })\nexport const SmScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.sm - 1}px), (min-width: ${breakPoints.md}px)` })\nexport const MdScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.md - 1}px), (min-width: ${breakPoints.lg}px)` })\nexport const LgScreenHidden = responsiveWrapper({ maxWidth: breakPoints.lg - 1 })\n\nexport { XsScreen as PhoneScreen }\nexport { SmScreen as TabletScreen }\nexport const DesktopScreen = responsiveWrapper({ minWidth: breakPoints.md })\nexport const MobileScreen = responsiveWrapper({ maxWidth: breakPoints.md - 1 })\n\nexport { XsScreenHidden as PhoneScreenHidden }\nexport { SmScreenHidden as TabletScreenHidden }\nexport { MobileScreen as DesktopScreenHidden }\nexport { DesktopScreen as MobileScreenHidden }\n"]} \ No newline at end of file +{"version":3,"sources":["../src/components.js"],"names":["MediaQueryWrapper","props","dispatch","fakeWidth","children","other","values","deviceWidth","width","propTypes","oneOfType","node","func","component","string","isRequired","number","defaultProps","responsiveWrapper","state","responsive","XsScreen","maxWidth","sm","SmScreen","query","md","MdScreen","lg","LgScreen","XsScreenHidden","minWidth","SmScreenHidden","MdScreenHidden","LgScreenHidden","DesktopScreen","MobileScreen"],"mappings":";;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEO,IAAMA,oBAAoB,SAApBA,iBAAoB,GAAgB;AAAA,MAAfC,KAAe,uEAAP,EAAO;AAAA,MAG7CC,QAH6C,GAI3CD,KAJ2C,CAG7CC,QAH6C;AAAA,MAGnCC,SAHmC,GAI3CF,KAJ2C,CAGnCE,SAHmC;AAAA,MAGxBC,QAHwB,GAI3CH,KAJ2C,CAGxBG,QAHwB;AAAA,MAGXC,KAHW,0CAI3CJ,KAJ2C;AAK/C,MAAMK,SAAS;AAAEC,iBAAaJ,SAAf;AAA0BK,WAAOL;AAAjC,GAAf;AACA,SACE,kFAAgBE,KAAhB,EAA2B;AAAEC;AAAF,GAA3B,GACGF,QADH,CADF;AAKD,CAXM;;;AAaPJ,kBAAkBS,SAAlB,GAA8B;AAC5BL,YAAU,mBAAUM,SAAV,CAAoB,CAAC,mBAAUC,IAAX,EAAiB,mBAAUC,IAA3B,CAApB,CADkB;AAE5BC,aAAW,mBAAUH,SAAV,CAAoB,CAAC,mBAAUC,IAAX,EAAiB,mBAAUC,IAA3B,EAAiC,mBAAUE,MAA3C,CAApB,CAFiB;AAG5BZ,YAAU,mBAAUU,IAAV,CAAeG,UAHG;AAI5BZ,aAAW,mBAAUa,MAAV,CAAiBD;AAJA,CAA9B;AAOAf,kBAAkBiB,YAAlB,GAAiC;AAC/Bb,YAAU,IADqB;AAE/BS,aAAW;AAFoB,CAAjC;;AAKO,IAAMK,oBAAoB,SAApBA,iBAAoB;AAAA,MAACjB,KAAD,uEAAS,EAAT;AAAA,SAC/B,yBAAQ;AAAA;AAAYE,iBAAWgB,MAAMC,UAAN,CAAiBjB;AAAxC,OAAsDF,KAAtD;AAAA,GAAR,EAAwED,iBAAxE,CAD+B;AAAA,CAA1B;;;AAGA,IAAMqB,WAAWH,kBAAkB;AAAEI,YAAU,sBAAYC,EAAZ,GAAiB;AAA7B,CAAlB,CAAjB;;AACA,IAAMC,WAAWN,kBAAkB;AAAEO,+BAAsB,sBAAYF,EAAlC,iCAA2D,sBAAYG,EAAZ,GAAiB,CAA5E;AAAF,CAAlB,CAAjB;;AACA,IAAMC,WAAWT,kBAAkB;AAAEO,+BAAsB,sBAAYC,EAAlC,iCAA2D,sBAAYE,EAAZ,GAAiB,CAA5E;AAAF,CAAlB,CAAjB;;AACA,IAAMC,WAAWX,kBAAkB;AAAEO,+BAAsB,sBAAYG,EAAlC;AAAF,CAAlB,CAAjB;;AAEA,IAAME,iBAAiBZ,kBAAkB;AAAEa,YAAU,sBAAYR;AAAxB,CAAlB,CAAvB;;AACA,IAAMS,iBAAiBd,kBAAkB;AAAEO,+BAAsB,sBAAYF,EAAZ,GAAiB,CAAvC,8BAA4D,sBAAYG,EAAxE;AAAF,CAAlB,CAAvB;;AACA,IAAMO,iBAAiBf,kBAAkB;AAAEO,+BAAsB,sBAAYC,EAAZ,GAAiB,CAAvC,8BAA4D,sBAAYE,EAAxE;AAAF,CAAlB,CAAvB;;AACA,IAAMM,iBAAiBhB,kBAAkB;AAAEI,YAAU,sBAAYM,EAAZ,GAAiB;AAA7B,CAAlB,CAAvB;;AAIA,IAAMO,gBAAgBjB,kBAAkB;AAAEa,YAAU,sBAAYL;AAAxB,CAAlB,CAAtB;;AACA,IAAMU,eAAelB,kBAAkB;AAAEI,YAAU,sBAAYI,EAAZ,GAAiB;AAA7B,CAAlB,CAArB","file":"components.js","sourcesContent":["// see also components/ScreenSize for another way to consume this data\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport MediaQuery from 'react-responsive'\nimport { connect } from 'react-redux'\nimport { breakPoints } from './defaults'\n\nexport const MediaQueryWrapper = (props = {}) => {\n // eslint-disable-next-line no-unused-vars\n const {\n dispatch, fakeWidth, children, ...other\n } = props\n const values = { deviceWidth: fakeWidth, width: fakeWidth }\n return (\n \n {children}\n \n )\n}\n\nMediaQueryWrapper.propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n component: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.string]),\n dispatch: PropTypes.func.isRequired,\n fakeWidth: PropTypes.number.isRequired,\n}\n\nMediaQueryWrapper.defaultProps = {\n children: null,\n component: 'div',\n}\n\nexport const responsiveWrapper = (props = {}) =>\n connect(state => ({ fakeWidth: state.responsive.fakeWidth, ...props }))(MediaQueryWrapper)\n\nexport const XsScreen = responsiveWrapper({ maxWidth: breakPoints.sm - 1 })\nexport const SmScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.sm}px) and (max-width: ${breakPoints.md - 1}px)` })\nexport const MdScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.md}px) and (max-width: ${breakPoints.lg - 1}px)` })\nexport const LgScreen = responsiveWrapper({ query: `(min-width: ${breakPoints.lg}px)` })\n\nexport const XsScreenHidden = responsiveWrapper({ minWidth: breakPoints.sm })\nexport const SmScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.sm - 1}px), (min-width: ${breakPoints.md}px)` })\nexport const MdScreenHidden = responsiveWrapper({ query: `(max-width: ${breakPoints.md - 1}px), (min-width: ${breakPoints.lg}px)` })\nexport const LgScreenHidden = responsiveWrapper({ maxWidth: breakPoints.lg - 1 })\n\nexport { XsScreen as PhoneScreen }\nexport { SmScreen as TabletScreen }\nexport const DesktopScreen = responsiveWrapper({ minWidth: breakPoints.md })\nexport const MobileScreen = responsiveWrapper({ maxWidth: breakPoints.md - 1 })\n\nexport { XsScreenHidden as PhoneScreenHidden }\nexport { SmScreenHidden as TabletScreenHidden }\nexport { MobileScreen as DesktopScreenHidden }\nexport { DesktopScreen as MobileScreenHidden }\n"]} \ No newline at end of file diff --git a/src/components.js b/src/components.js index 1b259be..cc27240 100644 --- a/src/components.js +++ b/src/components.js @@ -20,12 +20,14 @@ export const MediaQueryWrapper = (props = {}) => { MediaQueryWrapper.propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + component: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.string]), dispatch: PropTypes.func.isRequired, fakeWidth: PropTypes.number.isRequired, } MediaQueryWrapper.defaultProps = { children: null, + component: 'div', } export const responsiveWrapper = (props = {}) =>