responsive-react-app
Version:
Responsive React App --------------------
186 lines (154 loc) • 6.85 kB
JavaScript
import React, { useState, useEffect } from 'react';
import { Link, BrowserRouter, Switch, Route } from 'react-router-dom';
import styled, { ThemeProvider } from 'styled-components';
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
function useWindowSize() {
var isClient = typeof window === "object";
function getSize() {
return {
width: isClient ? window.innerWidth : 0,
height: isClient ? window.innerHeight : 0
};
}
var _useState = useState(getSize),
windowSize = _useState[0],
setWindowSize = _useState[1];
useEffect(function () {
if (!isClient) {
return;
}
function handleResize() {
setWindowSize(getSize());
}
window.addEventListener("resize", handleResize);
return function () {
return window.removeEventListener("resize", handleResize);
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // Empty array ensures that effect is only run on mount and unmount
return windowSize;
}
function _templateObject3() {
var data = _taggedTemplateLiteralLoose(["\n display: flex;\n a,\n a:hover {\n opacity: 0.5;\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteralLoose(["\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"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteralLoose(["\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"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var TabBarLink =
/*#__PURE__*/
styled(Link)(_templateObject());
var TabBarContainer = styled.div(_templateObject2(), function (props) {
return props.theme.minimumTabSize * 2;
}, function (props) {
return props.theme.minimumTabSize * 3;
}, function (props) {
return props.theme.minimumTabSize * 4;
});
var Active = styled.div(_templateObject3());
var TabBar = function TabBar(_ref) {
var children = _ref.children,
compnentsPerScreen = _ref.compnentsPerScreen,
paths = _ref.paths,
pathname = _ref.pathname;
var index = Math.min(paths.indexOf(pathname), children.length - compnentsPerScreen);
return React.createElement(TabBarContainer, null, children.slice(0, index), children.slice(index, index + compnentsPerScreen).map(function (child, index) {
return React.createElement(Active, {
key: "sublist-" + index
}, child);
}), children.slice(index + compnentsPerScreen));
};
function _templateObject3$1() {
var data = _taggedTemplateLiteralLoose(["\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"]);
_templateObject3$1 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2$1() {
var data = _taggedTemplateLiteralLoose(["\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"]);
_templateObject2$1 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$1() {
var data = _taggedTemplateLiteralLoose(["\n width: 100vw;\n height: 100vh;\n overflow-x: hidden;\n"]);
_templateObject$1 = function _templateObject() {
return data;
};
return data;
}
var ViewPort = styled.div(_templateObject$1());
var Board = styled.div(_templateObject2$1());
var Mobile = styled.div(_templateObject3$1(), function (props) {
return props.theme.minimumTabSize * 2;
}, function (props) {
return props.theme.minimumTabSize * 3;
}, function (props) {
return props.theme.minimumTabSize * 4;
});
var ResponsiveReactApp = function ResponsiveReactApp(_ref) {
var children = _ref.children,
tabs = _ref.tabs,
_ref$minimumTabSize = _ref.minimumTabSize,
minimumTabSize = _ref$minimumTabSize === void 0 ? 320 : _ref$minimumTabSize,
paths = _ref.paths,
_ref$routerProps = _ref.routerProps,
routerProps = _ref$routerProps === void 0 ? {} : _ref$routerProps;
var size = useWindowSize();
var compnentsPerScreen = size.width / minimumTabSize | 0;
var childSize = size.width / compnentsPerScreen;
return React.createElement(ThemeProvider, {
theme: {
minimumTabSize: minimumTabSize
}
}, React.createElement(BrowserRouter, Object.assign({}, routerProps), React.createElement(ViewPort, null, React.createElement(Switch, null, children.map(function (_, index) {
return React.createElement(Route, {
exact: true,
path: "" + (paths[index] || index || ""),
render: function render(_ref2) {
var location = _ref2.location;
return React.createElement(React.Fragment, null, React.createElement(Board, {
style: {
transform: "translateX(-" + childSize * Math.min(index, children.length - compnentsPerScreen) + "px)"
}
}, React.Children.map(children, function (child, index) {
return React.createElement(Mobile, {
key: index
}, child);
})), compnentsPerScreen < children.length && React.createElement(TabBar, {
compnentsPerScreen: compnentsPerScreen,
paths: paths,
pathname: location.pathname
}, tabs.props.children.slice(0)));
}
});
})))));
};
ResponsiveReactApp.defaultProps = {
children: [],
paths: []
};
export default ResponsiveReactApp;
export { TabBar, TabBarLink };
//# sourceMappingURL=responsive-react-app.esm.js.map