responsive-react-app
Version:
Responsive React App --------------------
3 lines (2 loc) • 4.06 kB
JavaScript
;function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}var e=require("react"),t=n(e),r=require("react-router-dom"),i=require("styled-components"),a=n(i);function o(n,e){return e||(e=n.slice(0)),n.raw=e,n}function u(){var n=o(["\n display: flex;\n a,\n a:hover {\n opacity: 0.5;\n }\n"]);return u=function(){return n},n}function c(){var n=o(["\n position: fixed;\n display: flex;\n justify-content: space-evenly;\n bottom: 0;\n right: 0;\n z-index: 3;\n min-height: 3.5rem;\n padding-bottom: env(safe-area-inset-bottom);\n backdrop-filter: saturate(180%) blur(2px);\n background-color: rgba(255, 255, 255, 0.7);\n @media (prefers-color-scheme: dark) {\n background: rgba(0, 0, 0, 0.3);\n a {\n color: #fff;\n }\n }\n\n width: 100vw;\n @media screen and (min-width: ","px) {\n width: 50vw;\n }\n @media screen and (min-width: ","px) {\n width: 33.333333vw;\n }\n @media screen and (min-width: ","px) {\n width: 25vw;\n }\n"]);return c=function(){return n},n}function m(){var n=o(["\n width: 64px;\n font-size: 0.7rem;\n padding: 0.25rem 0.25rem 0;\n text-decoration: none;\n text-align: center;\n svg {\n display: block;\n height: 32px;\n margin: 0 auto;\n }\n"]);return m=function(){return n},n}var d=a(r.Link)(m()),s=a.div(c(),function(n){return 2*n.theme.minimumTabSize},function(n){return 3*n.theme.minimumTabSize},function(n){return 4*n.theme.minimumTabSize}),l=a.div(u()),h=function(n){var e=n.children,r=n.compnentsPerScreen,i=Math.min(n.paths.indexOf(n.pathname),e.length-r);return t.createElement(s,null,e.slice(0,i),e.slice(i,i+r).map(function(n,e){return t.createElement(l,{key:"sublist-"+e},n)}),e.slice(i+r))};function f(){var n=o(["\n padding-bottom: 54px;\n box-sizing: border-box;\n width: 100vw;\n height: 100vh;\n overflow-y: scroll; /* has to be scroll, not auto */\n -webkit-overflow-scrolling: touch;\n @media screen and (min-width: ","px) {\n width: 50vw;\n }\n @media screen and (min-width: ","px) {\n width: 33.333333vw;\n }\n @media screen and (min-width: ","px) {\n width: 25vw;\n }\n /* padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)\n env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); */\n"]);return f=function(){return n},n}function p(){var n=o(["\n display: grid;\n grid-auto-flow: column;\n justify-content: flex-start;\n transition: transform 0.25s;\n transition-timing-function: ease-in-out;\n"]);return p=function(){return n},n}function v(){var n=o(["\n width: 100vw;\n height: 100vh;\n overflow-x: hidden;\n"]);return v=function(){return n},n}var w=a.div(v()),b=a.div(p()),x=a.div(f(),function(n){return 2*n.theme.minimumTabSize},function(n){return 3*n.theme.minimumTabSize},function(n){return 4*n.theme.minimumTabSize}),g=function(n){var a=n.children,o=n.tabs,u=n.minimumTabSize,c=void 0===u?320:u,m=n.paths,d=n.routerProps,s=void 0===d?{}:d,l=function(){var n="object"==typeof window;function t(){return{width:n?window.innerWidth:0,height:n?window.innerHeight:0}}var r=e.useState(t),i=r[0],a=r[1];return e.useEffect(function(){if(n)return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)};function e(){a(t())}},[]),i}(),f=l.width/c|0,p=l.width/f;return t.createElement(i.ThemeProvider,{theme:{minimumTabSize:c}},t.createElement(r.BrowserRouter,Object.assign({},s),t.createElement(w,null,t.createElement(r.Switch,null,a.map(function(n,e){return t.createElement(r.Route,{exact:!0,path:""+(m[e]||e||""),render:function(n){var r=n.location;return t.createElement(t.Fragment,null,t.createElement(b,{style:{transform:"translateX(-"+p*Math.min(e,a.length-f)+"px)"}},t.Children.map(a,function(n,e){return t.createElement(x,{key:e},n)})),f<a.length&&t.createElement(h,{compnentsPerScreen:f,paths:m,pathname:r.pathname},o.props.children.slice(0)))}})})))))};g.defaultProps={children:[],paths:[]},exports.TabBar=h,exports.TabBarLink=d,exports.default=g;
//# sourceMappingURL=responsive-react-app.cjs.production.min.js.map