side-navigation-react
Version:
Easy, responsive & flexible navigational component that compose declaratively with your application.
59 lines (58 loc) • 4.09 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_router_dom_1 = require("react-router-dom");
var styles_1 = require("../styles");
var styles_2 = require("../../../styles");
var toogleHook_1 = require("../../../helpers/hooks/toogleHook");
var constants_1 = require("../../../constants");
var ThemeWrapper = react_1.default.createContext({});
exports.SideNavigation = function (_a) {
var _b = _a.heading, heading = _b === void 0 ? {
title: 'Home 👋',
route: '/',
} : _b, _c = _a.navBackground, navBackground = _c === void 0 ? constants_1.defaultTheme.navBackground : _c, navItems = _a.navItems, _d = _a.theme, theme = _d === void 0 ? constants_1.defaultTheme.theme : _d;
var _e = react_1.useState(window.innerWidth > styles_2.breakPoint), isExpanded = _e[0], toggleExpansion = _e[1];
return (react_1.default.createElement(ThemeWrapper.Provider, { value: { navBackground: navBackground, theme: theme } },
react_1.default.createElement(styles_2.RightRow, { background: navBackground },
react_1.default.createElement(styles_1.NavigationContainer, null,
react_1.default.createElement(styles_1.NavigationHeading, { theme: theme },
react_1.default.createElement(react_router_dom_1.Link, { to: heading.route }, heading.title),
react_1.default.createElement(styles_1.RightArrow, { isExpanded: isExpanded, onClick: function () { return toggleExpansion(!isExpanded); } })),
react_1.default.createElement(styles_1.NavigationLayersContainer, { isExpanded: isExpanded },
react_1.default.createElement(styles_1.Divider, null),
react_1.default.createElement(NavigationLayers, { navItems: navItems, level: 0 }))))));
};
var NavigationLayers = function (_a) {
var navItems = _a.navItems, nesting = _a.nesting, level = _a.level;
return (react_1.default.createElement(react_1.default.Fragment, null, navItems.map(function (navItem, index) { return (react_1.default.createElement(Layers, { key: navItem.title + "_" + index, navItem: navItem, nesting: nesting, level: level })); })));
};
var Layers = function (_a) {
var navItem = _a.navItem, nesting = _a.nesting, level = _a.level;
var _b = toogleHook_1.useToggle(level === 0), isExpanded = _b[0], toggleExpansion = _b[1];
var theme = react_1.useContext(ThemeWrapper).theme;
return (react_1.default.createElement(react_1.default.Fragment, null,
!!navItem.children && (react_1.default.createElement(styles_1.HeadingArrowContainer, { theme: theme, onClick: toggleExpansion, nesting: nesting, level: level },
' ',
react_1.default.createElement(styles_1.Heading, { theme: theme, nesting: nesting }, navItem.title),
' ',
react_1.default.createElement(styles_1.Arrow, { theme: theme, isExpanded: isExpanded, nesting: nesting }))),
react_1.default.createElement(Extension, { isExpanded: isExpanded, navItem: navItem, level: level, nesting: nesting })));
};
var Extension = function (_a) {
var navItem = _a.navItem, isExpanded = _a.isExpanded, level = _a.level, nesting = _a.nesting;
var theme = react_1.useContext(ThemeWrapper).theme;
if (navItem.route) {
return (react_1.default.createElement(react_router_dom_1.Link, { to: navItem.route },
react_1.default.createElement(styles_1.ListItem, { theme: theme, nesting: nesting, level: level }, navItem.title)));
}
return (navItem.children && (react_1.default.createElement(styles_1.UnorderedList, { isExpanded: isExpanded, theme: theme },
react_1.default.createElement(NavigationLayers, { navItems: navItem.children, level: level + 1, nesting: true }))));
};