@hhgtech/hhg-components
Version:
Hello Health Group common components
1,399 lines (1,276 loc) • 350 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-ea4dfe68.js';
import React__default, { useRef, useState, useEffect, useImperativeHandle, useMemo, Fragment, useCallback, forwardRef, memo } from 'react';
import { R as Radio } from './index-5d405c0d.js';
import { Stack, Group, createStyles, getStylesRef, Box } from '@mantine/core';
import '@mantine/dates';
import { L as LOCALE_SPECS, F as FAVICONS } from './index-5e947517.js';
import './index-90813715.js';
import { C as CommonGAssets } from './index-ebe66e27.js';
import './useMantineLocale-0c6bea99.js';
import { T as Text } from './index-9f5659e8.js';
import { B as Button$1 } from './index-c68a0fa7.js';
import './index.styles-770020ac.js';
import './translationsContext-3a9e3453.js';
import '@mantine/hooks';
import { M as MediaQueries } from './utils-cb7242c7.js';
import './other-4ccb5568.js';
import './index-c2190f6e.js';
import { i as isInternalLink } from './index-9fbbb35e.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { C as Checkbox, P as PureInput } from './index-04977c21.js';
import { format, isBefore, startOfMonth, addMonths, subMonths, getDaysInMonth, isToday, isSameDay, isWithinInterval, isAfter, isPast } from 'date-fns';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { L as Logo } from './index-51f372c0.js';
import throttle from 'lodash/throttle';
import parse from 'html-react-parser';
import { domainLocales } from './constantsDomainLocales.js';
import { isProduction } from './constantsIsProduction.js';
import { a as useOutsideClick } from './useOutsideClick-87b9fd94.js';
import enUS from 'date-fns/locale/en-US';
import id from 'date-fns/locale/id';
import vi from 'date-fns/locale/vi';
import zhTW from 'date-fns/locale/zh-TW';
import { B as Button } from './index-6351bdee.js';
import { u as useScreenSize } from './useScreenSize-981e5b51.js';
import { u as useTranslations } from './index-9d21b711.js';
import { D as Dropdown } from './index-a2183fa7.js';
import { getSocialList } from './miscGetSocialList.js';
import { I as Input } from './index-cf3c860d.js';
import { D as Drawer } from './index-597874f8.js';
import { v4 } from 'uuid';
import { L as LOCALE } from './Locale-f270bd9d.js';
import { ArrowRight } from '@hhgtech/icons/arrow';
import { MultiStar, Question } from '@hhgtech/icons/other';
import Lottie from 'lottie-light-react';
const StyledCategoryCard = styled.a `
display: flex;
height: 125px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
padding: 8px;
border: 1px solid ${theme.colors.neutral100};
background-color: white;
border-radius: ${theme.borderRadius};
box-shadow: 0px 5px 12px rgba(40, 74, 117, 0.08);
cursor: pointer;
text-decoration: none;
& > .banner {
width: 100%;
height: 63px;
text-align: center;
}
& > .content {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: center;
word-break: break-word;
}
* {
pointer-events: none;
}
`;
const CategoryCard = (_a) => {
var { category, imgBanner, label, className, style, href = '', dataEventCategory, dataEventAction, dataEventLabel } = _a, rest = __rest(_a, ["category", "imgBanner", "label", "className", "style", "href", "dataEventCategory", "dataEventAction", "dataEventLabel"]);
const url = (category === null || category === void 0 ? void 0 : category.customizedUrl) || (category === null || category === void 0 ? void 0 : category.permalink) || href || '';
return (React__default.createElement(StyledCategoryCard, Object.assign({ "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, className: className, style: style, href: url }, ((category === null || category === void 0 ? void 0 : category.customizedUrl) &&
!isInternalLink(category.customizedUrl) && {
target: '_blank',
}), { onClick: (e) => {
if (url === '') {
e.preventDefault();
}
} }, rest),
React__default.createElement("div", { className: "banner" }, imgBanner),
React__default.createElement("div", { className: "content" },
React__default.createElement(Text, { className: "category_name", size: "sm", weight: "bold" }, (category === null || category === void 0 ? void 0 : category.displayName) || label || ''))));
};
const StyledCheckboxGroup = styled.div `
display: flex;
&[data-type='vertical'] {
flex-direction: column;
div {
margin-bottom: 20px;
}
}
&[data-type='horizontal'] {
flex-wrap: wrap;
div {
margin-right: 25px;
}
&[data-is-rectangle] {
div {
margin-right: 14px;
}
}
}
`;
const CheckboxGroup = ({ name, values = [], onChanges, options = [], className, type = 'vertical', isDisabled, isRectangle, }) => {
const onChange = (value, checked) => {
const newValues = values.slice();
if (checked) {
newValues.push(value);
}
else {
const removeIndex = newValues.findIndex((item) => item === value);
newValues.splice(removeIndex, 1);
}
if (onChanges) {
onChanges(newValues);
}
};
return (React__default.createElement(StyledCheckboxGroup, { className: className, "data-type": type, "data-is-rectangle": isRectangle || undefined }, options.map((option, index) => (React__default.createElement(Checkbox, { label: option.label, name: name, key: `${index}-${option.value}`, checked: values.includes(option.value), value: option.value, isDisabled: isDisabled || option.disabled, onChange: !isDisabled && onChange, isRectangle: isRectangle })))));
};
const MONTHS_TRANSLATION = {
'vi-VN': [
'Tháng 1',
'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
],
'id-ID': [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember',
],
'ms-MY': [
'Januari',
'Februari',
'Mac',
'April',
'Mei',
'Jun',
'Julai',
'Ogos',
'September',
'Oktober',
'November',
'Disember',
],
'km-KH': [
'មករា',
'ខែកុម្ភៈ',
'មីនា',
'ខែមេសា',
'ឧសភា',
'មិថុនា',
'ខែកក្កដា',
'សីហា',
'ខែកញ្ញា',
'តុលា',
'វិច្ឆិកា',
'ធ្នូ',
],
'en-PH': [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
'th-TH': [
'มกราคม',
'กุมภาพันธ์',
'มีนาคม',
'เมษายน',
'อาจ',
'มิถุนายน',
'กรกฎาคม',
'สิงหาคม',
'กันยายน',
'ตุลาคม',
'พฤศจิกายน',
'ธันวาคม',
],
'my-MM': [
'ဇန်နဝါရီလ',
'ဖေဖော်ဝါရီလ',
'မတ်လ',
'ပြီလ',
'မေလ',
'ဇွန',
'ဇူလိုင်လ',
'သြဂုတ်လ',
'စက်တင်ဘာ',
'အောက်တိုဘာ',
'နိုဝင်ဘာ',
'ဒီဇင်ဘာ',
],
'zh-TW': [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月',
],
'hi-IN': [
'जनवरी',
'फ़रवरी',
'जुलूस',
'अप्रैल',
'मई',
'जून',
'जुलाई',
'अगस्त',
'सितंबर',
'अक्टूबर',
'नवंबर',
'दिसंबर',
],
};
const StyledPickerContainer = styled.div `
.pickerContainer {
position: relative;
padding-top: 0;
& > div > svg {
position: absolute;
top: 36px;
right: 16px;
cursor: pointer;
}
& > :not(:first-child) {
position: absolute;
z-index: 2;
width: 100%;
}
}
&[data-is-static] .pickerOverlayWrapper {
position: static;
max-width: 250px;
aspect-ratio: 1 / 1;
> .pickerOverlay {
padding: 1rem;
}
}
.pickerOverlayWrapper {
min-width: 320px;
}
&[data-align-right='true'] {
.pickerOverlayWrapper {
right: 0;
}
}
.pickerOverlay {
margin-top: 6px;
background: white;
border-radius: ${theme.borderRadius};
box-shadow: 0px 6px 12px rgba(67, 86, 100, 0.2);
}
.picker {
width: 100%;
}
.react-datepicker-popper {
.react-datepicker {
display: flex;
width: 340px;
height: 305px;
align-items: center;
justify-content: center;
border: none;
box-shadow: (-1px 1px 2px rgba(67, 70, 74, 0.0001)),
(-2px 2px 5px rgba(67, 86, 100, 0.123689));
}
.svg {
cursor: pointer;
stroke: ${theme.colors.gray800};
}
.react-datepicker__day {
width: 40px;
}
.react-datepicker__header {
border-bottom: 0;
background-color: white;
}
.react-datepicker__day--outside-month {
color: #e9e9e9;
}
.react-datepicker__day {
font-weight: ${theme.sizes.fwBold};
}
.react-datepicker__day--selected,
.react-datepicker__day--today,
.react-datepicker__day--selected:hover,
.react-datepicker__day--keyboard-selected {
width: 32px;
height: 30px;
margin: 4px;
margin-bottom: -2px;
background: ${theme.colors.primaryBase};
border-radius: 50%;
}
.react-datepicker__day-name {
width: 40px;
}
.react-datepicker__triangle {
display: none;
}
.react-datepicker__header.react-datepicker__header--custom {
svg {
stroke: #262626;
}
select {
background: ${theme.colors.neutral100};
text-align: center;
&:not(:last-child) {
padding: 8px 10px;
margin-right: 15px;
border-radius: ${theme.borderRadius};
}
}
}
}
/* DayPicker styles */
.DayPicker {
display: inline-block;
font-size: 1rem;
}
.DayPicker-wrapper {
position: relative;
flex-direction: row;
padding-bottom: 1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.DayPicker-Months {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.DayPicker-Month {
display: table;
margin: 0 16px;
margin-top: 16px;
border-collapse: collapse;
border-spacing: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.DayPicker-NavBar {
position: absolute;
top: 16px;
left: 0;
display: flex;
width: 100%;
height: 0;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.DayPicker-NavButton {
width: 24px;
height: 24px;
margin-bottom: -47px;
background-position: center;
background-repeat: no-repeat;
background-size: 16px 16px;
color: #8b9898;
cursor: pointer;
}
.DayPicker-NavButton:hover {
opacity: 0.8;
}
.DayPicker-NavButton--prev {
//left: 2px;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L1 5L5 1' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.DayPicker-NavButton--next {
//right: 2px;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.DayPicker-NavButton--interactionDisabled {
display: none;
}
.DayPicker-Caption {
display: table-caption;
width: 100%;
height: 46px;
padding: 0 32px;
}
.DayPicker-Caption select {
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
}
.DayPicker-Weekdays {
display: table-header-group;
margin-top: 1em;
}
.DayPicker-WeekdaysRow {
display: table-row;
}
.DayPicker-Weekday {
display: table-cell;
padding: 0.5em;
color: #8b9898;
font-size: 0.875em;
text-align: center;
}
.DayPicker-Weekday abbr[title] {
border-bottom: none;
text-decoration: none;
}
.DayPicker-Body {
display: table-row-group;
}
.DayPicker-Week {
display: table-row;
}
.DayPicker-Day {
display: table-cell;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.DayPicker-WeekNumber {
display: table-cell;
min-width: 1em;
padding: 0.5em;
border-right: 1px solid #eaecec;
color: #8b9898;
cursor: pointer;
font-size: 0.75em;
text-align: right;
vertical-align: middle;
}
.DayPicker--interactionDisabled .DayPicker-Day {
cursor: default;
}
.DayPicker-Footer {
padding-top: 0.5em;
}
.DayPicker-TodayButton {
border: none;
background-color: transparent;
background-image: none;
box-shadow: none;
color: #4a90e2;
cursor: pointer;
font-size: 0.875em;
}
/* Default modifiers */
.DayPicker-Day--today {
color: #d0021b;
font-weight: 700;
}
.DayPicker-Day--outside {
color: #8b9898;
cursor: default;
}
.DayPicker-Day--disabled {
color: #dce0e0;
cursor: default;
/* background-color: #eff1f1; */
}
/* Example modifiers */
.DayPicker-Day--sunday {
background-color: #f7f8f8;
}
.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
color: #dce0e0;
}
.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
.DayPicker-Day--outside
) {
position: relative;
background-color: ${theme.colors.primaryBase};
color: #f0f8ff;
font-weight: ${theme.sizes.fwBold};
}
.DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
.DayPicker-Day--outside
):hover {
background-color: #51a0fa;
}
.DayPicker:not(.DayPicker--interactionDisabled)
.DayPicker-Day:not(.DayPicker-Day--disabled):not(
.DayPicker-Day--selected
):not(.DayPicker-Day--outside):hover {
background-color: #f0f8ff;
}
/* DayPickerInput */
.DayPickerInput {
display: inline-block;
}
.DayPickerInput-OverlayWrapper {
position: relative;
}
.DayPickerInput-Overlay {
position: absolute;
z-index: 1;
left: 0;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
`;
const StyledCaptionWrapper = styled.form `
display: flex;
width: 100%;
height: 46px;
align-items: center;
justify-content: space-between;
& > :first-child {
margin-right: 10px;
}
& * {
height: 46px;
padding: 10px 10px;
background: ${theme.colors.neutral100};
border-radius: ${theme.borderRadius};
}
`;
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const DatePicker = ({ alignRight = true, placeholder, displayDateFormat, onChange, customInput: CustomInput, pickedDate, className, isStatic, disabledDays, modifiers, UnHideOnClickOutside, initialMonth, locale = 'en-PH', }) => {
const isDatePickerShown = useRef(false);
const dateFormatter = format;
const [month, setMonth] = useState(initialMonth || new Date());
const datePickerContainer = useRef(null);
const datePicker = useRef(null);
const defaultDateFormatString = 'yyyy-MM-dd';
const monthLabels = MONTHS_TRANSLATION[locale];
const handleDaysSelect = (day) => {
datePicker.current && !isStatic && datePicker.current.hideDayPicker();
onChange && onChange(day);
};
const handleDayChanged = (selectedDay) => {
handleDaysSelect(selectedDay);
};
const formatPickerDate = (date, format) => {
return dateFormatter(date, format);
};
const handleDateClick = (e) => {
if (UnHideOnClickOutside)
return;
if (!datePickerContainer.current ||
!datePickerContainer.current.contains(e.target)) {
datePicker.current && datePicker.current.hideDayPicker();
}
};
// customise the drop downs for Month and year
const currentYear = new Date().getFullYear();
const fromMonth = new Date(currentYear - 150, 0);
const toMonth = new Date(currentYear + 1, 0);
const YearMonthForm = ({ date,
// localeUtils,
onChange, monthLabels, }) => {
// const months = localeUtils.getMonths()
const years = [];
for (let i = toMonth.getFullYear(); i >= fromMonth.getFullYear(); i -= 1) {
years.push(i);
}
const handleChange = function handleChange(e) {
const { year, month } = e.target.form;
onChange(new Date(year.value, month.value));
};
return (React__default.createElement("div", { className: "DayPicker-Caption" },
React__default.createElement(StyledCaptionWrapper, null,
React__default.createElement("select", { name: "month", onChange: handleChange, value: date.getMonth() }, monthLabels.map((month, i) => (React__default.createElement("option", { key: month, value: i }, month)))),
React__default.createElement("select", { name: "year", onChange: handleChange, value: date.getFullYear() }, years.map((year) => (React__default.createElement("option", { key: year, value: year }, year)))))));
};
const CaptionElement = ({ date, localeUtils, }) => {
const defaultMonthLabels = localeUtils === null || localeUtils === void 0 ? void 0 : localeUtils.getMonths();
return (React__default.createElement(YearMonthForm, { date: date,
// localeUtils={localeUtils}
monthLabels: monthLabels || defaultMonthLabels, onChange: setMonth }));
};
useEffect(() => {
document.addEventListener('mousedown', handleDateClick, {
passive: true,
});
return () => {
document.removeEventListener('mousedown', handleDateClick, false);
};
}, []);
return (React__default.createElement(StyledPickerContainer, { className: className, "data-align-right": alignRight, ref: datePickerContainer, "data-is-static": isStatic || undefined },
React__default.createElement(DayPickerInput, { ref: datePicker, inputProps: {
readOnly: true,
}, keepFocus: false, classNames: {
container: 'pickerContainer',
overlayWrapper: 'pickerOverlayWrapper',
overlay: 'pickerOverlay',
}, component: CustomInput &&
React__default.forwardRef(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
(props, _ref) => (React__default.createElement(CustomInput, Object.assign({}, props)))), onDayPickerHide: () => {
isDatePickerShown.current = false;
}, onDayPickerShow: () => {
isDatePickerShown.current = true;
}, dayPickerProps: {
month: month,
className: 'picker',
selectedDays: pickedDate,
canChangeMonth: true,
enableOutsideDaysClick: isStatic ? false : true,
firstDayOfWeek: 1,
captionElement: CaptionElement,
disabledDays: disabledDays || undefined,
modifiers: modifiers,
}, format: displayDateFormat || defaultDateFormatString, formatDate: formatPickerDate, hideOnDayClick: isStatic ? false : true, placeholder: placeholder || '', onDayChange: handleDayChanged, showOverlay: isStatic })));
};
const StyledIconText = styled.div `
display: flex;
align-items: center;
--font-weight-lg: ${theme.sizes.fwBold};
--font-weight-md: ${theme.sizes.fwRegular};
--font-weight-sm: ${theme.sizes.fwRegular};
&[data-icon-position='left'] {
& > *:first-child {
margin-right: 8px;
}
& > *:last-child {
width: calc(100% - 24px);
}
}
&[data-icon-position='right'] {
& > *:first-child {
width: calc(100% - 24px);
}
& > *:last-child {
margin-left: 8px;
}
}
${MediaQueries.mbDown} {
&[data-size='lg'] {
font-size: 16px;
line-height: 24px;
font-weight: var(--font-weight-lg);
}
&[data-size='md'] {
font-size: 14px;
line-height: 22px;
font-weight: var(--font-weight-md);
}
&[data-size='sm'] {
font-size: 13px;
line-height: 20px;
font-weight: var(----font-weight-sm);
}
}
`;
const IconText = ({ size, iconPosition, className, children, icon: Icon, }) => {
return (React__default.createElement(StyledIconText, { className: className, "data-size": size, "data-icon-position": iconPosition },
iconPosition === 'left' && Icon,
children,
iconPosition === 'right' && Icon));
};
const RadioGroup = React__default.forwardRef(({ id, value, options, className, isDisabled, size: sizeProp = 'small', direction = 'vertical', onChange, dataEventCategory, dataEventAction, dataEventLabel, }, ref) => {
const [check, setCheck] = useState(value);
useImperativeHandle(ref, () => ({
reset() {
setCheck(value);
},
}));
const handleOnChange = (v) => {
setCheck(v);
onChange === null || onChange === void 0 ? void 0 : onChange(v);
};
const size = sizeProp === 'small' ? 'md' : 'lg';
const DirectionComp = direction === 'vertical' ? Stack : Group;
return (React__default.createElement(Radio.Group, { name: id, className: className, size: size, value: String(check), defaultValue: value, onChange: handleOnChange },
React__default.createElement(DirectionComp, { spacing: "xl" }, options.map((option) => (React__default.createElement(Radio, { key: option.value, value: option.value, label: option.label, disabled: isDisabled, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }))))));
});
const StyledSideMenu = styled.div `
--menu-width: 240px;
--menu-spacing: 28px 16px;
width: var(--menu-width);
height: 100vh;
padding: var(--menu-spacing);
background-color: ${theme.colors.neutral50};
transition: ease-in-out 0.5s;
&[data-is-collapsed] {
--menu-width: 64px;
--menu-spacing: 28px 8px;
}
`;
const SideMenu = ({ isCollapsed, className, style, children }) => {
return (React__default.createElement(StyledSideMenu, { style: style, className: className, "data-is-collapsed": isCollapsed || undefined }, children));
};
const StyledSideHeader = styled.div `
display: flex;
align-items: baseline;
justify-content: space-between;
svg {
transition: 0.4s ease-in-out;
}
`;
const StyledArrow = styled.div `
cursor: pointer;
&[data-is-collapsed] {
transform: rotate(180deg);
}
`;
const SideHeader = ({ isCollapsed, defaultLogo, onBackClick, customIcon, }) => {
return (React__default.createElement(StyledSideHeader, null,
React__default.createElement(Logo, { type: isCollapsed ? 'logomark' : defaultLogo || 'hellocare', customSize: {
width: isCollapsed ? '24px' : '77px',
height: '24px',
} }),
React__default.createElement(StyledArrow, { "data-is-collapsed": isCollapsed || undefined, onClick: onBackClick }, customIcon ? (customIcon) : (React__default.createElement("svg", { "data-name": "Layer 1", viewBox: "0 0 20 20", width: "20px", height: "20px" },
React__default.createElement("path", { d: "M10 .75A9.25 9.25 0 1019.25 10 9.25 9.25 0 0010 .75z", fill: "none", stroke: "#d2d6dc", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }),
React__default.createElement("path", { d: "M11.44 6.53L8 10l3.48 3.47", fill: "none", stroke: "#737373", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }))))));
};
const StyledDoctorInfo = styled.figure `
display: flex;
> img,
svg,
picture {
width: 40px;
height: 40px;
margin-right: 1rem;
border-radius: 6px;
object-fit: cover;
}
> figcaption {
p + p {
margin-top: 2px;
}
}
`;
const DoctorInfo = ({ name, description, image, isDescriptionHidden, }) => {
return (React__default.createElement(StyledDoctorInfo, null,
image,
!isDescriptionHidden && (React__default.createElement("figcaption", null,
React__default.createElement(Text, { size: "p4", weight: "bold" }, name),
React__default.createElement(Text, { size: "p4" }, description)))));
};
const StyledUserInfo = styled.div `
display: flex;
align-items: center;
margin-top: 24px;
margin-bottom: 36px;
figcaption {
white-space: nowrap;
}
&[data-is-collapsed='true'] {
img {
max-width: 2rem;
max-height: 2rem;
}
}
`;
const UserInfo = ({ isCollapsed, userName, role, avatar }) => {
return (React__default.createElement(StyledUserInfo, { "data-is-collapsed": isCollapsed || undefined },
React__default.createElement(DoctorInfo, { image: avatar, name: userName, description: role, isDescriptionHidden: isCollapsed })));
};
const StyledMenuLink = styled.div `
display: flex;
align-items: center;
padding: 9px 21px;
margin-bottom: 4px;
border-radius: 6px;
&:not([data-is-link-active]) {
cursor: pointer;
}
p {
margin-left: 12px;
}
&[data-is-link-active] {
background: ${theme.colors.primaryBase};
}
&[data-is-link-collapsed] {
justify-content: center;
margin-right: -14px;
margin-left: -14px;
}
`;
const MenuLink = ({ icon, isActive, children, isCollapsed, activeIcon, onLinkClick, textSize = 'base', textType = 'bold', textColorActive = '#fff', textColor = '#595959', }) => {
return (React__default.createElement(StyledMenuLink, { "data-is-link-active": isActive || undefined, onClick: onLinkClick, "data-is-link-collapsed": isCollapsed || undefined },
!(isActive && activeIcon) ? icon : activeIcon,
!isCollapsed && (React__default.createElement(Text, { size: textSize, weight: textType, color: isActive ? textColorActive : textColor }, children))));
};
var index$1 = /*#__PURE__*/Object.freeze({
__proto__: null,
SideMenu: SideMenu,
SideHeader: SideHeader,
UserInfo: UserInfo,
MenuLink: MenuLink
});
const StyledScrollList = styled.div `
position: relative;
width: 100%;
> .container {
display: flex;
width: 100%;
-ms-overflow-style: none;
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.section {
display: flex;
width: 100%;
flex-direction: column;
flex-shrink: 0;
margin: auto;
> .grid-layout {
display: grid;
width: 100%;
grid-row-gap: 8px;
> .item-grid {
width: 100%;
> * {
margin: 0 auto;
}
}
}
.progress-bar {
display: grid;
height: 15px;
margin-bottom: 10px;
.items-progress {
position: relative;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
.icon-status {
position: absolute;
display: flex;
}
.line {
width: 50%;
height: 2px;
background-color: ${theme.colors.gray600};
}
}
}
}
}
.bullet-nav {
position: absolute;
z-index: ${theme.zIndexes.belowHeader};
bottom: -30px;
left: 50%;
display: flex;
transform: translate(-50%, -50%);
}
.bullet-nav__link {
display: block;
width: 8px;
height: 8px;
padding: 0;
margin-right: 8px;
backface-visibility: hidden;
background-color: #e4e8ec;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
&.active {
&[data-scheme='hellosites'] {
background-color: ${theme.colors.primary600};
}
&[data-scheme='marrybaby'] {
background-color: ${theme.mbColors.pink};
}
}
}
.arrow-left {
position: absolute;
z-index: 10;
top: 50%;
left: -35px;
transform: translateY(-50%);
&[data-event-category] > * {
pointer-events: none;
}
}
.arrow-right {
position: absolute;
z-index: 10;
top: 50%;
right: -35px;
transform: translateY(-50%);
&[data-event-category] > * {
pointer-events: none;
}
}
.image-gallery-wrapper {
display: flex;
position: relative;
margin-top: 16px;
justify-content: center;
gap: 16px;
.image-block {
display: block;
width: 100%;
border: 2px solid transparent;
border-radius: 4px;
}
.image-block.active {
border-color: ${theme.colors.primaryBase};
}
img {
height: 40px;
width: auto;
max-width: 100%;
}
}
`;
const RenderIconStatus = ({ status }) => {
if (status === 'inActive') {
return (React__default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none" },
React__default.createElement("circle", { cx: "3", cy: "3", r: "3", fill: "#ADB3BC" })));
}
else if (status === 'active') {
return (React__default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
React__default.createElement("circle", { cx: "6", cy: "6", r: "4", fill: "#2D87F3" }),
React__default.createElement("circle", { cx: "6", cy: "6", r: "5.5", stroke: "#2D87F3" })));
}
else if (status === 'done') {
return (React__default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
React__default.createElement("path", { d: "M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z", fill: "#00B16A" }),
React__default.createElement("path", { d: "M8.76061 4.20029L4.80061 7.80029L3.00061 6.16392", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
}
return (React__default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none" },
React__default.createElement("circle", { cx: "3", cy: "3", r: "3", fill: "#ADB3BC" })));
};
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const ScrollList = ({ row = 2, column = 3, isDotsShown = true, isImageGalleryShown = false, mode = 'infinity', type = 'separated', distanceOverlappedLeft = {
amount: 0,
unit: 'pixel',
}, children, className, isProgressShown = false, statusChildren, isArrowShown = false, classNameLeftArrow, classNameRightArrow, dataEventCategory, dataEventAction, dataEventLabel, onChangePage, page, customPageWidth, scheme = 'hellosites', arrowType = 'Discover', }) => {
const hasPageProps = typeof page === 'number';
const [section, setSection] = useState(hasPageProps ? page : 0);
//Create groups
const groups = [];
React__default.Children.map(children, (element, idx) => {
if (idx % (row * column) === 0) {
groups.push([]);
}
groups[groups.length - 1].push(React__default.cloneElement(element));
});
const scrollRef = useRef();
const currentPage = useRef(0);
const scrollToPage = (index) => {
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const distance = type === 'intertwined'
? distanceOverlappedLeft.unit === 'percentage'
? index * pageWidth +
(distanceOverlappedLeft.amount / 100) * pageWidth * index
: index * pageWidth +
distanceOverlappedLeft.amount * pageWidth * index
: index * pageWidth;
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
currentPage.current = index;
setSection(index);
};
const handleClick = (index) => {
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const distance = type === 'intertwined'
? distanceOverlappedLeft.unit === 'percentage'
? index * pageWidth +
(distanceOverlappedLeft.amount / 100) * pageWidth * index
: index * pageWidth +
distanceOverlappedLeft.amount * pageWidth * index
: index * pageWidth;
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
currentPage.current = index;
setSection(index);
onChangePage && onChangePage(index);
};
useEffect(() => {
if (typeof page === 'number')
scrollToPage(page);
}, [page]);
const handleClickArrow = (type) => {
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
let distance;
section === 0 ? (distance = 0) : (distance = section * pageWidth);
if (type === 'forward') {
if (distance === pageWidth * (groups.length - 1)) {
setSection(groups.length - 1);
distance = pageWidth * (groups.length - 1);
onChangePage && onChangePage(groups.length - 1);
}
else {
setSection(section + 1);
distance += pageWidth;
onChangePage && onChangePage(section + 1);
}
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
}
if (type === 'back') {
if (distance === 0) {
setSection(0);
onChangePage && onChangePage(0);
distance = 0;
}
else {
setSection(section - 1);
onChangePage && onChangePage(section - 1);
distance -= pageWidth;
}
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
}
};
const handleScroll = () => {
if (mode === 'infinity') {
if (!scrollRef.current)
return;
const { clientWidth, scrollLeft } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const page = Math.floor(scrollLeft / pageWidth);
setSection(page);
onChangePage && onChangePage(page);
}
};
const handleScrollThrottle = throttle(handleScroll, 400);
useEffect(() => {
if (mode === 'snapped') {
let isDown = false;
let startX;
let startY;
let isSlidingY;
let isSlidingX;
let scrollLeft;
let direction;
const slider = scrollRef.current;
const start = (pageX, pageY) => {
isDown = true;
isSlidingY = false;
isSlidingX = false;
startX = pageX - slider.offsetLeft;
startY = pageY - slider.offsetTop;
scrollLeft = slider.scrollLeft;
};
const startMouse = (e) => {
start(e.pageX, e.pageY);
};
const startTouch = (e) => {
start(e.touches[0].pageX, e.touches[0].pageY);
};
const end = () => {
isDown = false;
isSlidingY = false;
isSlidingX = false;
if (!scrollRef.current)
return;
const { clientWidth } = scrollRef.current;
const pageWidth = customPageWidth || clientWidth;
const page = direction === 'ltr'
? currentPage.current !== 0
? currentPage.current - 1
: currentPage.current
: direction === 'rtl'
? currentPage.current < groups.length - 1
? currentPage.current + 1
: currentPage.current
: currentPage.current;
const distance = type === 'intertwined'
? distanceOverlappedLeft.unit === 'percentage'
? page * pageWidth +
(distanceOverlappedLeft.amount / 100) * pageWidth * page
: page * pageWidth +
distanceOverlappedLeft.amount * pageWidth * page
: page * pageWidth;
scrollRef.current.scrollTo({
top: 0,
left: distance,
behavior: 'smooth',
});
direction = 'none';
if (currentPage.current !== page) {
currentPage.current = page;
setSection(page);
onChangePage && onChangePage(page);
}
};
const move = (pageX, pageY) => {
if (!isDown)
return;
const x = pageX - slider.offsetLeft;
const y = pageY - slider.offsetTop;
const walkX = x - startX;
const walkY = y - startY;
if (!isSlidingY && !isSlidingX && (walkY > 20 || walkY < -20)) {
isSlidingY = true;
}
if (!isSlidingY && (walkX > 20 || walkX < -20)) {
isSlidingX = true;
slider.scrollLeft = scrollLeft - walkX;
if (walkX > 0) {
direction = 'ltr';
}
if (walkX < 0) {
direction = 'rtl';
}
if (walkX === 0) {
direction = 'none';
}
}
};
const moveMouse = (e) => {
if (isSlidingX) {
e.preventDefault();
}
move(e.pageX, e.pageY);
};
const moveTouch = (e) => {
if (isSlidingX) {
e.preventDefault();
}
move(e.touches[0].pageX, e.touches[0].pageY);
};
slider === null || slider === void 0 ? void 0 : slider.addEventListener('mousedown', startMouse, {
passive: true,
});
slider === null || slider === void 0 ? void 0 : slider.addEventListener('touchstart', startTouch, {
passive: true,
});
window.addEventListener('mouseup', end, {
passive: true,
});
window.addEventListener('touchend', end, {
passive: true,
});
slider === null || slider === void 0 ? void 0 : slider.addEventListener('mousemove', moveMouse, {
passive: true,
});
slider === null || slider === void 0 ? void 0 : slider.addEventListener('touchmove', moveTouch, {
passive: true,
});
return () => {
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('mousedown', startMouse);
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('touchstart', startTouch);
window.removeEventListener('mouseup', end);
window.removeEventListener('touchend', end);
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('mousemove', moveMouse);
slider === null || slider === void 0 ? void 0 : slider.removeEventListener('touchmove', moveTouch);
};
}
}, []);
return (React__default.createElement(StyledScrollList, { className: className, "data-row": row, onScroll: handleScrollThrottle },
isArrowShown && section > 0 && (React__default.createElement("div", { className: `${classNameLeftArrow} arrow-left`, onClick: () => handleClickArrow('back'), "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, arrowType === 'Care' ? (React__default.createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" },
React__default.createElement("g", { filter: "url(#filter0_dd_12599_34420)" },
React__default.createElement("path", { d: "M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3V3C31.8368 3 39.0002 10.1634 39.0002 19V19C39.0002 27.8366 31.8368 35 23.0002 35V35C14.1637 35 7.00024 27.8366 7.00024 19V19Z", fill: "white" }),
React__default.createElement("path", { d: "M20.9293 19L24.7503 15.179C25.1643 14.765 25.1643 14.093 24.7503 13.679C24.3363 13.265 23.6643 13.265 23.2503 13.679L18.6363 18.293C18.2453 18.684 18.2453 19.317 18.6363 19.707L23.2503 24.321C23.6643 24.735 24.3363 24.735 24.7503 24.321C25.1643 23.907 25.1643 23.235 24.7503 22.821L20.9293 19Z", fill: "#595959" }),
React__default.createElement("path", { d: "M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0002 4C31.2845 4 38.0002 10.7157 38.0002 19H40.0002C40.0002 9.61116 32.3891 2 23.0002 2V4ZM23.0002 2C13.6114 2 6.00024 9.61116 6.00024 19H8.00024C8.00024 10.7157 14.716 4 23.0002 4V2Z", fill: "#DBDFE5" })),
React__default.createElement("defs", null,
React__default.createElement("filter", { id: "filter0_dd_12599_34420", x: "0.000244141", y: "0", width: "42", height: "42", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
React__default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
React__default.createElement("feOffset", { dx: "-2", dy: "2" }),
React__default.createElement("feGaussianBlur", { stdDeviation: "2.5" }),
React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.263201 0 0 0 0 0.335725 0 0 0 0 0.393257 0 0 0 0.123689 0" }),
React__default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_12599_34420" }),
React__default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
React__default.createElement("feOffset", { dx: "-1", dy: "1" }),
React__default.createElement("feGaussianBlur", { stdDeviation: "1" }),
React__default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.264489 0 0 0 0 0.275745 0 0 0 0 0.28861 0 0 0 0.01 0" }),
React__default.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_12599_34420", result: "effect2_dropShadow_12599_34420" }),
React__default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_12599_34420", result: "shape" }))))) : (React__default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none" },
React__default.createElement("path", { d: "M15.9996 28.2218C22.7497 28.2218 28.2218 22.7497 28.2218 15.9996C28.2218 9.24942 22.7497 3.77734 15.9996 3.77734C9.24942 3.77734 3.77734 9.24942 3.77734 15.9996C3.77734 22.7497 9.24942 28.2218 15.9996 28.2218Z", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
React__default.createElement("path", { d: "M15.9997 11.1109L11.1108 15.9998L15.9997 20.8887", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
React__default.createElement("path", { d: "M20.8886 15.999L11.1108 15.999", stroke: scheme === 'hellosites' ? '#2D87F3' : '#e85388', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))),
React__default.createElement("div", { ref: scrollRef, className: "container", style: {
overflowX: mode === 'snapped' || isArrowShown ? 'hidden' : 'scroll',
} }, groups.map((group, groupIndex) => {
let baseIndex = 0;
for (let i = 0; i < groupIndex; i++) {
baseIndex += groups[i].length;
}
return (React__default.createElement("div", { key: groupIndex, className: "section", style: {
marginLeft: type === 'intertwined' && groupIndex !== 0
? distanceOverlappedLeft.amount +
'' +
(distanceOverlappedLeft.unit === 'percentage'
? '%'
: 'px')
: '0px',
} },
row === 1 && isProgressShown && (React__default.createElement("div", { className: "progress-bar", style: {
gridTemplateColumns: `repeat(${column}, 1fr)`,
} }, group.map((item, itemIndex) => {
const realIndex = baseIndex + itemIndex;
const foundStatusItem = statusChildren.find((statusItem) => statusItem.index === realIndex);
return (React__default.createElement("div", { className: "items-progress", key: itemIndex },
itemIndex === 0 && groupIndex === 0 ? (React__default.createElement("div", { className: "line", style: { visibility: 'hidden' } })) : (React__default.createElement("div", { className: "line" })),
React__default.createElement("div", { className: "icon-status" },
React__default.createElement(RenderIconStatus, { status: foundStatusItem === null || foundStatusItem === void 0 ? void 0 : foundStatusItem.status })),
groupIndex === groups.length - 1 &&
itemIndex === group.length - 1 ? (React__default.createElement("div", { className: "line", style: { visibility: 'hidden' } })) : (React__default.createElement("div", { className: "line" }))));
}))),
React__default.createElement("div", { className: "grid-layout", "data-index": groupIndex, style: {
gridTemplateColumns: `repeat(${column}, 1fr)`,
gridTemplateRows: `repeat(${row}, 1fr)`,
} }, group.map((item, itemIndex) => (React__default.createElement(React__default.Fragment, { key: itemIndex },
React__default.createElement("div", { className: "item-grid", key: itemIndex }, item)))))));
})),
isArrowShown && section < groups.length - 1 && (React__default.createElement("div", { className: `${classNameRightArrow} arrow-right`, onClick: () => handleClickArrow('forward'), "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel },
' ',
arrowType === 'Care' ? (React__default.createElement("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" },
React__default.createElement("g", { filter: "url(#filter0_dd_12597_34423)" },
React__default.createElement("path", { d: "M7.00024 19C7.00024 10.1634 14.1637 3 23.0002 3C31.8368 3 39.0002 10.1634 39.0002 19C39.0002 27.8366 31.8368 35 23.0002 35C14.1637 35 7.00024 27.8366 7.00024 19Z", fill: "white" }),
React__default.createElement("path", { d: "M24.0712 19L20.2502 15.179C19.8362 14.765 19.8362 14.093 20.2502 13.679C20.6642 13.265 21.3362 13.265 21.7502 13.679L26.3642 18.293C26.7552 18.684 26.7552 19.317 26.3642 19.707L21.7502 24.321C21.3362 24.735 20.6642 24.735 20.2502 24.321C19.8362 23.907 19.8362 23.235 20.2502 22.821L24.0712 19Z", fill: "#595959" }),
React__default.createElement("path", { d: "M23.0002 34C14.716 34 8.00024 27.2843 8.00024 19H6.00024C6.00024 28.3888 13.6114 36 23.0002 36V34ZM38.0002 19C38.0002 27.2843 31.2845 34 23.0002 34V36C32.3891 36 40.0002 28.3888 40.0002 19H38.0002ZM23.0