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

package/raw/src/together/components/molecules/createPostDescription/index.styled.tsx

@@ -0,0 +1,328 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledCreatePostDescription = styled.div`
+  input:focus,
+  textarea:focus,
+  [contenteditable='true'] {
+    outline: none;
+  }
+
+  .textarea-control {
+    position: relative;
+    border: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
+    border-radius: 6px;
+    &.--focus {
+      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px
+        ${(props: ThemeProps) => props.theme.colors.blue200};
+    }
+
+    .textarea-wrapper {
+      width: 100%;
+      height: 200px;
+    }
+
+    .control-tool {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      width: calc(100% - 2rem);
+      height: 40px;
+      align-items: center;
+      justify-content: flex-end;
+      border-top: 1px solid ${(props: ThemeProps) => props.theme.colors.gray200};
+      margin: 0 1rem;
+
+      .tool-button {
+        display: flex;
+        width: 2rem;
+        height: 2rem;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        cursor: pointer;
+      }
+      .image-icon {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .link-preview-wrapper {
+    position: relative;
+    .icon-close {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+  }
+
+  .image-gallery {
+    margin-bottom: 1rem;
+
+    .image-item {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 0;
+      padding-top: 67%;
+      margin-top: 1rem;
+      border-radius: 6px;
+
+      & > img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .close-btn {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        left: unset;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .description-label {
+    margin-bottom: 5px;
+    color: ${(props: ThemeProps) => props.theme.colors.gray600};
+    /* font-family: 'Open Sans', sans-serif; */
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .count-string {
+    margin-top: 5px;
+    color: ${(props: ThemeProps) => props.theme.colors.gray500};
+    font-size: 11px;
+    text-align: right;
+  }
+
+  .input-notification {
+    display: flex;
+
+    & > img {
+      width: 16px;
+      height: 16px;
+      margin-top: 1.5px;
+      margin-right: 8px;
+    }
+  }
+`
+
+export const StyledEditorContainer = styled.div`
+  height: 100%;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .ql-toolbar.ql-snow {
+    top: 0;
+    width: 100%;
+    position: sticky;
+    z-index: 3;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    background: white;
+    .ql-formats {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 0.5rem;
+      .link-tool-wrapper {
+        .popover-menu__content {
+          padding: 0.5rem;
+          transform: translateX(calc(-50% - 1rem));
+          max-width: calc(100vw - 4rem);
+          ::before {
+            right: calc(50% - 8px);
+          }
+          .link-tool-popover {
+            input {
+              padding-left: 1rem;
+            }
+            .link-input-url {
+              margin-bottom: 0.5rem;
+            }
+            .link-input-text {
+              margin-bottom: 0.5rem;
+            }
+            label {
+              display: inline-block;
+              margin-bottom: 0.2rem;
+            }
+            .link-input-button-wrapper {
+              &[data-is-marrybaby='true'] {
+                .link-input-button {
+                  border: solid 2px
+                    ${(props: ThemeProps) => props.theme.mbColors.pink};
+                  background-color: ${(props: ThemeProps) =>
+                    props.theme.mbColors.pink};
+                  &:hover:not(:disabled) {
+                    border: solid 2px
+                      ${(props: ThemeProps) => props.theme.mbColors.pink};
+                    background-color: ${(props: ThemeProps) =>
+                      props.theme.colors.white};
+                    color: ${(props: ThemeProps) => props.theme.mbColors.pink};
+                  }
+                }
+              }
+            }
+            .link-input-button {
+              width: auto;
+              height: auto;
+              padding: 0.4rem 1rem;
+              background-color: ${(props: ThemeProps) =>
+                props.theme.colors.primaryBase};
+
+              &:disabled {
+                border-color: #bfbfbf;
+                background-color: #bfbfbf;
+                color: #fff;
+                cursor: not-allowed;
+              }
+              &:hover:not(:disabled) {
+                background-color: ${(props: ThemeProps) =>
+                  props.theme.colors.primaryHover};
+              }
+            }
+            .error-text {
+              padding: 0;
+              margin-bottom: 0.5rem;
+              font-weight: 600;
+              color: ${(props: ThemeProps) => props.theme.colors.red700};
+            }
+          }
+        }
+      }
+    }
+    @media (max-width: 450px) {
+      position: relative;
+      .ql-formats {
+        .link-tool-wrapper {
+          position: unset;
+          .popover-menu__content {
+            left: 0;
+            transform: unset;
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+  .quill {
+    flex: 1;
+    overflow-y: hidden;
+    .ql-container {
+      display: inline-block;
+      width: 100%;
+      min-height: 100%;
+      /* padding: 14px 16px; */
+      border: none;
+      border-radius: 6px;
+      color: ${(props: ThemeProps) => props.theme.colors.gray800};
+      font-size: 1rem;
+      line-height: 1.5;
+      resize: none;
+      white-space: break-spaces;
+      .ql-editor {
+        word-break: break-word;
+        overflow-wrap: break-word;
+        /* -ms-overflow-style: none;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        } */
+      }
+      mocka {
+        padding: 2px 6px;
+        border-radius: 1rem;
+        &[data-url='true'] {
+          /* background-color: #eeeeff; */
+          font-style: italic;
+          color: #1890ff;
+          cursor: pointer;
+          outline: none;
+          text-decoration: underline;
+        }
+        &[data-error='true'] {
+          background-color: #ffeeee;
+          color: red;
+          text-decoration: underline;
+          font-style: bold;
+        }
+      }
+      mention {
+        padding: 2px 6px;
+        border-radius: 1rem;
+        background-color: #eeeeff;
+        color: #1890ff;
+        cursor: pointer;
+        outline: none;
+        text-decoration: none;
+      }
+      ol,
+      ul {
+        padding-left: 1rem;
+      }
+    }
+  }
+  .mention-search-container {
+    position: absolute;
+    background: white;
+    border-radius: 6px;
+    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
+      drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
+      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
+    overflow-y: scroll;
+    z-index: 99;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    ::-webkit-scrollbar:vertical {
+      width: 14px;
+    }
+    ::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      background-color: #d9d9d9;
+      @supports (background-clip: padding-box) {
+        border: 3px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+      }
+      @supports not (background-clip: padding-box) {
+        border: 3px solid white;
+      }
+    }
+    ::-webkit-scrollbar-track {
+      background-color: #fff;
+      border-radius: 0 6px 6px 0;
+      border-left: 1px solid #f2f2f2;
+    }
+    .mention-search-item {
+      cursor: pointer;
+      padding: 12px 1rem;
+      display: flex;
+      align-items: center;
+      &.item-selected {
+        background-color: ${(props: ThemeProps) => props.theme.colors.gray100};
+      }
+      .search-avatar {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+        margin-right: 20px;
+      }
+    }
+  }
+`

package/raw/src/together/components/molecules/createPostDescription/index.tsx

@@ -0,0 +1,163 @@
+import React, { CSSProperties, useEffect, useRef, useState } from 'react'
+
+import { Text } from 'components/atoms'
+import { useImagePicker } from 'hooks/useImagesPicker'
+import { useTranslations } from 'hooks/useTranslations'
+import innertext from 'innertext'
+import { theme } from 'misc/theme'
+import { MAX_IMAGE_UPLOADS } from 'together/interfaces/constants'
+
+import IconAlertCircleWarning from '../../../assets/svg/icon-alert-circle-warning.svg'
+import IconCloseCircle from '../../../assets/svg/icon-close-circle.svg'
+import { CardLink } from '../../atoms/cardLink'
+import { Loading } from '../../atoms/loading'
+import { RichTextEditor } from './editor'
+import { StyledCreatePostDescription } from './index.styled'
+
+export type Props = {
+  className?: string
+  style?: CSSProperties
+  bannedWords?: string[]
+  value?: string
+  onChange?: (v: string) => void
+  onPreviewUrlChange?: (
+    v: {
+      title: string
+      url: string
+      image: string
+      description: string
+    } | null,
+  ) => void
+  onInvalidUrlsChange?: (v: string[]) => void
+  imageFiles?: (File | string)[]
+  onImageFilesChange?: (v: (File | string)[]) => void
+  isReplying?: boolean
+}
+
+export const CreatePostDescription = ({
+  className,
+  style,
+  bannedWords = [],
+  value,
+  onChange,
+  onPreviewUrlChange,
+  onInvalidUrlsChange,
+  onImageFilesChange,
+  imageFiles: imageFilesProp,
+  isReplying,
+}: Props) => {
+  const { t } = useTranslations()
+  const [previewUrl, setPreviewUrl] = useState<{
+    title?: string
+    url?: string
+    image?: string
+    rawUrl?: string
+    description?: string
+    isFetching?: boolean
+  } | null>(null)
+  const imagePicker = useRef<HTMLInputElement>(null)
+
+  const {
+    onSelectImages,
+    onRemoveImage,
+    imageSrcs,
+    // imageFiles,
+  } = useImagePicker(imageFilesProp, onImageFilesChange)
+
+  useEffect(() => {
+    if (onPreviewUrlChange) {
+      if (previewUrl?.url)
+        onPreviewUrlChange({
+          title: previewUrl.title || '',
+          url: previewUrl.url || '',
+          image: previewUrl.image || '',
+          description: previewUrl.description || '',
+        })
+      else onPreviewUrlChange(null)
+    }
+  }, [previewUrl])
+
+  return (
+    <StyledCreatePostDescription className={className} style={style}>
+      <Text size="p4" className="description-label">
+        {t('createPost.popup.description')}
+      </Text>
+      <div className={`textarea-control`}>
+        <div className="textarea-wrapper">
+          <RichTextEditor
+            html={value || ''} // innerHTML of the editable div
+            onChange={onChange}
+            bannedWords={bannedWords}
+            onImagePickerClick={() => imagePicker.current?.click()}
+            onPreviewUrlChange={setPreviewUrl}
+            onInvalidUrlsChange={onInvalidUrlsChange}
+            isReplying={isReplying}
+          />
+        </div>
+        {/* <div className="control-tool">
+          <div
+            className="tool-button"
+            color="transparent"
+            onClick={() => imagePicker.current?.click()}
+          >
+            <img className="image-icon" src="./svg/icon-image-input.svg" />
+          </div>
+        </div> */}
+      </div>
+      <Text size="p4" className="count-string">
+        {t('character')}: {innertext(value || '').length}
+      </Text>
+      {(!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>
+      )}
+      <input
+        ref={imagePicker}
+        type="file"
+        accept="image/png, image/gif, image/jpeg"
+        multiple={true}
+        style={{ display: 'none' }}
+        onChange={onSelectImages}
+      />
+      {imageSrcs.length > MAX_IMAGE_UPLOADS ? (
+        <div className="input-notification">
+          <img src={IconAlertCircleWarning} />
+          <Text size="p4" color={theme.colors.alertWarning}>
+            {t(`createPost.popup.warningImage`)}
+          </Text>
+        </div>
+      ) : null}
+      {imageSrcs.length > 0 && (
+        <div className="image-gallery">
+          {imageSrcs.map((src, i) => (
+            <div key={i} className="image-item">
+              <img src={src} />
+              <img
+                className="close-btn"
+                src={IconCloseCircle}
+                onClick={() => onRemoveImage(i)}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </StyledCreatePostDescription>
+  )
+}

package/raw/src/together/components/molecules/createPostTitle/index.styled.tsx

@@ -0,0 +1,62 @@
+import { ThemeProps } from 'misc/theme'
+import styled from 'styled-components'
+
+export const StyledCreatePostTitle = styled.div`
+  input:focus,
+  textarea:focus,
+  [contenteditable='true'] {
+    outline: none;
+  }
+
+  .title-input {
+    overflow: hidden;
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px #d9d9d9;
+    border-radius: 6px;
+    font-size: 16px;
+    line-height: 1.2;
+    white-space: nowrap;
+    :focus {
+      border-color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px
+        ${(props: ThemeProps) => props.theme.colors.blue200};
+    }
+    br {
+      display: none;
+    }
+    * {
+      display: inline;
+      white-space: nowrap;
+    }
+    mocka {
+      padding: 2px 6px;
+      border-radius: 1rem;
+      &[data-error='true'] {
+        background-color: #ffeeee;
+        color: red;
+        text-decoration: underline;
+        font-style: bold;
+      }
+    }
+    ol,
+    ul {
+      padding-left: 1rem;
+    }
+  }
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+    color: ${(props: ThemeProps) => props.theme.colors.gray600};
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .count-string {
+    margin-top: 5px;
+    color: ${(props: ThemeProps) => props.theme.colors.gray500};
+    font-size: 11px;
+    text-align: right;
+  }
+`

package/raw/src/together/components/molecules/createPostTitle/index.tsx

@@ -0,0 +1,133 @@
+import React, {
+  CSSProperties,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import { Input } from 'components/atoms/input'
+import { Text } from 'components/atoms/text'
+import { useTranslations } from 'hooks/useTranslations'
+import debounce from 'lodash/debounce'
+import ContentEditable from 'react-contenteditable'
+
+import { highlightBadWords } from '../../../utils/post'
+import { StyledCreatePostTitle } from './index.styled'
+
+export type Props = {
+  className?: string
+  style?: CSSProperties
+  bannedWords?: string[]
+  value?: string
+  onChange?: (v: string) => void
+}
+
+const TITLE_LIMIT = 120
+
+const inputModify = (
+  value: string,
+  opts?: { limit?: number; bannedWords?: string[] },
+) => {
+  if (!opts) return value
+  const { limit, bannedWords = [] } = opts
+  const shorten =
+    typeof limit === 'number' && limit >= 0 ? value.substring(0, limit) : value
+  const processedValue = highlightBadWords(shorten, bannedWords)
+  return processedValue
+}
+export const CreatePostTitle = ({
+  className,
+  style,
+  bannedWords = [],
+  value,
+  onChange,
+}: Props) => {
+  const { t } = useTranslations()
+  const [titleValue, setTitleValue] = useState('')
+  const titleRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    if (titleRef.current) {
+      const pasteHandler = (e: ClipboardEvent) => {
+        e.preventDefault()
+        const text = e.clipboardData?.getData('text/plain')
+        document.execCommand('insertHTML', false, text)
+      }
+      const contentDiv = titleRef.current
+      contentDiv.addEventListener('paste', pasteHandler)
+      return () => contentDiv.removeEventListener('paste', pasteHandler)
+    }
+  }, [titleRef])
+  const bannedString = bannedWords?.join(',') || ''
+
+  useEffect(() => {
+    if (bannedString) {
+      const titleText = titleRef.current?.innerText
+      if (titleText) {
+        const titleValueWithBanned = highlightBadWords(titleText, bannedWords)
+        if (titleValueWithBanned !== titleText) {
+          onChange && onChange(titleValueWithBanned)
+          setTitleValue(titleValueWithBanned)
+        }
+      }
+    }
+  }, [bannedString])
+
+  const debounceInputModify = useCallback(
+    debounce((v: string) => {
+      if (titleRef.current) {
+        const shortenString = inputModify(titleRef.current.innerText, {
+          limit: TITLE_LIMIT,
+          bannedWords,
+        })
+        onChange && onChange(shortenString)
+        setTitleValue(shortenString)
+      }
+    }, 300),
+    [],
+  )
+
+  useEffect(() => {
+    setTimeout(() => {
+      titleRef.current?.focus()
+    }, 500)
+  }, [])
+
+  return (
+    <StyledCreatePostTitle className={className} style={style}>
+      <Input
+        name="title"
+        value={value || titleValue}
+        size="md"
+        label={t('createPost.title')}
+        CustomInput={
+          <ContentEditable
+            innerRef={titleRef}
+            html={value || titleValue} // innerHTML of the editable div
+            onChange={(evt) => {
+              if (
+                titleRef.current &&
+                titleRef.current.innerText !== (value || titleValue)
+              ) {
+                const initialValue = inputModify(titleRef.current.innerText, {
+                  bannedWords,
+                })
+                onChange && onChange(initialValue)
+                setTitleValue(initialValue)
+                debounceInputModify(titleRef.current.innerText)
+              }
+            }} // handle innerHTML change
+            className="title-input"
+          />
+        }
+      />
+      <Text size="p4" className="count-string">
+        {t('createPost.popup.wordCount', {
+          count: titleRef.current?.innerText.length || 0,
+          max: TITLE_LIMIT,
+        })}
+      </Text>
+    </StyledCreatePostTitle>
+  )
+}

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

@@ -0,0 +1,18 @@
+export { CardAuthor } from './cardAuthor'
+export { CreateNewPostContent } from './createNewPostContent'
+export { CreatePostDescription } from './createPostDescription'
+export { CreatePostTitle } from './createPostTitle'
+export { PopupDanger } from './popupDanger'
+export { PopupExpert } from './popupExpert'
+export { PopupDoctor } from './popupDoctor'
+export { PopupHospital } from './popupHospital'
+export { TopicSelectList } from './topicSelectList'
+export { InputCommentBar } from './inputCommentBar'
+export { PopupFrame } from './popupFrame'
+export { SharePopup } from './popupFrame/popupShare'
+export { SubmitReportForm } from './submitReportForm'
+export { ShareBox } from './shareBox'
+export { PostContent } from './postContent'
+export { ImagePreviewPopup } from './postImagePreview/imagePreviewPopup'
+export { PostSingleImageViewPopup } from './postImagePreview/postSingleImageViewPopup'
+export { PostImagePreview } from './postImagePreview'