@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

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

@@ -1,66 +0,0 @@
-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/src/together/components/molecules/postContent/index.tsx

@@ -1,125 +0,0 @@
-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/src/together/components/molecules/postImagePreview/imagePreviewPopup.tsx

@@ -1,73 +0,0 @@
-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/src/together/components/molecules/postImagePreview/index.styled.tsx

@@ -1,154 +0,0 @@
-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/src/together/components/molecules/postImagePreview/index.tsx

@@ -1,115 +0,0 @@
-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/src/together/components/molecules/postImagePreview/postSingleImageViewPopup/index.styled.tsx

@@ -1,84 +0,0 @@
-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/src/together/components/molecules/postImagePreview/postSingleImageViewPopup/index.tsx

@@ -1,83 +0,0 @@
-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,
-  )
-}