@hhgtech/hhg-components
Version:
Hello Health Group common components
230 lines (210 loc) • 15.1 kB
JavaScript
'use strict';
var React = require('react');
var index = require('./index-1ee4ebb8.js');
var miscCookieHelper = require('./miscCookieHelper.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var utils = require('./utils-7ba0038a.js');
var Skeleton = require('react-loading-skeleton');
var formatString = require('string-format');
var constantsDomainLocales = require('./constantsDomainLocales.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var Skeleton__default = /*#__PURE__*/_interopDefault(Skeleton);
var formatString__default = /*#__PURE__*/_interopDefault(formatString);
function useGeolocation() {
const [permission, setPermission] = React.useState(() => {
if (typeof window === 'undefined') {
return 'unset';
}
if (miscCookieHelper.getCookie(index.USER_GEOLOCATION_COORDINATES_COOKIE)) {
return 'granted';
}
const blocked = !location.protocol.includes('https') && location.hostname !== 'localhost';
if (!navigator.geolocation || blocked) {
return 'denied';
}
return 'unset';
});
const [coordinates, setCoordinates] = React.useState(() => {
if (typeof window === 'undefined') {
return null;
}
const cookie = miscCookieHelper.getCookie(index.USER_GEOLOCATION_COORDINATES_COOKIE);
if (cookie) {
try {
return JSON.parse(cookie);
}
catch (err) {
console.log(err);
}
}
return null;
});
const request = React.useCallback(function request() {
// setPermission()
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const gps = {
lat: `${Math.round(position.coords.latitude * 10000000) / 10000000}`,
lng: `${Math.round(position.coords.longitude * 10000000) / 10000000}`,
};
miscCookieHelper.setCookie(index.USER_GEOLOCATION_COORDINATES_COOKIE, JSON.stringify(gps), {
minutes: 15,
});
setCoordinates(gps);
setPermission('granted');
}, () => {
miscCookieHelper.deleteCookie(index.USER_GEOLOCATION_COORDINATES_COOKIE);
setPermission('denied');
});
}
}, []);
return React.useMemo(() => ({
geoLocationPermission: permission,
geoLocationCoordinates: coordinates,
requestGeoLocation: request,
}), [permission, coordinates]);
}
const ClearIcon = ({ className, color }) => (React__default["default"].createElement("svg", { className: className, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default["default"].createElement("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "white" }),
React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289Z", fill: color || 'currentColor' })));
const CloseIcon = ({ className, color }) => (React__default["default"].createElement("svg", { className: className, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default["default"].createElement("path", { d: "M18 6L6 18", stroke: color || 'currentColor', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
React__default["default"].createElement("path", { d: "M6 6L18 18", stroke: color || 'currentColor', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const PinIcon = ({ className, color }) => (React__default["default"].createElement("svg", { width: "14", height: "20", viewBox: "0 0 14 20", className: className },
React__default["default"].createElement("path", { d: "M7 0C3.134 0 0 3.134 0 7C0 10.966 4.404 16.82 6.226 19.071C6.626 19.565 7.374 19.565 7.774 19.071C9.596 16.82 14 10.966 14 7C14 3.134 10.866 0 7 0ZM7 9.5C5.619 9.5 4.5 8.381 4.5 7C4.5 5.619 5.619 4.5 7 4.5C8.381 4.5 9.5 5.619 9.5 7C9.5 8.381 8.381 9.5 7 9.5Z", fill: color || 'currentColor' })));
const MagnifierIcon = ({ className, color }) => (React__default["default"].createElement("svg", { className: className, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default["default"].createElement("path", { d: "M11 18C14.866 18 18 14.866 18 11C18 7.13401 14.866 4 11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18Z", stroke: color || 'currentColor', strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
React__default["default"].createElement("path", { d: "M20 20L16 16", stroke: color || 'currentColor', strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
const DefaultThumbnailAny = ({ width, height, }) => (React__default["default"].createElement("svg", { width: width || 30, height: height || 30, viewBox: "0 0 30 30", fill: "none" },
React__default["default"].createElement("circle", { cx: "15", cy: "15", r: "15", fill: "#F7F9FC" })));
const DefaultThumbnailDoctor = ({ width, height, }) => (React__default["default"].createElement("svg", { width: width || 32, height: height || 32, viewBox: "0 0 32 32", fill: "none" },
React__default["default"].createElement("g", { clipPath: "url(#clip0_14712_400114)" },
React__default["default"].createElement("rect", { width: "32", height: "32", rx: "16", fill: "#E4E8EC" }),
React__default["default"].createElement("path", { d: "M22.065 9.58305C22.1108 9.80952 22.1431 10.0396 22.1614 10.2722C22.3769 13.0522 22.5858 16.1276 22.5727 17.618C22.5306 20.5688 19.708 21.1325 19.4564 21.1769L19.4495 21.5357L19.5228 23.9014C20.8688 23.9341 22.203 24.1759 23.4772 24.6196C24.5264 24.9739 25.4827 25.5591 26.2757 26.332C27.0688 27.105 27.6783 28.0461 28.0594 29.0858L31.9886 39.2068C31.91 39.3048 30.6939 39.6356 29.4888 39.944C30.1695 42.3315 30.4582 44.8142 30.3432 47.2953C30.2991 48.2666 30.1816 49.264 29.7245 50.1211C29.4508 50.6342 29.0319 51.0912 28.5296 51.3753C28.5099 51.4347 28.4864 51.4928 28.4593 51.5495C28.4293 51.6146 28.3908 51.6756 28.3448 51.7307C28.3293 51.7772 28.3232 51.8406 28.3162 51.9135C28.3004 52.0779 28.2799 52.2909 28.1362 52.4685C28.001 52.6373 27.8519 52.7945 27.6905 52.9386C27.6905 52.9386 27.092 52.9667 26.4133 52.9845L26.458 58.4088H5.7492L6.30965 52.9523L5.66093 53.1637C5.07664 53.3528 4.45628 53.4028 3.84925 53.3099C3.24222 53.2169 2.66526 52.9835 2.1643 52.6283C1.61489 52.2388 1.17445 51.715 0.884966 51.1068C0.595484 50.4987 0.46662 49.8266 0.510669 49.1545L0.644528 47.1369L1.41503 38.3366L1.81323 38.4135L-0.914307 37.8437L-0.402886 36.5663C-0.407359 36.5645 -0.411803 36.5627 -0.416214 36.5608C-0.410804 36.56 -0.40538 36.5594 -0.399946 36.5589L2.05995 30.4146C3.00034 28.0825 4.7421 26.1624 6.97187 24.9999C8.56171 24.176 10.3028 23.6861 12.0882 23.5597L11.788 16.5865C11.1882 16.6507 10.0095 16.5266 9.96087 14.954C9.91229 13.3824 11.0457 13.3171 11.6507 13.3961L11.6445 13.2523C11.5785 12.8433 11.5088 12.439 11.4577 12.2132C11.3782 11.8628 11.2611 11.4953 11.1419 11.1207C10.8794 10.2967 10.6061 9.43855 10.697 8.65293C10.697 8.65293 10.6909 8.00438 11.4565 7.24044C11.3707 6.86644 11.3686 6.47786 11.4507 6.10258C11.5366 5.70965 11.7125 5.34199 11.9645 5.02848C12.2165 4.71497 12.5377 4.46414 12.9029 4.29569C13.2682 4.12725 13.6675 4.04577 14.0696 4.05766C14.2277 4.06393 14.3849 4.08493 14.5418 4.10589C14.7932 4.13945 15.0439 4.17294 15.2971 4.14581C15.7708 4.09409 16.177 3.83884 16.5862 3.58167C16.8357 3.42492 17.0863 3.26745 17.354 3.15494C17.9119 2.93744 18.5266 2.91281 19.1002 3.08497C19.6738 3.25713 20.1733 3.61619 20.5192 4.105C20.5943 4.21716 20.6621 4.33678 20.7298 4.45631C20.9035 4.76299 21.077 5.06915 21.373 5.24769C21.5927 5.38236 21.8482 5.42658 22.1057 5.47114C22.2633 5.49842 22.4216 5.52582 22.5728 5.57417C23.0267 5.71015 23.3999 6.0411 23.6319 6.45436C23.6327 6.40753 23.6317 6.36062 23.629 6.31374C23.6502 6.3657 23.6623 6.42092 23.6649 6.47698C23.6661 6.49165 23.667 6.50632 23.6677 6.521C23.8246 6.82609 23.9058 7.17114 23.8885 7.51347C23.8544 7.93447 23.7053 8.33801 23.4574 8.68001C23.2096 9.02201 22.8725 9.28933 22.483 9.45278C22.3469 9.50712 22.2071 9.55061 22.065 9.58305Z", fill: "white" })),
React__default["default"].createElement("defs", null,
React__default["default"].createElement("clipPath", { id: "clip0_14712_400114" },
React__default["default"].createElement("rect", { width: "32", height: "32", rx: "16", fill: "white" })))));
const DefaultThumbnailService = ({ width, height, }) => (React__default["default"].createElement("svg", { width: width || 30, height: height || 30, viewBox: "0 0 30 30", fill: "none" },
React__default["default"].createElement("circle", { cx: "15", cy: "15", r: "15", fill: "#F7F9FC" }),
React__default["default"].createElement("path", { d: "M14.9998 6.66663C12.2752 6.66663 9.85335 7.97848 8.33317 9.99996H10.5988C11.8 8.94527 13.3625 8.33329 14.9998 8.33329C16.6372 8.33329 18.1997 8.94527 19.4009 9.99996H21.6665C20.1463 7.97848 17.7244 6.66663 14.9998 6.66663ZM7.7863 10.8333C7.07666 13.0403 6.6665 15.5989 6.6665 18.3333C6.6665 20.0846 6.82601 21.7675 7.13525 23.3333H22.8644C23.1737 21.7675 23.3332 20.0846 23.3332 18.3333C23.3332 15.5989 22.923 13.0403 22.2134 10.8333H7.7863ZM14.9998 13.3333C17.3013 13.3333 19.1665 15.1985 19.1665 17.5C19.1665 19.8014 17.3013 21.6666 14.9998 21.6666C12.6984 21.6666 10.8332 19.8014 10.8332 17.5C10.8332 15.1985 12.6984 13.3333 14.9998 13.3333ZM14.1665 15V16.6666H12.4998V18.3333H14.1665V20H15.8332V18.3333H17.4998V16.6666H15.8332V15H14.1665Z", fill: "#BFC5CC" })));
const StyledLiSkeleton$1 = styled__default["default"].li `
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
> :first-child {
flex: 1;
}
> :nth-child(2) {
flex: 6;
}
& + li::before {
content: '';
position: absolute;
left: 18px;
right: 18px;
top: 0;
height: 1px;
background-color: ${miscTheme.theme.colors.neutral100};
}
`;
const LiSkeleton = ({ count, className }) => {
return (React__default["default"].createElement(React__default["default"].Fragment, null, [...Array(count)].map((__v, i) => (React__default["default"].createElement(StyledLiSkeleton$1, { className: className, key: i },
React__default["default"].createElement(Skeleton__default["default"], { count: 1, height: 32 }),
React__default["default"].createElement(Skeleton__default["default"], { count: 1, height: 24 }))))));
};
const checkMarkIconUrl = `url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.9803 0.990669C16.7205 0.99841 16.4739 1.10699 16.2928 1.2934L5.99984 11.5864L2.70687 8.2934C2.61473 8.19743 2.50436 8.12081 2.38223 8.06802C2.2601 8.01524 2.12867 7.98735 1.99563 7.986C1.86259 7.98464 1.73061 8.00985 1.60743 8.06014C1.48426 8.11043 1.37235 8.18479 1.27827 8.27887C1.1842 8.37295 1.10983 8.48485 1.05954 8.60803C1.00926 8.73121 0.98405 8.86318 0.985403 8.99622C0.986757 9.12926 1.01464 9.26069 1.06743 9.38282C1.12021 9.50495 1.19684 9.61532 1.29281 9.70747L5.29281 13.7075C5.48035 13.8949 5.73467 14.0002 5.99984 14.0002C6.26501 14.0002 6.51933 13.8949 6.70687 13.7075L17.7069 2.70747C17.8514 2.567 17.9501 2.38616 17.99 2.18864C18.03 1.99112 18.0093 1.78614 17.9308 1.60055C17.8523 1.41497 17.7195 1.25744 17.5499 1.14861C17.3803 1.03978 17.1817 0.984729 16.9803 0.990669Z' fill='%232685F1'/%3E%3C/svg%3E%0A")`;
const StyledLocationResultsWrapper = styled__default["default"].div `
display: flex;
position: absolute;
top: 48px;
min-width: 100%;
box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04),
0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
0px 0px 1px rgba(0, 0, 0, 0.04);
border-radius: ${miscTheme.theme.borderRadius};
background-color: white;
z-index: 30;
${utils.MediaQueries.tdDown} {
position: relative;
top: 0;
box-shadow: initial;
}
`;
const StyledLocationResultsList = styled__default["default"].ul `
width: 100%;
max-height: 600px;
overflow-y: auto;
`;
const StyledPinIcon = styled__default["default"](PinIcon) `
width: 12px;
height: 18px;
`;
const StyledLocationItem = styled__default["default"].li `
position: relative;
cursor: pointer;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 14px;
overflow: hidden;
${({ isSelected }) => isSelected &&
`
&::after {
content: ${checkMarkIconUrl};
top: 50%;
right: 18px;
position: absolute;
transform: translateY(-50%);
}
`}
& + li::before {
content: '';
position: absolute;
left: 18px;
right: 18px;
top: 0;
height: 1px;
background-color: ${miscTheme.theme.colors.neutral100};
}
&:not([data-is-denied='true']):hover {
background-color: ${miscTheme.theme.colors.neutral50};
}
&:last-child:hover {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
&:first-child:hover {
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
&[data-is-denied='true'] {
cursor: not-allowed;
}
`;
const StyledLiSkeleton = styled__default["default"](LiSkeleton) `
&:first-child {
padding-top: 18px;
}
`;
const getApiPath = (path, params, locale) => {
return formatString__default["default"](path, Object.assign(Object.assign({}, params), { domain: constantsDomainLocales.domainLocales[locale || 'en-PH'] }));
};
exports.ClearIcon = ClearIcon;
exports.CloseIcon = CloseIcon;
exports.DefaultThumbnailAny = DefaultThumbnailAny;
exports.DefaultThumbnailDoctor = DefaultThumbnailDoctor;
exports.DefaultThumbnailService = DefaultThumbnailService;
exports.MagnifierIcon = MagnifierIcon;
exports.PinIcon = PinIcon;
exports.StyledLiSkeleton = StyledLiSkeleton;
exports.StyledLocationItem = StyledLocationItem;
exports.StyledLocationResultsList = StyledLocationResultsList;
exports.StyledLocationResultsWrapper = StyledLocationResultsWrapper;
exports.StyledPinIcon = StyledPinIcon;
exports.checkMarkIconUrl = checkMarkIconUrl;
exports.getApiPath = getApiPath;
exports.useGeolocation = useGeolocation;