@hhgtech/hhg-components
Version:
Hello Health Group common components
174 lines (157 loc) • 7.15 kB
JavaScript
import * as React from 'react';
import React__default, { useState, useEffect } from 'react';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { I as ImageWrap } from './index-50aea2c8.js';
import { T as Text } from './index-0b67696c.js';
/* eslint-disable prettier/prettier */
const Pin3 = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 12 12", fill: "none" }, props),
React.createElement("g", { clipPath: "url(#clip0_5371_10640)" },
React.createElement("path", { d: "M6.6665 4.3335L8.1665 5.8335L6.6665 7.3335", stroke: "#8C8C8C", strokeWidth: 0.72, strokeLinecap: "round", strokeLinejoin: "round" }),
React.createElement("path", { d: "M8.16667 5.8335H5.83333C5.09667 5.8335 4.5 6.43016 4.5 7.16683V7.50016", stroke: "#8C8C8C", strokeWidth: 0.72, strokeLinecap: "round", strokeLinejoin: "round" }),
React.createElement("path", { d: "M6.94331 10.3902L10.3907 6.94281C10.9114 6.42211 10.9114 5.57789 10.3907 5.05719L6.94331 1.60981C6.42261 1.08911 5.57839 1.08911 5.05769 1.60981L1.61031 5.05719C1.08961 5.57789 1.08961 6.42211 1.61031 6.94281L5.05769 10.3902C5.57839 10.9109 6.42261 10.9109 6.94331 10.3902Z", stroke: "#8C8C8C", strokeWidth: 0.72, strokeLinecap: "round", strokeLinejoin: "round" })),
React.createElement("defs", null,
React.createElement("clipPath", { id: "clip0_5371_10640" },
React.createElement("rect", { width: 12, height: 12, fill: "white" })))));
/* eslint-disable prettier/prettier */
const ShapedArrowDown = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none" }, props),
React.createElement("path", { d: "M13.5554 9.33398L7.99989 5.55621L2.44434 9.33398", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" })));
const StyledAvatar = styled.div `
background-color: var(--background-color, transparent);
color: white;
cursor: pointer;
img {
--width: var(--width-prop, 40px);
--height: var(--height-prop, 40px);
width: var(--width);
height: var(--height);
}
&[data-has-max='true'] {
img {
max-width: var(--width);
max-height: var(--height);
}
}
&[data-avatar-type='square'] {
img {
--width: var(--width-prop, 72px);
--height: var(--height-prop, 72px);
border-radius: ${theme.borderRadius};
}
}
&[data-avatar-type='rounded'] {
img {
border-radius: 50%;
}
}
&[data-custom-size='true'] {
display: flex;
overflow: hidden;
overflow: hidden;
width: var(--size);
height: var(--size);
align-items: center;
justify-content: center;
background-size: cover;
font-size: calc(var(--size) / 2);
font-weight: bold;
&[data-avatar-type='square'] {
border-radius: ${theme.borderRadius};
}
&[data-avatar-type='rounded'] {
border-radius: 50%;
img {
--width: 100%;
--height: 100%;
}
}
img {
object-fit: cover;
}
}
`;
const pxBySize = {
xs: 28,
small: 32,
medium: 40,
large: 48,
xl: 64,
xxl: 80,
xxxl: 96,
};
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const Avatar = ({ type = 'square', size, avatarImg, avatarUrl, firstLetter, backgroundColor, onClick, style, className, width, height, alt, }) => {
const sizePx = size ? pxBySize[size] : undefined;
const [isImageLoadingError, setIsImageLoadingError] = useState(false);
useEffect(() => {
if (avatarUrl) {
const img = document.createElement('img');
img.setAttribute('src', avatarUrl);
img.addEventListener('error', () => {
setIsImageLoadingError(true);
});
}
}, [avatarUrl, setIsImageLoadingError]);
const shouldRenderLetter = ((!avatarUrl && !avatarImg) || isImageLoadingError) && firstLetter;
return (React__default.createElement(StyledAvatar, { style: Object.assign(Object.assign({}, style), { '--size': sizePx ? sizePx + 'px' : undefined, '--width-prop': width ? width + 'px' : undefined, '--height-prop': height ? height + 'px' : undefined, '--background-color': backgroundColor }), "data-has-max": !!(width && height), "data-avatar-type": type, onClick: onClick, className: className, avatarUrl: avatarUrl, "data-custom-size": !!size },
avatarImg,
avatarUrl && !isImageLoadingError && (React__default.createElement(ImageWrap, { src: avatarUrl, alt: alt || 'avatar' })),
shouldRenderLetter && firstLetter));
};
const DistanceTagStyled = styled.div `
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
color: ${theme.colors.red700};
border-radius: 8px;
border: 1px solid ${theme.colors.neutral100};
font-size: 0.6875rem;
line-height: 1rem;
border-radius: 0.5rem;
`;
const StyledPin3 = styled(Pin3) `
width: 0.75rem;
height: 0.75rem;
color: ${theme.colors.gray400};
`;
function DistanceTag({ value, className }) {
return (React__default.createElement(DistanceTagStyled, { className: className },
React__default.createElement(StyledPin3, null),
React__default.createElement(Text, { size: "p3", weight: "regular", color: theme.colors.gray400 }, value)));
}
const StyledIconWrapper = styled.div `
display: inline-flex;
align-items: center;
justify-content: center;
flex-grow: 0;
flex-shrink: 0;
width: calc(var(--wrapper-size, var(--icon-size)) * 1px);
height: calc(var(--wrapper-size, var(--icon-size)) * 1px);
&[data-clickable='true'] {
cursor: pointer;
}
> * {
width: calc(var(--icon-size) * 1px);
height: calc(var(--icon-size) * 1px);
}
&[data-svg-custom-stroke='true'] > svg * {
stroke: var(--icon-stroke-color);
}
&[data-svg-custom-fill='true'] > svg * {
fill: var(--icon-fill-color);
}
`;
/**
* Wrapper for icon
* You can use this component to wrap your icon with custom size and style
* With svgIcon you can set fill and stroke color as well
*/
const IconWrapper = ({ children, className, onClick, wrapperSize, iconSize = 24, wrapperStyle, iconStyle, svgIcon, wrapperProps, }) => {
return (React__default.createElement(StyledIconWrapper, Object.assign({ className: className, onClick: onClick, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (wrapperSize && { '--wrapper-size': wrapperSize })), (iconSize && { '--icon-size': iconSize })), (svgIcon && Object.assign(Object.assign({}, (svgIcon.fill && { '--icon-fill-color': svgIcon.fill })), (svgIcon.stroke && { '--icon-stroke-color': svgIcon.stroke })))), wrapperStyle), "data-clickable": !!onClick, "data-svg-custom-stroke": !!(svgIcon === null || svgIcon === void 0 ? void 0 : svgIcon.stroke), "data-svg-custom-fill": !!(svgIcon === null || svgIcon === void 0 ? void 0 : svgIcon.fill) }, wrapperProps), React__default.cloneElement(children, {
style: iconStyle,
})));
};
export { Avatar as A, DistanceTag as D, IconWrapper as I, Pin3 as P, ShapedArrowDown as S };