@hhgtech/hhg-components
Version:
Hello Health Group common components
1,155 lines (1,096 loc) • 47.3 kB
JavaScript
'use strict';
var React = require('react');
var index$3 = require('./index-b9594844.js');
var index$1 = require('./index-b0c1d50a.js');
var index$2 = require('./index-25f2e7a5.js');
var utils = require('./utils-7ba0038a.js');
var ReactDOM = require('react-dom');
var togetherComponentGlobalContext = require('./utils-aea77f4a.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var index$6 = require('./index-da18c632.js');
var index$4 = require('./index-c2c283f8.js');
var dataTransform = require('./dataTransform-4f6cd887.js');
var constants = require('./constants-bb30dda6.js');
var togetherApiPaths = require('./togetherApiPaths.js');
var post = require('./post-ca5ee38c.js');
var index$8 = require('./index-76eb4e4e.js');
var index$7 = require('./index-33cb6efd.js');
var index$5 = require('./index-6f85be79.js');
var togetherRichTextEditor = require('./editor-9fab6a9b.js');
var core = require('@mantine/core');
var other = require('@hhgtech/icons/other');
var index = require('./index-3f69a3aa.js');
var togetherMoleculesPostImagePreview = require('./index-2f539983.js');
var togetherShareBox = require('./togetherShareBox.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const useImagePicker = (imageFilesProp, onImageFilesChange) => {
const [imageFiles, setImageFiles] = React.useState(imageFilesProp || []);
const imageSrcs = React.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, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
if (!id)
return;
const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.LIKE, {
id,
_locale: locale,
}), 'GET');
return res;
});
const deletePost = ({ id, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
if (!id)
return;
const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.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, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const bodyFormData = new FormData();
const submitDescription = post.removeBannedWordWrapper(description);
const submitTitle = post.removeBannedWordWrapper(title);
const mentionIds = post.getMentionIdsFromString(submitDescription);
bodyFormData.append('title', submitTitle);
bodyFormData.append('description', post.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', utils.safeEncodeURI(previewUrl.url));
(previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.image) &&
bodyFormData.append('preview_image', utils.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(post.uploadAndGetSrc(file, locale));
}, index * 2000);
})));
imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.filter(Boolean).slice(0, constants.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, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(isArticleComment ? togetherApiPaths.PATHS.POST.CREATE_ARTICLE_COMMENT : togetherApiPaths.PATHS.POST.CREATE, {
_locale: locale,
}), 'POST', {
data: formData,
});
return res;
});
const editPost = ({ id, locale, formData, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.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 togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.POST.REPORT, {
_locale: locale,
id,
}), 'POST', {
data: formData,
});
};
const StyledPopupFrame = styled__default["default"].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 ${miscTheme.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__default["default"].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] = React.useState(initExpand);
return (React__default["default"].createElement(StyledPopupFrame, { className: className, style: style, isExpand: expand, hasFullscreen: hasFullscreen },
React__default["default"].createElement(index.Popup, { type: "confirm", onClose: onClose, isOpen: isOpen, closeIcon: closeIcon || React__default["default"].createElement("img", { src: togetherMoleculesPostImagePreview.CloseIcon, loading: "lazy" }), enableAnimation: !hasFullscreen, disableClickOutside: disableClickOutside },
React__default["default"].createElement("div", { className: "header" },
React__default["default"].createElement(index$1.Heading, { tag: "h5" }, heading),
hasFullscreen && (React__default["default"].createElement(StyledFSBtn, { onClick: () => {
onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange();
setExpand(!expand);
} },
React__default["default"].createElement(other.FullScreen, { size: 14, isExpand: expand })))),
React__default["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__default["default"].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: ${miscTheme.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: ${miscTheme.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'] {
${utils.MediaQueries.mbDown} {
top: 100%;
transform: translate(-50%, -100%);
max-width: unset;
width: 100%;
background: unset;
overflow: unset;
}
}
}
.popup-content {
.close-button {
${utils.MediaQueries.mbDown} {
display: none;
}
}
.confirm-dialog {
${utils.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;
${utils.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 {
${utils.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;
}
}
${utils.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 }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
const [isOpen, setIsOpen] = React.useState(false);
React.useEffect(() => {
utils.toggleNoScroll(true);
setTimeout(() => setIsOpen(true), 0);
return () => utils.toggleNoScroll(false);
}, []);
if (typeof window === 'undefined')
return null;
return ReactDOM__namespace.createPortal(React__default["default"].createElement(StyledPopupDanger, { "data-is-marrybaby": isMarryBaby, className: className, style: style, "data-open": isOpen },
React__default["default"].createElement(PopupFrame, { className: "popup-frame", isOpen: isOpen, onClose: onClose },
React__default["default"].createElement("div", { className: "confirm-dialog", onClick: (e) => e.stopPropagation() },
React__default["default"].createElement("div", { className: "confirm-content" },
thumbnail && (React__default["default"].createElement("div", { className: `thumbnail-container ${isThumbnailIcon ? 'is-icon' : ''}` },
React__default["default"].createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))),
React__default["default"].createElement(index$1.Heading, { className: "title", tag: "h2" }, title),
React__default["default"].createElement(index$2.Text, { className: "desc", size: "lg" }, description),
React__default["default"].createElement("div", { className: "btn-group" },
React__default["default"].createElement(index$3.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["default"].createElement(index$3.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["default"].createElement("div", { className: `thumbnail-container is-mobile ${isThumbnailIcon ? 'is-icon' : ''}` },
React__default["default"].createElement("img", { className: "thumbnail", src: thumbnail, loading: "lazy" }))))), utils.getPopupWrapperDom());
};
const StyledInputCommentBar = styled__default["default"].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: ${miscTheme.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: ${miscTheme.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 ${miscTheme.theme.colors.gray200};
border-radius: ${miscTheme.theme.borderRadius};
&:active,
&:focus {
border-color: ${miscTheme.theme.colors.primaryBase};
box-shadow: 0px 0px 2px 2px ${miscTheme.theme.colors.primary200};
}
&:disabled {
background-color: ${miscTheme.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: ${miscTheme.theme.sizes.fwRegular};
${utils.MediaQueries.mbDown} {
font-size: 22px;
line-height: 1.2;
}
${utils.MediaQueries.mbUp} {
font-size: 26px;
line-height: 1.2;
}
}
}
&[data-size='md'] {
.as-input {
font-weight: ${miscTheme.theme.sizes.fwRegular};
line-height: 22px;
${utils.MediaQueries.mbDown} {
font-size: 14px;
line-height: 1.2;
}
${utils.MediaQueries.mbUp} {
font-size: 16px;
line-height: 1.2;
}
}
}
&[data-size='sm'] {
.as-input {
font-weight: ${miscTheme.theme.sizes.fwRegular};
line-height: 20px;
${utils.MediaQueries.mbDown} {
font-size: 13px;
line-height: 1.5;
}
${utils.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: ${miscTheme.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 = React.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, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const formData = new FormData();
let submitText = post.encodePostContent(message.replace(/(\ )+/g, ' '), sanitizeFunction);
const mentionIds = post.getMentionIdsFromString(submitText);
if (photos && photos.length > 0) {
const imageSrcs = yield Promise.all(photos === null || photos === void 0 ? void 0 : photos.map((file) => post.uploadAndGetSrc(file, locale)));
imageSrcs
.filter(Boolean)
.slice(0, constants.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMENT.REPLY, {
_locale: locale,
}), 'POST', {
data: formData,
});
});
const likeUnlikeComment = ({ commentId, setLike = false, locale, }) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(setLike ? togetherApiPaths.PATHS.COMMENT.LIKE : togetherApiPaths.PATHS.COMMENT.UNLIKE, {
_locale: locale,
id: commentId,
}), 'GET');
});
const deleteComment = ({ id, locale, }) => {
return togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.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 }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
const isMarryBaby = typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext;
const { t } = index$4.useTranslations();
const { onSelectImages, onRemoveImage, imageSrcs, onRemoveAllImages, imageFiles, } = useImagePicker();
const [text, setText] = React.useState('');
const { trigger } = React.useContext(MainInputTriggerContext);
const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
const imagePicker = React.useRef(null);
const contentEditable = React.useRef(null);
const mainInput = React.useRef(null);
const [invalidUrls, setInvalidUrls] = React.useState([]);
const [bannedWords, setBannedWords] = React.useState([]);
const [previewUrl, setPreviewUrl] = React.useState(null);
const onSubmitComment = () => tslib_es6.__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 = dataTransform.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);
});
React.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["default"].createElement(StyledInputCommentBar, { "data-is-reply": isReply, className: className, style: style },
isReply && (React__default["default"].createElement("div", { className: "reply-to-container" },
React__default["default"].createElement(index$2.Text, { size: "p4" },
React__default["default"].createElement("span", { dangerouslySetInnerHTML: {
__html: t('inputComment.replyTo', {
name: `<span style="color: #2D87F3; cursor: pointer">@${replyToName || ''}</span>`,
}),
} })),
React__default["default"].createElement("img", { src: IconCloseCircleLine, className: "icon-close-comment", onClick: () => onClose && onClose(), loading: "lazy" }))),
React__default["default"].createElement("div", { className: "input-container", ref: mainInput },
React__default["default"].createElement(index$5.UserAvatar, { className: `avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`, avatar: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) ? userInfo.avatar : constants.DEFAULT_AVATAR_IMG, username: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.username) }),
React__default["default"].createElement("input", { ref: imagePicker, onChange: onSelectImages, type: "file", multiple: true, accept: "image/png,image/jpeg", name: "images", style: { display: 'none' } }),
React__default["default"].createElement(index$6.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["default"].createElement("img", { src: IconTabEditPrimary, loading: "lazy" }), CustomInput: React__default["default"].createElement("div", { className: "as-input" },
React__default["default"].createElement(togetherRichTextEditor.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["default"].createElement(index$3.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["default"].createElement("img", { src: IconEnter, className: "icon-enter", loading: "lazy" }))),
!!(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) ? (React__default["default"].createElement("div", { className: "error-text" }, t('notification.limitUrlDomain'))) : null,
(!imageSrcs || imageSrcs.length === 0) && previewUrl && (React__default["default"].createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default["default"].createElement(index$7.Loading, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(index$8.CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
React__default["default"].createElement("img", { src: IconCloseCircle, className: "icon-close", onClick: () => setPreviewUrl(null), loading: "lazy" }))))),
imageSrcs && imageSrcs.length > 0 && (React__default["default"].createElement("div", { className: "preview-images-container" }, imageSrcs.map((src, index) => (React__default["default"].createElement("div", { key: index, className: "image-src-wrapper" },
React__default["default"].createElement("img", { className: "preview-image", src: src, loading: "lazy" }),
React__default["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 }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
const { t } = index$4.useTranslations();
const [isOpen, setIsOpen] = React.useState(false);
React.useEffect(() => {
utils.toggleNoScroll(true);
setTimeout(() => setIsOpen(true), 0);
return () => utils.toggleNoScroll(false);
}, []);
return (React__default["default"].createElement(core.Portal, null,
React__default["default"].createElement(StyledSharePopup, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
React__default["default"].createElement(PopupFrame, { className: "share-popup", isOpen: isOpen, onClose: onClose, heading: t('bottomBar.share') }, isOpen && (React__default["default"].createElement(togetherShareBox.ShareBox, { trackingCategory: trackingCategory, shareUrl: url ||
(typeof window !== 'undefined' ? window.location.href : ''), title: text }))))));
};
const StyledSharePopup = styled__default["default"].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 ${miscTheme.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'] {
${utils.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__default["default"].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 }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
const { t } = index$4.useTranslations();
const [loading, setLoading] = React.useState(false);
return (React__default["default"].createElement(StyledSubmitReportForm, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
React__default["default"].createElement("ul", { className: "report-list" },
React__default["default"].createElement("li", { className: "report-item" },
React__default["default"].createElement("img", { src: IconAlertCircle, loading: "lazy" }),
React__default["default"].createElement(index$2.Text, { className: "__label", color: miscTheme.theme.colors.gray800, size: "p4" }, reasonText))),
React__default["default"].createElement(index$3.Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', className: "report-submit", size: "lg", color: "primary", isLoading: loading, onClick: () => tslib_es6.__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'))));
};
exports.IconAlertCircle = IconAlertCircle;
exports.IconCloseCircle = IconCloseCircle;
exports.InputCommentBar = InputCommentBar;
exports.PopupDanger = PopupDanger;
exports.PopupFrame = PopupFrame;
exports.SharePopup = SharePopup;
exports.SubmitReportForm = SubmitReportForm;
exports.createPost = createPost;
exports.decodeCommentBody = decodeCommentBody;
exports.deleteComment = deleteComment;
exports.deletePost = deletePost;
exports.editPost = editPost;
exports.getDefaultFailNoti = getDefaultFailNoti;
exports.getPostFormData = getPostFormData;
exports.likeUnlikeComment = likeUnlikeComment;
exports.likeUnlikePost = likeUnlikePost;
exports.useImagePicker = useImagePicker;