@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-6

package/raw/together/components/molecules/postContent/index.styled.tsx

@@ -0,0 +1,66 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledPostContent = styled.div`
+  padding: 0.5rem 1rem 1rem;
+  line-height: 1.5;
+  word-break: break-word;
+  .post-content-replying {
+    margin-right: 5px;
+    color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+    cursor: pointer;
+    display: inline-block;
+    &.tag-only {
+      margin-right: 0;
+    }
+  }
+  .post-content {
+    display: inline;
+    white-space: pre-wrap;
+    /* > *:first-child, */
+    > mention:first-child ~ * {
+      &:not(ul),
+      &:not(ol) {
+        display: inline-block;
+      }
+    }
+    > mention:first-child {
+      margin-right: 5px;
+    }
+    &.has-see-more {
+      *:last-child {
+        &:not(ul),
+        &:not(ol) {
+          display: inline;
+        }
+      }
+    }
+    img {
+      width: 100%;
+      height: unset;
+    }
+    ul,
+    ol {
+      list-style-position: inside;
+      padding-left: 1rem;
+      display: block;
+    }
+    ol {
+      list-style-type: decimal;
+    }
+    ul {
+      list-style-type: disc;
+    }
+    mention {
+      color: #1890ff;
+      padding-right: 4px;
+      :hover {
+        text-decoration: underline;
+      }
+    }
+  }
+  .see-more-text {
+    color: #1890ff;
+    cursor: pointer;
+  }
+`

package/raw/together/components/molecules/postContent/index.tsx

@@ -0,0 +1,125 @@
+import React, { CSSProperties, useContext, useMemo, useState } from 'react'
+
+import { useTranslations } from 'hooks/useTranslations'
+import { UserInfo } from 'together/interfaces/types'
+import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
+
+import { useTogetherAuthRequiredAction } from '../../../hooks/useTogetherAuthRequiredAction'
+import { decodeMention, decodePostUrl } from '../../../utils/post'
+import { PopupExpert } from '../popupExpert'
+import { StyledPostContent } from './index.styled'
+
+export type Props = {
+  description?: string
+  replyingTo?: string
+  disableShortenContent?: boolean
+  className?: string
+  style?: CSSProperties
+  mentionedUser?: UserInfo
+  mentions?: {
+    id: number
+    name: string
+  }[]
+}
+
+export const PostContent = ({
+  className,
+  style,
+  replyingTo,
+  mentionedUser,
+  description: rawDescription,
+  disableShortenContent,
+  mentions = [],
+}: Props) => {
+  const [showAll, setShowAll] = useState(false)
+  const { t } = useTranslations()
+  const { authActionWrapper } = useTogetherAuthRequiredAction()
+  const [openPopupExpert, setOpenPopupExpert] = useState(false)
+  const description = decodeMention(
+    decodePostUrl(rawDescription || '', 'display'),
+    mentions,
+  )
+  const {
+    action: { sanitizeFunction },
+  } = useContext(TogetherComponentGlobalContext)
+  const shortenSanitizedContentData = useMemo(() => {
+    const sanitizedContent = sanitizeFunction(description || '')
+    if (disableShortenContent || showAll)
+      return {
+        showContent: sanitizedContent,
+        hasSeeMore: false,
+      }
+    const firstRound = sanitizedContent.slice(0, 200)
+    const newLineCompensateLength =
+      200 - ((firstRound.match(/<\/div>/g) || []).length - 1) * 27
+    const shortenFirstRound = (firstRound || '').slice(
+      0,
+      newLineCompensateLength < 40 ? 40 : newLineCompensateLength,
+    )
+
+    // remove < if we cut off right before start of a new html tag
+    const secondRound = sanitizeFunction(
+      shortenFirstRound.replace(/(<|<\/)( +|[a-zA-Z]*)$/gi, ''),
+    )
+    // don't show see more if not much difference
+    const hasSeeMore = secondRound.length < sanitizedContent.length - 10
+    return {
+      showContent: hasSeeMore ? secondRound : sanitizedContent,
+      hasSeeMore,
+    }
+  }, [disableShortenContent, showAll, description])
+
+  const replyName = mentionedUser?.name || replyingTo
+  const hasExpert =
+    mentionedUser?.role === 'expert' && !!mentionedUser?.partnerId
+  return (
+    <>
+      {hasExpert && (
+        <PopupExpert
+          isOpen={openPopupExpert}
+          onClose={() => setOpenPopupExpert(false)}
+          expertId={String(mentionedUser?.partnerId)}
+        ></PopupExpert>
+      )}
+      <StyledPostContent
+        className={`${className} no-replace-click`}
+        style={style}
+      >
+        {replyName && (
+          <span
+            onClick={() => hasExpert && setOpenPopupExpert(true)}
+            className="post-content-replying"
+          >
+            @{replyName}
+          </span>
+        )}
+        {rawDescription?.startsWith('[mention+id=') && (
+          <span className="post-content-replying tag-only">@</span>
+        )}
+        <span
+          dangerouslySetInnerHTML={{
+            __html: shortenSanitizedContentData.showContent,
+          }}
+          className={`post-content ${
+            shortenSanitizedContentData.hasSeeMore ? 'has-see-more' : ''
+          }`}
+        ></span>
+        {shortenSanitizedContentData.hasSeeMore && !showAll && (
+          <span>
+            {`... `}
+            <span
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                authActionWrapper(() => setShowAll(true))
+              }}
+              className="see-more-text"
+            >
+              {t('post.seeMore')}
+            </span>
+          </span>
+        )}
+      </StyledPostContent>
+    </>
+  )
+}

package/raw/together/components/molecules/postImagePreview/imagePreviewPopup.tsx

@@ -0,0 +1,73 @@
+import React, { CSSProperties, useEffect, useState } from 'react'
+
+import { Text } from 'components/atoms/text'
+import { useTranslations } from 'hooks/useTranslations'
+import * as ReactDOM from 'react-dom'
+
+import IconArrowLeft from '../../../assets/svg/icon-arrow-left.svg'
+import { StyledImagePreviewPopup } from './index.styled'
+
+export type Props = {
+  className?: string
+  style?: CSSProperties
+  images: string[]
+  authorName: string
+  onClose?: () => void
+  onOpenSingleView?: (index: number) => void
+}
+
+export const ImagePreviewPopup = ({
+  className,
+  style,
+  authorName,
+  images,
+  onClose,
+  onOpenSingleView,
+}: Props) => {
+  const { t } = useTranslations()
+  const [isOpen, setIsOpen] = useState(false)
+  useEffect(() => {
+    setTimeout(() => {
+      setIsOpen(true)
+    }, 0)
+  }, [])
+  return ReactDOM.createPortal(
+    <StyledImagePreviewPopup
+      className={className}
+      style={style}
+      data-open={isOpen}
+    >
+      <div className="top-bar">
+        <img
+          className="icon-arrow-left"
+          src={IconArrowLeft}
+          onClick={onClose}
+          alt="go back"
+        ></img>
+        <Text
+          size="p2"
+          type="bold"
+          style={{
+            textAlign: 'center',
+          }}
+        >
+          {t('previewPhotos.title', {
+            name: authorName,
+          })}
+        </Text>
+      </div>
+      <div className="container">
+        {images.map((image, index) => (
+          <img
+            className="img-preview"
+            key={index}
+            src={image}
+            onClick={() => onOpenSingleView?.(index)}
+            alt="post img"
+          />
+        ))}
+      </div>
+    </StyledImagePreviewPopup>,
+    document.body,
+  )
+}

package/raw/together/components/molecules/postImagePreview/index.styled.tsx

@@ -0,0 +1,154 @@
+import styled from 'styled-components'
+
+export const StyledPostImagePreview = styled.div`
+  display: grid;
+  cursor: pointer;
+  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-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);
+    }
+  }
+  &[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;
+        }
+      }
+    }
+  }
+`
+export 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;
+    }
+  }
+`

package/raw/together/components/molecules/postImagePreview/index.tsx

@@ -0,0 +1,115 @@
+import React, {
+  CSSProperties,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import { Heading } from 'components/atoms/heading'
+import { lazyLoadInstance } from 'misc/lazyLoad'
+import { toggleNoScroll } from 'misc/utils'
+import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
+
+import { ImagePreviewPopup } from './imagePreviewPopup'
+import { StyledPostImagePreview } from './index.styled'
+import { PostSingleImageViewPopup } from './postSingleImageViewPopup'
+
+export type Props = {
+  images?: string[]
+  authorName?: string
+  className?: string
+  style?: CSSProperties
+}
+
+const PostImagePreview = ({
+  className,
+  images = [],
+  style,
+  authorName,
+}: Props) => {
+  const {
+    data: {
+      env: { isMarryBaby },
+    },
+  } = useContext(TogetherComponentGlobalContext)
+  const moreImageCount = `+ ${(images.length || 0) - 4}`
+  const [isOpenImagePreview, setIsOpenImagePreview] = useState(false)
+  const [singleImageViewIndex, setSingleImageViewIndex] = useState(-1)
+
+  useEffect(() => {
+    setTimeout(() => lazyLoadInstance?.update(), 100)
+  }, [images?.slice(0, 5).join('|')])
+  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 (
+    <>
+      <StyledPostImagePreview
+        className={className}
+        style={style}
+        data-image-count={hasMore ? 5 : images.length || 0}
+        data-is-marrybaby={isMarryBaby}
+      >
+        {images?.slice(0, 5).map((image, index) => (
+          <div
+            className={`img-wrapper`}
+            key={index}
+            onClick={() => {
+              if (index >= 4 && hasMore) {
+                setIsOpenImagePreview(true)
+              } else {
+                setSingleImageViewIndex(index)
+              }
+            }}
+          >
+            {!isMarryBaby && (
+              <img className="lazy img-preview-blur" data-src={image} />
+            )}
+            <img className="lazy img-preview" data-src={image} />
+            {index === 4 && hasMore && (
+              <div className="img-more-overlay">
+                <Heading tag="h1" color="white">
+                  {moreImageCount}
+                </Heading>
+              </div>
+            )}
+          </div>
+        ))}
+      </StyledPostImagePreview>
+      {isOpenImagePreview && (
+        <ImagePreviewPopup
+          authorName={authorName || ''}
+          images={images}
+          onClose={() => setIsOpenImagePreview(false)}
+          onOpenSingleView={setSingleImageViewIndex}
+        />
+      )}
+      {singleImageViewIndex >= 0 && (
+        <PostSingleImageViewPopup
+          images={images}
+          initialViewIndex={singleImageViewIndex}
+          onClose={() => setSingleImageViewIndex(-1)}
+        />
+      )}
+    </>
+  )
+}
+
+export { PostImagePreview }

package/raw/together/components/molecules/postImagePreview/postSingleImageViewPopup/index.styled.tsx

@@ -0,0 +1,84 @@
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export 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;
+  }
+`
+export const StyledImagePreviewTopbar = styled.div`
+  padding: 1rem;
+  background: white;
+  .icon-close {
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+  }
+`
+export const StyledImagePreviewWrapper = styled.div`
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  > img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+    object-position: center;
+  }
+`
+export 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;
+  }
+`
+export 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;
+    }
+  }
+`

package/raw/together/components/molecules/postImagePreview/postSingleImageViewPopup/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react'
+
+import * as ReactDOM from 'react-dom'
+
+import ChevronRightIcon from '../../../../assets/svg/icon-chevron-right-white.svg'
+import CloseIcon from '../../../../assets/svg/icon-close.svg'
+import {
+  StyledArrowWrapper,
+  StyledCircleArrow,
+  StyledImagePreviewContainer,
+  StyledImagePreviewTopbar,
+  StyledImagePreviewWrapper,
+} from './index.styled'
+
+export type Props = {
+  images: string[]
+  initialViewIndex: number
+  onClose?: () => void
+}
+export const PostSingleImageViewPopup = ({
+  initialViewIndex,
+  images,
+  onClose,
+}: Props) => {
+  const [viewIndex, setViewIndex] = useState(initialViewIndex)
+  const [isOpen, setIsOpen] = useState(false)
+  useEffect(() => {
+    setTimeout(() => {
+      setIsOpen(true)
+    }, 0)
+  }, [])
+  const previewImg = images?.[viewIndex]
+  const leftDisabled = viewIndex === 0
+  const rightDisabled = !images?.length || viewIndex === images?.length - 1
+  return ReactDOM.createPortal(
+    <StyledImagePreviewContainer data-open={isOpen && !!previewImg}>
+      <StyledImagePreviewTopbar>
+        <img
+          src={CloseIcon}
+          className="icon-close"
+          onClick={onClose}
+          alt="close"
+        />
+      </StyledImagePreviewTopbar>
+      {previewImg && viewIndex >= 0 && (
+        <>
+          <StyledImagePreviewWrapper>
+            <img className="img-preview" src={previewImg} alt="post img open" />
+            <StyledArrowWrapper
+              data-disabled={leftDisabled}
+              onClick={() => !leftDisabled && setViewIndex(viewIndex - 1)}
+            >
+              <StyledCircleArrow>
+                <img
+                  src={ChevronRightIcon}
+                  style={{
+                    transform: 'rotate(180deg)',
+                  }}
+                  alt="left arrow"
+                  data-disabled={leftDisabled}
+                />
+              </StyledCircleArrow>
+            </StyledArrowWrapper>
+            <StyledArrowWrapper
+              data-right
+              data-disabled={rightDisabled}
+              onClick={() => !rightDisabled && setViewIndex(viewIndex + 1)}
+            >
+              <StyledCircleArrow>
+                <img
+                  src={ChevronRightIcon}
+                  alt="right arrow"
+                  data-disabled={rightDisabled}
+                />
+              </StyledCircleArrow>
+            </StyledArrowWrapper>
+          </StyledImagePreviewWrapper>
+        </>
+      )}
+    </StyledImagePreviewContainer>,
+    document.body,
+  )
+}