@hhgtech/hhg-components
Version:
Hello Health Group common components
148 lines (145 loc) • 6.37 kB
JavaScript
;
const makeParams = (params) => {
const paramKeys = Object.keys(params);
if (!paramKeys.length) {
return '';
}
return '?' + paramKeys.map((k) => `${k}=${params[k]}`).join('&');
};
const formatUrlWithPageParam = (path, page = 1, queryPageName = 'page') => {
const [urlPart, queryPart] = path.split('?');
const urlObj = new URLSearchParams(queryPart || '');
const params = {};
urlObj.forEach((val, key) => {
if (val) {
params[key] = val;
}
});
if (Number(page) > 1) {
params[queryPageName] = String(page); // Default is params.page
}
else {
// Do not display "page=1" on the URL
delete params[queryPageName]; // Default is params.page
}
return urlPart + makeParams(params);
};
const toggleNoScroll = (isNoScroll) => {
if (typeof window !== 'undefined') {
document.documentElement.style.overflow = isNoScroll ? 'hidden' : "";
}
};
const Breakpoints = {
BREAK_POINT_SMALL_MOBILE: 480,
BREAK_POINT_MOBILE: 768,
BREAK_POINT_TABLET: 1024,
BREAK_POINT_PC: 1159,
BREAK_POINT_LGPC: 1440,
};
const Screens = {
LG: 1160
};
/**
* List of mediaQueries to use in StyledComponents
* New naming convention base around breakpoints
*
* Note: smb = small mobile; mb = mobile; td = tablet device; pc = pc/laptop device
*
* smbDown: BREAK_POINT_SMALL_MOBILE go down.
* smbUp: BREAK_POINT_SMALL_MOBILE go up
*
* mbDown: BREAK_POINT_MOBILE go down.
* mbOnly: from BREAK_POINT_SMALL_MOBILE to BREAK_POINT_MOBILE
* mbUp: BREAK_POINT_MOBILE go up
*
* tdDown: BREAK_POINT_TABLET go down
* tdOnly: from BREAK_POINT_MOBILE to BREAK_POINT_TABLET
* tdUp: BREAK_POINT_TABLET go up
*
* pcDown: BREAK_POINT_PC go down
* pcOnly: from BREAK_POINT_TABLET to BREAK_POINT_PC
* pcUp: BREAK_POINT_PC go up
*
* @example
* ${MediaQueries.mbDown} {
* color: ${(props) => props.theme.colors.neutral100 }};
* }
*/
const MediaQueries = {
smbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE - 1}px)`,
smbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px)`,
mbDown: `@media (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
mbOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_SMALL_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_MOBILE - 1}px)`,
mbUp: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px)`,
tdDown: `@media (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
tdOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_TABLET - 1}px)`,
tdUp: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px)`,
pcUp: `@media (min-width: ${Breakpoints.BREAK_POINT_PC}px)`,
pcOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_TABLET}px) and (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
pcDown: `@media (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
lgPcUp: `@media (min-width: ${Breakpoints.BREAK_POINT_LGPC}px)`,
lgPcOnly: `@media (min-width: ${Breakpoints.BREAK_POINT_PC}px) and (max-width: ${Breakpoints.BREAK_POINT_LGPC - 1}px)`,
lgPcDown: `@media (max-width: ${Breakpoints.BREAK_POINT_LGPC - 1}px)`,
mbToPC: `@media (min-width: ${Breakpoints.BREAK_POINT_MOBILE}px) and (max-width: ${Breakpoints.BREAK_POINT_PC - 1}px)`,
};
const getBoundariesFromMediaQueryKey = (key) => {
// zero mean not set
switch (key) {
case 'smbDown': return [0, Breakpoints.BREAK_POINT_SMALL_MOBILE - 1];
case 'smbUp': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, 0];
case 'mbDown': return [0, Breakpoints.BREAK_POINT_MOBILE - 1];
case 'mbOnly': return [Breakpoints.BREAK_POINT_SMALL_MOBILE, Breakpoints.BREAK_POINT_MOBILE - 1];
case 'mbUp': return [Breakpoints.BREAK_POINT_MOBILE, 0];
case 'tdDown': return [0, Breakpoints.BREAK_POINT_TABLET - 1];
case 'tdOnly': return [Breakpoints.BREAK_POINT_MOBILE, Breakpoints.BREAK_POINT_TABLET - 1];
case 'tdUp': return [Breakpoints.BREAK_POINT_TABLET, 0];
case 'pcUp': return [Breakpoints.BREAK_POINT_PC, 0];
case 'pcOnly': return [Breakpoints.BREAK_POINT_TABLET, Breakpoints.BREAK_POINT_PC - 1];
case 'pcDown': return [0, Breakpoints.BREAK_POINT_PC - 1];
case 'lgPcUp': return [Breakpoints.BREAK_POINT_LGPC, 0];
case 'lgPcOnly': return [Breakpoints.BREAK_POINT_PC, Breakpoints.BREAK_POINT_LGPC - 1];
case 'lgPcDown': return [0, Breakpoints.BREAK_POINT_LGPC - 1];
case 'mbToPC': return [Breakpoints.BREAK_POINT_MOBILE, Breakpoints.BREAK_POINT_PC - 1];
}
};
const getPopupWrapperDom = () => {
if (typeof document === 'undefined')
return null;
const wrapperId = 'hhg-comp-popup-wrapper';
if (!document.querySelector('#' + wrapperId)) {
const newElem = document.createElement('div');
newElem.id = wrapperId;
document.body.appendChild(newElem);
}
return document.querySelector('#' + wrapperId);
};
const getWrapperDomWithSelector = (parentDom, wrapperKey) => {
if (typeof document === 'undefined')
return null;
if (!parentDom.querySelector(`[data-wrapper-selector="${wrapperKey}"]`)) {
const newElem = document.createElement('div');
newElem.setAttribute('data-wrapper-selector', wrapperKey);
document.body.appendChild(newElem);
}
return parentDom.querySelector(`[data-wrapper-selector="${wrapperKey}"]`);
};
const startCase = (str) => {
return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
};
const safeEncodeURI = (s) => {
if (decodeURI(s) !== s)
return s;
else
return encodeURI(s);
};
exports.Breakpoints = Breakpoints;
exports.MediaQueries = MediaQueries;
exports.Screens = Screens;
exports.formatUrlWithPageParam = formatUrlWithPageParam;
exports.getBoundariesFromMediaQueryKey = getBoundariesFromMediaQueryKey;
exports.getPopupWrapperDom = getPopupWrapperDom;
exports.getWrapperDomWithSelector = getWrapperDomWithSelector;
exports.makeParams = makeParams;
exports.safeEncodeURI = safeEncodeURI;
exports.startCase = startCase;
exports.toggleNoScroll = toggleNoScroll;