ruffer-pattern-portfolio
Version:
This is the end result from https://dev.to/swyx/quick-guide-to-setup-your-react--typescript-storybook-design-system-1c51
42 lines (41 loc) • 2.69 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var react_redux_1 = require("react-redux");
var NavLink = function (props) {
var id = props.id, active = props.active, title = props.title, href = props.href, onSetActive = props.onSetActive;
return (react_1.default.createElement(react_bootstrap_1.Nav.Link, { className: active ? "nav-item nav-link active" : "nav-item nav-link", href: href }, title));
};
var LoadingLink = function () {
return (react_1.default.createElement("div", { className: "loading-item" },
react_1.default.createElement("span", { className: "glow-text" },
react_1.default.createElement("span", null, "Loading button"))));
};
exports.Menu = function (props) {
var loading = props.loading, buttons = props.buttons, activeIndex = props.activeIndex;
if (loading) {
var loadingButtons = [1, 2, 3, 4, 5];
return (react_1.default.createElement(react_bootstrap_1.Navbar, { collapseOnSelect: true, expand: "md", variant: "light" },
react_1.default.createElement(react_bootstrap_1.Navbar.Toggle, { "aria-controls": "responsive-navbar-nav", className: "ml-auto" }),
react_1.default.createElement(react_bootstrap_1.Navbar.Collapse, { id: "responsive-navbar-nav" },
react_1.default.createElement(react_bootstrap_1.Nav, { className: "mr-auto" }, loadingButtons.map(function (button, buttonIndex) {
return react_1.default.createElement(LoadingLink, null);
})))));
}
return (react_1.default.createElement(react_bootstrap_1.Navbar, { collapseOnSelect: true, expand: "lg", variant: "light" },
react_1.default.createElement(react_bootstrap_1.Navbar.Toggle, { "aria-controls": "responsive-navbar-nav", className: "ml-auto" }),
react_1.default.createElement(react_bootstrap_1.Navbar.Collapse, { id: "responsive-navbar-nav" },
react_1.default.createElement(react_bootstrap_1.Nav, { className: "mr-auto" }, buttons.map(function (button, buttonIndex) {
return react_1.default.createElement(NavLink, { key: button.id, title: button.title, active: buttonIndex.toString() === activeIndex });
})))));
};
// export default connect(
// dispatch => ({
// onActivateButton: id => dispatch(activateButton(id)),
// })
// )(Menu);
exports.default = react_redux_1.connect()(exports.Menu);