frst-components 0.21.63 → 0.21.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -4584,6 +4584,17 @@ const RepplysContainer = styled__default["default"].div `
|
|
|
4584
4584
|
width: ${({ width }) => (width ? `${width}px` : 'auto')};
|
|
4585
4585
|
margin-left:50px`;
|
|
4586
4586
|
|
|
4587
|
+
const InputContainer = styled__default["default"].div `
|
|
4588
|
+
display:flex;
|
|
4589
|
+
flex-direction:column;
|
|
4590
|
+
position:relative;
|
|
4591
|
+
`;
|
|
4592
|
+
const Container$g = styled__default["default"].div `
|
|
4593
|
+
display:flex;
|
|
4594
|
+
justify-content:center;
|
|
4595
|
+
margin-bottom:40px;
|
|
4596
|
+
`;
|
|
4597
|
+
|
|
4587
4598
|
const container = styled__default["default"].div `
|
|
4588
4599
|
display: flex;
|
|
4589
4600
|
justify-content: center;
|
|
@@ -4657,17 +4668,6 @@ function Loading(props) {
|
|
|
4657
4668
|
return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs(container, { textPosition: PositionTextLoad, style: { ...props.style }, children: [jsxRuntime.jsx(loader, { children: jsxRuntime.jsx(Load, { width: Size, height: Size, fill: Color !== '' && Color }) }), jsxRuntime.jsx(loadText, { style: { color: props.loadTextColor ? props.loadTextColor : 'white' }, children: LoadText })] }) }));
|
|
4658
4669
|
}
|
|
4659
4670
|
|
|
4660
|
-
const InputContainer = styled__default["default"].div `
|
|
4661
|
-
display:flex;
|
|
4662
|
-
flex-direction:column;
|
|
4663
|
-
position:relative;
|
|
4664
|
-
`;
|
|
4665
|
-
const Container$g = styled__default["default"].div `
|
|
4666
|
-
display:flex;
|
|
4667
|
-
justify-content:center;
|
|
4668
|
-
margin-bottom:40px;
|
|
4669
|
-
`;
|
|
4670
|
-
|
|
4671
4671
|
const InputReply = ({ placeHolderText, getSearchUsers, onClickPublishButton, parentId, limitInput, publishButtonText, replyMentionedUser, imgProfile, styles, handleHiddenInput }) => {
|
|
4672
4672
|
const [comment, setComment] = React.useState('');
|
|
4673
4673
|
const [CaptureFormattedValue, setCaptureFormattedValue] = React.useState('');
|
|
@@ -4675,12 +4675,12 @@ const InputReply = ({ placeHolderText, getSearchUsers, onClickPublishButton, par
|
|
|
4675
4675
|
const [users, setUsers] = React.useState([]);
|
|
4676
4676
|
const [isLoading, setIsLoading] = React.useState(false);
|
|
4677
4677
|
const inputRef = React.useRef(null);
|
|
4678
|
+
const handleClickOutside = (event) => {
|
|
4679
|
+
if (inputRef.current && !inputRef.current.contains(event.target) && comment.length === 0) {
|
|
4680
|
+
handleHiddenInput();
|
|
4681
|
+
}
|
|
4682
|
+
};
|
|
4678
4683
|
React.useEffect(() => {
|
|
4679
|
-
const handleClickOutside = (event) => {
|
|
4680
|
-
if (inputRef.current && !inputRef.current.contains(event.target) && comment.length === 0) {
|
|
4681
|
-
handleHiddenInput();
|
|
4682
|
-
}
|
|
4683
|
-
};
|
|
4684
4684
|
document.addEventListener('mousedown', handleClickOutside);
|
|
4685
4685
|
return () => {
|
|
4686
4686
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
@@ -4713,29 +4713,17 @@ const InputReply = ({ placeHolderText, getSearchUsers, onClickPublishButton, par
|
|
|
4713
4713
|
};
|
|
4714
4714
|
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(Avatar, { src: imgProfile, size: "32px", style: { marginTop: '55px', marginRight: '8px' } }), jsxRuntime.jsxs(InputContainer, { ref: inputRef, style: { ...styles }, children: [jsxRuntime.jsx(InputComment$1, { styles: { width: '100%', marginTop: '22.5px' }, className: "userComment", onChange: (e) => {
|
|
4715
4715
|
handleSearchUsers(e);
|
|
4716
|
-
}, value: comment, placeholder: placeHolderText, limit: limitInput, showCharacterCounter: true, onContentUnformat: (unformattedValue) => setCommentData(unformattedValue), onContentFormat: (formattedValue) => setCaptureFormattedValue(formattedValue), onSendMentions: (mentions) => setCaptureMentions(mentions), users: users
|
|
4716
|
+
}, value: comment, placeholder: placeHolderText, limit: limitInput, showCharacterCounter: true, onContentUnformat: (unformattedValue) => setCommentData(unformattedValue), onContentFormat: (formattedValue) => setCaptureFormattedValue(formattedValue), onSendMentions: (mentions) => setCaptureMentions(mentions), users: users }), jsxRuntime.jsx(MiniButton, { disabled: comment.length <= 0 || isLoading, label: publishButtonText, onClick: () => handlePublish(), variant: "primary", styles: { marginLeft: 'auto', marginTop: '15px' } }), isLoading && jsxRuntime.jsx(Loading, {})] })] }));
|
|
4717
4717
|
};
|
|
4718
4718
|
|
|
4719
4719
|
const CommentaryBoxReply = ({ commentData, showMoreButtonText, showLessButtonText, answerButtonText, onClickAnswerButton }) => {
|
|
4720
|
-
return (jsxRuntime.jsx(CommentaryBoxV2, { hasActionToClickOnAvatar: false, imgProfile: commentData.user?.
|
|
4720
|
+
return (jsxRuntime.jsx(CommentaryBoxV2, { hasActionToClickOnAvatar: false, imgProfile: commentData.user?.avatar, itsLiked: false, userName: commentData.user?.name, userOffice: commentData.user?.role_name, userCompany: commentData.user?.company_name, commentId: commentData.id, commentText: commentData.text, howLongAgo: commentData.howLongAgo, showMoreText: showMoreButtonText, actionAnswer: () => onClickAnswerButton(commentData.id), showLessText: showLessButtonText, answerButtonText: answerButtonText, styles: { marginTop: '8px' }, commentTextWithMention: commentData.mentionText }));
|
|
4721
4721
|
};
|
|
4722
4722
|
|
|
4723
4723
|
const ThreadComments = ({ mainComment, listReplyComments, placeHolderText, onClickPublishButton, showReplysButtonText, publishButtonText, limitInputs, answerButtonText, loggedUserProfileImg, getSearchUsers, showMoreButtonText, showLessButtonText, styles, relationToPhaseText }) => {
|
|
4724
|
-
const [isLoading, setIsLoading] = React.useState(false);
|
|
4725
4724
|
const [showAnswers, setShowAnswers] = React.useState(false);
|
|
4726
4725
|
const [showReplyInput, setShowReplyInput] = React.useState(false);
|
|
4727
4726
|
const [showInputByIdReply, setShowInputByIdReply] = React.useState([]);
|
|
4728
|
-
const handleShowReplys = async () => {
|
|
4729
|
-
setIsLoading(true);
|
|
4730
|
-
try {
|
|
4731
|
-
setShowAnswers(true);
|
|
4732
|
-
}
|
|
4733
|
-
catch (error) {
|
|
4734
|
-
}
|
|
4735
|
-
finally {
|
|
4736
|
-
setIsLoading(false);
|
|
4737
|
-
}
|
|
4738
|
-
};
|
|
4739
4727
|
const handleHiddenInput = () => {
|
|
4740
4728
|
setShowReplyInput(false);
|
|
4741
4729
|
};
|
|
@@ -4748,7 +4736,7 @@ const ThreadComments = ({ mainComment, listReplyComments, placeHolderText, onCli
|
|
|
4748
4736
|
const handleCommentReplyReply = (idReply) => {
|
|
4749
4737
|
setShowInputByIdReply([...showInputByIdReply, idReply]);
|
|
4750
4738
|
};
|
|
4751
|
-
return (jsxRuntime.jsx(Container$h, { style: styles, children: jsxRuntime.jsxs(CommentarysContainer, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(CommentaryBoxV2, { styles: { marginBottom: '8px' }, hasActionToClickOnAvatar: false, imgProfile: mainComment.user
|
|
4739
|
+
return (jsxRuntime.jsx(Container$h, { style: styles, children: jsxRuntime.jsxs(CommentarysContainer, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(CommentaryBoxV2, { styles: { marginBottom: '8px' }, hasActionToClickOnAvatar: false, imgProfile: mainComment.user?.avatar, itsLiked: false, userId: mainComment.user?.uuid, userName: mainComment.user?.name, userOffice: mainComment.user?.role_name, userCompany: mainComment.user?.company_name, commentId: mainComment.id, commentText: mainComment.text, howLongAgo: mainComment.howLongAgo, showMoreText: showMoreButtonText, showLessText: showLessButtonText, answerButtonText: answerButtonText, showLikeButton: false, actionAnswer: handleCommentReply, relationToPhaseText: relationToPhaseText, commentTextWithMention: mainComment.mentionText }), listReplyComments?.length > 0 && !showAnswers && (jsxRuntime.jsx(ViewReplysButtonContainer, { children: jsxRuntime.jsx("span", { onClick: () => setShowAnswers(true), children: showReplysButtonText }) })), showReplyInput && (jsxRuntime.jsx(InputReply, { styles: { width: '100%', marginTop: '24px' }, imgProfile: loggedUserProfileImg, idInput: `idInput-${mainComment.id}`, placeHolderText: placeHolderText, publishButtonText: publishButtonText, limitInput: limitInputs, onClickPublishButton: onClickPublishButton, getSearchUsers: getSearchUsers, replyMentionedUser: mainComment.user, parentId: Number(mainComment.id), handleHiddenInput: handleHiddenInput }))] }), showAnswers && (jsxRuntime.jsx(RepplysContainer, { children: listReplyComments?.map((replyComment) => {
|
|
4752
4740
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CommentaryBoxReply, { commentData: replyComment, answerButtonText: answerButtonText, showMoreButtonText: showMoreButtonText, showLessButtonText: showLessButtonText, onClickAnswerButton: handleCommentReplyReply }), showInputByIdReply.includes(replyComment.id) && (jsxRuntime.jsx(InputReply, { imgProfile: loggedUserProfileImg, styles: { width: '100%', marginTop: '24px' }, idInput: `idInput-${replyComment.id}`, placeHolderText: placeHolderText, publishButtonText: publishButtonText, limitInput: limitInputs, onClickPublishButton: onClickPublishButton, replyMentionedUser: replyComment.user, getSearchUsers: getSearchUsers, parentId: Number(mainComment.id), handleHiddenInput: (replyId = replyComment.id) => handleHiddenInputReply(replyId) }))] }));
|
|
4753
4741
|
}) }))] }) }));
|
|
4754
4742
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/FI/ThreadComments/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/FI/ThreadComments/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAKxD,eAAO,MAAM,cAAc,iQAexB,eAAe,gBA0GjB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FI/ThreadComments/utilitiesComponents/inputReply/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FI/ThreadComments/utilitiesComponents/inputReply/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAKjD,eAAO,MAAM,UAAU,kKAWpB,WAAW,gBAiFb,CAAC"}
|