@hhgtech/hhg-components
Version:
Hello Health Group common components
352 lines (312 loc) • 8.26 kB
JavaScript
import React__default, { useContext, useState, useRef, useEffect } from 'react';
import { B as Button } from './index-6351bdee.js';
import { T as TogetherComponentGlobalContext } from './utils-40e61585.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
const StyledPopoverMenu = styled.div `
position: relative;
display: content;
.popover-menu__btn {
/* position: relative; */
> span {
width: 100%;
height: 100%;
> img {
width: 100%;
height: 100%;
}
}
}
.popover-menu__content {
position: absolute;
z-index: 10;
width: 320px;
padding: 8px;
border: none;
background: #fff;
border-radius: 8px;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1);
&::before {
position: absolute;
width: 16px;
height: 8px;
background: #fff;
content: '';
}
&.--position {
&-top {
bottom: calc(100% + 8px);
&.--align {
&-start {
left: 0;
&::before {
top: 100%;
left: 16px;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
}
&-end {
left: 100%;
transform: translateX(calc(-100% + 1rem));
&::before {
top: 100%;
right: 16px;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
}
}
}
&-right {
left: calc(100% + 8px);
&.--align {
&-start {
top: 0;
&::before {
top: 16px;
left: 0;
width: 8px;
height: 16px;
clip-path: polygon(0 50%, 100% 0%, 100% 100%);
transform: translateX(-100%);
}
}
&-end {
top: 100%;
transform: translateX(calc(-100% + 1rem));
&::before {
bottom: 16px;
left: 0;
width: 8px;
height: 16px;
clip-path: polygon(0 50%, 100% 0%, 100% 100%);
transform: translateX(-100%);
}
}
}
}
&-bottom {
top: calc(100% + 8px);
&.--align {
&-start {
left: 0;
&::before {
bottom: 100%;
left: 16px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
}
&-end {
left: 100%;
transform: translateX(calc(-100% + 1rem));
&::before {
right: 16px;
bottom: 100%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
}
}
}
&-left {
left: -8px;
transform: translateX(-100%);
&.--align {
&-start {
top: 0;
&::before {
top: 16px;
left: 100%;
width: 8px;
height: 16px;
clip-path: polygon(0 0%, 100% 50%, 0% 100%);
transform: translateX(0);
}
}
&-end {
bottom: 0;
&::before {
bottom: 16px;
left: 100%;
width: 8px;
height: 16px;
clip-path: polygon(0 0%, 100% 50%, 0% 100%);
transform: translateX(0);
}
}
}
}
}
}
&[data-is-marrybaby='true'] {
.popover-menu__content {
padding: 0;
border-radius: 12px;
/* &::before {
display: none;
} */
}
}
`;
const StyledTree = styled.div `
display: flex;
/* max-height: 300px; */
flex-direction: column;
cursor: default;
.__header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
margin-bottom: 8px;
.__back-btn {
position: absolute;
top: 50%;
left: 8px;
width: 16px;
height: 16px;
cursor: pointer;
transform: translateY(-50%);
}
}
.tree-text-description {
padding-right: 8px;
padding-left: 8px;
margin-top: -8px;
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: left;
}
.__content {
overflow: auto;
flex: 1;
}
.__list {
.__item {
position: relative;
&.bold-item {
font-weight: 700;
}
&:last-child {
.__btn {
margin-bottom: 0;
}
}
.__btn {
position: relative;
display: flex;
width: 100%;
height: 40px;
align-items: center;
padding: 0 1rem;
border: none;
margin-bottom: 8px;
color: ${theme.colors.gray800};
cursor: pointer;
text-align: left;
transition: background 0.3s;
/* for better gtm tracking result */
* {
pointer-events: none;
}
&.--checked {
color: ${theme.colors.gray500};
pointer-events: none;
}
&:hover {
background: ${theme.colors.gray100};
}
.__icon {
width: 16px;
height: 16px;
margin-right: 0.4rem;
}
& > span {
position: relative;
& > img {
width: 16px;
height: 16px;
margin-right: 0.4rem;
}
}
}
.__toggle {
position: absolute;
top: 50%;
right: 16px;
width: 16px;
height: 16px;
pointer-events: none;
transform: translateY(-50%);
}
}
}
&[data-is-marrybaby='true'] {
.__header {
padding: 1rem;
}
.tree-text-description {
padding: 0 1rem;
}
.__list {
.__item {
&:first-child {
.__btn {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
}
&:last-child {
.__btn {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
}
.__btn {
height: unset;
padding: 1rem;
margin-bottom: 0;
&:hover {
background: ${theme.mbColors.lightPink};
}
}
}
}
}
`;
const PopoverMenu = ({ className, style, toggleButtonContent, position = 'bottom', align = 'end', children, buttonProps, }) => {
const { data: { env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
const [isShow, setIsShow] = useState(false);
const popoverContent = useRef(null);
const isShowRef = useRef(isShow);
useEffect(() => {
var _a;
isShowRef.current = isShow;
if (!isShow)
return;
(_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.focus();
}, [isShow]);
useEffect(() => {
const clickHandler = (e) => {
var _a;
if (!((_a = popoverContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
isShowRef.current)
setIsShow(false);
};
window.addEventListener('click', clickHandler, {
passive: true,
});
return () => {
window.removeEventListener('click', clickHandler);
};
}, []);
return (React__default.createElement(StyledPopoverMenu, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
React__default.createElement(Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "popover-menu__btn", size: "md", color: "transparent", onClick: () => setIsShow((v) => !v) }, buttonProps), toggleButtonContent),
isShow ? (React__default.createElement("div", { ref: popoverContent, className: `popover-menu__content --position-${position} --align-${align}`, tabIndex: 0, onClick: (e) => e.stopPropagation() }, typeof children === 'function'
? children({
setShow: setIsShow,
})
: children)) : null));
};
export { PopoverMenu as P, StyledTree as S };