@hhgtech/hhg-components
Version:
Hello Health Group common components
1,113 lines (1,058 loc) • 44.2 kB
JavaScript
import React__default, { useState, useMemo, useContext, useEffect, createContext, useRef } from 'react';
import { B as Button } from './index-6351bdee.js';
import { H as Heading } from './index-dcc517ff.js';
import { T as Text } from './index-9f5659e8.js';
import { c as safeEncodeURI, M as MediaQueries, t as toggleNoScroll, a as getPopupWrapperDom } from './utils-cb7242c7.js';
import * as ReactDOM from 'react-dom';
import { b as callApiWithAuth, d as getApiPath, T as TogetherComponentGlobalContext } from './utils-40e61585.js';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { a as __awaiter } from './tslib.es6-ea4dfe68.js';
import { I as Input } from './index-cf3c860d.js';
import { u as useTranslations } from './index-9d21b711.js';
import { e as formatComment } from './dataTransform-8b19f5d4.js';
import { M as MAX_IMAGE_UPLOADS, a as DEFAULT_AVATAR_IMG } from './constants-f4091ce6.js';
import { PATHS } from './togetherApiPaths.js';
import { j as removeBannedWordWrapper, i as getMentionIdsFromString, k as encodePostContent, u as uploadAndGetSrc } from './post-44f3801c.js';
import { C as CardLink } from './index-d3ac3302.js';
import { L as Loading } from './index-b94d1262.js';
import { U as UserAvatar } from './index-e9423cb7.js';
import { R as RichTextEditor } from './editor-3090719b.js';
import { Portal } from '@mantine/core';
import { FullScreen } from '@hhgtech/icons/other';
import { P as Popup } from './index-68e9d7d8.js';
import { C as CloseIcon } from './index-a3bb8a23.js';
import { ShareBox } from './togetherShareBox.js';
const useImagePicker = (imageFilesProp, onImageFilesChange) => {
const [imageFiles, setImageFiles] = useState(imageFilesProp || []);
const imageSrcs = useMemo(() => (imageFilesProp || imageFiles).map((file) => typeof file === 'string' ? file : URL.createObjectURL(file)), [imageFilesProp, imageFiles]);
const onSelectImages = (e) => {
const files = e.target.files;
if (files) {
if (onImageFilesChange && imageFilesProp) {
const _files = imageFilesProp || imageFiles;
onImageFilesChange(_files.concat(Array.from(files)));
}
else
setImageFiles((imgs) => {
const _imgs = imageFilesProp || imgs;
onImageFilesChange &&
onImageFilesChange(_imgs.concat(Array.from(files)));
return _imgs.concat(Array.from(files));
});
}
};
const onRemoveImage = (index) => {
if (onImageFilesChange && imageFilesProp) {
const _files = imageFilesProp;
_files.splice(index, 1);
onImageFilesChange(_files.slice());
}
else {
setImageFiles((imgs) => {
const _imgs = imageFilesProp || imgs;
_imgs.splice(index, 1);
onImageFilesChange && onImageFilesChange(_imgs.slice());
return _imgs.slice();
});
}
};
const onRemoveAllImages = () => {
onImageFilesChange ? onImageFilesChange([]) : setImageFiles([]);
};
return {
onSelectImages,
onRemoveImage,
onRemoveAllImages,
imageSrcs,
imageFiles: imageFilesProp || imageFiles,
};
};
const getDefaultFailNoti = (t) => ({
message: t('notification.failure'),
type: 'danger',
});
const likeUnlikePost = ({ id, locale, }) => __awaiter(void 0, void 0, void 0, function* () {
if (!id)
return;
const res = yield callApiWithAuth(getApiPath(PATHS.POST.LIKE, {
id,
_locale: locale,
}), 'GET');
return res;
});
const deletePost = ({ id, locale, }) => __awaiter(void 0, void 0, void 0, function* () {
if (!id)
return;
const res = yield callApiWithAuth(getApiPath(PATHS.POST.DELETE, {
id,
_locale: locale,
}), 'DELETE');
return res;
});
const getPostFormData = ({ title, description, communityId, imageFiles, previewUrl, topicIds, locale, sanitizeFunction, categoryCommunityId, categoryTopicIds,
// admin only
introUrl, bannerUrl, scheduleTime, isAnonymous, isAskDoctor, }) => __awaiter(void 0, void 0, void 0, function* () {
const bodyFormData = new FormData();
const submitDescription = removeBannedWordWrapper(description);
const submitTitle = removeBannedWordWrapper(title);
const mentionIds = getMentionIdsFromString(submitDescription);
bodyFormData.append('title', submitTitle);
bodyFormData.append('description', encodePostContent(submitDescription, sanitizeFunction));
if (categoryCommunityId) {
bodyFormData.append('category_community', String(categoryCommunityId));
}
else if (communityId) {
bodyFormData.append('community_id', String(communityId));
}
bodyFormData.append('is_anonymous', isAnonymous ? '1' : '0');
bodyFormData.append('is_question', isAskDoctor ? '1' : '0');
(previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.title) && bodyFormData.append('preview_title', previewUrl.title);
(previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.description) &&
bodyFormData.append('preview_description', previewUrl.description);
(previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url) &&
bodyFormData.append('preview_link', safeEncodeURI(previewUrl.url));
(previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.image) &&
bodyFormData.append('preview_image', safeEncodeURI(previewUrl.image));
topicIds === null || topicIds === void 0 ? void 0 : topicIds.forEach((topicId) => {
bodyFormData.append('topics[]', String(topicId || ''));
});
categoryTopicIds === null || categoryTopicIds === void 0 ? void 0 : categoryTopicIds.forEach((topicId) => {
bodyFormData.append('category_topics[]', String(topicId || ''));
});
if (!!(imageFiles === null || imageFiles === void 0 ? void 0 : imageFiles.length)) {
const imageSrcs = yield Promise.all(imageFiles.map((file, index) => new Promise((resolve) => {
setTimeout(() => {
resolve(uploadAndGetSrc(file, locale));
}, index * 2000);
})));
imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.filter(Boolean).slice(0, MAX_IMAGE_UPLOADS).forEach((imageFile, index) => {
bodyFormData.append(`images[${index}]`, imageFile);
});
}
else {
bodyFormData.append(`images`, '');
}
mentionIds === null || mentionIds === void 0 ? void 0 : mentionIds.forEach((mentionId) => {
bodyFormData.append(`mention_ids[]`, mentionId);
});
// Admin only
bodyFormData.append('intro_url', introUrl || '');
bodyFormData.append('banner', bannerUrl || '');
if (scheduleTime) {
bodyFormData.append('post_type', 'scheduled');
bodyFormData.append('schedule_datetime', scheduleTime);
}
return bodyFormData;
});
const createPost = ({ locale, formData, isArticleComment, }) => __awaiter(void 0, void 0, void 0, function* () {
const res = yield callApiWithAuth(getApiPath(isArticleComment ? PATHS.POST.CREATE_ARTICLE_COMMENT : PATHS.POST.CREATE, {
_locale: locale,
}), 'POST', {
data: formData,
});
return res;
});
const editPost = ({ id, locale, formData, }) => __awaiter(void 0, void 0, void 0, function* () {
const res = yield callApiWithAuth(getApiPath(PATHS.POST.UPDATE, {
id,
_locale: locale,
}), 'POST', {
data: formData,
});
return res;
});
const reportPost = ({ id, reason, locale, }) => {
const formData = new FormData();
formData.append('reason', reason);
return callApiWithAuth(getApiPath(PATHS.POST.REPORT, {
_locale: locale,
id,
}), 'POST', {
data: formData,
});
};
const StyledPopupFrame = styled.div `
[data-type='confirm'] {
max-width: 468px;
/* height: 486px; */
padding: 0;
.popup-content {
display: flex;
flex-direction: column;
padding: 0;
.close-button {
top: 16px;
right: 16px;
width: 24px;
height: 24px;
z-index: 5;
}
.header {
display: flex;
height: 56px;
align-items: center;
padding: 16px 56px 16px 32px;
border-bottom: 1px solid ${theme.colors.neutral100};
font-weight: 900;
width: 100%;
justify-content: space-between;
}
.content {
overflow: auto;
flex: 1;
.topic-list-wrapper {
padding: 1rem;
}
}
}
}
> div&[data-open='true'] {
z-index: 250;
&:last-child {
z-index: 200;
}
}
${(props) => props.isExpand &&
`
& > div[data-open] {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
}
`}
${(props) => props.hasFullscreen &&
`
& > div[data-open] {
transition: all 0.5s ease-in-out, width 0s, height 0s;
}
`}
`;
const StyledFSBtn = styled.div `
cursor: pointer;
display: flex;
align-items: center;
`;
const PopupFrame = ({ className, style, closeIcon, heading = '', children, isOpen = false, hasFullscreen = false, disableClickOutside = false, initExpand = false, onExpandChange, onClose = () => null, }) => {
const [expand, setExpand] = useState(initExpand);
return (React__default.createElement(StyledPopupFrame, { className: className, style: style, isExpand: expand, hasFullscreen: hasFullscreen },
React__default.createElement(Popup, { type: "confirm", onClose: onClose, isOpen: isOpen, closeIcon: closeIcon || React__default.createElement("img", { src: CloseIcon, loading: "lazy" }), enableAnimation: !hasFullscreen, disableClickOutside: disableClickOutside },
React__default.createElement("div", { className: "header" },
React__default.createElement(Heading, { tag: "h5" }, heading),
hasFullscreen && (React__default.createElement(StyledFSBtn, { onClick: () => {
onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange();
setExpand(!expand);
} },
React__default.createElement(FullScreen, { size: 14, isExpand: expand })))),
React__default.createElement("div", { className: "content" }, typeof children === 'function' ? children(expand) : children))));
};
var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3e%3cpath fill='%23262626' d='M12 22.984c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.478-10 10 4.477 10 10 10'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.828 10.156-5.657 5.657M9.172 10.156l5.657 5.657'/%3e%3c/svg%3e";
var IconCloseCircle = img$4;
const StyledPopupDanger = styled.div `
[data-type='confirm'] {
width: min(360px, 100%);
height: auto;
&[data-open='false'] {
top: calc(-100% - 500px);
}
}
z-index: 600;
.header {
display: none !important;
}
.confirm-dialog {
position: relative;
overflow: auto;
width: 100%;
padding-top: 44px;
background: #fff;
border-radius: ${theme.borderRadius};
.confirm-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 16px 16px;
text-align: center;
.title {
margin-bottom: 8px;
font-size: 24px;
line-height: 32px;
word-break: break-word;
overflow-wrap: break-word;
}
.desc {
margin-bottom: 24px;
color: ${theme.colors.gray500};
font-size: 18px;
line-height: 24px;
text-align: center;
word-break: break-word;
overflow-wrap: break-word;
}
.btn-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
button {
margin: 0 4px 0.5rem;
}
}
}
}
.thumbnail-container {
width: 80px;
height: 80px;
margin-bottom: 32px;
.thumbnail {
width: 100%;
height: 100%;
}
&.is-icon {
display: flex;
align-items: center;
justify-content: center;
background: #e0e9fc;
border-radius: 1rem;
.thumbnail {
width: 40px;
height: 40px;
}
}
}
&[data-is-marrybaby='true'] {
.popup-frame {
> div:first-child {
overflow: hidden;
border-radius: 1rem;
&[data-open='true'] {
${MediaQueries.mbDown} {
top: 100%;
transform: translate(-50%, -100%);
max-width: unset;
width: 100%;
background: unset;
overflow: unset;
}
}
}
.popup-content {
.close-button {
${MediaQueries.mbDown} {
display: none;
}
}
.confirm-dialog {
${MediaQueries.mbDown} {
background: unset;
position: relative;
overflow-x: hidden;
&::before {
content: '';
width: 200%;
background: #fff;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
height: 100%;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
}
}
.confirm-content {
padding: 0 40px 40px;
${MediaQueries.mbDown} {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.btn-group {
width: 100%;
justify-content: space-between;
button {
flex: 1;
margin: 0;
&:first-child {
margin-right: 0.5rem;
}
}
}
}
}
}
.thumbnail-container {
${MediaQueries.mbDown} {
display: none;
}
&.is-icon {
background: #ffeaf1;
border-radius: 24px;
}
&.is-mobile {
position: absolute;
top: 0;
left: 50%;
display: none;
width: 48px;
height: 48px;
transform: translate(-50%, -50%);
&.is-icon {
border-radius: 1rem;
.thumbnail {
width: 24px;
height: 24px;
}
}
${MediaQueries.mbDown} {
display: flex;
}
}
}
}
}
`;
const PopupDanger = ({ className, isMarryBaby: isMarryBabyProp, style, title, description, acceptText, cancelText, onAccept, onCancel, thumbnail, isThumbnailIcon, onClose, acceptBtnTracking, acceptBtnProps, cancelBtnProps, }) => {
const { data: { env: { isMarryBaby: isMarryBabyContext }, }, } = useContext(TogetherComponentGlobalContext);
const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
toggleNoScroll(true);
setTimeout(() => setIsOpen(true), 0);
return () => toggleNoScroll(false);
}, []);
if (typeof window === 'undefined')
return null;
return ReactDOM.createPortal(React__default.createElement(StyledPopupDanger, { "data-is-marrybaby": isMarryBaby, className: className, style: style, "data-open": isOpen },
React__default.createElement(PopupFrame, { className: "popup-frame", isOpen: isOpen, onClose: onClose },
React__default.createElement("div", { className: "confirm-dialog", onClick: (e) => e.stopPropagation() },
React__default.createElement("div", { className: "confirm-content" },
thumbnail && (React__default.createElement("div", { className: `thumbnail-container ${isThumbnailIcon ? 'is-icon' : ''}` },
React__default.createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))),
React__default.createElement(Heading, { className: "title", tag: "h2" }, title),
React__default.createElement(Text, { className: "desc", size: "lg" }, description),
React__default.createElement("div", { className: "btn-group" },
React__default.createElement(Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "md", color: "tertiary", onClick: () => {
onAccept === null || onAccept === void 0 ? void 0 : onAccept();
onClose === null || onClose === void 0 ? void 0 : onClose();
} }, acceptBtnProps, acceptBtnTracking), acceptText),
React__default.createElement(Button, Object.assign({ theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "md", onClick: () => {
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
onClose === null || onClose === void 0 ? void 0 : onClose();
} }, cancelBtnProps), cancelText)))),
isMarryBaby && thumbnail && (React__default.createElement("div", { className: `thumbnail-container is-mobile ${isThumbnailIcon ? 'is-icon' : ''}` },
React__default.createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))))), getPopupWrapperDom());
};
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: ${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: ${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 ${theme.colors.gray200};
border-radius: ${theme.borderRadius};
&:active,
&:focus {
border-color: ${theme.colors.primaryBase};
box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
}
&:disabled {
background-color: ${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: ${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: ${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: ${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: ${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;
}
}
}
`;
const MainInputTriggerContext = createContext({});
var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3ccircle cx='8' cy='8.5' r='6.667' fill='white' stroke='%23404040'/%3e%3cpath stroke='%23404040' stroke-linecap='round' stroke-linejoin='round' d='m10 6.5-4 4M6 6.5l4 4'/%3e%3c/svg%3e";
var IconCloseCircleLine = img$3;
var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 9.734-3.75 3.75 3.75 3.75'/%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.25 4.734v5.569c0 .843-.33 1.653-.915 2.25a3.1 3.1 0 0 1-2.21.931H3.75'/%3e%3c/svg%3e";
var IconEnter = img$2;
var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%232D87F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M10.754 4.854H4.492a1.79 1.79 0 0 0-1.789 1.789v12.524a1.79 1.79 0 0 0 1.79 1.789h12.523a1.79 1.79 0 0 0 1.79-1.79v-6.261'/%3e%3cpath stroke='%232D87F3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M17.463 3.512a1.898 1.898 0 0 1 2.684 2.684l-8.498 8.498-3.579.895.895-3.579z'/%3e%3c/svg%3e";
var IconTabEditPrimary = img$1;
const getCommentFormBody = ({ postId, message, photos, link, locale, sanitizeFunction, replyingUserId, replyingUserName, replyingId, }) => __awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
let submitText = encodePostContent(message.replace(/(\ )+/g, ' '), sanitizeFunction);
const mentionIds = getMentionIdsFromString(submitText);
if (photos && photos.length > 0) {
const imageSrcs = yield Promise.all(photos === null || photos === void 0 ? void 0 : photos.map((file) => uploadAndGetSrc(file, locale)));
imageSrcs
.filter(Boolean)
.slice(0, MAX_IMAGE_UPLOADS)
.forEach((photo) => {
formData.append('images[]', photo);
});
}
if (link)
formData.append('link', link);
mentionIds === null || mentionIds === void 0 ? void 0 : mentionIds.forEach((mentionId) => {
formData.append(`mention_ids[]`, mentionId);
});
formData.append('post_id', postId);
replyingId && formData.append('parent_id', replyingId);
if (replyingUserId) {
mentionIds.unshift(replyingUserId);
submitText = `[mention+id="${replyingUserId}"+name="${(replyingUserName || '').replace('"', "'")}"]${submitText}`;
formData.append('parent_user_id', String(replyingUserId));
}
formData.append('content', submitText);
formData.append('content', submitText);
return formData;
});
const submitComment = (formData, locale) => __awaiter(void 0, void 0, void 0, function* () {
return callApiWithAuth(getApiPath(PATHS.COMMENT.CREATE, {
_locale: locale,
}), 'POST', {
data: formData,
});
});
const decodeCommentBody = (s) => {
try {
const authorRegex = s.match(/\[@([^\]]+)\]/);
const replyingTo = authorRegex
? authorRegex[0].replace('[@', '').replace(']', '')
: '';
const text = s.replace(/\[@([^\]]+)\]/, '');
return {
text: text.trim(),
replyingTo,
};
}
catch (e) { }
return {
text: '',
};
};
const submitReply = (formData, locale) => __awaiter(void 0, void 0, void 0, function* () {
return callApiWithAuth(getApiPath(PATHS.COMMENT.REPLY, {
_locale: locale,
}), 'POST', {
data: formData,
});
});
const likeUnlikeComment = ({ commentId, setLike = false, locale, }) => __awaiter(void 0, void 0, void 0, function* () {
return callApiWithAuth(getApiPath(setLike ? PATHS.COMMENT.LIKE : PATHS.COMMENT.UNLIKE, {
_locale: locale,
id: commentId,
}), 'GET');
});
const deleteComment = ({ id, locale, }) => {
return callApiWithAuth(getApiPath(PATHS.COMMENT.DELETE, {
_locale: locale,
id: id,
}), 'DELETE');
};
const InputCommentBar = ({ isReply, className, onClose, replyToName, style, replyingId, replyingUser, onPostSuccess, post, isMarryBaby: isMarryBabyProp, }) => {
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('');
const { trigger } = useContext(MainInputTriggerContext);
const [isSubmitLoading, setIsSubmitLoading] = useState(false);
const imagePicker = useRef(null);
const contentEditable = useRef(null);
const mainInput = useRef(null);
const [invalidUrls, setInvalidUrls] = useState([]);
const [bannedWords, setBannedWords] = useState([]);
const [previewUrl, setPreviewUrl] = useState(null);
const onSubmitComment = () => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
if (!(post === null || post === void 0 ? void 0 : post.id) || isSubmitLoading)
return;
setIsSubmitLoading(true);
try {
const handleSuccess = (res) => {
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 = yield getCommentFormBody(Object.assign({ message: text, photos: imageFiles, postId: String(post.id), link: previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url, sanitizeFunction,
locale }, (isReply && replyingId
? {
replyingUserId: String((replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.id) || ((_a = post === null || post === void 0 ? void 0 : post.author) === null || _a === void 0 ? void 0 : _a.id) || ''),
replyingId,
replyingUserName: (replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.name) || (replyingUser === null || replyingUser === void 0 ? void 0 : replyingUser.username) || '',
}
: {})));
const res = yield (isReply && replyingId
? submitReply(formBody, locale)
: submitComment(formBody, locale));
const resData = res === null || res === void 0 ? void 0 : res.data;
if ((resData === null || resData === void 0 ? void 0 : resData.id) && !((_c = (_b = res === null || res === void 0 ? void 0 : res.messages) === null || _b === void 0 ? void 0 : _b.moderation) === null || _c === void 0 ? void 0 : _c.type)) {
handleSuccess(res);
}
else {
if (((_e = (_d = res === null || res === void 0 ? void 0 : res.messages) === null || _d === void 0 ? void 0 : _d.moderation) === null || _e === void 0 ? void 0 : _e.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 (((_g = (_f = res === null || res === void 0 ? void 0 : res.messages) === null || _f === void 0 ? void 0 : _f.moderation) === null || _g === void 0 ? void 0 : _g.type) === 'suspect') {
pushNotifications({
title: t('notification.comment.suspect.title'),
message: t('notification.comment.suspect.message'),
type: 'warning',
});
setText('');
onRemoveAllImages();
onClose && onClose();
}
else if ((_h = res === null || res === void 0 ? void 0 : res.messages) === null || _h === void 0 ? void 0 : _h.find((m) => { var _a; return !!((_a = m === null || m === void 0 ? void 0 : m.includes) === null || _a === void 0 ? void 0 : _a.call(m, 'suspend')); })) {
pushNotifications({
message: t('notification.suspend.message'),
type: 'warning',
});
setText('');
onRemoveAllImages();
onClose && onClose();
}
else {
pushNotifications({
title: '',
message: ((_j = res === null || res === void 0 ? void 0 : res.messages) === null || _j === void 0 ? void 0 : _j[0]) || t('notification.comment.somethingWrong'),
type: 'danger',
});
}
}
}
catch (e) {
pushNotifications({
title: '',
message: t('notification.comment.somethingWrong'),
type: 'danger',
});
}
setIsSubmitLoading(false);
});
useEffect(() => {
var _a;
(_a = mainInput.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
setTimeout(() => {
var _a;
(_a = contentEditable.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 400);
}, [trigger]);
return (React__default.createElement(StyledInputCommentBar, { "data-is-reply": isReply, className: className, style: style },
isReply && (React__default.createElement("div", { className: "reply-to-container" },
React__default.createElement(Text, { size: "p4" },
React__default.createElement("span", { dangerouslySetInnerHTML: {
__html: t('inputComment.replyTo', {
name: `<span style="color: #2D87F3; cursor: pointer">@${replyToName || ''}</span>`,
}),
} })),
React__default.createElement("img", { src: IconCloseCircleLine, className: "icon-close-comment", onClick: () => onClose && onClose(), loading: "lazy" }))),
React__default.createElement("div", { className: "input-container", ref: mainInput },
React__default.createElement(UserAvatar, { className: `avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`, avatar: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? userInfo.avatar : DEFAULT_AVATAR_IMG, username: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username) }),
React__default.createElement("input", { ref: imagePicker, onChange: onSelectImages, type: "file", multiple: true, accept: "image/png,image/jpeg", name: "images", style: { display: 'none' } }),
React__default.createElement(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
// }
, {
// 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: React__default.createElement("img", { src: IconTabEditPrimary, loading: "lazy" }), CustomInput: React__default.createElement("div", { className: "as-input" },
React__default.createElement(RichTextEditor, { className: "textarea", html: text, onChange: setText, onImagePickerClick: () => { var _a; return (_a = imagePicker.current) === null || _a === void 0 ? void 0 : _a.click(); }, bannedWords: bannedWords, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, setEditorRef: (div) => (contentEditable.current = div), isReplying: isReply })) }),
React__default.createElement(Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "send-button", size: "sm", onClick: onSubmitComment, isLoading: isSubmitLoading, isDisabled: !!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ||
isSubmitLoading ||
!text ||
(text === null || text === void 0 ? void 0 : text.length) < 2 ||
!text.trim() },
React__default.createElement("img", { src: IconEnter, className: "icon-enter", loading: "lazy" }))),
!!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ? (React__default.createElement("div", { className: "error-text" }, t('notification.limitUrlDomain'))) : null,
(!imageSrcs || imageSrcs.length === 0) && previewUrl && (React__default.createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default.createElement(Loading, null)) : (React__default.createElement(React__default.Fragment, null,
React__default.createElement(CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
React__default.createElement("img", { src: IconCloseCircle, className: "icon-close", onClick: () => setPreviewUrl(null), loading: "lazy" }))))),
imageSrcs && imageSrcs.length > 0 && (React__default.createElement("div", { className: "preview-images-container" }, imageSrcs.map((src, index) => (React__default.createElement("div", { key: index, className: "image-src-wrapper" },
React__default.createElement("img", { className: "preview-image", src: src, loading: "lazy" }),
React__default.createElement("img", { src: IconCloseCircle, className: "icon-close-circle", onClick: () => onRemoveImage(index), loading: "lazy" }))))))));
};
const SharePopup = ({ trackingCategory, className, style, url,
// avatar,
text, onClose, }) => {
const { data: { env: { isMarryBaby }, }, } = useContext(TogetherComponentGlobalContext);
const { t } = useTranslations();
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
toggleNoScroll(true);
setTimeout(() => setIsOpen(true), 0);
return () => toggleNoScroll(false);
}, []);
return (React__default.createElement(Portal, null,
React__default.createElement(StyledSharePopup, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
React__default.createElement(PopupFrame, { className: "share-popup", isOpen: isOpen, onClose: onClose, heading: t('bottomBar.share') }, isOpen && (React__default.createElement(ShareBox, { trackingCategory: trackingCategory, shareUrl: url ||
(typeof window !== 'undefined' ? window.location.href : ''), title: text }))))));
};
const StyledSharePopup = styled.div `
.share-popup {
> div:first-child {
height: unset;
}
}
.custom-share__header {
display: flex;
flex-wrap: no-wrap;
align-items: center;
padding: 1rem;
border-bottom: 1px solid ${theme.colors.neutral100};
margin-bottom: 16px;
.custom-share__header-image {
width: 38px;
height: 38px;
flex-shrink: 0;
& > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.custom-share__header-info {
flex: 1;
padding: 0 8px;
word-break: break-word;
[data-tag='h4'] {
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
[data-size='md'] {
color: #a5a5a5;
font-size: 14px;
line-height: 14px;
}
}
}
&[data-is-marrybaby='true'] {
.share-popup {
> div:first-child {
overflow: hidden;
border-radius: 1rem;
&[data-open='true'] {
${MediaQueries.mbDown} {
max-width: unset;
width: 100%;
top: 100%;
transform: translate(-50%, -100%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.close-button {
display: block;
}
.popup-content {
.header {
display: block;
padding: 1rem;
background-color: rgb(243, 243, 243);
}
.content {
padding-bottom: 1rem;
}
}
.share-mb-text {
margin: 1rem 1rem 0.5rem;
}
}
}
`;
const StyledSubmitReportForm = styled.div `
padding: 0 8px;
margin-top: 18px;
.report-list {
margin-bottom: 18px;
.report-item {
display: flex;
align-items: center;
margin-bottom: 10px;
font-weight: 600;
& > img {
width: 12px;
height: 12px;
margin-right: 8px;
}
.__label {
font-size: 14px;
}
}
}
.report-submit {
width: 100%;
}
&[data-is-marrybaby='true'] {
padding: 0 1rem 1rem;
}
`;
var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12M8 5v3M8 11h.007'/%3e%3c/svg%3e";
var IconAlertCircle = img;
const SubmitReportForm = ({ className, style, reason, reasonText, onClose, postId, }) => {
const { data: { locale, env: { isMarryBaby }, }, action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
const { t } = useTranslations();
const [loading, setLoading] = useState(false);
return (React__default.createElement(StyledSubmitReportForm, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
React__default.createElement("ul", { className: "report-list" },
React__default.createElement("li", { className: "report-item" },
React__default.createElement("img", { src: IconAlertCircle, loading: "lazy" }),
React__default.createElement(Text, { className: "__label", color: theme.colors.gray800, size: "p4" }, reasonText))),
React__default.createElement(Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "report-submit", size: "lg", color: "primary", isLoading: loading, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
if (!postId || loading)
return;
setLoading(true);
try {
const res = yield reportPost({
id: postId,
reason,
locale,
});
if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
pushNotifications({
message: 'Post reported',
type: 'success',
});
onClose && onClose();
}
}
catch (_a) { }
setLoading(false);
}) }, t('submit'))));
};
export { InputCommentBar as I, PopupDanger as P, SharePopup as S, PopupFrame as a, SubmitReportForm as b, IconCloseCircle as c, getPostFormData as d, editPost as e, createPost as f, getDefaultFailNoti as g, deletePost as h, IconAlertCircle as i, deleteComment as j, decodeCommentBody as k, likeUnlikeComment as l, likeUnlikePost as m, useImagePicker as u };