@lote-design-system/marketing-blocks
Version:
514 lines (447 loc) • 18.6 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavBar1 = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _polished = require("polished");
var _svg = require("../svg");
var _icons = require("@lote-design-system/icons");
var _core = require("@lote-design-system/core");
// => Dependent styled-components
// Our main component depends upon the following styled-components
var NavBar = _styledComponents["default"].nav.withConfig({
displayName: "NavBar1__NavBar",
componentId: "pcc9fm-0"
})(["padding:", " 0;", ";", ";", ";"], (0, _polished.rem)(16), function (_ref) {
var fixed = _ref.fixed;
if (fixed === 'top') {
return (0, _styledComponents.css)(["position:fixed;top:0;right:0;left:0;z-index:1030;"]);
} else if (fixed === 'bottom') {
return (0, _styledComponents.css)(["position:fixed;right:0;bottom:0;left:0;z-index:1030;"]);
} else {
return (0, _styledComponents.css)([""]);
}
}, function (_ref2) {
var sticky = _ref2.sticky;
if (sticky) {
return (0, _styledComponents.css)(["@supports ((position:-webkit-sticky) or (position:sticky)){position:sticky;top:0;z-index:1020;}"]);
} else {
return (0, _styledComponents.css)([""]);
}
}, function (_ref3) {
var styled = _ref3.styled;
if (styled) {
return (0, _styledComponents.css)(["&{", ";}"], styled);
}
}); // This container is very important component for the Nav aligning
var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
displayName: "NavBar1__ContainerModify",
componentId: "pcc9fm-1"
})(["position:relative;display:flex;flex-wrap:wrap;align-items:center;", " justify-content:space-between;max-width:", ";"], ''
/* Remember this is a very important property if you remove it your NavBarStart, NavBarEnd and BurgerButton
will not display left of even right side of the bar. */
, function (_ref4) {
var theme = _ref4.theme;
return theme.maxContainerWidth;
});
var NavBarBrand = _styledComponents["default"].a.withConfig({
displayName: "NavBar1__NavBarBrand",
componentId: "pcc9fm-2"
})(["display:inline-flex;align-items:center;padding:", " 0;white-space:nowrap;> svg,> img{width:56px;height:56px;}}}"], (0, _polished.rem)(4));
var NavBarButtonToggler = (0, _styledComponents["default"])(_core.Button).withConfig({
displayName: "NavBar1__NavBarButtonToggler",
componentId: "pcc9fm-3"
})(["width:48px;height:48px;padding:", " ", ";display:inline-flex;justify-content:center;align-items:center;", "{display:none;}"], (0, _polished.rem)(4), (0, _polished.rem)(12), function (_ref5) {
var theme = _ref5.theme;
return theme.mediaQueries.lg;
});
var navbarOverlayOpacity = (0, _styledComponents.keyframes)(["0%{opacity:0;}100%{opacity:1;}"]);
var NavBarPlate = _styledComponents["default"].div.withConfig({
displayName: "NavBar1__NavBarPlate",
componentId: "pcc9fm-4"
})(["", " display:none;", " ", "{display:flex;align-items:center;}@media (max-width:991px){display:block;position:fixed;z-index:", ";width:0;height:100%;transition:transform 0.4s linear,height 0s ease 0.4s,width 0s ease 0.4s;top:0;", " ", "}"], ''
/* Default NavBarPlate will be disabled on Mobile devices. */
, ''
/* NavBarPlate will be enabled on Desktop devices. */
, function (_ref6) {
var theme = _ref6.theme;
return theme.mediaQueries.lg;
}, function (_ref7) {
var zIndex = _ref7.zIndex;
return zIndex;
}, function (props) {
if (props.placement === 'left') {
return {
left: 0
};
} else if (props.placement === 'right') {
return {
right: 0
};
}
}, function (props) {
return props.visible && (0, _styledComponents.css)(["width:100%;transition:transform 0.4s linear;", "{height:100%;opacity:1;transition:none;animation:", " 0.4s linear;}", "{visibility:visible;", "}"], NavBarOverlay, navbarOverlayOpacity, NavBarMenu, function (props) {
if (props.placement === 'left') {
return {
transform: 'translateX(100%)'
};
} else if (props.placement === 'right') {
return {
transform: 'translateX(-100%)'
};
}
});
});
var NavBarOverlay = _styledComponents["default"].div.withConfig({
displayName: "NavBar1__NavBarOverlay",
componentId: "pcc9fm-5"
})(["@media (max-width:991px){position:fixed;top:0;left:0;width:100%;height:0;opacity:0;transition:opacity 0.4s linear,height 0s ease 0.4s;background-color:rgba(0,0,0,0.7);}"]); // NavBarMenu is important component because all placement of links depend upon this.
var NavBarMenu = _styledComponents["default"].div.withConfig({
displayName: "NavBar1__NavBarMenu",
componentId: "pcc9fm-6"
})(["", " ", "{display:flex;align-items:center;}@media (max-width:991px){", ";position:fixed;", ";height:100%;background-color:#ffffff;overflow-y:auto;visibility:hidden;transition:transform 0.2s linear,visibility 0.2s linear;}"], ''
/* Styling for the NavBarMenu will be disabled on Desktop devices. */
, function (_ref8) {
var theme = _ref8.theme;
return theme.mediaQueries.lg;
}, function (_ref9) {
var theme = _ref9.theme,
placement = _ref9.placement;
if (placement === 'left') {
return {
boxShadow: theme.shadowSide.right,
right: '100%'
};
} else if (placement === 'right') {
return {
boxShadow: theme.shadowSide.left,
left: '100%'
};
}
}, function (_ref10) {
var w = _ref10.w;
if (typeof w === 'number') {
return (0, _styledComponents.css)(["width:", "px;"], w);
} else if (typeof w === 'string') {
return (0, _styledComponents.css)(["width:", ";"], w);
} else {
return (0, _styledComponents.css)(["width:", "px;"], w);
}
});
var NavBarHeader = _styledComponents["default"].div.withConfig({
displayName: "NavBar1__NavBarHeader",
componentId: "pcc9fm-7"
})(["display:none;@media (max-width:991px){display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid #f8f8f8;", ""], function (_ref11) {
var hasTitle = _ref11.hasTitle,
hasClosable = _ref11.hasClosable;
if (hasTitle && hasClosable) {
return (0, _styledComponents.css)(["justify-content:space-between;padding:", " ", ";"], (0, _polished.rem)(8), (0, _polished.rem)(18));
} else if (hasTitle && !hasClosable) {
return (0, _styledComponents.css)(["padding:", ";"], (0, _polished.rem)(18));
} else if (!hasTitle && hasClosable) {
return (0, _styledComponents.css)(["justify-content:flex-end;padding:", " ", ";"], (0, _polished.rem)(8), (0, _polished.rem)(18));
}
});
var NavBarText = _styledComponents["default"].span.withConfig({
displayName: "NavBar1__NavBarText",
componentId: "pcc9fm-8"
})(["font-size:", ";font-weight:500;color:", ";"], (0, _polished.rem)(16), function (_ref12) {
var colors = _ref12.theme.colors;
return colors.text.title;
});
var NavBarCloseButton = (0, _styledComponents["default"])(_core.Button).withConfig({
displayName: "NavBar1__NavBarCloseButton",
componentId: "pcc9fm-9"
})(["width:46px;height:46px;padding:", ";font-size:", ";"], (0, _polished.rem)(4), (0, _polished.rem)(18)); // NavBarEnd Section i.e. unordered list display on the right side
// =================================================================
// Anchor
var NavBarEndLink = _styledComponents["default"].a.withConfig({
displayName: "NavBar1__NavBarEndLink",
componentId: "pcc9fm-10"
})(["font-size:", ";color:", ";display:block;font-weight:500;padding:", " ", ";transition:color 0.4s linear;&:hover{color:", ";}"], (0, _polished.rem)(14), function (_ref13) {
var colors = _ref13.theme.colors;
return colors.text.primary;
}, (0, _polished.rem)(8), (0, _polished.rem)(16), function (_ref14) {
var colors = _ref14.theme.colors;
return colors.primary;
}); // Button
var NavBarEndLinkButton = (0, _styledComponents["default"])(_core.Button).withConfig({
displayName: "NavBar1__NavBarEndLinkButton",
componentId: "pcc9fm-11"
})(["font-weight:500;margin:", ";@media (max-width:991px){display:block;}"], (0, _polished.rem)(8)); // ListItem
var NavBarEndItem = _styledComponents["default"].li.withConfig({
displayName: "NavBar1__NavBarEndItem",
componentId: "pcc9fm-12"
})(["", ";"], function (props) {
return props.active && (0, _styledComponents.css)(["> ", "{color:", ";}"], NavBarEndLink, function (_ref15) {
var colors = _ref15.theme.colors;
return colors.primary;
});
}); // Unordered List
var NavBarEnd = _styledComponents["default"].ul.withConfig({
displayName: "NavBar1__NavBarEnd",
componentId: "pcc9fm-13"
})(["", " ", " padding:", ";margin-bottom:0;list-style:none;", "{padding:0;flex-direction:row;display:flex;align-items:center;}"], ''
/* These styles will appear on both Desktop & Mobile devices. */
, ''
/* But the bottom padding property will be only applied on Mobile Devices.
Basically, It will add the padding on the list container. */
, (0, _polished.rem)(14), function (_ref16) {
var theme = _ref16.theme;
return theme.mediaQueries.lg;
}); // End =================================
// <= End Dependent styled-components
var linkShape = {
id: _propTypes["default"].number.isRequired,
type: _propTypes["default"].oneOf(['link', 'button']).isRequired,
href: _propTypes["default"].string.isRequired,
text: _propTypes["default"].string.isRequired,
active: _propTypes["default"].bool,
variation: _propTypes["default"].string,
color: _propTypes["default"].string
};
var linkSchema = [{
id: 1,
type: 'link',
href: '/',
text: 'Home',
active: true
}, {
id: 2,
type: 'link',
href: '/',
text: 'Features'
}, {
id: 3,
type: 'link',
href: '/',
text: 'Pricing'
}, {
id: 4,
type: 'link',
href: '/',
text: 'Services'
}, {
id: 5,
type: 'link',
href: '/',
text: 'About Us'
}, {
id: 6,
type: 'button',
href: '/',
text: 'Get Started',
variation: 'primarySubtle'
}];
var propTypes = {
/** Render new styles on the NavBar Container. */
styledCSS: _propTypes["default"].string,
/** Position an element at the top/bottom of the viewport, from edge to edge. Fixed NavBars use
position: fixed, meaning they’re pulled from the normal flow of the DOM and may require
custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. */
fixed: _propTypes["default"].oneOf(['top', 'bottom']),
/** Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. */
sticky: _propTypes["default"].bool,
/** Whether a close (X) button is visible on top right of the Drawer dialog or not. */
closable: _propTypes["default"].bool,
/** Whether to show mask or not. */
mask: _propTypes["default"].bool,
/** Clicking on the mask (area outside the Drawer) to close the Drawer or not. */
maskClosable: _propTypes["default"].bool,
/** The title of the Drawer. */
title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
/** Width of the Drawer dialog. */
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
/** The z-index of the Drawer. */
zIndex: _propTypes["default"].number,
/** The placement of the Drawer. */
placement: _propTypes["default"].oneOf(['right', 'left']),
/** The logo appear on the NavBar, default it will be ui-kit logo. */
logo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
/** Links appear on the NavBar, same links also render on the Drawer. */
links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired
};
var defaultProps = {
closable: true,
mask: true,
maskClosable: true,
width: 256,
zIndex: 1000,
placement: 'right',
logo: /*#__PURE__*/_react["default"].createElement(_svg.LogoDefault, {
fill: "#01a1ff"
}),
links: linkSchema
};
/**
* Returns the JSX or null for the logo.
* @param logo {*} - The logo will React.element or a path
* @return {null|*} - Returns the JSX or null
*/
var renderLogo = function renderLogo(logo) {
if (_react["default"].isValidElement(logo)) {
return logo;
} else if (typeof logo === 'string' && logo.length > 0) {
return /*#__PURE__*/_react["default"].createElement("img", {
src: logo,
alt: "Brand Logo"
});
} else {
return null;
}
};
/**
* Render overlay mask on the back of the Drawer.
* @param state {boolean} - Updated value of the state
* @param mask {boolean} - Whether to show mask or not
* @param maskClosable {boolean} - Clicking on the mask to close the Drawer or not
* @param onClose {function} - A function that will be called when a user clicks mask
* @return {null|*} - Returns the JSX or null
*/
var renderMask = function renderMask(state, mask, maskClosable, onClose) {
if (mask) {
if (state) {
document.body.style.position = 'relative';
document.body.style.overflow = 'hidden';
document.body.style.width = "calc(".concat(100, "% - ", 17, "px)");
} else {
document.body.style.position = '';
document.body.style.overflow = '';
document.body.style.width = '';
}
if (maskClosable) {
return /*#__PURE__*/_react["default"].createElement(NavBarOverlay, {
onClick: onClose
});
} else {
return /*#__PURE__*/_react["default"].createElement(NavBarOverlay, null);
}
} else {
return null;
}
};
/**
* Render header on the Drawer
* @param title {*|string} - The title of the Drawer
* @param closable {boolean} - Whether a close (X) button is visible on top right of the Drawer dialog or not
* @param onClose {function} - A function that will be called when a user clicks the close button
* @return {null|*} - Returns the JSX or null
*/
var renderHeader = function renderHeader(title, closable, onClose) {
// If title is undefined & closeable is undefined then render nothing, else render deterministic elements
if (!title && !closable) {
return null;
} else {
return /*#__PURE__*/_react["default"].createElement(NavBarHeader, {
hasTitle: !!title,
hasClosable: !!closable
}, title && /*#__PURE__*/_react["default"].createElement(NavBarText, null, title), closable && /*#__PURE__*/_react["default"].createElement(NavBarCloseButton, {
type: "button",
basic: true,
variation: "lightTransparent",
onClick: onClose
}, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
name: "x"
})));
}
};
/**
* Render schema for the NavBar
* @param data {Array} - Schema for the NavBar
* @return {null|*} - Returns the JSX or null
*/
var renderBody = function renderBody(data) {
if (Array.isArray(data) && data.length > 0) {
return /*#__PURE__*/_react["default"].createElement(NavBarEnd, null, data.map(function (_ref17) {
var id = _ref17.id,
type = _ref17.type,
href = _ref17.href,
text = _ref17.text,
active = _ref17.active,
variation = _ref17.variation,
color = _ref17.color;
return /*#__PURE__*/_react["default"].createElement(NavBarEndItem, {
key: id,
active: active
}, type === 'link' ? /*#__PURE__*/_react["default"].createElement(NavBarEndLink, {
href: href
}, text) : /*#__PURE__*/_react["default"].createElement(NavBarEndLinkButton, {
href: href,
variation: variation,
color: color
}, text));
}));
} else {
return null;
}
};
var NavBar1 = function NavBar1(props) {
var _useWindowSize = (0, _core.useWindowSize)(),
innerWidth = _useWindowSize.innerWidth;
var styledCSS = props.styledCSS,
fixed = props.fixed,
sticky = props.sticky,
closable = props.closable,
mask = props.mask,
maskClosable = props.maskClosable,
title = props.title,
width = props.width,
zIndex = props.zIndex,
Logo = props.logo,
links = props.links,
placement = props.placement,
attributes = (0, _objectWithoutProperties2["default"])(props, ["styledCSS", "fixed", "sticky", "closable", "mask", "maskClosable", "title", "width", "zIndex", "logo", "links", "placement"]);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
visibleDrawer = _useState2[0],
setVisibleDrawer = _useState2[1];
var showDrawer = function showDrawer() {
setVisibleDrawer(!visibleDrawer);
}; // This will be used inside the Drawer header, close button & MaskOverlay
var onClose = function onClose() {
setVisibleDrawer(false);
}; // Always make sure the Drawer don't show up on the big screen size,
// so the state will always be false.
(0, _react.useEffect)(function () {
if (innerWidth > 991) {
setVisibleDrawer(false);
}
}, [innerWidth]);
return /*#__PURE__*/_react["default"].createElement(NavBar, (0, _extends2["default"])({
styled: styledCSS,
fixed: fixed,
sticky: sticky
}, attributes), /*#__PURE__*/_react["default"].createElement(ContainerModify, {
fluid: true
}, /*#__PURE__*/_react["default"].createElement(NavBarBrand, {
href: "/"
}, renderLogo(Logo)), /*#__PURE__*/_react["default"].createElement(NavBarButtonToggler, {
basic: true,
variation: "fill",
color: "primary",
active: visibleDrawer,
onClick: showDrawer
}, visibleDrawer ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
name: "x"
}) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
name: "menu"
})), /*#__PURE__*/_react["default"].createElement(NavBarPlate, {
visible: visibleDrawer,
placement: placement,
zIndex: zIndex
}, renderMask(visibleDrawer, mask, maskClosable, onClose), /*#__PURE__*/_react["default"].createElement(NavBarMenu, {
w: width,
placement: placement
}, renderHeader(title, closable, onClose), renderBody(links)))));
};
exports.NavBar1 = NavBar1;
NavBar1.propTypes = propTypes;
NavBar1.defaultProps = defaultProps;