@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
124 lines (113 loc) • 6.54 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var useCloseOutsideOrElementClicked = require('../../../hooks/useCloseOutsideOrElementClicked.js');
var useDocHeight = require('../../../hooks/useDocHeight.js');
var styledComponents = require('styled-components');
var theme = require('../../../themes/theme.js');
var navigation = require('../../../themes/themeComponents/navigation.js');
var styledUtils = require('../../../utils/styledUtils.js');
var Box = require('../../Box/Box.js');
var ButtonPrimary = require('../../ButtonPrimary/ButtonPrimary.js');
var NavContext = require('../context/NavContext.js');
var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
const IconContainer = styledComponents.styled.div `
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: ${navigation.IconContainerMinWidth};
transition: color 0.2s ease-in-out;
> svg {
display: block;
height: ${navigation.navIconSize};
width: ${navigation.navIconSize};
}
> svg,
+ span {
color: ${p => (p.$isActive ? theme.default.color.text.pink : 'inherit')};
}
@media (min-width: ${p => p.$collapseSize + 1}px) {
min-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 6)};
+ span {
display: block;
}
}
`;
const Tooltip = styledComponents.styled.div `
min-height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 5)};
// Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
max-height: calc(var(--vh100, 100vh) - ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 12)});
width: 100%;
position: absolute;
right: 0;
top: ${navigation.navMaxHeight};
z-index: ${p => p.$zIndex};
display: flex;
flex-direction: row;
@media (min-width: ${p => p.$fullWidthBreakpoint}px) {
width: ${p => p.$contentWidth};
right: ${p => (p.$fullWidthDesktop ? 0 : p.$tooltipRight)};
}
`;
const TooltipBox = styledComponents.styled(Box.default) `
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
min-height: inherit;
max-height: inherit;
`;
const Caret = styledComponents.styled.div `
position: absolute;
z-index: ${p => p.$zIndex + 1};
top: ${navigation.navMaxHeight};
transform: translate3d(50%, -50%, 0) rotate(-45deg);
width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
height: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
background-color: ${theme.default.color.default.white};
border: 1px solid ${theme.default.color.line.L03};
border-width: 1px 1px 0 0;
margin-left: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
@media (min-width: ${p => p.$collapseSize + 1}px) {
max-height: calc(var(--vh100, 100vh) - ${navigation.navMaxHeight});
}
`;
const MainNavTooltipMenu = (_a) => {
var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.default.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1 } = _a, props = tslib.__rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight", "zIndex"]);
const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = React.useContext(NavContext.default);
const ref = React.useRef(null);
const globalStateKey = globalStateString;
const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
const ContentComponent = contentComponent;
useDocHeight.default();
React.useEffect(() => {
setTooltipItems({
minicart: showMinicart,
login: showLoginTooltip,
search: false,
});
}, [showMinicart, showLoginTooltip, setTooltipItems]);
const toggleState = () => {
resetMenuEvents();
setTimeout(() => {
setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
});
};
useCloseOutsideOrElementClicked.default({ ref, closeWhenTagClicked }, () => {
if (tooltipItems[globalStateKey]) {
setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
}
});
return (React__default.default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, "$collapseSize": collapseSize, ref: ref },
globalStateKey === 'login' && !isLoggedIn ? (React__default.default.createElement(ButtonPrimary.default, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], "$isLoggedIn": isLoginItemAndLoggedIn, "$collapseSize": collapseSize, "$isHighlighted": tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
tooltipItems[globalStateKey] && ContentComponent && (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement(Caret, { "$zIndex": zIndex, "$collapseSize": collapseSize }),
React__default.default.createElement(Tooltip, { "$zIndex": zIndex, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
React__default.default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
React__default.default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
};
exports.IconContainer = IconContainer;
exports.default = MainNavTooltipMenu;