fix: add a close button to comment input (#3897)

dailydotdev · Dec 6, 2024 · f8c7648 · f8c7648
1 parent 063e3fa
commit f8c7648
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/packages/shared/src/components/comments/CommentInputOrModal.tsx b/packages/shared/src/components/comments/CommentInputOrModal.tsx
@@ -42,7 +42,11 @@ export default function CommentInputOrModal({
     <WriteCommentContext.Provider
       value={{ mutateComment: mutateCommentResult }}
     >
-      <CommentMarkdownInput {...props} className={className.input} />
+      <CommentMarkdownInput
+        {...props}
+        className={className.input}
+        onClose={onClose}
+      />
     </WriteCommentContext.Provider>
   );
 }
diff --git 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<HTMLFormElement>;
+  onClose?: () => void;
 }
 
 export function CommentMarkdownInputComponent(
@@ -54,6 +55,7 @@ export function CommentMarkdownInputComponent(
     showSubmit = true,
     showUserAvatar = true,
     formProps = {},
+    onClose,
   }: CommentMarkdownInputProps,
   ref: MutableRefObject<HTMLFormElement>,
 ): ReactElement {
@@ -131,6 +133,7 @@ export function CommentMarkdownInputComponent(
           ) : null
         }
         onValueUpdate={onChange}
+        onClose={onClose}
       />
     </form>
   );

diff --git 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;
+  onClose?: () => void;
 }
 
 enum CommentTab {
@@ -97,6 +99,7 @@ function MarkdownInput(
     isLoading,
     disabledSubmit,
     maxInputLength,
+    onClose,
   }: MarkdownInputProps,
   ref: MutableRefObject<MarkdownRef>,
 ): ReactElement {
@@ -181,6 +184,13 @@ function MarkdownInput(
           isUptoDate={initialContent === input}
         />
       )}
+      {onClose && (
+        <CloseButton
+          size={ButtonSize.Small}
+          className="absolute right-3 top-2"
+          onClick={onClose}
+        />
+      )}
       <ConditionalWrapper
         condition={allowPreview}
         wrapper={(children) => (