Merge pull request #34 from UofA-Blueprint/optional-close-button

:bandage: add prop to hide close button

src/components/Modal.tsx

@@ -18,6 +18,12 @@ interface ModalProps {
 	/* 32x32 Phosphor icon for the title */
 	icon?: React.ReactNode;
 
+	/* Determines if the user can close the modal in any way */
+	closeable?: boolean;
+
+	/* Hides the close button in the top-right corner */
+	hideCloseButton?: boolean;
+
 	/* Disables the modal from closing on escape key press */
 	disableCloseOnEscape?: boolean;
 
@@ -36,6 +42,8 @@ function Modal({
 	size = "lg",
 	title,
 	icon = null,
+	closeable = true,
+	hideCloseButton = false,
 	disableCloseOnEscape = false,
 	disableCloseOnClickOutside = false,
 	content,
@@ -73,14 +81,15 @@ function Modal({
 	const handleClickOutside = useCallback(
 		(event: MouseEvent) => {
 			if (
+				closeable &&
 				!disableCloseOnClickOutside &&
 				modalRef.current &&
 				!modalRef.current.contains(event.target as Node)
 			) {
 				onClose();
 			}
 		},
-		[disableCloseOnClickOutside, onClose],
+		[closeable, disableCloseOnClickOutside, onClose],
 	);
 
 	// Close modal on click outside
@@ -97,7 +106,7 @@ function Modal({
 	// Close modal on escape keypress
 	useEffect(() => {
 		const handleKeyDown = (event: KeyboardEvent) => {
-			if (!disableCloseOnEscape && event.key === "Escape") {
+			if (closeable && !disableCloseOnEscape && event.key === "Escape") {
 				onClose();
 			}
 		};
@@ -107,7 +116,7 @@ function Modal({
 		}
 
 		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [isOpen, disableCloseOnEscape, onClose]);
+	}, [isOpen, closeable, disableCloseOnEscape, onClose]);
 
 	// Encapsulates the visibility of the modal in a prop
 	if (!isOpen) return null;
@@ -122,11 +131,14 @@ function Modal({
 					<i className={clsx(headerTitleIcon)}>{icon}</i>
 					<h3>{title}</h3>
 				</div>
-				<div className={clsx(closeButton)}>
-					<button onClick={onClose}>
+				{closeable && !hideCloseButton && (
+					<div
+						className={clsx(closeButton)}
+						onClick={onClose}
+					>
 						<X size={32} />
-					</button>
-				</div>
+					</div>
+				)}
 			</div>
 			<div className={clsx(form)}>
 				{content}