From 73078f51e42fa2c32fbbce567edb5286fdb10e78 Mon Sep 17 00:00:00 2001 From: C T Date: Mon, 2 Dec 2024 02:08:48 +0000 Subject: [PATCH 01/17] fix: add a close button to comment input --- .../src/components/comments/CommentInputOrModal.tsx | 4 ++-- .../fields/MarkdownInput/CommentMarkdownInput.tsx | 3 +++ .../shared/src/components/fields/MarkdownInput/index.tsx | 8 ++++++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index 6982f782be..e9a2563097 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -11,7 +11,7 @@ import { useMutateComment } from '../../hooks/post/useMutateComment'; interface CommentInputOrModalProps extends Partial, - Omit { + Omit { onClose?: () => void; className?: { input?: CommentMarkdownInputProps['className']; @@ -42,7 +42,7 @@ export default function CommentInputOrModal({ - + ); } diff --git a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx index cdb71e4024..49f58f2f56 100644 --- a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx @@ -40,6 +40,7 @@ export interface CommentMarkdownInputProps { showUserAvatar?: boolean; onChange?: (value: string) => void; formProps?: FormHTMLAttributes; + onRequestClose?: () => void; } export function CommentMarkdownInputComponent( @@ -54,6 +55,7 @@ export function CommentMarkdownInputComponent( showSubmit = true, showUserAvatar = true, formProps = {}, + onRequestClose, }: CommentMarkdownInputProps, ref: MutableRefObject, ): ReactElement { @@ -131,6 +133,7 @@ export function CommentMarkdownInputComponent( ) : null } onValueUpdate={onChange} + onRequestClose={onRequestClose} /> ); diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index cfd61a8d50..64287d9be3 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -40,6 +40,7 @@ import { Loader } from '../../Loader'; import { Divider } from '../../utilities'; import { usePopupSelector } from '../../../hooks/usePopupSelector'; import { focusInput } from '../../../lib/textarea'; +import CloseButton from '../../CloseButton'; interface ClassName { container?: string; @@ -65,6 +66,7 @@ interface MarkdownInputProps isLoading?: boolean; disabledSubmit?: boolean; maxInputLength?: number; + onRequestClose?: () => void; } enum CommentTab { @@ -97,6 +99,7 @@ function MarkdownInput( isLoading, disabledSubmit, maxInputLength, + onRequestClose, }: MarkdownInputProps, ref: MutableRefObject, ): ReactElement { @@ -181,6 +184,11 @@ function MarkdownInput( isUptoDate={initialContent === input} /> )} + ( From f9f1f5fe60f8bbfba071d24386b0d7cfa09f8999 Mon Sep 17 00:00:00 2001 From: jullia <152446623+jullia02@users.noreply.github.com> Date: Wed, 4 Dec 2024 02:18:19 +0300 Subject: [PATCH 02/17] update index.tsx to support backwards compatibility Co-authored-by: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> --- .../src/components/fields/MarkdownInput/index.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index 64287d9be3..a173af9fbb 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -184,11 +184,13 @@ function MarkdownInput( isUptoDate={initialContent === input} /> )} - + {onRequestClose && ( + + )} ( From 04b3b6484ff45681c2fe69699e13130668daa5a8 Mon Sep 17 00:00:00 2001 From: jullia02 Date: Tue, 3 Dec 2024 19:42:21 -0500 Subject: [PATCH 03/17] add X button state clearing for comment inputs --- packages/shared/src/components/comments/CommentInputOrModal.tsx | 1 + packages/shared/src/components/comments/MainComment.tsx | 2 ++ packages/shared/src/components/comments/SubComment.tsx | 2 ++ 3 files changed, 5 insertions(+) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index e9a2563097..86ce427508 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -13,6 +13,7 @@ interface CommentInputOrModalProps extends Partial, Omit { onClose?: () => void; + onRequestClose?: () => void; className?: { input?: CommentMarkdownInputProps['className']; modal?: string; diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index 60b34cbd32..f44f4b0fb4 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -175,6 +175,7 @@ export default function MainComment({ onCommented(...params); }} onClose={() => onEdit(null)} + onRequestClose={() => onEdit(null)} className={{ input: className?.commentBox }} /> )} @@ -187,6 +188,7 @@ export default function MainComment({ onCommented(...params); }} onClose={() => onReplyTo(null)} + onRequestClose={() => onReplyTo(null)} className={{ input: className?.commentBox }} replyToCommentId={commentId} /> diff --git a/packages/shared/src/components/comments/SubComment.tsx b/packages/shared/src/components/comments/SubComment.tsx index cc90f2ec35..d019fe7870 100644 --- a/packages/shared/src/components/comments/SubComment.tsx +++ b/packages/shared/src/components/comments/SubComment.tsx @@ -68,6 +68,7 @@ function SubComment({ onCommented(data, isNew); }} onClose={() => onEdit(null)} + onRequestClose={() => onEdit(null)} className={{ input: className }} /> )} @@ -81,6 +82,7 @@ function SubComment({ onCommented(...params); }} onClose={() => onReplyTo(null)} + onRequestClose={() => onReplyTo(null)} replyToCommentId={commentId} /> )} From 9ce0cefdd6421046d300cadd8d889863965fd04f Mon Sep 17 00:00:00 2001 From: jullia02 Date: Tue, 3 Dec 2024 19:50:15 -0500 Subject: [PATCH 04/17] add desktop close functionality --- .../shared/src/components/comments/CommentInputOrModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index 86ce427508..5845099c0c 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -24,6 +24,7 @@ interface CommentInputOrModalProps export default function CommentInputOrModal({ onClose, className, + onRequestClose, ...props }: CommentInputOrModalProps): ReactElement { const isModal = !useViewSize(ViewSize.Tablet); @@ -43,7 +44,7 @@ export default function CommentInputOrModal({ - + ); } From 4553ddfa3403dae4b3942fd0f87f1b1b90abc2a9 Mon Sep 17 00:00:00 2001 From: jullia <152446623+jullia02@users.noreply.github.com> Date: Wed, 4 Dec 2024 21:32:54 +0300 Subject: [PATCH 05/17] remoeg unnecessary code Co-authored-by: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> --- .../shared/src/components/comments/CommentInputOrModal.tsx | 6 ++---- packages/shared/src/components/comments/MainComment.tsx | 2 -- packages/shared/src/components/comments/SubComment.tsx | 2 -- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index 5845099c0c..c4a4d3b632 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -11,9 +11,8 @@ import { useMutateComment } from '../../hooks/post/useMutateComment'; interface CommentInputOrModalProps extends Partial, - Omit { + Omit { onClose?: () => void; - onRequestClose?: () => void; className?: { input?: CommentMarkdownInputProps['className']; modal?: string; @@ -24,7 +23,6 @@ interface CommentInputOrModalProps export default function CommentInputOrModal({ onClose, className, - onRequestClose, ...props }: CommentInputOrModalProps): ReactElement { const isModal = !useViewSize(ViewSize.Tablet); @@ -44,7 +42,7 @@ export default function CommentInputOrModal({ - + ); } diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index f44f4b0fb4..60b34cbd32 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -175,7 +175,6 @@ export default function MainComment({ onCommented(...params); }} onClose={() => onEdit(null)} - onRequestClose={() => onEdit(null)} className={{ input: className?.commentBox }} /> )} @@ -188,7 +187,6 @@ export default function MainComment({ onCommented(...params); }} onClose={() => onReplyTo(null)} - onRequestClose={() => onReplyTo(null)} className={{ input: className?.commentBox }} replyToCommentId={commentId} /> diff --git a/packages/shared/src/components/comments/SubComment.tsx b/packages/shared/src/components/comments/SubComment.tsx index d019fe7870..cc90f2ec35 100644 --- a/packages/shared/src/components/comments/SubComment.tsx +++ b/packages/shared/src/components/comments/SubComment.tsx @@ -68,7 +68,6 @@ function SubComment({ onCommented(data, isNew); }} onClose={() => onEdit(null)} - onRequestClose={() => onEdit(null)} className={{ input: className }} /> )} @@ -82,7 +81,6 @@ function SubComment({ onCommented(...params); }} onClose={() => onReplyTo(null)} - onRequestClose={() => onReplyTo(null)} replyToCommentId={commentId} /> )} From d81668cfbfad938fd173ff1441008ff5a1a50fc9 Mon Sep 17 00:00:00 2001 From: jullia02 Date: Wed, 4 Dec 2024 16:06:41 -0500 Subject: [PATCH 06/17] fixing lint errors --- .../shared/src/components/comments/CommentInputOrModal.tsx | 4 +++- .../shared/src/components/fields/MarkdownInput/index.tsx | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index c4a4d3b632..f789247dda 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -42,7 +42,9 @@ export default function CommentInputOrModal({ - + ); } diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index a173af9fbb..437ace64fc 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -186,9 +186,9 @@ function MarkdownInput( )} {onRequestClose && ( )} Date: Wed, 4 Dec 2024 16:26:18 -0500 Subject: [PATCH 07/17] fixing lint errors --- .../src/components/comments/CommentInputOrModal.tsx | 8 +++++--- .../shared/src/components/fields/MarkdownInput/index.tsx | 6 +++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index f789247dda..a9b4722a1e 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -42,9 +42,11 @@ export default function CommentInputOrModal({ - + ); } diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index 437ace64fc..08333479ff 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -186,9 +186,9 @@ function MarkdownInput( )} {onRequestClose && ( )} Date: Wed, 4 Dec 2024 17:40:47 -0500 Subject: [PATCH 08/17] fixed eslint errors --- .../src/components/comments/CommentInputOrModal.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index a9b4722a1e..a53eae2ab3 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -42,10 +42,10 @@ export default function CommentInputOrModal({ - ); From d4dab35de3f0bed34fc2b087fd1488ba5ddc6509 Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 00:22:26 +0800 Subject: [PATCH 09/17] Update packages/shared/src/components/fields/MarkdownInput/index.tsx --- packages/shared/src/components/fields/MarkdownInput/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index 08333479ff..83b95794ce 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -66,7 +66,7 @@ interface MarkdownInputProps isLoading?: boolean; disabledSubmit?: boolean; maxInputLength?: number; - onRequestClose?: () => void; + onClose?: () => void; } enum CommentTab { From 5c41d1a29b173a027c32a662b5599c0340a7cff7 Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 00:22:32 +0800 Subject: [PATCH 10/17] Update packages/shared/src/components/fields/MarkdownInput/index.tsx --- packages/shared/src/components/fields/MarkdownInput/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index 83b95794ce..49f881070b 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -99,7 +99,7 @@ function MarkdownInput( isLoading, disabledSubmit, maxInputLength, - onRequestClose, + onClose, }: MarkdownInputProps, ref: MutableRefObject, ): ReactElement { From 53491995a717226e7f68dab0224b568c278444a4 Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 00:22:38 +0800 Subject: [PATCH 11/17] Update packages/shared/src/components/fields/MarkdownInput/index.tsx --- packages/shared/src/components/fields/MarkdownInput/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index 49f881070b..a0b6e103cb 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -184,11 +184,11 @@ function MarkdownInput( isUptoDate={initialContent === input} /> )} - {onRequestClose && ( + {onClose && ( )} Date: Fri, 6 Dec 2024 00:22:45 +0800 Subject: [PATCH 12/17] Update packages/shared/src/components/comments/CommentInputOrModal.tsx --- packages/shared/src/components/comments/CommentInputOrModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx index a53eae2ab3..8a8abdfaa0 100644 --- a/packages/shared/src/components/comments/CommentInputOrModal.tsx +++ b/packages/shared/src/components/comments/CommentInputOrModal.tsx @@ -45,7 +45,7 @@ export default function CommentInputOrModal({ ); From 80769a6615369a6d992b9666ddd91ac15aa5611e Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 13:18:15 +0800 Subject: [PATCH 13/17] Update packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx --- .../components/fields/MarkdownInput/CommentMarkdownInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx index 49f58f2f56..f0b7d0367c 100644 --- a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx @@ -133,7 +133,7 @@ export function CommentMarkdownInputComponent( ) : null } onValueUpdate={onChange} - onRequestClose={onRequestClose} + onClose={onClose} /> ); From f6ecc6779ef953859fcf0d73ede3f78e0f4a8a83 Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 13:18:22 +0800 Subject: [PATCH 14/17] Update packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx --- .../components/fields/MarkdownInput/CommentMarkdownInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx index f0b7d0367c..dad6e740e8 100644 --- a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx @@ -40,7 +40,7 @@ export interface CommentMarkdownInputProps { showUserAvatar?: boolean; onChange?: (value: string) => void; formProps?: FormHTMLAttributes; - onRequestClose?: () => void; + onClose?: () => void; } export function CommentMarkdownInputComponent( From 1af91470255b8f6560248abe231a334f7cc8ca4d Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 13:18:27 +0800 Subject: [PATCH 15/17] Update packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx --- .../components/fields/MarkdownInput/CommentMarkdownInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx index dad6e740e8..1ef7dc6f52 100644 --- a/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx @@ -55,7 +55,7 @@ export function CommentMarkdownInputComponent( showSubmit = true, showUserAvatar = true, formProps = {}, - onRequestClose, + onClose, }: CommentMarkdownInputProps, ref: MutableRefObject, ): ReactElement { From bce6f51cdfb0b350282ae62e5f82040897ced8a3 Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 13:26:15 +0800 Subject: [PATCH 16/17] Update packages/shared/src/components/fields/MarkdownInput/index.tsx --- packages/shared/src/components/fields/MarkdownInput/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index a0b6e103cb..c1dcd659f7 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -187,7 +187,7 @@ function MarkdownInput( {onClose && ( )} From 3a293b8d5d740526dfc1909f7a2893ab2e705d18 Mon Sep 17 00:00:00 2001 From: Lee Hansel Solevilla <13744167+sshanzel@users.noreply.github.com> Date: Fri, 6 Dec 2024 13:27:59 +0800 Subject: [PATCH 17/17] Update packages/shared/src/components/fields/MarkdownInput/index.tsx --- packages/shared/src/components/fields/MarkdownInput/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared/src/components/fields/MarkdownInput/index.tsx b/packages/shared/src/components/fields/MarkdownInput/index.tsx index c1dcd659f7..2da6b58901 100644 --- a/packages/shared/src/components/fields/MarkdownInput/index.tsx +++ b/packages/shared/src/components/fields/MarkdownInput/index.tsx @@ -186,8 +186,8 @@ function MarkdownInput( )} {onClose && ( )}