@hhgtech/hhg-components
Version:
Hello Health Group common components
416 lines (405 loc) • 16.6 kB
JavaScript
'use strict';
var React = require('react');
var Locale = require('./Locale-59ccf941.js');
var index = require('./index-db44e8cb.js');
var styled = require('@emotion/styled');
var utils = require('./utils-7ba0038a.js');
var logoIcon = require('./logoIcon-40dae106.js');
require('./index-ad7155cf.js');
var useScreenSize = require('./useScreenSize-30f50b76.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const StyledLogo = styled__default["default"].div `
position: relative;
display: inline-flex;
align-items: center;
z-index: 0;
.main-logo-icon {
object-fit: contain;
}
&[data-logo-is-light] {
> svg path {
fill: #fff;
}
img {
filter: brightness(0) invert(1);
}
}
&[data-has-badge] {
@supports (display: flex) and (gap: 1em) {
gap: 0.5rem;
}
@supports not ((display: flex) and (gap: 1em)) {
> img {
margin-left: 0.25rem;
}
}
}
.common-logo-seasonal-left,
.common-logo-seasonal-right {
z-index: -1;
max-width: unset;
max-height: unset;
pointer-events: none;
}
.common-logo-seasonal-left {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.common-logo-seasonal-right {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
&[data-seasonal='christmas'] {
padding-left: 37px;
padding-right: 22px;
.common-logo-seasonal-left {
width: 125px;
height: 56px;
}
.common-logo-seasonal-right {
width: 23px;
height: 17px;
}
${utils.MediaQueries.mbDown} {
padding-left: 30px;
padding-right: 16px;
.common-logo-seasonal-left {
// width: 125px;
height: 46px;
}
.common-logo-seasonal-right {
// width: 23px;
height: 12px;
}
}
}
&[data-seasonal='new-year'] {
padding-right: 85px;
.common-logo-seasonal-left {
top: 35%;
width: 100px;
height: 56px;
}
.common-logo-seasonal-right {
width: 85px;
height: 54px;
}
${utils.MediaQueries.mbDown} {
padding-right: 0;
.common-logo-seasonal-right {
display: none;
}
}
}
&[data-seasonal='lunar-new-year'] {
padding-left: 30px;
padding-right: 35px;
.common-logo-seasonal-left {
width: 33px;
height: 41px;
}
.common-logo-seasonal-right {
width: 37px;
height: 54px;
}
}
&[data-seasonal='ramadan'] {
&[data-type='hellosehat'] {
padding-right: 35px;
.common-logo-seasonal-left {
width: 165px;
height: unset;
left: 6px;
}
.common-logo-seasonal-right {
width: 33px;
height: unset;
}
}
&[data-type='hellodoktor'] {
padding-right: 66px;
.common-logo-seasonal-left {
width: 133px;
height: unset;
left: 6px;
}
.common-logo-seasonal-right {
width: 63px;
height: unset;
}
}
}
&[data-seasonal='hung-king'] {
&[data-type='hellobacsi'] {
.common-logo-seasonal-left {
width: 134px;
height: unset;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
&[data-type='marryBaby'] {
.common-logo-seasonal-left {
width: 145px;
height: unset;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
&[data-seasonal='vn-independent-day'] {
&[data-type='hellobacsi'],
&[data-type='marryBaby'] {
.common-logo-seasonal-left.desktop-only {
width: unset;
height: 56px;
left: 65%;
top: 50%;
transform: translate(-50%, -50%);
}
}
&[data-type='marryBaby'] {
.common-logo-seasonal-left.desktop-only {
left: 50%;
z-index: 1;
}
}
&[data-type='hellobacsi'],
&[data-type='marryBaby'] {
.common-logo-seasonal-left.mobile-only {
width: unset;
height: 56px;
left: 60%;
top: 50%;
transform: translate(-50%, -50%);
}
}
&[data-type='marryBaby'] {
.common-logo-seasonal-left.mobile-only {
left: 40%;
z-index: 1;
}
}
}
.desktop-only {
${utils.MediaQueries.mbDown} {
display: none;
}
}
.mobile-only {
${utils.MediaQueries.mbUp} {
display: none;
}
}
`;
const StyledProLogo = styled__default["default"].img `
height: 16px;
width: unset;
margin-bottom: 4px;
margin-left: -3px;
`;
const isChristmas = (date) => {
const day = date.getDate();
const month = date.getMonth();
return month === 11 && day >= 16 && day <= 25;
};
const LunarNewYearMapping = {
2023: [22, 0],
2024: [10, 1],
2025: [29, 0],
2026: [17, 1],
2027: [6, 1],
2028: [26, 0],
2029: [13, 1],
2030: [3, 1],
2031: [23, 0],
2032: [11, 1],
2033: [31, 0],
2034: [19, 1],
2035: [8, 1],
2036: [28, 0],
2037: [15, 1],
2038: [4, 1],
2039: [24, 0],
2040: [12, 1],
};
const LunarNewYearLocale = [
Locale.LOCALE.Vietnam,
Locale.LOCALE.Taiwan,
Locale.LOCALE.Indonesia,
Locale.LOCALE.Malaysia,
];
const isLunarNewYear = (date) => {
const year = date.getFullYear();
const currentLunarMap = LunarNewYearMapping[year];
if (!currentLunarMap)
return false;
const currentLunarDate = new Date(year, currentLunarMap[1], currentLunarMap[0]);
const startLunarDate = new Date(currentLunarDate);
startLunarDate.setDate(currentLunarDate.getDate() - 7);
const endLunarDate = new Date(currentLunarDate);
endLunarDate.setDate(currentLunarDate.getDate() + 5);
return startLunarDate <= date && date <= endLunarDate;
};
const isNewYear = (date) => {
const day = date.getDate();
const month = date.getMonth();
return (month === 11 && day >= 26) || (month === 0 && day <= 15);
};
const RamadanYearMapping = [
{ year: 2024, start: [10, 2], end: [8, 3] },
{ year: 2025, start: [1, 2], end: [30, 2] },
{ year: 2026, start: [18, 1], end: [19, 2] },
{ year: 2027, start: [8, 1], end: [9, 2] },
{ year: 2028, start: [28, 0], end: [26, 1] },
{ year: 2029, start: [16, 0], end: [14, 1] },
{ year: 2030, start: [6, 0], end: [4, 1] },
{ year: 2030, start: [26, 11], end: [24, 0, 2031] },
{ year: 2031, start: [15, 11], end: [13, 0, 2032] },
{ year: 2032, start: [4, 11], end: [2, 0, 2033] },
];
const isRamadan = (date) => {
const year = date.getFullYear();
const currentRamadanMaps = RamadanYearMapping.filter((ramadan) => ramadan.year === year);
if (!currentRamadanMaps.length)
return false;
return currentRamadanMaps.some((currentRamadanMap) => {
const ramadanYear = currentRamadanMap.start[2] || year;
const startRamadanDate = new Date(ramadanYear, currentRamadanMap.start[1], currentRamadanMap.start[0]);
const endRamadanDate = new Date(ramadanYear, currentRamadanMap.end[1], currentRamadanMap.end[0]);
return startRamadanDate <= date && date <= endRamadanDate;
});
};
const VNHungKingMapping = {
2024: [18, 3],
2025: [7, 3],
2026: [26, 3],
2027: [16, 3],
2028: [4, 3],
2029: [23, 3],
2030: [12, 3],
2031: [1, 3],
2032: [19, 3],
2033: [9, 3],
2034: [28, 3],
2035: [17, 3],
};
const isVNHungKing = (date) => {
const year = date.getFullYear();
const currentVNHungKingMap = VNHungKingMapping[year];
if (!currentVNHungKingMap)
return false;
const currentVNHungKingDate = new Date(year, currentVNHungKingMap[1], currentVNHungKingMap[0]);
const startVNHungKingDate = new Date(currentVNHungKingDate);
startVNHungKingDate.setDate(currentVNHungKingDate.getDate() - 1);
const endVNHungKingDate = new Date(currentVNHungKingDate);
endVNHungKingDate.setDate(currentVNHungKingDate.getDate() + 1);
return startVNHungKingDate <= date && date <= endVNHungKingDate;
};
const isVN3004 = (date) => {
const year = date.getFullYear();
const currentVN3004 = new Date(year, 3, 30);
const start = new Date(currentVN3004);
start.setDate(currentVN3004.getDate() - 1);
const end = new Date(currentVN3004);
end.setDate(currentVN3004.getDate() + 2);
return start <= date && date <= end;
};
const isLabourDay = (date) => {
const year = date.getFullYear();
const current = new Date(year, 4, 1);
const start = new Date(current);
start.setDate(current.getDate() - 1);
const end = new Date(current);
end.setDate(current.getDate() + 1);
return start <= date && date <= end;
};
const isVNIndependentDay = (date) => {
const year = date.getFullYear();
const current = new Date(year, 8, 2);
const start = new Date(current);
start.setDate(current.getDate() - 1);
const end = new Date(current);
end.setDate(current.getDate() + 3);
return start <= date && date <= end;
};
const Logo = ({ type, className, style, isLightLogo, customSize, badge, locale, dateForSeasonal, isPro, }) => {
const [seasonalChecks, setSeasonalChecks] = React.useState({
isChristmas: false,
isLunarNewYear: false,
isNewYear: false,
isRamadan: false,
isVNHungKing: false,
isVN3004: false,
isLabourDay: false,
isVNIndependentDay: false,
});
React.useEffect(() => {
if (!dateForSeasonal || isNaN(new Date(dateForSeasonal).getTime()))
return;
const dateForSeasonalDate = new Date(dateForSeasonal);
const isChristmasMemo = isChristmas(dateForSeasonalDate);
const isLunarNewYearMemo = LunarNewYearLocale.includes(locale) && isLunarNewYear(dateForSeasonalDate);
const isNewYearMemo = !isLunarNewYearMemo && isNewYear(dateForSeasonalDate);
const isRamadanMemo = isRamadan(dateForSeasonalDate);
const isVNHungKingMemo = locale === Locale.LOCALE.Vietnam && isVNHungKing(dateForSeasonalDate);
const isVN3004Memo = locale === Locale.LOCALE.Vietnam && isVN3004(dateForSeasonalDate);
const isLabourDayMemo = locale === Locale.LOCALE.Vietnam && isLabourDay(dateForSeasonalDate);
const isVNIndependentDayMemo = locale === Locale.LOCALE.Vietnam && isVNIndependentDay(dateForSeasonalDate);
setSeasonalChecks({
isChristmas: isChristmasMemo,
isLunarNewYear: isLunarNewYearMemo,
isNewYear: isNewYearMemo,
isRamadan: isRamadanMemo,
isVNHungKing: isVNHungKingMemo,
isVN3004: isVN3004Memo,
isLabourDay: isLabourDayMemo,
isVNIndependentDay: isVNIndependentDayMemo,
});
}, [locale, new Date(dateForSeasonal).getDate()]);
return (React__default["default"].createElement(StyledLogo, { className: className, style: style, "data-logo-is-light": isLightLogo || undefined, "data-has-badge": badge ? true : false, "data-seasonal": seasonalChecks.isRamadan
? 'ramadan'
: seasonalChecks.isChristmas
? 'christmas'
: seasonalChecks.isLunarNewYear
? 'lunar-new-year'
: seasonalChecks.isNewYear
? 'new-year'
: seasonalChecks.isVNHungKing
? 'hung-king'
: seasonalChecks.isVN3004
? '30-04'
: seasonalChecks.isLabourDay
? 'labour-day'
: seasonalChecks.isVNIndependentDay
? 'vn-independent-day'
: undefined, "data-type": type },
seasonalChecks.isChristmas ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "left xmas logo", src: index.CommonGAssets.getAssetPath('logo/xmas-left.png'), className: "common-logo-seasonal-left" }),
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "right xmas logo", src: index.CommonGAssets.getAssetPath('logo/xmas-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isNewYear ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "left new year logo", src: index.CommonGAssets.getAssetPath('logo/new-year-left.png'), className: "common-logo-seasonal-left" }),
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "right new year logo", src: index.CommonGAssets.getAssetPath('logo/new-year-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isLunarNewYear ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "left lunar new year logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/lunar-new-year-left.png'), className: "common-logo-seasonal-left" }),
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "right lunar new year logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/lunar-new-year-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isRamadan && type === 'hellosehat' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "left ramadan logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/ramadan-sehat-left.png'), className: "common-logo-seasonal-left" }),
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "right ramadan logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/ramadan-sehat-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isRamadan && type === 'hellodoktor' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "left ramadan logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/ramadan-doktor-left.png'), className: "common-logo-seasonal-left" }),
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "right ramadan logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/ramadan-doktor-right.png'), className: "common-logo-seasonal-right" }))) : seasonalChecks.isVNHungKing &&
(type === 'hellobacsi' || type === 'marryBaby') ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "Hung King logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/hung-king-bg.png'), className: "common-logo-seasonal-left" }))) : seasonalChecks.isVNIndependentDay &&
(type === 'hellobacsi' || type === 'marryBaby') ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "VN Independent day logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/vn-independence-desktop.png'), className: "common-logo-seasonal-left desktop-only" }),
React__default["default"].createElement(useScreenSize.ImageWrap, { alt: "VN Independent day logo", loading: "lazy", src: index.CommonGAssets.getAssetPath('logo/vn-independence-mobile.png'), className: "common-logo-seasonal-left mobile-only" }))) : null,
React__default["default"].createElement(logoIcon.LogoIcon, { type: type, width: customSize === null || customSize === void 0 ? void 0 : customSize.width, height: customSize === null || customSize === void 0 ? void 0 : customSize.height }),
isPro ? (React__default["default"].createElement(StyledProLogo, { src: index.CommonGAssets.getAssetPath('logo/pro-suffix.svg') })) : null,
badge));
};
exports.Logo = Logo;