@hhgtech/hhg-components
Version:
Hello Health Group common components
296 lines (281 loc) • 16.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var index$2 = require('./index-1b24e0d3.js');
var index = require('./index-d4ad3f79.js');
var index$4 = require('./index-8eaf8607.js');
var index$1 = require('./index-2b476eb9.js');
var miscTheme = require('./miscTheme.js');
var recharts = require('recharts');
var index$3 = require('./index-c747366f.js');
var useOutsideClick = require('./useOutsideClick-8e631203.js');
var styled = require('@emotion/styled');
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
require('@mantine/core');
require('./index-04864074.js');
require('./index-0a047edc.js');
require('./Locale-eb0da538.js');
require('./index-9301f298.js');
require('./constantsDomainLocales.js');
require('./constantsIsProduction.js');
require('./index-6b44ec2b.js');
require('./utils-5e3a8440.js');
require('./index-c88c8189.js');
require('./index-3424862e.js');
require('@hhgtech/icons/other');
require('@mantine/hooks');
require('@mantine/carousel');
require('./index-4d838fd2.js');
require('dayjs');
require('@mantine/notifications');
require('./index-ec32050c.js');
require('date-fns/locale');
require('./constantsSite.js');
require('./constantsRiskScreener.js');
require('./shared-201fc49c.js');
require('classnames');
require('uuid');
require('./useUniqueId-88b26792.js');
require('@emotion/react');
require('@hhgtech/icons/core');
require('./index-515469d0.js');
require('@mantine/dates');
require('./index.styles-5f6a7ac0.js');
require('./translationsContext-4698cb34.js');
require('./index-a985d53b.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const CustomizedAxisTick = (props) => {
const { x, y, payload, activeWeek } = props;
if (activeWeek === payload.value) {
return (React__default["default"].createElement("g", { transform: `translate(${x},${y})` },
React__default["default"].createElement("circle", { r: 12, fill: props.siteType === 'marryBaby'
? miscTheme.theme.mbColors.pink
: miscTheme.theme.colors.primaryBase }),
React__default["default"].createElement("text", { textAnchor: "middle", alignmentBaseline: "central", fill: miscTheme.theme.colors.white, fontFamily: "Inter", fontWeight: "600", fontSize: "12px" }, payload.value)));
}
else {
return (React__default["default"].createElement("g", { transform: `translate(${x},${y})` },
React__default["default"].createElement("text", { textAnchor: "middle", alignmentBaseline: "central", fill: miscTheme.theme.colors.gray600, fontFamily: "Inter", fontWeight: "400", fontSize: "12px" }, payload.value)));
}
};
const StyledTooltip = styled__default["default"].div `
/* position: absolute; */
display: flex;
flex-direction: column;
padding: 8px 12px;
gap: 4px;
min-width: 145px;
max-width: 220px;
min-height: 50px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
/* .risk {
display: flex;
align-items: center;
padding: 4px 8px;
background: ${miscTheme.theme.colors.yellow600};
border-radius: 3px;
} */
& > * {
display: flex;
gap: 4px;
align-items: center;
}
.risk {
display: inline-flex;
padding: 2px 8px;
border-radius: 2px;
background: #ffffff;
}
`;
const StyledChart = styled__default["default"].div `
position: relative;
width: 100%;
.custom-chart-label {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.chart-legend {
display: flex;
justify-content: space-between;
}
`;
const StyledChartLegend = styled__default["default"].div `
display: flex;
gap: 40px;
justify-content: center;
margin-bottom: 8px;
& > div {
display: flex;
align-items: center;
gap: 4px;
}
`;
const LABELS_COLOR = [
{
name: 'overweight',
backgroundColor: miscTheme.theme.colors.yellow50,
color: miscTheme.theme.colors.yellow900,
},
{
name: 'underweight',
backgroundColor: miscTheme.theme.colors.yellow50,
color: miscTheme.theme.colors.yellow900,
},
{
name: 'healthy',
backgroundColor: miscTheme.theme.colors.green50,
color: miscTheme.theme.colors.green900,
},
];
const CustomizedTooltipLabel = (props) => {
var _a, _b, _c, _d, _e;
const { payload, active } = props;
const currentPayload = (_a = payload === null || payload === void 0 ? void 0 : payload[0]) === null || _a === void 0 ? void 0 : _a.payload;
if (!currentPayload || !currentPayload.toolTipLabel || !active)
return null;
const { backgroundColor, color } = React.useMemo(() => LABELS_COLOR.find((per) => per.name === currentPayload.status), [currentPayload === null || currentPayload === void 0 ? void 0 : currentPayload.status]);
return (React__default["default"].createElement(StyledTooltip, null,
React__default["default"].createElement("div", null, (_b = currentPayload.toolTipLabel) === null || _b === void 0 ? void 0 :
_b[0],
" ", (_c = currentPayload.toolTipLabel) === null || _c === void 0 ? void 0 :
_c[1]),
React__default["default"].createElement("div", null,
((_d = currentPayload.toolTipLabel) === null || _d === void 0 ? void 0 : _d[2]) && (React__default["default"].createElement(index.Text, { as: "span", size: "s3", color: miscTheme.theme.colors.gray800, weight: "semiBold" }, (_e = currentPayload.toolTipLabel) === null || _e === void 0 ? void 0 : _e[2])),
React__default["default"].createElement("div", { className: "risk", style: {
backgroundColor,
} },
React__default["default"].createElement(index.Text, { size: "n1", color: color }, currentPayload.translatedStatus)))));
};
const generatePregnancyWeightGainChartData = ({ weightByWeek, weightBefore, toolTipLabel, status, activeWeek, t, }) => {
const key = t(`bmi.result.${status}`);
const generateAdditionalData = (flag) => {
return flag === activeWeek
? { toolTipLabel, translatedStatus: key, status }
: {};
};
return weightByWeek.map((_data) => (Object.assign({ name: _data.week, min: weightBefore + _data.min, difference: _data.max - _data.min, max: weightBefore + _data.max }, generateAdditionalData(_data.week))));
};
const Chart = ({ weightBefore, weightByWeek, activeWeek, currentWeight, toolTipLabel = [], status, withLine = false, siteType, }) => {
const { t } = index$1.useTranslations();
const isMarryBaby = siteType === 'marryBaby';
const chartData = React.useMemo(() => generatePregnancyWeightGainChartData({
weightByWeek,
weightBefore,
toolTipLabel,
status,
activeWeek,
t,
}), [weightByWeek, weightBefore, toolTipLabel, status, activeWeek]);
const [isTooltipActive, setIsTooltipActive] = React.useState(false);
const ref = React.useRef(null);
// State for our modal
// Call hook passing in the ref and a function to call on outside click
useOutsideClick.useOutsideClick(ref, () => setIsTooltipActive(false));
return (React__default["default"].createElement(StyledChart, null,
isMarryBaby ? (React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark },
' ',
t('babyGrowth.weight'),
" ",
t('pregnancyWeightGain.weightInput.desc'))) : (React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray500 },
t('babyGrowth.weight'),
" ",
t('pregnancyWeightGain.weightInput.desc'))),
Array.isArray(chartData) && chartData.length > 0 && (React__default["default"].createElement(StyledChart, null,
React__default["default"].createElement(recharts.ResponsiveContainer, { height: 388, className: "chart" },
React__default["default"].createElement(recharts.AreaChart, { data: chartData, margin: { top: 16, right: 0, left: 0 } },
React__default["default"].createElement(recharts.CartesianGrid, { stroke: miscTheme.theme.colors.neutral100 }),
React__default["default"].createElement(recharts.Tooltip, { trigger: "click", content: (props) => (React__default["default"].createElement(CustomizedTooltipLabel, Object.assign({ active: !withLine &&
isTooltipActive &&
typeof activeWeek !== 'undefined' &&
typeof currentWeight !== 'undefined' }, props))) }),
React__default["default"].createElement(recharts.XAxis, { type: "number", scale: "linear", ticks: Array.from({ length: 40 }, (_, i) => i + 1), dataKey: "name", tickLine: false, tickMargin: 12, tick: (props) => (React__default["default"].createElement(CustomizedAxisTick, Object.assign({}, props, { activeWeek: activeWeek, siteType: siteType }))), domain: ['dataMin', 'dataMax'], interval: 'preserveStartEnd', tickCount: 1, allowDecimals: false }),
React__default["default"].createElement(recharts.YAxis, { domain: [
(dataMin) => Math.max(dataMin, weightBefore - 10 || dataMin),
(dataMax) => {
return Math.max(dataMax, weightBefore + 20 || dataMax);
},
], type: "number", scale: "auto", interval: "preserveStartEnd", tickLine: false, tickMargin: 7, width: 45, tickCount: 10, allowDecimals: true, tickFormatter: (value) => String(Math.round((value + Number.EPSILON) * 100) / 100), tick: {
fontFamily: 'Inter',
fontWeight: 400,
fontSize: 12,
color: miscTheme.theme.colors.gray600,
} }),
React__default["default"].createElement(recharts.Area, { connectNulls: true, type: "monotone", dataKey: "min", stackId: "1", stroke: "transparent", fill: "transparent" }),
React__default["default"].createElement(recharts.Area, { connectNulls: true, type: "monotone", dataKey: "difference", stackId: "1", stroke: "transparent", fill: isMarryBaby
? miscTheme.theme.mbColors.tonePink
: miscTheme.theme.colors.primary100 }),
typeof activeWeek !== 'undefined' &&
typeof currentWeight !== 'undefined' && (React__default["default"].createElement(recharts.ReferenceDot, { onClick: () => setIsTooltipActive(true), x: activeWeek === 0 ? 1 : activeWeek, y: currentWeight, r: 4, shape: React__default["default"].createElement(index$3.CustomReferenceDot, { ref: ref, r: 4 }), fill: isMarryBaby
? miscTheme.theme.mbColors.pink
: miscTheme.theme.colors.primaryBase, stroke: isMarryBaby
? miscTheme.theme.mbColors.pink
: miscTheme.theme.colors.primaryBase })))),
React__default["default"].createElement("div", { className: "custom-chart-label" },
React__default["default"].createElement("i", null),
isMarryBaby ? (React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark }, t('pregnancy.week'))) : (React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray500 }, t('pregnancy.week'))))))));
};
const Dot = (_a) => {
var { color } = _a, rest = tslib_es6.__rest(_a, ["color"]);
return (React__default["default"].createElement("svg", Object.assign({ width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, rest),
React__default["default"].createElement("circle", { cx: "4", cy: "4", r: "4", fill: color || miscTheme.theme.colors.primaryBase })));
};
const ChartLegend = ({ idealWeight, siteType }) => {
const { t } = index$1.useTranslations();
const isMarryBaby = siteType === 'marryBaby';
return (React__default["default"].createElement(StyledChartLegend, null,
React__default["default"].createElement("div", null, isMarryBaby ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Dot, { color: miscTheme.theme.mbColors.lightPink }),
React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark },
t('pregnancyTool.weightSuggested'),
' ',
React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray800, weight: "bold", as: "span" }, idealWeight)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Dot, { color: miscTheme.theme.colors.primary100 }),
React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray600 },
React__default["default"].createElement(index.Text, { size: "n1", as: "span" },
t('pregnancyTool.weightSuggested'),
' '),
React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray800, weight: "bold", as: "span" }, idealWeight))))),
React__default["default"].createElement("div", null, isMarryBaby ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Dot, { color: miscTheme.theme.mbColors.pink }),
React__default["default"].createElement(index$2.MarryBabyText, { type: "bodytext-3", color: miscTheme.theme.mbColors.dark }, t('pwg.placeholder.weight')))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Dot, null),
React__default["default"].createElement(index.Text, { size: "n1", color: miscTheme.theme.colors.gray600 }, t('pwg.placeholder.weight')))))));
};
const StyledPregnancyWeightGainChart = styled__default["default"].div `
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px;
width: 100%;
gap: 24px;
border: 1px solid ${miscTheme.theme.colors.neutral100};
border-radius: 8px;
.chart-header {
text-align: center;
}
> div {
width: 100%;
}
`;
const PregnancyWeightGainChart = ({ chartProps, pillCarouselProps, idealWeight, description, siteType, }) => {
const { t } = index$1.useTranslations();
const isMarryBaby = siteType === 'marryBaby';
return (React__default["default"].createElement(StyledPregnancyWeightGainChart, null,
React__default["default"].createElement("div", { className: "chart-header" },
isMarryBaby ? (React__default["default"].createElement(index$2.MarryBabyHeading, { type: "h3", color: miscTheme.theme.mbColors.dark }, t('pregnancyTool.weightSuggested'))) : (React__default["default"].createElement(index.Text, { size: "s1", weight: "semiBold", color: miscTheme.theme.colors.gray800 }, t('pregnancyTool.weightSuggested'))),
description && description),
React__default["default"].createElement(index$4.PillCarousel, Object.assign({}, pillCarouselProps)),
React__default["default"].createElement("div", null,
React__default["default"].createElement(ChartLegend, { idealWeight: idealWeight, siteType: siteType }),
React__default["default"].createElement(Chart, Object.assign({}, chartProps, { siteType: siteType })))));
};
exports.PregnancyWeightGainChart = PregnancyWeightGainChart;