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

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

@@ -1,227 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import { MediaQueries } from 'misc/utils'
-import styled from 'styled-components'
-
-export const StyledInputCommentBar = styled.div`
-  padding: 1rem;
-  border-top: 1px solid #f2f2f2;
-  &[data-is-reply='true'] {
-    padding-right: 0;
-    padding-left: 0;
-    border-top: 1px solid #e4e8ec;
-    margin-right: 1rem;
-    margin-left: 1rem;
-  }
-  .error-text {
-    padding: 1rem;
-    color: ${(props: ThemeProps) => props.theme.colors.red700};
-  }
-  .reply-to-container {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 0.75rem;
-    margin-top: -0.25rem;
-    .icon-close-comment {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-    }
-    a {
-      text-decoration: none;
-    }
-  }
-  .input-container {
-    display: flex;
-    align-items: center;
-    .avatar-wrapper {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      margin-right: 0.5rem;
-      &.avatar-wrapper-reply {
-        width: 32px;
-        height: 32px;
-        .avatar {
-          width: 32px;
-          height: 32px;
-        }
-      }
-    }
-    .input-wrapper {
-      margin-right: 0.5rem;
-      &[data-has-error] {
-        .as-input {
-          border-color: ${(props: ThemeProps) => props.theme.colors.red700};
-        }
-      }
-
-      .as-input {
-        .textarea {
-          width: 100%;
-          max-height: 225px;
-          min-height: 75px;
-          .ql-toolbar {
-            padding: 0;
-          }
-          .ql-editor {
-            padding-left: 0;
-            padding-right: 0;
-          }
-          .quill {
-            height: 0;
-          }
-        }
-        width: 100%;
-        padding: 12px 16px;
-        border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray200};
-        border-radius: 6px;
-
-        &:active,
-        &:focus {
-          border-color: ${(props: ThemeProps) =>
-            props.theme.colors.primaryBase};
-          box-shadow: 0px 0px 2px 2px
-            ${(props: ThemeProps) => props.theme.colors.blue200};
-        }
-
-        &:disabled {
-          background-color: ${(props: ThemeProps) =>
-            props.theme.colors.gray100};
-          cursor: not-allowed;
-        }
-
-        span {
-          &[data-error='true'] {
-            color: red;
-            text-decoration: underline;
-          }
-        }
-      }
-
-      &[data-has-action-icon] {
-        .as-input {
-          padding: 12px 48px 12px 16px;
-        }
-      }
-      &[data-has-display-icon] {
-        .as-input {
-          padding: 12px 16px 12px 48px;
-        }
-      }
-
-      &[data-has-action-icon][data-has-display-icon] {
-        .as-input {
-          padding: 12px 48px;
-        }
-      }
-
-      &[data-size='lg'] {
-        .as-input {
-          font-size: 16px;
-          font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-          ${MediaQueries.mbDown} {
-            font-size: 22px;
-            line-height: 1.2;
-          }
-
-          ${MediaQueries.mbUp} {
-            font-size: 26px;
-            line-height: 1.2;
-          }
-        }
-      }
-      &[data-size='md'] {
-        .as-input {
-          font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-          line-height: 22px;
-          ${MediaQueries.mbDown} {
-            font-size: 14px;
-            line-height: 1.2;
-          }
-
-          ${MediaQueries.mbUp} {
-            font-size: 16px;
-            line-height: 1.2;
-          }
-        }
-      }
-      &[data-size='sm'] {
-        .as-input {
-          font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
-          line-height: 20px;
-          ${MediaQueries.mbDown} {
-            font-size: 13px;
-            line-height: 1.5;
-          }
-
-          ${MediaQueries.mbUp} {
-            font-size: 13px;
-            line-height: 1.5;
-          }
-        }
-      }
-    }
-    .images-input-label {
-      height: 100%;
-      cursor: pointer;
-      .icon-images-input {
-        width: 24px;
-        height: 24px;
-        vertical-align: middle;
-      }
-    }
-    .send-button {
-      display: flex;
-      width: 40px;
-      height: 40px;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      border: none;
-      &.send-button-post {
-        background: ${(props: ThemeProps) => props.theme.colors.neutral100};
-        border-radius: 50%;
-      }
-      .icon-enter {
-        width: 20px;
-        height: 20px;
-        vertical-align: middle;
-      }
-      &[data-is-loading='true'] {
-        > div {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-  }
-  .preview-images-container {
-    margin-top: 1rem;
-    .image-src-wrapper {
-      position: relative;
-      width: 100%;
-      padding-top: 66.67%;
-      &:not(:last-child) {
-        margin-bottom: 1rem;
-      }
-      .preview-image {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-      .icon-close-circle {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        width: 20px;
-        height: 20px;
-        cursor: pointer;
-      }
-    }
-  }
-`

package/src/together/components/molecules/inputCommentBar/index.tsx

@@ -1,341 +0,0 @@
-import React, {
-  CSSProperties,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Input } from 'components/atoms/input'
-import { Text } from 'components/atoms/text'
-import { useImagePicker } from 'hooks/useImagesPicker'
-import { useTranslations } from 'hooks/useTranslations'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { formatComment } from '../../../api/dataTransform'
-import IconCloseCircleLine from '../../../assets/svg/icon-close-circle-line.svg'
-import IconCloseCircle from '../../../assets/svg/icon-close-circle.svg'
-import IconEnter from '../../../assets/svg/icon-enter.svg'
-import IconTabEditPrimary from '../../../assets/svg/icon-tab-edit-primary.svg'
-import { DEFAULT_AVATAR_IMG } from '../../../interfaces/constants'
-import { Comment, Post, UserInfo } from '../../../interfaces/types'
-import {
-  getCommentFormBody,
-  submitComment,
-  submitReply,
-} from '../../../utils/apiActions/comment'
-import { CardLink } from '../../atoms/cardLink'
-import { Loading } from '../../atoms/loading'
-import { UserAvatar } from '../../atoms/userAvatar'
-import { RichTextEditor } from '../createPostDescription/editor'
-import { StyledInputCommentBar } from './index.styled'
-import { MainInputTriggerContext } from './mainInputTriggerContext'
-
-export type Props = {
-  className?: string
-  onClose?: () => void
-  replyToName?: string
-  replyToUrl?: string
-  replyingId?: string
-  replyingUser?: UserInfo
-  replyingUserExpertId?: string
-  style?: CSSProperties
-  onPostSuccess?: (c: Comment) => void
-  isMainCmt?: boolean
-  post?: Post
-  isReply?: boolean
-  isMarryBaby?: boolean
-}
-const InputCommentBar = ({
-  isReply,
-  className,
-  onClose,
-  replyToName,
-  style,
-  replyingId,
-  replyingUser,
-  onPostSuccess,
-  isMainCmt = false,
-  post,
-  isMarryBaby: isMarryBabyProp,
-}: Props) => {
-  const {
-    action: { pushNotifications, sanitizeFunction },
-    data: {
-      userInfo,
-      locale,
-      env: { isMarryBaby: isMarryBabyContext },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const isMarryBaby =
-    typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext
-  const { t } = useTranslations()
-
-  const {
-    onSelectImages,
-    onRemoveImage,
-    imageSrcs,
-    onRemoveAllImages,
-    imageFiles,
-  } = useImagePicker()
-  const [text, setText] = useState<string>('')
-  const { trigger } = useContext(MainInputTriggerContext)
-  const [isSubmitLoading, setIsSubmitLoading] = useState<boolean>(false)
-  const imagePicker = useRef<HTMLInputElement>(null)
-  const contentEditable = useRef<HTMLElement | null>(null)
-  const mainInput = useRef<HTMLDivElement>(null)
-
-  const [invalidUrls, setInvalidUrls] = useState<string[]>([])
-  const [bannedWords, setBannedWords] = useState<string[]>([])
-  const [previewUrl, setPreviewUrl] = useState<{
-    title?: string
-    url?: string
-    image?: string
-    rawUrl?: string
-    description?: string
-    isFetching?: boolean
-  } | null>(null)
-
-  const onSubmitComment = async () => {
-    if (!post?.id || isSubmitLoading) return
-    setIsSubmitLoading(true)
-    try {
-      const handleSuccess = (res: any) => {
-        setText('')
-        onRemoveAllImages()
-        onClose && onClose()
-        const newComment = formatComment(res.data)
-        if (typeof newComment.images === 'string') {
-          newComment.images = JSON.parse(newComment.images)
-        }
-        onPostSuccess && onPostSuccess(newComment)
-      }
-
-      const formBody = await getCommentFormBody({
-        message: text,
-        photos: imageFiles as File[],
-
-        postId: String(post.id),
-        link: previewUrl?.url,
-        sanitizeFunction,
-        locale,
-        ...(isReply && replyingId
-          ? {
-              replyingUserId: String(
-                replyingUser?.id || post?.author?.id || '',
-              ),
-              replyingId,
-              replyingUserName:
-                replyingUser?.name || replyingUser?.username || '',
-            }
-          : {}),
-      })
-
-      const res = await (isReply && replyingId
-        ? submitReply(formBody, locale)
-        : submitComment(formBody, locale))
-
-      const resData = res?.data
-      if (resData?.id && !res?.messages?.moderation?.type) {
-        handleSuccess(res)
-      } else {
-        if (res?.messages?.moderation?.type === 'banned') {
-          pushNotifications({
-            title: t('notification.comment.blocked.title'),
-            message: t('notification.comment.blocked.message'),
-            type: 'danger',
-          })
-          if (res.messages.moderation.words) {
-            setBannedWords(res.messages.moderation.words)
-          }
-        } else if (res?.messages?.moderation?.type === 'suspect') {
-          pushNotifications({
-            title: t('notification.comment.suspect.title'),
-            message: t('notification.comment.suspect.message'),
-            type: 'warning',
-          })
-          setText('')
-          onRemoveAllImages()
-          onClose && onClose()
-        } else if (
-          res?.messages?.find((m: string) => !!m?.includes?.('suspend'))
-        ) {
-          pushNotifications({
-            message: t('notification.suspend.message'),
-            type: 'warning',
-          })
-          setText('')
-          onRemoveAllImages()
-          onClose && onClose()
-        } else {
-          pushNotifications({
-            title: '',
-            message:
-              res?.messages?.[0] || t('notification.comment.somethingWrong'),
-            type: 'danger',
-          })
-        }
-      }
-    } catch (e) {
-      pushNotifications({
-        title: '',
-        message: t('notification.comment.somethingWrong'),
-        type: 'danger',
-      })
-    }
-    setIsSubmitLoading(false)
-  }
-
-  useEffect(() => {
-    mainInput.current?.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start',
-    })
-    setTimeout(() => {
-      contentEditable.current?.focus()
-    }, 400)
-  }, [trigger])
-
-  return (
-    <StyledInputCommentBar
-      data-is-reply={isReply}
-      className={className}
-      style={style}
-    >
-      {isReply && (
-        <div className="reply-to-container">
-          <Text size="p4">
-            <span
-              dangerouslySetInnerHTML={{
-                __html: t('inputComment.replyTo', {
-                  name: `<span style="color: #2D87F3; cursor: pointer">@${
-                    replyToName || ''
-                  }</span>`,
-                }),
-              }}
-            ></span>
-          </Text>
-          <img
-            src={IconCloseCircleLine}
-            className="icon-close-comment"
-            onClick={() => onClose && onClose()}
-          />
-        </div>
-      )}
-      <div className="input-container" ref={mainInput}>
-        <UserAvatar
-          className={`avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`}
-          avatar={userInfo?.id ? userInfo.avatar : DEFAULT_AVATAR_IMG}
-          username={userInfo?.name || userInfo?.username}
-        />
-        <input
-          ref={imagePicker}
-          onChange={onSelectImages}
-          type="file"
-          multiple
-          accept="image/png,image/jpeg"
-          name="images"
-          style={{ display: 'none' }}
-        />
-        <Input
-          // actionIcon={
-          //   !isPost ? (
-          //     <label className="images-input-label">
-          //       <img
-          //         className="icon-images-input"
-          //         src="./svg/icon-image-input.svg"
-          //       />
-          //       <input
-          //         onChange={onSelectImages}
-          //         type="file"
-          //         multiple
-          //         accept="image/png,image/jpeg"
-          //         name="images"
-          //         style={{ display: 'none' }}
-          //       />
-          //     </label>
-          //   ) : undefined
-          // }
-          value={text}
-          name="input"
-          size="md"
-          className="input-wrapper"
-          displayIcon={<img src={IconTabEditPrimary} />}
-          CustomInput={
-            <div className="as-input">
-              <RichTextEditor
-                className="textarea"
-                html={text}
-                onChange={setText}
-                onImagePickerClick={() => imagePicker.current?.click()}
-                bannedWords={bannedWords}
-                onPreviewUrlChange={setPreviewUrl}
-                onInvalidUrlsChange={setInvalidUrls}
-                setEditorRef={(div) => (contentEditable.current = div)}
-                isReplying={isReply}
-              />
-            </div>
-          }
-        ></Input>
-
-        <Button
-          theme={isMarryBaby ? 'marryBaby' : 'helloSites'}
-          className="send-button"
-          size="sm"
-          onClick={onSubmitComment}
-          isLoading={isSubmitLoading}
-          isDisabled={
-            !!invalidUrls?.length ||
-            isSubmitLoading ||
-            !text ||
-            text?.length < 2 ||
-            !text.trim()
-          }
-        >
-          <img src={IconEnter} className="icon-enter" />
-        </Button>
-      </div>
-      {!!invalidUrls?.length ? (
-        <div className="error-text">{t('notification.limitUrlDomain')}</div>
-      ) : null}
-      {(!imageSrcs || imageSrcs.length === 0) && previewUrl && (
-        <div className="link-preview-wrapper">
-          {previewUrl.isFetching ? (
-            <Loading />
-          ) : (
-            <>
-              <CardLink
-                title={previewUrl.title}
-                url={previewUrl.url || '#'}
-                image={previewUrl.image}
-                noRefetch
-              />
-              <img
-                src={IconCloseCircle}
-                className="icon-close"
-                onClick={() => setPreviewUrl(null)}
-              />
-            </>
-          )}
-        </div>
-      )}
-      {imageSrcs && imageSrcs.length > 0 && (
-        <div className="preview-images-container">
-          {imageSrcs.map((src, index) => (
-            <div key={index} className="image-src-wrapper">
-              <img className="preview-image" src={src} />
-              <img
-                src={IconCloseCircle}
-                className="icon-close-circle"
-                onClick={() => onRemoveImage(index)}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-    </StyledInputCommentBar>
-  )
-}
-
-export { InputCommentBar }

package/src/together/components/molecules/inputCommentBar/mainInputTriggerContext.tsx

@@ -1,26 +0,0 @@
-import React, { createContext, ReactNode, useState } from 'react'
-
-export type Context = {
-  trigger?: boolean
-  onTrigger?: () => void
-}
-
-export const MainInputTriggerContext = createContext({} as Context)
-
-export const MainInputTriggerContextProvider = ({
-  children,
-}: {
-  children?: ReactNode
-}) => {
-  const [trigger, setTrigger] = useState(false)
-  return (
-    <MainInputTriggerContext.Provider
-      value={{
-        trigger,
-        onTrigger: () => setTrigger((v) => !v),
-      }}
-    >
-      {children}
-    </MainInputTriggerContext.Provider>
-  )
-}