@fenderdigital/react-menu
Version:
Fender React UI Kit Menu Component
50 lines (49 loc) • 4.32 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var react_accordion_1 = __importDefault(require("@fenderdigital/react-accordion"));
var MenuIcon_1 = __importDefault(require("./MenuIcon"));
var SubMenu_1 = __importDefault(require("./SubMenu"));
var Menu_1 = require("./Menu");
var MenuAccordion = function (_a) {
var className = _a.className, icon = _a.icon, id = _a.id, items = _a.items, isActive = _a.isActive, isMobile = _a.isMobile, label = _a.label, onClick = _a.onClick, pathname = _a.pathname;
var _b = react_1.useContext(Menu_1.HoverContext), hoverClass = _b.hoverClass, isHoverable = _b.isHoverable;
return (react_1.default.createElement("div", { className: "menu-accordion " + className, "data-id": "" + (isMobile ? "menu-accordion-mobile-" + id : "menu-accordion-" + id) },
react_1.default.createElement(react_accordion_1.default, { icon: react_1.default.createElement(MenuIcon_1.default, { icon: icon, id: id, isActive: isActive }), isVisible: isActive, label: label, onCallback: function () {
onClick('accordion', label);
}, styles: (isActive ? 'is-visible' : '') + " " + (isHoverable ? hoverClass : '') },
react_1.default.createElement(SubMenu_1.default, { items: items, onClick: onClick, pathname: pathname, parentLabel: "" + (isMobile ? "mobile-" + id : id) }))));
};
var StyledMenuAccordion = styled_components_1.default(MenuAccordion)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n button {\n display: flex;\n align-items: center;\n\n border-style: none;\n border-width: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n width: 100%;\n\n font-family: 'FuturaPT-Heavy';\n text-decoration: none;\n color: #888;\n\n background-color: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n\n @media (min-width: 960px) {\n &.is-mouse-leave + .accordion-content {\n max-height: 0 !important;\n }\n }\n\n &.is-visible {\n color: #d52b1e;\n }\n\n &:hover {\n color: #000;\n background-color: #fff;\n }\n }\n"], ["\n button {\n display: flex;\n align-items: center;\n\n border-style: none;\n border-width: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n width: 100%;\n\n font-family: 'FuturaPT-Heavy';\n text-decoration: none;\n color: #888;\n\n background-color: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n\n @media (min-width: 960px) {\n &.is-mouse-leave + .accordion-content {\n max-height: 0 !important;\n }\n }\n\n &.is-visible {\n color: #d52b1e;\n }\n\n &:hover {\n color: #000;\n background-color: #fff;\n }\n }\n"])));
StyledMenuAccordion.defaultProps = {
className: '',
};
exports.default = StyledMenuAccordion;
var templateObject_1;