@hhgtech/hhg-components
Version:
Hello Health Group common components
119 lines (109 loc) • 6.16 kB
JavaScript
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { useMemo, useState, useEffect } from 'react';
import './index-fe4471f4.js';
import styled from '@emotion/styled';
import { C as CommonGAssets } from './index-7adf994c.js';
import { theme } from './miscTheme.js';
import { I as ImageWrap } from './index-50aea2c8.js';
import { T as Text } from './index-546ca9b5.js';
import { L as LOCALE } from './Locale-dc1237b9.js';
import { f as CentralCarousel } from './index-bd44bcb2.js';
const StyledIconContainer = styled.div `
display: inline-flex;
overflow: hidden;
width: ${(props) => props.size}px;
height: ${(props) => props.size}px;
box-sizing: border-box;
align-items: center;
justify-content: center;
border: 1px solid #e4e8ec;
background-color: ${(props) => props.backgroundColor || theme.colors.white};
border-radius: ${(props) => props.borderRadius || '50%'};
& > * {
width: ${(props) => props.iconSize}px;
height: ${(props) => props.iconSize}px;
}
`;
const StyledPillContainer = styled.div `
display: inline-block;
height: 108px;
background-color: ${theme.colors.white};
border-radius: 60px;
cursor: pointer;
&.selected-week-pill {
background-color: ${theme.colors.pink100};
}
& > div:first-child {
margin: 4px 4px 0;
}
& > p {
margin-top: 8px;
text-align: center;
}
& > * {
pointer-events: none;
}
`;
const LONG_TITLE_LOCALE = [LOCALE.Myanmar, LOCALE.Taiwan];
const Pill = (_a) => {
var { icon, name, className, locale = 'en-PH', dataEventCategory, dataEventAction, dataEventLabel, onSelect } = _a, rest = __rest(_a, ["icon", "name", "className", "locale", "dataEventCategory", "dataEventAction", "dataEventLabel", "onSelect"]);
const isSelected = useMemo(() => className === null || className === void 0 ? void 0 : className.includes('selected-week-pill'), [className]);
return (React__default.createElement(StyledPillContainer, Object.assign({ onClick: onSelect, className: className
? 'week-pill'.concat(' non-pointer-event-child ', className)
: 'week-pill non-pointer-event-child', "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel }, rest),
React__default.createElement(StyledIconContainer, { size: 64, iconSize: 40, backgroundColor: theme.colors.white },
React__default.createElement(ImageWrap, { src: icon || CommonGAssets.getAssetPath('week_default.png'), alt: `week ${name}` })),
isSelected ? (React__default.createElement(Text, Object.assign({ type: "semiBold", size: "n1", color: theme.colors.gray800 }, (LONG_TITLE_LOCALE.includes(locale) && {
style: { fontSize: '10px' },
})), name)) : (React__default.createElement(Text, Object.assign({ size: "n1", color: theme.colors.gray600 }, (LONG_TITLE_LOCALE.includes(locale) && {
style: { fontSize: '10px' },
})), name))));
};
const StyledPill = styled(Pill) `
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
`;
const StyledSlide = styled(CentralCarousel.Slide) `
cursor: pointer;
> div * {
pointer-events: none;
}
`;
const StyledCarousel = styled(CentralCarousel) `
.centerred-pill-wrapper {
padding: 16px 0;
}
`;
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const PillCarousel = (_a) => {
var { data, isMobile, onSlideChange, pillProps, locale = LOCALE.Vietnam, blurFromIndex, blurLength } = _a, rest = __rest(_a, ["data", "isMobile", "onSlideChange", "pillProps", "locale", "blurFromIndex", "blurLength"]);
const sliderProps = {
withControls: !isMobile,
slideGap: 16,
blurFromCenter: true,
blurFromIndex: blurFromIndex || (isMobile ? 2 : 4),
blurLength: blurLength || (isMobile ? 1 : 3),
onSlideChange,
};
const [currentUrl, setCurrentUrl] = useState('');
useEffect(() => {
setCurrentUrl(window.location.href);
}, []);
return (React__default.createElement(StyledCarousel, Object.assign({}, sliderProps, rest, { selectSlideWhenClick: true, previousControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl }), nextControlIcon: React__default.createElement(Arrow, { currentUrl: currentUrl, isRight: true }) }), (centerSlide) => data.map((pill, idx) => (React__default.createElement(StyledSlide, Object.assign({ key: idx, onClick: onSlideChange, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Click", "data-event-label": currentUrl, innerSlideProps: {
'data-event-category': 'Health Tool',
'data-event-action': 'Pregnancy Week Click',
'data-event-label': currentUrl,
} }, pillProps),
React__default.createElement("div", { className: "centerred-pill-wrapper" },
React__default.createElement(StyledPill, { "data-event-category": "Health Tool", "data-event-action": "Fetal Week Click", "data-event-label": currentUrl, locale: locale, name: pill.name, icon: pill.icon, className: idx === centerSlide
? 'selected-week-pill pointer-event-child-none'
: 'pointer-event-child-none' })))))));
};
const Arrow = ({ isRight, currentUrl, }) => {
return (React__default.createElement("svg", { viewBox: "0 0 15 15", fill: "none", width: "16", height: "16", style: isRight
? { transform: 'rotate(-90deg)' }
: { transform: 'rotate(90deg)' }, "data-event-category": "Health Tool", "data-event-action": "Pregnancy Week Arrow Click", "data-event-label": currentUrl, className: "pointer-event-child-none" },
React__default.createElement("path", { d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })));
};
export { PillCarousel as P };