@hhgtech/hhg-components
Version:
Hello Health Group common components
157 lines (150 loc) • 7.95 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-ea4dfe68.js';
import React__default, { useState, useEffect } from 'react';
import { notifications, Notifications } from '@mantine/notifications';
import { Z as ZINDEX_SSO } from './index-5e947517.js';
import { em } from '@mantine/core';
import { S as Screens, M as MediaQueries } from './utils-cb7242c7.js';
import { O as OTHER_THEME_CONFIG } from './other-4ccb5568.js';
import dayjs from 'dayjs';
import './index-90813715.js';
import { L as LOCALE } from './Locale-f270bd9d.js';
const DangerIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default.createElement("path", { d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10", fill: "#262626" }),
React__default.createElement("path", { d: "m14.829 9.172-5.657 5.656m-.001-5.656 5.657 5.656", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const InfoIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default.createElement("path", { d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12", fill: "#2D87F3" }),
React__default.createElement("path", { d: "M8 11V8m0-3h.01", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const SuccessIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default.createElement("path", { d: "M10 18.333a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666", fill: "#00B16A" }),
React__default.createElement("path", { d: "m13.833 7.5-5.5 5-2.5-2.273", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const WarningIcon = () => (React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1.66666C5.4 1.66666 1.66667 5.39999 1.66667 9.99999C1.66667 14.6 5.4 18.3333 10 18.3333C14.6 18.3333 18.3333 14.6 18.3333 9.99999C18.3333 5.39999 14.6 1.66666 10 1.66666ZM10 10.8333C9.54167 10.8333 9.16667 10.4583 9.16667 9.99999V6.66666C9.16667 6.20832 9.54167 5.83332 10 5.83332C10.4583 5.83332 10.8333 6.20832 10.8333 6.66666V9.99999C10.8333 10.4583 10.4583 10.8333 10 10.8333ZM9.16667 12.5V14.1667H10.8333V12.5H9.16667Z", fill: "#FE921D" })));
function NotificationsHandler() {
return (React__default.createElement(Notifications, { position: "top-right", zIndex: ZINDEX_SSO + 5, autoClose: 5000 }));
}
const MappingColor = {
success: 'green',
danger: 'red',
warning: 'yellow',
info: 'blue',
firebase: 'gray',
};
const MappingIcon = {
success: React__default.createElement(SuccessIcon, null),
danger: React__default.createElement(DangerIcon, null),
warning: React__default.createElement(WarningIcon, null),
info: React__default.createElement(InfoIcon, null),
firebase: '',
};
const showNotification = (_a) => {
var { type, title } = _a, rest = __rest(_a, ["type", "title"]);
const icon = MappingIcon[type];
// Most used notification props
notifications.show(Object.assign(Object.assign({ title: React__default.createElement("b", null, title), icon, withCloseButton: true, closeButtonProps: {
label: 'Close alert',
} }, rest), { styles: (theme) => {
const mapColor = MappingColor[type] || 'blue';
return {
root: {
backgroundColor: theme.colors[mapColor][0],
borderColor: theme.colors[mapColor][0],
'&::before': { backgroundColor: theme.white },
},
title: { color: theme.colors[mapColor][8] },
description: { color: theme.black },
closeButton: {
color: theme.black,
'&:hover': {
backgroundColor: theme.colors[mapColor][0],
},
},
icon: {
backgroundColor: 'transparent',
padding: 0,
},
};
} }));
};
const GlobalContainerStyle = {
Container: {
defaultProps: {
sizes: {
lg: em(Screens.LG),
},
},
},
};
const headingStyles = [
{ size: '40px', lineHeight: '52px', letterSpacing: '-1.2px' },
{ size: '32px', lineHeight: '42px', letterSpacing: '-1px' },
{ size: '26px', lineHeight: '36px', letterSpacing: '-0.8px' },
{ size: '22px', lineHeight: '32px', letterSpacing: '-0.6px' },
{ size: '18px', lineHeight: '28px', letterSpacing: '-0.2px' },
{ size: '16px', lineHeight: '24px', letterSpacing: 0 },
];
const headingStylesMBDown = [
{ size: '26px', lineHeight: '34px', letterSpacing: '-0.9px' },
{ size: '24px', lineHeight: '32px', letterSpacing: '-0.8px' },
{ size: '20px', lineHeight: '26px', letterSpacing: '-0.7px' },
{ size: '18px', lineHeight: '26px', letterSpacing: '-0.6px' },
{ size: '16px', lineHeight: '24px', letterSpacing: '-0.2px' },
{ size: '14px', lineHeight: '22px', letterSpacing: '-0.2px' },
];
const getHeadingStyles = (mbDown = false) => Object.fromEntries((mbDown ? headingStylesMBDown : headingStyles).map((style, index) => [
`h${index + 1}`,
{
fontSize: style.size,
lineHeight: style.lineHeight,
letterSpacing: style.letterSpacing,
},
]));
const GlobalHeadingStyle = {
Title: {
styles: {
root: Object.assign(Object.assign({ fontWeight: OTHER_THEME_CONFIG.fontWeight.bold }, getHeadingStyles()), { [`&${MediaQueries.mbDown}`]: Object.assign({}, getHeadingStyles(true)) }),
},
},
};
// Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
const MAPPED_LOCALE = {
[LOCALE.Vietnam]: 'vi',
[LOCALE.Cambodia]: 'km',
[LOCALE.India]: 'hi',
[LOCALE.Indonesia]: 'id',
[LOCALE.Malaysia]: 'ms',
[LOCALE.Thailand]: 'th',
[LOCALE.Taiwan]: 'zh-tw',
[LOCALE.PhilippinesTagalog]: 'tl-ph',
[LOCALE.PhilippinesEnglish]: 'en',
[LOCALE.Myanmar]: 'my',
[LOCALE.China]: 'zh-cn',
};
const LOCALE_LOADERS = {
[LOCALE.Vietnam]: () => import('dayjs/locale/vi.js'),
[LOCALE.Cambodia]: () => import('dayjs/locale/km.js'),
[LOCALE.India]: () => import('dayjs/locale/hi.js'),
[LOCALE.Indonesia]: () => import('dayjs/locale/id.js'),
[LOCALE.Malaysia]: () => import('dayjs/locale/ms.js'),
[LOCALE.Thailand]: () => import('dayjs/locale/th.js'),
[LOCALE.Taiwan]: () => import('dayjs/locale/zh-tw.js'),
[LOCALE.China]: () => import('dayjs/locale/zh-cn.js'),
[LOCALE.PhilippinesTagalog]: () => import('dayjs/locale/tl-ph.js'),
[LOCALE.PhilippinesEnglish]: () => import('dayjs/locale/en.js'),
[LOCALE.Myanmar]: () => import('dayjs/locale/my.js'),
};
const useMantineLocale = (locale) => {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
(() => __awaiter(void 0, void 0, void 0, function* () {
var _a;
setIsLoaded(false);
yield ((_a = LOCALE_LOADERS[locale]) === null || _a === void 0 ? void 0 : _a.call(LOCALE_LOADERS));
dayjs.locale(MAPPED_LOCALE[locale]);
setIsLoaded(true);
}))();
}, [locale]);
return {
isLoaded,
};
};
export { GlobalHeadingStyle as G, MAPPED_LOCALE as M, NotificationsHandler as N, GlobalContainerStyle as a, getHeadingStyles as g, showNotification as s, useMantineLocale as u };