mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-23 12:31:54 +00:00
feat(modal): Code review feedback
This commit is contained in:
@@ -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"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user