@hhgtech/hhg-components
Version:
Hello Health Group common components
136 lines (134 loc) • 6.13 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);
};
export { Breakpoints as B, MediaQueries as M, Screens as S, getPopupWrapperDom as a, getWrapperDomWithSelector as b, safeEncodeURI as c, formatUrlWithPageParam as f, getBoundariesFromMediaQueryKey as g, makeParams as m, startCase as s, toggleNoScroll as t };