@fenderdigital/react-menu
Version:
Fender React UI Kit Menu Component
66 lines (65 loc) • 3.9 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import MenuContent from './MenuContent';
import MenuMobileContent from './MenuMobileContent';
export var collapsedWidth = '56px';
export var timeout = 500;
export var width = '220px';
export var HoverContext = React.createContext({
isHoverable: false,
hoverClass: '',
});
var Menu = function (_a) {
var className = _a.className, dataId = _a.dataId, firstName = _a.firstName, isHoverable = _a.isHoverable, onClick = _a.onClick, pathname = _a.pathname, primary = _a.primary, profileUrl = _a.profileUrl, renderMobileContent = _a.renderMobileContent, secondary = _a.secondary, signOutUrl = _a.signOutUrl;
var timer;
var _b = useState(''), hoverClass = _b[0], setHoverClass = _b[1];
var handleTimer = function () {
timer = setTimeout(function () {
setHoverClass('is-mouse-enter');
}, timeout);
};
var clearTimer = function (currentTimer) {
clearTimeout(currentTimer);
};
var handleMouseEvent = function (event) {
if (!isHoverable)
return;
if (event.type === 'mouseleave') {
setHoverClass('is-mouse-leave');
clearTimer(timer);
}
if (event.type === 'mouseenter') {
handleTimer();
}
};
useEffect(function () {
setHoverClass(isHoverable ? 'is-mouse-leave' : '');
}, [isHoverable]);
return (React.createElement("div", { className: "menu " + className + " " + hoverClass, "data-id": dataId || 'menu', onMouseEnter: handleMouseEvent, onMouseLeave: handleMouseEvent },
React.createElement(HoverContext.Provider, { value: { isHoverable: isHoverable, hoverClass: hoverClass } }, renderMobileContent ? (React.createElement(MenuMobileContent, { firstName: firstName, onClick: onClick, pathname: pathname, primary: primary, profileUrl: profileUrl, secondary: secondary, signOutUrl: signOutUrl })) : (React.createElement(MenuContent, { onClick: onClick, pathname: pathname, primary: primary, secondary: secondary })))));
};
var transition = 'all 0.3s ease';
var StyledMenu = styled(Menu)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n left: 0;\n top: ", ";\n z-index: 6;\n\n height: ", ";\n width: 100%;\n\n background-color: #f9f9f9;\n\n cursor: ", ";\n overflow: hidden;\n transition: ", ";\n\n @media (min-width: 480px) {\n width: ", ";\n }\n\n @media (min-width: 1280px) {\n position: fixed;\n\n &.is-mouse-enter {\n width: ", ";\n }\n }\n\n @media (min-width: 480px) {\n border-right: 1px solid #e0e0e0;\n }\n"], ["\n position: relative;\n left: 0;\n top: ", ";\n z-index: 6;\n\n height: ", ";\n width: 100%;\n\n background-color: #f9f9f9;\n\n cursor: ", ";\n overflow: hidden;\n transition: ", ";\n\n @media (min-width: 480px) {\n width: ",
";\n }\n\n @media (min-width: 1280px) {\n position: fixed;\n\n &.is-mouse-enter {\n width: ", ";\n }\n }\n\n @media (min-width: 480px) {\n border-right: 1px solid #e0e0e0;\n }\n"])), function (_a) {
var offsetTop = _a.offsetTop;
return offsetTop + "px" || '0';
}, function (_a) {
var offsetTop = _a.offsetTop;
return "calc(100vh - " + (offsetTop || 0) + "px)";
}, function (_a) {
var isHoverable = _a.isHoverable;
return (isHoverable ? 'pointer' : 'default');
}, transition, function (_a) {
var isHoverable = _a.isHoverable;
return isHoverable ? collapsedWidth : width;
}, width);
StyledMenu.defaultProps = {
className: '',
isHoverable: false,
};
export default StyledMenu;
var templateObject_1;