@hhgtech/hhg-components 1.29.88 → 1.29.90

package/build/esm/{index-efdc151c.js → index-75811f98.js}

@@ -1,18 +1,19 @@
-import { _ as __rest } from './tslib.es6-3970c414.js';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
 import React__default, { createContext, useContext } from 'react';
 import { useMantineTheme, Flex, rem, Box, createStyles } from '@mantine/core';
-import { t as themeColors } from './index-a2704991.js';
+import { t as themeColors } from './index-21c80677.js';
 import '@mantine/dates';
-import './index-69ca7b6a.js';
-import './index-5a81cbdd.js';
-import './index-24f2f569.js';
-import './useMantineLocale-2ece6eac.js';
-import { T as Text } from './index-7d97103f.js';
-import './index-2f06b1d8.js';
-import { u as useTranslations } from './useTranslations-160e66cc.js';
+import './index-d5543323.js';
+import './index-e7128232.js';
+import './index-d4eef69b.js';
+import './useMantineLocale-bef42461.js';
+import { T as Text } from './index-5d2f2783.js';
+import './index-51179764.js';
+import './index.styles-793c0b30.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
 import '@mantine/hooks';
-import { M as MediaQueries } from './utils-cee25689.js';
-import './other-811b7d93.js';
+import { M as MediaQueries } from './utils-1dbd61fa.js';
+import './other-f8b0155f.js';
 import styled from '@emotion/styled';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 

package/build/esm/{index-321f0612.js → index-78cb9c0e.js}

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { I as ImageWrap } from './index-a2704991.js';
+import { I as ImageWrap } from './index-d034201a.js';
 
 const StyledAvatar = styled.div `
   background-color: var(--background-color, transparent);

package/build/esm/{index-19a9a60d.js → index-7a3ac1f6.js}

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import styled from '@emotion/styled';
-import { L as Label } from './index-f42f0c66.js';
+import { L as Label } from './index-918a026b.js';
 import { theme } from './miscTheme.js';
 
 const StyledTextArea = styled.div `

package/build/esm/{index-29676661.js → index-8002ffd2.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-81beb37e.js';
-import { C as CommonGAssets } from './index-24f2f569.js';
+import { L as LOCALE } from './Locale-ecfc005f.js';
+import { C as CommonGAssets } from './index-d4eef69b.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-cee25689.js';
-import { L as LogoIcon } from './logoIcon-6ed45e55.js';
-import './index-5a81cbdd.js';
-import { I as ImageWrap } from './index-a2704991.js';
+import { M as MediaQueries } from './utils-1dbd61fa.js';
+import { L as LogoIcon } from './logoIcon-fbc8e7a1.js';
+import './index-e7128232.js';
+import { I as ImageWrap } from './index-d034201a.js';
 
 const StyledLogo = styled.div `
   position: relative;

package/build/esm/index-82b481bf.js

@@ -0,0 +1,468 @@
+import React__default, { useState, useEffect, useContext, useRef } from 'react';
+import { H as Heading } from './index-296a1099.js';
+import { M as MediaQueries, t as toggleNoScroll } from './utils-1dbd61fa.js';
+import { u as useTranslations } from './useTranslations-9767b0ea.js';
+import { T as TogetherComponentGlobalContext } from './utils-8a1ccf09.js';
+import { Portal } from '@mantine/core';
+import { T as Text } from './index-5d2f2783.js';
+import styled from '@emotion/styled';
+import { _ as __rest } from './tslib.es6-fd8cab49.js';
+import { theme } from './miscTheme.js';
+import { setDefaultClass } from './miscDefaultClassWrapper.js';
+
+var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6 6 18M6 6l12 12'/%3e%3c/svg%3e";
+var CloseIcon = img$2;
+
+const StyledWrapper$1 = styled.div `
+  padding: 14px 16px 14px 17px;
+  background: ${(props) => props.bgColor};
+  border-left: 3px solid ${(props) => props.highlight};
+
+  ${MediaQueries.mbUp} {
+    padding: 12px 12px 12px 17px;
+  }
+`;
+const StyledInner$1 = styled.div `
+  display: flex;
+`;
+const StyledText = styled.div `
+  font-size: 12px;
+  line-height: 18px;
+
+  &[data-has-icon='true'] {
+    margin-left: 10px;
+  }
+`;
+const StyledIcon$1 = styled.div `
+  flex-shrink: 0;
+`;
+
+const NotificationBar = (_a) => {
+    var { icon, bgColor = theme.colors.yellow50, highlightColor = theme.colors.yellow800, message } = _a, rest = __rest(_a, ["icon", "bgColor", "highlightColor", "message"]);
+    return (React__default.createElement(StyledWrapper$1, Object.assign({ bgColor: bgColor, highlight: highlightColor }, rest),
+        React__default.createElement(StyledInner$1, null,
+            icon && React__default.createElement(StyledIcon$1, null, icon),
+            React__default.createElement(StyledText, { "data-has-icon": Boolean(icon) }, message))));
+};
+
+const StyledPostImagePreview = styled.div `
+  display: grid;
+  grid-gap: 3px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+
+  .img-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+    grid-column: auto;
+
+    & > img {
+      cursor: zoom-in;
+    }
+
+    .img-preview-blur {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 110%;
+      height: 110%;
+      /* Add the blur effect */
+      -webkit-filter: blur(8px);
+      filter: blur(8px);
+      object-fit: cover;
+      object-position: center;
+      opacity: 0.8;
+      transform: translate(-50%, -50%);
+    }
+    .img-preview {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      object-position: center;
+    }
+    .img-more-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 4;
+    }
+  }
+  &[data-image-count='1'] {
+    .img-wrapper {
+      /* padding-top: 100%; */
+      grid-column: 1/3;
+    }
+  }
+  &[data-image-count='2'] {
+    .img-wrapper {
+      /* padding-top: 100%; */
+    }
+  }
+  &[data-image-count='3'] {
+    .img-wrapper {
+      &:first-child {
+        grid-column: 1/3;
+      }
+    }
+  }
+  &[data-image-count='4'] {
+    .img-wrapper {
+      /* padding-top: 100%; */
+    }
+  }
+  &[data-image-count='5'] {
+    grid-template-columns: repeat(6, 1fr);
+    .img-wrapper {
+      /* padding-top: 100%; */
+      grid-column: auto/ span 2;
+
+      &:first-child {
+        padding-top: 56.25%;
+        grid-column: 1/4;
+      }
+      &:nth-child(2) {
+        padding-top: 56.25%;
+        grid-column: 4/7;
+      }
+    }
+  }
+
+  &[data-is-marrybaby='true'] {
+    grid-gap: 8px;
+    .img-wrapper {
+      padding-top: 66.66%;
+      border-radius: 1rem;
+      .img-preview {
+        object-fit: cover;
+      }
+    }
+    &[data-image-count='3'] {
+      grid-template-columns: 1fr 1fr 1fr;
+      .img-wrapper {
+        &:first-child {
+          padding-top: 100%;
+          grid-column: 1/3;
+          grid-row: 1/3;
+        }
+      }
+    }
+  }
+`;
+const StyledImagePreviewPopup = styled.div `
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  background: white;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s linear;
+  &[data-open='true'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .top-bar {
+    position: relative;
+    padding: 20px 40px;
+    .icon-arrow-left {
+      position: absolute;
+      top: 50%;
+      left: 20px;
+      height: 24px;
+      width: 24px;
+      cursor: pointer;
+      transform: translateY(-50%);
+    }
+  }
+  .container {
+    flex: 1;
+    overflow-y: auto;
+    .img-preview {
+      width: 100%;
+      min-width: 100%;
+      margin-bottom: 0.5rem;
+      cursor: pointer;
+      max-height: 100%;
+      object-fit: cover;
+    }
+  }
+`;
+const StyledNotificationBar = styled(NotificationBar) `
+  margin-bottom: 16px;
+`;
+
+var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M10.05 18.06 4 12.038l6.05-6.025M4.002 12.035h15'/%3e%3c/svg%3e";
+var IconArrowLeft = img$1;
+
+const ImagePreviewPopup = ({ className, style, authorName, images, onClose, onOpenSingleView, alt, }) => {
+    const { t } = useTranslations();
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setIsOpen(true);
+        }, 0);
+    }, []);
+    return (React__default.createElement(Portal, null,
+        React__default.createElement(StyledImagePreviewPopup, { className: className, style: style, "data-open": isOpen },
+            React__default.createElement("div", { className: "top-bar" },
+                React__default.createElement("img", { className: "icon-arrow-left", src: IconArrowLeft, onClick: onClose, alt: "go back", loading: "lazy" }),
+                React__default.createElement(Text, { size: "p2", weight: "bold", style: {
+                        textAlign: 'center',
+                    } }, t('previewPhotos.title', {
+                    name: authorName,
+                }))),
+            React__default.createElement("div", { className: "container" }, images.map((image, index) => (React__default.createElement("img", { className: "img-preview", key: index, src: image, onClick: () => onOpenSingleView === null || onOpenSingleView === void 0 ? void 0 : onOpenSingleView(index), alt: alt, loading: "lazy" }))))),
+        ","));
+};
+
+const StyledImagePreviewContainer = styled.div `
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background: black;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s linear;
+  &[data-open='true'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+const StyledImagePreviewTopbar = styled.div `
+  padding: 1rem;
+  background: white;
+  .icon-close {
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+  }
+`;
+const StyledImagePreviewWrapper = styled.div `
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  > img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+`;
+const StyledArrowWrapper = styled.div `
+  --inner-padding: max(16px, 20%);
+  height: 100%;
+  position: absolute;
+  left: 0;
+  padding: 8px;
+  padding-right: var(--inner-padding);
+  display: flex;
+  align-items: center;
+  top: 0;
+  cursor: pointer;
+  &[data-right] {
+    padding-right: 8px;
+    padding-left: var(--inner-padding);
+    left: unset;
+    right: 0;
+  }
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+const StyledCircleArrow = styled.div `
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  > img {
+    width: 16px;
+    height: 16px;
+    &[data-disabled='true'] {
+      opacity: 0.5;
+    }
+  }
+  ${MediaQueries.tdUp} {
+    padding: 8px;
+    > img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+`;
+
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m6 12.813 4-4-4-4'/%3e%3c/svg%3e";
+var ChevronRightIcon = img;
+
+const PostSingleImageViewPopup = ({ initialViewIndex, images, onClose, alt, }) => {
+    const [viewIndex, setViewIndex] = useState(initialViewIndex);
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        setTimeout(() => {
+            setIsOpen(true);
+        }, 0);
+    }, []);
+    const previewImg = images === null || images === void 0 ? void 0 : images[viewIndex];
+    const leftDisabled = viewIndex === 0;
+    const rightDisabled = !(images === null || images === void 0 ? void 0 : images.length) || viewIndex === (images === null || images === void 0 ? void 0 : images.length) - 1;
+    return (React__default.createElement(Portal, null,
+        React__default.createElement(StyledImagePreviewContainer, { "data-open": isOpen && !!previewImg },
+            React__default.createElement(StyledImagePreviewTopbar, null,
+                React__default.createElement("img", { src: CloseIcon, className: "icon-close", onClick: onClose, alt: "close", loading: "lazy" })),
+            previewImg && viewIndex >= 0 && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(StyledImagePreviewWrapper, null,
+                    React__default.createElement("img", { className: "img-preview", src: previewImg, alt: alt, loading: "lazy" }),
+                    React__default.createElement(StyledArrowWrapper, { "data-disabled": leftDisabled, onClick: () => !leftDisabled && setViewIndex(viewIndex - 1) },
+                        React__default.createElement(StyledCircleArrow, null,
+                            React__default.createElement("img", { src: ChevronRightIcon, style: {
+                                    transform: 'rotate(180deg)',
+                                }, alt: "left arrow", "data-disabled": leftDisabled, loading: "lazy" }))),
+                    React__default.createElement(StyledArrowWrapper, { "data-right": true, "data-disabled": rightDisabled, onClick: () => !rightDisabled && setViewIndex(viewIndex + 1) },
+                        React__default.createElement(StyledCircleArrow, null,
+                            React__default.createElement("img", { src: ChevronRightIcon, alt: "right arrow", "data-disabled": rightDisabled, loading: "lazy" })))))))));
+};
+
+const StyledInner = setDefaultClass(styled.div `
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  `, 'hhgcomp-sensitivemask-inner');
+const StyledIcon = styled.div ``;
+const StyledWrapper = styled.div `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  background: white;
+  cursor: pointer;
+
+  &,
+  * {
+    // transition: all 300ms;
+    transform-origin: bottom left;
+  }
+
+  img {
+    transition: none;
+  }
+  .img-preview {
+    width: 100%;
+  }
+  &[data-is-blurred='true'] {
+    .img-preview {
+      /* Add the blur effect */
+      -webkit-filter: blur(24px);
+      filter: blur(24px);
+    }
+  }
+
+  &[data-is-blurred='false'] {
+    background: transparent;
+    cursor: zoom-in;
+
+    ${StyledInner.classSelector} {
+      top: auto;
+      right: auto;
+      left: 8px;
+      bottom: 8px;
+      background: rgba(0, 0, 0, 0);
+      align-items: flex-end;
+      justify-content: flex-start;
+    }
+  }
+`;
+
+const SensitiveMask = ({ image, showIcon = true }) => {
+    const [isBlur, setBlur] = useState(true);
+    return (React__default.createElement(StyledWrapper, { "data-is-blurred": isBlur, onClick: (e) => isBlur && e.stopPropagation() },
+        React__default.createElement("img", { loading: "lazy", className: "img-preview", src: image }),
+        React__default.createElement(StyledInner, { onClick: (e) => {
+                e.stopPropagation();
+                setBlur(!isBlur);
+            } }, showIcon && (React__default.createElement(StyledIcon, null, isBlur ? (React__default.createElement("svg", { width: "22", height: "20", viewBox: "0 0 22 20", fill: "none" },
+            React__default.createElement("path", { d: "M1.71 2.54a.996.996 0 0 1 0-1.41c.39-.39 1.03-.39 1.42 0l16.31 16.33a.996.996 0 1 1-1.41 1.41l-2.72-2.72c-1.34.52-2.79.82-4.31.82-5 0-9.27-3.11-11-7.5C.77 7.5 2.06 5.8 3.68 4.51zM16 9.47c0-2.76-2.24-5-5-5-.51 0-1 .1-1.47.24L7.36 2.54c1.15-.37 2.37-.57 3.64-.57 5 0 9.27 3.11 11 7.49-.69 1.76-1.79 3.3-3.18 4.53l-3.06-3.06c.14-.46.24-.95.24-1.46m-5 5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14L8.06 8.9c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07l1.57 1.57c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z", fill: "#fff" }))) : (React__default.createElement("svg", { width: "23", height: "16", viewBox: "0 0 23 16", fill: "none" },
+            React__default.createElement("path", { d: "M12 0C5.142 0 1.886 5.879 1.096 7.557c-.132.28-.132.604 0 .884C1.886 10.121 5.142 16 12 16c6.834 0 10.092-5.837 10.896-7.54a1.08 1.08 0 0 0 0-.92C22.092 5.836 18.834 0 12 0m0 3a5 5 0 1 1-.001 10.001 5 5 0 0 1 0-10.001m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6", fill: "#2D87F3" }))))))));
+};
+
+const PostImagePreview = ({ className, images = [], style, authorName, isSensitive = false, alt, }) => {
+    const { data: { env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
+    const { t } = useTranslations();
+    const moreImageCount = `+ ${(images.length || 0) - 4}`;
+    const [isOpenImagePreview, setIsOpenImagePreview] = useState(false);
+    const [singleImageViewIndex, setSingleImageViewIndex] = useState(-1);
+    const hasMore = images.length > 5;
+    // Check if this component has set no scroll previously and clean it up
+    const hasSetNoScroll = useRef(false);
+    useEffect(() => {
+        return () => {
+            if (hasSetNoScroll.current) {
+                toggleNoScroll(false);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (isOpenImagePreview || singleImageViewIndex >= 0) {
+            toggleNoScroll(true);
+            hasSetNoScroll.current = true;
+        }
+        else {
+            toggleNoScroll(false);
+            hasSetNoScroll.current = false;
+        }
+    }, [isOpenImagePreview, singleImageViewIndex]);
+    return (React__default.createElement(React__default.Fragment, null,
+        isSensitive && (React__default.createElement(StyledNotificationBar, { message: t('sensitiveMask.contentWarningDescription'), icon: React__default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
+                React__default.createElement("path", { d: "M9 .667A8.336 8.336 0 0 0 .667 9c0 4.6 3.733 8.333 8.333 8.333S17.333 13.6 17.333 9 13.6.667 9 .667m0 9.166A.836.836 0 0 1 8.167 9V5.667c0-.459.375-.834.833-.834s.833.375.833.834V9A.836.836 0 0 1 9 9.833M8.167 11.5v1.667h1.666V11.5z", fill: "#FE921D" })) })),
+        React__default.createElement(StyledPostImagePreview, { className: className, style: style, "data-image-count": hasMore ? 5 : images.length || 0, "data-is-marrybaby": isMarryBaby, "data-cursor-pointer": !isSensitive }, images === null || images === void 0 ? void 0 : images.slice(0, 5).map((image, index) => {
+            const isMore = index === 4 && hasMore;
+            return (React__default.createElement("div", { className: `img-wrapper`, key: index, onClick: () => {
+                    if (index >= 4 && hasMore) {
+                        setIsOpenImagePreview(true);
+                    }
+                    else {
+                        setSingleImageViewIndex(index);
+                    }
+                } },
+                isSensitive && (React__default.createElement(SensitiveMask, { image: image, showIcon: !isMore })),
+                !isMarryBaby && (React__default.createElement("img", { loading: "lazy", className: "img-preview-blur", src: image, alt: alt })),
+                React__default.createElement("img", { loading: "lazy", className: "img-preview", src: image, alt: alt }),
+                isMore && (React__default.createElement("div", { className: "img-more-overlay" },
+                    React__default.createElement(Heading, { tag: "h1", as: "h2", color: "white" }, moreImageCount)))));
+        })),
+        isOpenImagePreview && (React__default.createElement(ImagePreviewPopup, { authorName: authorName || '', images: images, onClose: () => setIsOpenImagePreview(false), onOpenSingleView: setSingleImageViewIndex, alt: alt })),
+        singleImageViewIndex >= 0 && (React__default.createElement(PostSingleImageViewPopup, { images: images, initialViewIndex: singleImageViewIndex, onClose: () => setSingleImageViewIndex(-1), alt: alt }))));
+};
+
+export { CloseIcon as C, ImagePreviewPopup as I, PostSingleImageViewPopup as P, PostImagePreview as a };