@hhgtech/hhg-components
Version:
Hello Health Group common components
126 lines (113 loc) • 6.71 kB
JavaScript
;
var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
require('./index-0a047edc.js');
var styled = require('@emotion/styled');
var index$1 = require('./index-9301f298.js');
var miscTheme = require('./miscTheme.js');
var index = require('./index-6b44ec2b.js');
var index$2 = require('./index-c88c8189.js');
var Locale = require('./Locale-eb0da538.js');
var index$3 = require('./index-3424862e.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const StyledIconContainer = styled__default["default"].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 || miscTheme.theme.colors.white};
border-radius: ${(props) => props.borderRadius || '50%'};
& > * {
width: ${(props) => props.iconSize}px;
height: ${(props) => props.iconSize}px;
}
`;
const StyledPillContainer = styled__default["default"].div `
display: inline-block;
height: 108px;
background-color: ${miscTheme.theme.colors.white};
border-radius: 60px;
cursor: pointer;
&.selected-week-pill {
background-color: ${miscTheme.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.LOCALE.Myanmar, Locale.LOCALE.Taiwan];
const Pill = (_a) => {
var { icon, name, className, locale = 'en-PH', dataEventCategory, dataEventAction, dataEventLabel, onSelect } = _a, rest = tslib_es6.__rest(_a, ["icon", "name", "className", "locale", "dataEventCategory", "dataEventAction", "dataEventLabel", "onSelect"]);
const isSelected = React.useMemo(() => className === null || className === void 0 ? void 0 : className.includes('selected-week-pill'), [className]);
return (React__default["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["default"].createElement(StyledIconContainer, { size: 64, iconSize: 40, backgroundColor: miscTheme.theme.colors.white },
React__default["default"].createElement(index.ImageWrap, { src: icon || index$1.CommonGAssets.getAssetPath('week_default.png'), alt: `week ${name}` })),
isSelected ? (React__default["default"].createElement(index$2.Text, Object.assign({ type: "semiBold", size: "n1", color: miscTheme.theme.colors.gray800 }, (LONG_TITLE_LOCALE.includes(locale) && {
style: { fontSize: '10px' },
})), name)) : (React__default["default"].createElement(index$2.Text, Object.assign({ size: "n1", color: miscTheme.theme.colors.gray600 }, (LONG_TITLE_LOCALE.includes(locale) && {
style: { fontSize: '10px' },
})), name))));
};
const StyledPill = styled__default["default"](Pill) `
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
`;
const StyledSlide = styled__default["default"](index$3.CentralCarousel.Slide) `
cursor: pointer;
> div * {
pointer-events: none;
}
`;
const StyledCarousel = styled__default["default"](index$3.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.LOCALE.Vietnam, blurFromIndex, blurLength } = _a, rest = tslib_es6.__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] = React.useState('');
React.useEffect(() => {
setCurrentUrl(window.location.href);
}, []);
return (React__default["default"].createElement(StyledCarousel, Object.assign({}, sliderProps, rest, { selectSlideWhenClick: true, previousControlIcon: React__default["default"].createElement(Arrow, { currentUrl: currentUrl }), nextControlIcon: React__default["default"].createElement(Arrow, { currentUrl: currentUrl, isRight: true }) }), (centerSlide) => data.map((pill, idx) => (React__default["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["default"].createElement("div", { className: "centerred-pill-wrapper" },
React__default["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["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["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" })));
};
exports.PillCarousel = PillCarousel;