feat(modal): Code review feedback

This commit is contained in:
Sophia Dao
2024-07-25 09:01:49 -05:00
parent 1ac3ab48f2
commit 842608afa0
3 changed files with 41 additions and 41 deletions
+4 -4
View File
@@ -31,15 +31,15 @@ export default function Providers() {
/>
<Spacer />
<ModalWrap
title="Modal Title"
body={
modalTitle="Modal Title"
modalBody={
<>
<p>Modal body content</p>
</>
}
actionText="Save"
actionButtonLabel="Save"
onAction={onSave}
triggerText="Open Modal"
openButtonLabel="Open Modal"
/>
</>
);
+20 -20
View File
@@ -9,28 +9,28 @@ import {
import React from "react";
interface ModalProps {
title: string;
body: React.ReactNode;
closeText?: string;
actionText?: string;
onAction?: () => void;
modalTitle: string;
modalBody: React.ReactNode;
closeButtonLabel?: string;
actionButtonLabel?: string;
onAction: () => void;
isOpen: boolean;
onOpenChange: (isOpen: boolean) => void;
isDismissable?: boolean;
isKeyboardDismissDisabled?: boolean;
hideCloseButton?: boolean;
}
export const Modal: React.FC<ModalProps> = ({
title,
modalTitle,
modalBody,
closeButtonLabel,
actionButtonLabel,
onAction,
isOpen,
onOpenChange,
body,
closeText,
actionText,
onAction,
isDismissable,
}) => {
const hasActionButton = actionText && onAction;
return (
<>
<ModalContainer
@@ -44,17 +44,17 @@ export const Modal: React.FC<ModalProps> = ({
<ModalContent>
{(onClose) => (
<>
<ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
<ModalBody>{body}</ModalBody>
<ModalHeader className="flex flex-col gap-1">
{modalTitle}
</ModalHeader>
<ModalBody>{modalBody}</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" onPress={onClose}>
{closeText && closeText}
{closeButtonLabel}
</Button>
<Button color="primary" onPress={onAction}>
{actionButtonLabel}
</Button>
{hasActionButton && (
<Button color="primary" onPress={onAction}>
{actionText}
</Button>
)}
</ModalFooter>
</>
)}
+17 -17
View File
@@ -6,38 +6,38 @@ import React from "react";
import { Modal } from "@/components";
interface ModalWrapProps {
title: string;
body: React.ReactNode;
closeText?: string;
actionText?: string;
onAction?: () => void;
triggerText?: string;
modalTitle: string;
modalBody: React.ReactNode;
closeButtonLabel?: string;
actionButtonLabel?: string;
onAction: () => void;
openButtonLabel?: string;
isDismissable?: boolean;
}
export const ModalWrap: React.FC<ModalWrapProps> = ({
title,
body,
closeText = "Close",
actionText = "Save",
modalTitle,
modalBody,
closeButtonLabel = "Close",
actionButtonLabel = "Save",
onAction,
openButtonLabel = "Open",
isDismissable = true,
triggerText = "Open",
}) => {
const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
const closeOnAction = () => {
onAction && onAction();
onAction?.();
onClose();
};
return (
<>
<Button onPress={onOpen}>{triggerText}</Button>
<Button onPress={onOpen}>{openButtonLabel}</Button>
<Modal
title={title}
body={body}
closeText={closeText}
actionText={actionText}
modalTitle={modalTitle}
modalBody={modalBody}
closeButtonLabel={closeButtonLabel}
actionButtonLabel={actionButtonLabel}
onAction={closeOnAction}
isDismissable={isDismissable}
isOpen={isOpen}