@hhgtech/hhg-components
Version:
Hello Health Group common components
848 lines (780 loc) • 32.9 kB
JavaScript
import React__default, { useState, useRef, useMemo, useEffect, Fragment, createContext } from 'react';
import { T as Text } from './index-9f5659e8.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { M as MediaQueries, f as formatUrlWithPageParam } from './utils-cb7242c7.js';
import { R as Radio$1 } from './index-5d405c0d.js';
import { T as Text$1 } from './index-cf9e26de.js';
import { setDefaultClass } from './miscDefaultClassWrapper.js';
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import flattenChildren from 'react-keyed-flatten-children';
var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
/**
* @deprecated Consider to use Mantine
*/
const Alert = ({ style, onClose, text, type, contentIcon, closeIcon, className, description, }) => {
return (React__default.createElement("div", { className: `${styles.alert} ${className || ''}`, style: style, "data-alert-type": type },
React__default.createElement("div", { className: styles.content },
React__default.createElement("div", { className: "icon-title" },
contentIcon,
React__default.createElement(Text, { weight: "bold", size: "label1" }, text)),
React__default.createElement(Text, { weight: "regular", size: "p3" }, description)),
React__default.createElement("div", { className: styles.close, onClick: onClose }, closeIcon)));
};
const renderNotificationStyles = (type, size, hasIcon, color) => {
let sizeparams = '';
if (type === 'numeric') {
switch (size) {
case 'medium':
sizeparams = `
height: 16px;
font-size: 11px;
padding: 1px 6px;
`;
case 'large':
sizeparams = `
height: 24px;
font-size: 13px;
padding: 1px 10px;
`;
}
}
let icon = '';
if (hasIcon) {
icon = `
position: absolute;
top: 0;
left: 75%;
`;
}
let numericIcon;
if (hasIcon) {
numericIcon = `
left: 70%;
${size === 'large'
? `
top: -7px;
`
: size === 'medium'
? `
top: -2px;
width: 16px;
height: 16px;
`
: ''}
`;
}
let notificationColor = '';
switch (color) {
case 'primary':
notificationColor = `
background: ${theme.colors.primary50};
color: ${theme.colors.primary600};
`;
break;
case 'error':
notificationColor = `
background: ${theme.colors.error};
color: white;
`;
break;
}
switch (type) {
case 'dot':
return `
${icon}
width: 8px;
height: 8px;
font-size: 0px;
border-radius: 50%;
${notificationColor}
`;
case 'numeric':
return `
${icon}
width: max-content;
border-radius: 32px;
${sizeparams}
${numericIcon}
${notificationColor}
`;
}
};
const StyledBadge = styled.div `
position: relative;
> div {
width: max-content;
position: relative;
}
span {
font-weight: ${theme.sizes.fwBold};
display: flex;
justify-content: center;
align-items: center;
${(props) => renderNotificationStyles(props.notificationType, props.notificationSize, props.hasIcon, props.notificationColor)}
}
${(props) => props.hasIcon &&
`
svg {
width: 40px;
height: 40px;
}
`}
`;
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const Badge = ({ amount, type, size = 'medium', color = 'primary', icon, className, }) => {
return (React__default.createElement(StyledBadge, { "data-notification-type": type, "data-notification-size": size, "data-notification-color": color, "data-has-icon": !!icon || undefined, notificationType: type, notificationSize: size, notificationColor: color, hasIcon: !!icon, className: className },
React__default.createElement("div", null,
amount && React__default.createElement("span", null, amount),
" ",
icon && React__default.createElement("div", null, icon))));
};
const StyledBorderHeading = styled.h4 `
position: relative;
line-height: 18px;
&:after {
position: absolute;
top: 1px;
left: 0;
width: 4px;
height: 18px;
background-color: ${theme.colors.primaryBase};
content: '';
}
&[data-size='lg'] {
font-size: 18px;
padding-left: 12px;
}
&[data-size='sm'] {
font-size: 14px;
padding-left: 8px;
&::after {
width: 2px;
height: 15px;
}
}
&[data-type='bold'] {
font-weight: ${theme.sizes.fwBold};
}
&[data-type='semiBold'] {
font-weight: ${theme.sizes.fwSemiBold};
}
&[data-uppercase] {
text-transform: uppercase;
}
${MediaQueries.mbDown} {
&[data-size='lg'] {
font-size: 16px;
}
}
`;
const BorderHeading = ({ style, children, className, size = 'lg', type = 'bold', upperCase, as = 'h4', color, }) => (React__default.createElement(StyledBorderHeading, { style: Object.assign({ color }, style), className: className, "data-size": size, "data-type": type, "data-uppercase": upperCase, as: as }, children));
const StyledDropdown = styled.div `
position: relative;
box-sizing: border-box;
border: 1px solid ${theme.colors.gray200};
background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
background-position: right 16px center;
border-radius: ${theme.borderRadius};
&[data-has-icons='true'] {
border: none;
background: ${theme.colors.gray100};
img,
svg {
display: inline-block;
max-width: 16px;
margin-right: 6px;
}
span {
vertical-align: middle;
display: inline-block;
}
&:hover {
box-shadow: none;
}
> div {
position: relative;
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
}
> div::after {
content: '';
right: 12px;
top: 50%;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
width: 10px;
height: 8px;
position: absolute;
background-repeat: no-repeat;
transform: translateY(-50%);
}
}
&:hover {
box-shadow: 0 0 2px 2px ${theme.colors.primary200};
}
`;
const StyledDropdownName = styled.div `
padding: 12px 18px 12px 16px;
cursor: pointer;
&[data-dropdown-open] {
padding: 11px 15px 11px 15px;
border: 1px solid ${theme.colors.primaryBase};
border-radius: ${theme.borderRadius};
box-shadow: 0 0 2px 2px ${theme.colors.primary200};
}
& > svg {
height: 16px;
width: 16px;
}
`;
const StyledDropdownList = styled.ul `
position: absolute;
top: 100%;
right: 0;
left: 0;
display: block;
margin-top: 4px;
background: ${theme.colors.white};
border-radius: ${theme.borderRadius};
box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
-2px 2px 5px rgba(67, 86, 100, 0.123689);
cursor: pointer;
&[data-has-icons='true'] {
background: white;
box-shadow: none;
border: 1px solid ${theme.colors.gray200};
filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
}
`;
const StyledDropdownOption = styled.li `
margin: 8px;
padding: 12px 18px 12px 16px;
border-radius: ${theme.borderRadius};
display: flex;
&:hover,
:active {
background: ${theme.colors.gray100};
}
`;
const StyledIcon = styled.div `
display: flex;
align-items: center;
margin-right: 8px;
& > svg {
height: 16px;
width: 16px;
}
`;
const ShareIconPathStyle = () => (React__default.createElement("style", null, '.file-dropdown-path{fill:none;stroke:#595959;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'));
const DefaultFileIcon = () => (React__default.createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 12.17 14.83" },
React__default.createElement("defs", null,
React__default.createElement("clipPath", { id: "prefix__clip-path", transform: "translate(-1.92 -1.54)" },
React__default.createElement("path", { fill: "none", d: "M0 .96h16v16H0z" }))),
React__default.createElement("title", null, 'File'),
React__default.createElement("g", { clipPath: "url(#prefix__clip-path)" },
React__default.createElement("path", { className: "file-dropdown-path", d: "M8.67 2.29H4a1.33 1.33 0 00-1.33 1.33v10.67A1.33 1.33 0 004 15.62h8a1.33 1.33 0 001.33-1.33V7z", transform: "translate(-1.92 -1.54)" }),
React__default.createElement("path", { className: "file-dropdown-path", d: "M8.67 2.29V7h4.66", transform: "translate(-1.92 -1.54)" }))));
const DownloadIcon = () => (React__default.createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
React__default.createElement("title", null, 'download'),
React__default.createElement("path", { className: "file-dropdown-path", d: "M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M4.67 7.62L8 11l3.33-3.34M8 11V3", transform: "translate(-1.25 -2.21)" })));
const UploadIcon = () => (React__default.createElement("svg", { id: "prefix__Layer_1", "data-name": "Layer 1", viewBox: "0 0 13.5 13.5" },
React__default.createElement("title", null, 'upload'),
React__default.createElement("path", { className: "file-dropdown-path", d: "M14 11v2.66A1.33 1.33 0 0112.67 15H3.33A1.33 1.33 0 012 13.62V11M11.33 6.29L8 3 4.67 6.29M8 3v8", transform: "translate(-1.25 -2.21)" })));
const FileDropdown = ({ className, value, options, onUploadSelected, id, placeholderIcon, placeholder, style, }) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const showDropdown = () => setIsDropdownOpen(!isDropdownOpen);
const inputList = useRef(options.map((option) => {
return (option.type === 'upload' && (React__default.createElement("input", { id: 'uploader-dropdown-input-' + id + '-' + option.value, key: 'uploader-dropdown-input-' + id + '-' + option.value, accept: option.fileAcceptedType, multiple: option.multiple, type: "file", style: { display: 'none' }, onChange: (e) => {
console.log('change');
onUploadSelected(e.target.files);
} })));
}));
const onUpload = (dropdownId) => {
var _a;
(_a = document.querySelector(dropdownId)) === null || _a === void 0 ? void 0 : _a.click();
};
const onDownload = (url) => {
url && window.open(url, '_blank');
};
return (React__default.createElement(StyledDropdown, { className: className, "data-dropdown-open": !!isDropdownOpen, id: id, "data-has-icons": true, style: style, onBlur: () => setIsDropdownOpen(false), tabIndex: 0 },
React__default.createElement(ShareIconPathStyle, null),
React__default.createElement(StyledDropdownName, { onClick: showDropdown },
placeholderIcon || React__default.createElement(DefaultFileIcon, null),
' ',
React__default.createElement("span", null, value && value.value ? value.label : placeholder)),
isDropdownOpen && (React__default.createElement(StyledDropdownList, { onClick: showDropdown, "data-has-icons": true }, options.map((option) => (React__default.createElement(StyledDropdownOption, { key: `${id}-${option.value}`, "data-selected": (value && value.value === option.value) || undefined, onClick: () => option.type === 'upload'
? onUpload('#uploader-dropdown-input-' + id + '-' + option.value)
: onDownload(option.url) },
React__default.createElement(StyledIcon, null, option.icon || option.type === 'download' ? (React__default.createElement(DownloadIcon, null)) : (React__default.createElement(UploadIcon, null))),
option.label))))),
React__default.createElement(React__default.Fragment, null, inputList.current)));
};
const StyledGrid = styled.div `
--columns: var(--grid-template-columns, repeat(var(--columns-count), 1fr));
--columns-desktop: var(
--grid-template-columns-desktop,
repeat(var(--columns-count-desktop), 1fr)
);
display: grid;
grid-template-columns: var(--columns);
grid-gap: var(--grid-gap);
align-items: var(--align-items);
${MediaQueries.tdUp} {
grid-template-columns: var(--columns-desktop);
}
> * {
justify-self: var(--justify-children);
}
`;
/**
* @deprecated Consider to use mantine
*/
const Grid = ({ className, columns, columnsDesktop, gridTemplateColumns, gridTemplateColumnsDesktop, gap, children, justifyChildren, style, alignItems, }) => {
return (React__default.createElement(StyledGrid, { className: className, style: Object.assign({ '--columns-count': columns, '--columns-count-desktop': columnsDesktop, '--grid-template-columns': gridTemplateColumns, '--grid-template-columns-desktop': gridTemplateColumnsDesktop, '--justify-children': justifyChildren, '--grid-gap': gap, '--align-items': alignItems }, style) }, children));
};
const StyledPagination = styled.div `
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
li {
transition: all 0.3s ease;
}
[data-page-active] {
background: ${theme.colors.primaryBase};
color: ${theme.colors.white};
> a {
color: ${theme.colors.white};
}
}
`;
const StyledPageBlock = styled.div `
display: flex;
width: 32px;
height: 32px;
box-sizing: border-box;
align-items: center;
justify-content: center;
border: 1px solid ${theme.colors.gray200};
margin: 0 2px;
border-radius: 4px;
color: ${theme.colors.gray800};
cursor: pointer;
font-size: 14px;
font-weight: ${theme.sizes.fwBold};
&[data-last-page] {
border: none;
background-color: ${theme.colors.gray100};
cursor: not-allowed;
pointer-events: none;
svg {
path {
stroke: ${theme.colors.gray300};
}
}
}
`;
const StyledPaginationBlock = styled.li `
display: flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
margin: 0 2px;
border-radius: 4px;
color: ${theme.colors.gray800};
cursor: pointer;
font-size: 14px;
font-weight: ${theme.sizes.fwBold};
> a {
color: ${theme.colors.gray800};
text-decoration: unset;
display: block;
width: 100%;
height: 100%;
line-height: 32px;
text-align: center;
}
`;
const RenderPagiWithDots = ({ pagesAmount, activePage, handlePageChange, handleClick, href, queryPageName = 'page', }) => {
const pages = [...Array(pagesAmount)].map((__v, i) => i + 1);
const [visiblePages, setVisiblePages] = useState(activePage <= 4
? pages.slice(0, 5)
: activePage >= pages.length - 3
? pages.slice(pages.length - 5, pages.length)
: pages.slice(activePage - 2, activePage + 1));
useEffect(() => {
if (activePage <= 4) {
setVisiblePages(pages.slice(0, 5));
}
else if (activePage >= pages.length - 3) {
setVisiblePages(pages.slice(pages.length - 5, pages.length));
}
else {
setVisiblePages(pages.slice(activePage - 2, activePage + 1));
}
}, [activePage]);
return (React__default.createElement(Fragment, null,
activePage > 4 && (React__default.createElement(Fragment, null,
React__default.createElement(StyledPaginationBlock, { onClick: () => handlePageChange(1) }, href ? (React__default.createElement("a", { href: href, onClick: handleClick }, 1)) : (1)),
React__default.createElement(StyledPaginationBlock, null, "..."))),
visiblePages.map((i) => (React__default.createElement(StyledPaginationBlock, { key: `${'pagination'}+${i}`, "data-page-active": i === activePage || undefined, onClick: () => handlePageChange(i) }, href ? (React__default.createElement("a", { href: formatUrlWithPageParam(href, i, queryPageName), onClick: handleClick }, i)) : (i)))),
activePage < pages.length - 3 && (React__default.createElement(Fragment, null,
React__default.createElement(StyledPaginationBlock, null, "..."),
React__default.createElement(StyledPaginationBlock, { onClick: () => handlePageChange(pages.length) }, href ? (React__default.createElement("a", { href: formatUrlWithPageParam(href, pages.length, queryPageName), onClick: handleClick }, pages.length)) : (pages.length))))));
};
const Pagination = ({ className, pagesAmount, currentPage, onChange, onClick, style, href: _href, queryPageName = 'page', }) => {
const pages = [...Array(pagesAmount)].map((__v, i) => i + 1);
const [activePage, setActivePage] = useState(currentPage);
const href = useMemo(() => {
// Props `href` is updated from the version 1.8.4 and later. Please change the way to use this props properly
// - To avoid crash app, transform href for the old way and remove the part &page=
// /care/ho-chi-minh/hospital/da-khoa/&page=
// -> /care/ho-chi-minh/hospital/da-khoa/
if (_href && _href.endsWith('&page=')) {
return _href.replace('&page=', '');
}
return _href;
}, [_href]);
const totalArray = pagesAmount - 1;
const handlePageChange = (p) => {
if (p <= pagesAmount && p > 0) {
setActivePage(p);
onChange(p);
}
};
const handleClick = (e) => {
onClick && onClick(e);
};
useEffect(() => {
setActivePage(currentPage);
}, [currentPage]);
return (React__default.createElement(StyledPagination, { className: className, style: style },
React__default.createElement(StyledPageBlock, { className: "prev-page", onClick: () => handlePageChange(activePage - 1), "data-last-page": activePage === 1 || undefined }, href ? (React__default.createElement("a", { href: formatUrlWithPageParam(href, activePage, queryPageName), onClick: handleClick },
React__default.createElement("svg", { width: "7", height: "10", viewBox: "0 0 7 10", fill: "none" },
React__default.createElement("path", { d: "M5.5 9L1.5 5L5.5 1", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })))) : (React__default.createElement("svg", { width: "7", height: "10", viewBox: "0 0 7 10", fill: "none" },
React__default.createElement("path", { d: "M5.5 9L1.5 5L5.5 1", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })))),
pages.length > 8 ? (React__default.createElement(RenderPagiWithDots, { pagesAmount: pagesAmount, activePage: activePage, handlePageChange: handlePageChange, handleClick: handleClick, href: href, queryPageName: queryPageName })) : (pages.map((i) => (React__default.createElement(StyledPaginationBlock, { key: `${'pagination'}+${i}`, "data-page-active": i === activePage || undefined, onClick: () => handlePageChange(i) }, href ? (React__default.createElement("a", { href: formatUrlWithPageParam(href, i, queryPageName), onClick: handleClick }, i)) : (i))))),
React__default.createElement(StyledPageBlock, { className: "next-page", onClick: () => handlePageChange(activePage + 1), "data-last-page": activePage === totalArray + 1 || undefined }, href ? (React__default.createElement("a", { href: formatUrlWithPageParam(href, activePage, queryPageName), onClick: handleClick },
React__default.createElement("svg", { width: "7", height: "10", viewBox: "0 0 7 10", fill: "none" },
React__default.createElement("path", { d: "M1.5 9L5.5 5L1.5 1", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })))) : (React__default.createElement("svg", { width: "7", height: "10", viewBox: "0 0 7 10", fill: "none" },
React__default.createElement("path", { d: "M1.5 9L5.5 5L1.5 1", stroke: "#2D87F3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))))));
};
/**
* @deprecated Consider to use import { Radio } from '@mantine/core'
*/
const Radio = ({ size = 'small', label, name, checked, value, className, isDisabled = false, onChange, dataEventCategory, dataEventAction, dataEventLabel, }) => {
const isHasTracking = !!dataEventAction && !!dataEventCategory && !!dataEventLabel;
const trackingProps = isHasTracking
? {
'data-event-category': dataEventCategory,
'data-event-action': dataEventAction,
'data-event-label': dataEventLabel,
}
: {};
return (React__default.createElement(Radio$1
// type,
, Object.assign({
// type,
size: size === 'small' ? 'md' : 'lg', label: label, name: name, checked: checked, value: value, className: className, disabled: isDisabled, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value) }, trackingProps)));
};
const getTag = (tag, isLight) => {
switch (tag) {
case 'yellow': {
const color = isLight ? theme.colors.yellow50 : theme.colors.yellow600;
return `
background: ${color};
p {
color: var(
--text-props-color,
${theme.colors.gray800}
);
}
`;
}
case 'standard': {
return `
background: ${theme.colors.white};
border: 1px solid ${theme.colors.gray200};
p {
color: var(
--text-props-color,
${theme.colors.gray800}
);
}
&:hover {
background: ${theme.colors.gray100};
}
`;
}
case 'red': {
const color = isLight ? theme.colors.red50 : theme.colors.red500;
return `
background: ${color};
`;
}
case 'green': {
const color = isLight ? theme.colors.green50 : theme.colors.green500;
return `
background: ${color};
`;
}
case 'blue': {
const color = isLight ? theme.colors.primary50 : theme.colors.primaryBase;
return `
background: ${color};
`;
}
case 'teal': {
const color = isLight ? theme.colors.teal100 : theme.colors.teal600;
return `
background: ${color};
`;
}
case 'pink': {
const color = isLight ? theme.colors.pink200 : theme.colors.pink800;
return `
background: ${color};
`;
}
case 'violet': {
const color = isLight ? theme.colors.violet100 : theme.colors.violet500;
return `
background: ${color};
`;
}
case 'grey': {
const color = isLight ? theme.colors.gray100 : theme.colors.gray600;
return `
background: ${color};
`;
}
}
};
const StyledTag = styled.div `
--padding-horizontal: 8px;
--pading-vertical: 2px;
display: flex;
align-items: center;
justify-content: center;
padding: var(--pading-vertical) var(--padding-horizontal);
border-radius: 24px;
${(props) => props.tagType === 'sponsored' &&
`
--offset-size: 4px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
position: relative;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
border-radius: 0 4px 18px 0;
height: 24px;
width: 90px;
border-left: var(--offset-size) solid ${theme.colors.accentLight};
padding: 0;
margin-left: calc(var(--offset-size) * -1);
p {
font-weight: ${theme.sizes.fwBold};
color: var(
--text-props-color,
${theme.colors.secondaryDark}
);
font-size: 11px;
margin-left: calc(var(--offset-size) * -1);
}
&::after {
width: calc(var(--offset-size) * 2);
height: var(--offset-size);
background: ${theme.colors.accentMain};
position: absolute;
left: calc(var(--offset-size) * -1);
bottom: calc(var(--offset-size) * -1);
clip-path: polygon(0 1%, 100% 0%, 100% 100%);
content: '';
}
`}
${(props) => props.isInline &&
`
display: inline-block;
`}
${(props) => props.tagHasMorePadding &&
`
&[data-has-more-padding] {
padding: calc(var(--pading-vertical) + 5px) var(--padding-horizontal);
}
`}
p {
${(props) => props.tagIsLight
? `
color: var(--text-props-color, #000);
`
: `
color: var(--text-props-color, ${theme.colors.white});
`}
}
${(props) => getTag(props.tagType, props.tagIsLight)}
${(props) => props.tagIsSquared &&
props.tagType !== 'sponsored' &&
`
border-radius: 4px;
`}
${(props) => props.tagIsALink &&
`
cursor: pointer;
`}
&[data-is-selected],
&:active {
background: ${theme.colors.primary50};
}
`;
const Tag = ({ type, children, style, isInline, isSquared = false, className, isLight, hasMorePadding, isLink, isSelected, textProps = {
size: 'sm',
}, }) => {
const textColor = textProps.color
? { '--text-props-color': textProps.color }
: {};
return (React__default.createElement(StyledTag, { "data-is-squared": isSquared || undefined, "data-tag-type": type, "data-is-light": isLight || undefined, "data-has-more-padding": hasMorePadding || undefined, "data-is-inline": isInline || undefined, style: Object.assign(Object.assign({}, style), textColor), className: className, "data-is-selected": isSelected || undefined, "data-is-link": isLink || undefined, tagType: type, isInline: isInline, tagHasMorePadding: hasMorePadding, tagIsLight: isLight, tagIsSquared: isSquared, tagIsALink: isLink },
React__default.createElement(Text$1, Object.assign({}, textProps), children)));
};
const heightIcon = '24px';
const StyledToggleIcon = setDefaultClass(styled.span `
position: relative;
display: block;
width: 40px;
height: ${heightIcon};
background: #c3cbd4;
border-radius: 100px;
cursor: pointer;
&:after {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 90px;
content: '';
transition: 0.3s;
}
`, 'hhgcomp-toggle-icon');
const StyledToggleLabel = styled.span `
padding-left: 15px;
`;
const StyledToggle = styled.div `
height: ${heightIcon};
input[type='checkbox'] {
width: 0;
height: 0;
visibility: hidden;
}
label {
cursor: pointer;
display: inline-flex;
color: ${theme.colors.gray600};
}
input:checked + label ${StyledToggleIcon.classSelector} {
background: ${theme.colors.primaryBase};
&:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
}
`;
/**
* @deprecated Consider to use {@link Switch} at {@link https://www.npmjs.com/package/@hhgtech/hhg-components/mantine}
*/
const Toggle = ({ className, id, onChange, checked, style, label }) => (React__default.createElement(StyledToggle, { className: className, style: style },
React__default.createElement("input", { type: "checkbox", id: id, onChange: onChange, checked: checked }),
React__default.createElement("label", { htmlFor: id },
React__default.createElement(StyledToggleIcon, null),
label && React__default.createElement(StyledToggleLabel, null, label))));
const StyledRateStars = styled.div `
display: inline-flex;
gap: calc(var(--gap) * 1px);
> svg {
width: calc(var(--star-size) * 1px);
height: calc(var(--star-size) * 1px);
}
&[data-selectable='true'] {
> svg {
cursor: pointer;
}
}
`;
const StarHalfIcon = (props) => {
return (React__default.createElement("svg", Object.assign({}, props, { viewBox: "0 0 24 24", fill: "none" }),
React__default.createElement("path", { d: "m139.287 144.772 5.17 3.12c.38.23.85-.11.75-.54l-1.37-5.88 4.56-3.95c.33-.29.16-.84-.29-.88l-6.01-.51-2.35-5.54a.498.498 0 0 0-.92 0l-2.35 5.54-6.01.51a.499.499 0 0 0-.28.88l4.56 3.95-1.37 5.88c-.1.43.37.77.75.54z", fill: "#E4E8EC" }),
React__default.createElement("path", { d: "M139.289 144.771s.013-14.488 0-14.488a.49.49 0 0 0-.46.308l-2.35 5.54-6.01.51a.499.499 0 0 0-.28.88l4.56 3.95-1.37 5.88c-.1.43.37.77.75.54z", fill: "#FFC326" })));
};
const StarIcon = (_a) => {
var { isFull } = _a, props = __rest(_a, ["isFull"]);
return (React__default.createElement("svg", Object.assign({}, props, { viewBox: "0 0 32 32", fill: "none" }),
React__default.createElement("path", { d: "m16 23.027 6.893 4.16c.507.306 1.134-.147 1-.72l-1.826-7.84 6.08-5.267a.67.67 0 0 0-.387-1.173l-8.013-.68-3.134-7.387a.664.664 0 0 0-1.226 0l-3.133 7.387-8.014.68a.668.668 0 0 0-.373 1.173l6.08 5.267-1.827 7.84c-.133.573.493 1.026 1 .72z", fill: isFull ? '#FFC326' : '#D2D6DC' })));
};
/**
*
* Show 5 (or more) stars and allow user vote (optional)
*
*/
const RateStars = ({ gap = 2, size = 24, star, totalStars = 5, onSelect, hideEmptyStars, style, className, }) => {
const numberOfFullStars = Math.floor(star);
const numberOfHalfStars = star - numberOfFullStars >= 0.5 ? 1 : 0;
const [tempStar, setTempStar] = useState(null);
const tempFullStars = tempStar || numberOfFullStars;
const tempHalfStars = tempStar ? 0 : numberOfHalfStars;
return (React__default.createElement(StyledRateStars, { "data-selectable": !!onSelect, style: Object.assign({ '--gap': gap, '--star-size': size }, style), className: className }, Array.from({
length: hideEmptyStars
? numberOfFullStars + numberOfHalfStars
: totalStars,
}).map((_, index) => {
const onMouseOver = () => !!onSelect && setTempStar(index + 1);
const onMouseLeave = () => !!onSelect && setTempStar(null);
return index + 1 <= tempFullStars ? (React__default.createElement(StarIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave, isFull: true })) : index + 1 === tempFullStars + tempHalfStars ? (React__default.createElement(StarHalfIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave })) : (React__default.createElement(StarIcon, { key: index, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index + 1), onMouseOver: onMouseOver, onMouseLeave: onMouseLeave }));
})));
};
// define shared context
const StepRendererContext = createContext({
currentStep: 0,
setCurrentStep: () => false,
setMaxStep: () => false,
nextStep: () => false,
prevStep: () => false,
});
const StepRenderer = ({ children, onStepChange }) => {
const [currentStep, setCurrentStep] = useState(0);
const [maxStep, setMaxStep] = useState(0);
const childrenCount = React__default.Children.count(children);
useEffect(() => {
setMaxStep(childrenCount - 1);
}, [childrenCount]);
useEffect(() => {
onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(currentStep);
}, [currentStep]);
const nextStep = () => currentStep + 1 <= maxStep && setCurrentStep(currentStep + 1);
const prevStep = () => currentStep - 1 >= 0 && setCurrentStep(currentStep - 1);
return (React__default.createElement(StepRendererContext.Provider, { value: {
currentStep,
setCurrentStep,
setMaxStep,
nextStep,
prevStep,
} }, flattenChildren(children).map((element, idx) => {
const active = idx === currentStep;
return (React__default.createElement(Fragment, { key: idx }, !React__default.isValidElement(element)
? active
? element
: null
: element.props.alwaysRender || active
? React__default.cloneElement(element, {
isActive: idx === currentStep,
stepIndex: idx,
})
: null));
})));
};
export { Alert as A, Badge as B, FileDropdown as F, Grid as G, Pagination as P, Radio as R, StepRenderer as S, Tag as T, BorderHeading as a, Toggle as b, RateStars as c, StepRendererContext as d };