@hhgtech/hhg-components
Version:
Hello Health Group common components
188 lines (177 loc) • 9.97 kB
JavaScript
;
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var notifications = require('@mantine/notifications');
var index = require('./index-1ee4ebb8.js');
var core = require('@mantine/core');
var utils = require('./utils-7ba0038a.js');
var other = require('./other-eb0ff2f6.js');
var dayjs = require('dayjs');
require('./index-ad7155cf.js');
var Locale = require('./Locale-59ccf941.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
const DangerIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["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["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["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["default"].createElement("path", { d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12", fill: "#2D87F3" }),
React__default["default"].createElement("path", { d: "M8 11V8m0-3h.01", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
const SuccessIcon = () => (React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["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["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["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
React__default["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["default"].createElement(notifications.Notifications, { position: "top-right", zIndex: index.ZINDEX_SSO + 5, autoClose: 5000 }));
}
const MappingColor = {
success: 'green',
danger: 'red',
warning: 'yellow',
info: 'blue',
firebase: 'gray',
};
const MappingIcon = {
success: React__default["default"].createElement(SuccessIcon, null),
danger: React__default["default"].createElement(DangerIcon, null),
warning: React__default["default"].createElement(WarningIcon, null),
info: React__default["default"].createElement(InfoIcon, null),
firebase: '',
};
const showNotification = (_a) => {
var { type, title } = _a, rest = tslib_es6.__rest(_a, ["type", "title"]);
const icon = MappingIcon[type];
// Most used notification props
notifications.notifications.show(Object.assign(Object.assign({ title: React__default["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: core.em(utils.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.OTHER_THEME_CONFIG.fontWeight.bold }, getHeadingStyles()), { [`&${utils.MediaQueries.mbDown}`]: Object.assign({}, getHeadingStyles(true)) }),
},
},
};
// Available locale list https://cdn.jsdelivr.net/npm/dayjs@1/locale.json
const MAPPED_LOCALE = {
[Locale.LOCALE.Vietnam]: 'vi',
[Locale.LOCALE.Cambodia]: 'km',
[Locale.LOCALE.India]: 'hi',
[Locale.LOCALE.Indonesia]: 'id',
[Locale.LOCALE.Malaysia]: 'ms',
[Locale.LOCALE.Thailand]: 'th',
[Locale.LOCALE.Taiwan]: 'zh-tw',
[Locale.LOCALE.PhilippinesTagalog]: 'tl-ph',
[Locale.LOCALE.PhilippinesEnglish]: 'en',
[Locale.LOCALE.Myanmar]: 'my',
[Locale.LOCALE.China]: 'zh-cn',
};
const LOCALE_LOADERS = {
[Locale.LOCALE.Vietnam]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/vi.js')); }),
[Locale.LOCALE.Cambodia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/km.js')); }),
[Locale.LOCALE.India]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/hi.js')); }),
[Locale.LOCALE.Indonesia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/id.js')); }),
[Locale.LOCALE.Malaysia]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/ms.js')); }),
[Locale.LOCALE.Thailand]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/th.js')); }),
[Locale.LOCALE.Taiwan]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/zh-tw.js')); }),
[Locale.LOCALE.China]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/zh-cn.js')); }),
[Locale.LOCALE.PhilippinesTagalog]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/tl-ph.js')); }),
[Locale.LOCALE.PhilippinesEnglish]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/en.js')); }),
[Locale.LOCALE.Myanmar]: () => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('dayjs/locale/my.js')); }),
};
const useMantineLocale = (locale) => {
const [isLoaded, setIsLoaded] = React.useState(false);
React.useEffect(() => {
(() => tslib_es6.__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__default["default"].locale(MAPPED_LOCALE[locale]);
setIsLoaded(true);
}))();
}, [locale]);
return {
isLoaded,
};
};
exports.GlobalContainerStyle = GlobalContainerStyle;
exports.GlobalHeadingStyle = GlobalHeadingStyle;
exports.MAPPED_LOCALE = MAPPED_LOCALE;
exports.NotificationsHandler = NotificationsHandler;
exports.getHeadingStyles = getHeadingStyles;
exports.showNotification = showNotification;
exports.useMantineLocale = useMantineLocale;