@stokr/components-library
Version:
STOKR - Components Library
146 lines (143 loc) • 6.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.socialSvg = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactCollapse = require("react-collapse");
var _SvgIcons = require("../SvgIcons");
var _FooterMenu = require("./FooterMenu.styles");
var _customHooks = require("../../utils/customHooks");
var _rwd = require("../../styles/rwd");
var _Facebook_Logo = _interopRequireDefault(require("../../static/images/social/Facebook_Logo.png"));
var _LIInBug = _interopRequireDefault(require("../../static/images/social/LI-In-Bug.png"));
var _XLogoBlack = _interopRequireDefault(require("../../static/images/social/X-logo-black.png"));
var _youtube_social_circle_red = _interopRequireDefault(require("../../static/images/social/youtube_social_circle_red.png"));
var _TelegramLogo = _interopRequireDefault(require("../../static/images/social/Telegram-Logo.png"));
var _Header = require("../Header/Header.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const CollapseWrapper = _ref => {
let {
children,
collapse,
isOpened
} = _ref;
return collapse ? /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
isOpened: isOpened
}, children) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
};
CollapseWrapper.propTypes = {
children: _propTypes.default.node.isRequired,
collapse: _propTypes.default.bool,
isOpened: _propTypes.default.bool
};
CollapseWrapper.defaultProps = {
collapse: false,
isOpened: false
};
const socialSvg = exports.socialSvg = {
linkedin: /*#__PURE__*/_react.default.createElement("img", {
src: _LIInBug.default,
alt: "Linkedin Logo",
loading: "lazy",
style: {
padding: 1
}
}),
instagram: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialInstagram, null),
twitter: /*#__PURE__*/_react.default.createElement("img", {
src: _XLogoBlack.default,
alt: "X Logo",
loading: "lazy",
style: {
padding: 4
}
}),
facebook: /*#__PURE__*/_react.default.createElement("img", {
src: _Facebook_Logo.default,
alt: "Facebook Logo",
loading: "lazy"
}),
telegram: /*#__PURE__*/_react.default.createElement("img", {
src: _TelegramLogo.default,
alt: "Telegram Logo",
loading: "lazy"
}),
//medium: <SocialMedium />,
youtube: /*#__PURE__*/_react.default.createElement("img", {
src: _youtube_social_circle_red.default,
alt: "Youtube Logo",
loading: "lazy"
}),
reddit: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialReddit, null)
};
const FooterMenu = _ref2 => {
let {
groups,
jobOpeningsNumber = 0,
dropdownCollapsed
} = _ref2;
const isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
// "New to STOKR" needs to be open by default
const [activeGroups, setactiveGroups] = _react.default.useState(() => {
return groups.map((group, index) => {
if (isMobile) {
return group.name === 'New to STOKR';
}
// for desktop, use the dropdownCollapsed prop
return !dropdownCollapsed;
});
});
const toggleGroup = key => {
const activeGroupsCopy = [...activeGroups];
activeGroupsCopy[key] = !activeGroupsCopy[key];
setactiveGroups(activeGroupsCopy);
};
// persist on screen size changes
(0, _react.useEffect)(() => {
setactiveGroups(groups.map((group, index) => {
if (isMobile) {
return group.name === 'New to STOKR';
}
return !dropdownCollapsed;
}));
}, [isMobile, groups, dropdownCollapsed]);
return /*#__PURE__*/_react.default.createElement(_FooterMenu.Container, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.Groups, null, groups.map((group, groupKey) => /*#__PURE__*/_react.default.createElement(_FooterMenu.Group, {
key: group.name,
onClick: () => toggleGroup(groupKey)
}, /*#__PURE__*/_react.default.createElement(_FooterMenu.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.Title, {
collapse: group.collapse
}, group.name), isMobile && !group.social && /*#__PURE__*/_react.default.createElement(_FooterMenu.ArrowDown, {
isOpened: activeGroups[groupKey]
})), /*#__PURE__*/_react.default.createElement(CollapseWrapper, {
collapse: isMobile && group.collapse,
isOpened: activeGroups[groupKey]
}, /*#__PURE__*/_react.default.createElement(_FooterMenu.Items, {
social: group.social
}, group.social ? /*#__PURE__*/_react.default.createElement(_Header.SocialLinksContainer, null, group.items.map(item => /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
key: item.name,
social: true
}, /*#__PURE__*/_react.default.createElement(_FooterMenu.SocialLink, {
href: item.url,
icon: item.name,
target: "_blank",
rel: "noopener noreferrer"
}, socialSvg[item.name])))) : group.items.map(item => /*#__PURE__*/_react.default.createElement(_FooterMenu.Item, {
key: item.name
}, /*#__PURE__*/_react.default.createElement(_FooterMenu.Link, {
target: item.external ? '_blank' : '',
href: item.url,
rel: "noopener noreferrer"
}, item.name, item.showNumber && jobOpeningsNumber > 0 && /*#__PURE__*/_react.default.createElement(_FooterMenu.HiringTotalNumber, {
style: {
marginLeft: '4px'
}
}, jobOpeningsNumber))))))))));
};
FooterMenu.propTypes = {
groups: _propTypes.default.arrayOf(Object).isRequired,
jobOpeningsNumber: _propTypes.default.number
};
var _default = exports.default = FooterMenu;