Convert Page components to TypeScript

(cherry picked from commit f35a27449d253260ba9c9fae28909cec8a87b4fe)
2026-04-23 22:25:14 -04:00 · 2024-12-16 06:51:45 -08:00
parent 7fdaf41325
commit 937557e214
68 changed files with 2391 additions and 2713 deletions
@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import Modal from 'Components/Modal/Modal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import useKeyboardShortcuts from 'Helpers/Hooks/useKeyboardShortcuts';
+import { Kind } from 'Helpers/Props/kinds';
+import { Size } from 'Helpers/Props/sizes';
+
+interface ConfirmModalProps {
+  className?: string;
+  isOpen: boolean;
+  kind?: Kind;
+  size?: Size;
+  title: string;
+  message: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  hideCancelButton?: boolean;
+  isSpinning?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+function ConfirmModal({
+  isOpen,
+  kind = 'primary',
+  size = 'medium',
+  title,
+  message,
+  confirmLabel = 'OK',
+  cancelLabel = 'Cancel',
+  hideCancelButton,
+  isSpinning = false,
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) {
+  const { bindShortcut, unbindShortcut } = useKeyboardShortcuts();
+
+  useEffect(() => {
+    if (isOpen) {
+      bindShortcut('acceptConfirmModal', onConfirm);
+    }
+
+    return () => unbindShortcut('acceptConfirmModal');
+  }, [bindShortcut, unbindShortcut, isOpen, onConfirm]);
+
+  return (
+    <Modal isOpen={isOpen} size={size} onModalClose={onCancel}>
+      <ModalContent onModalClose={onCancel}>
+        <ModalHeader>{title}</ModalHeader>
+
+        <ModalBody>{message}</ModalBody>
+
+        <ModalFooter>
+          {!hideCancelButton && (
+            <Button kind="default" onPress={onCancel}>
+              {cancelLabel}
+            </Button>
+          )}
+
+          <SpinnerButton
+            autoFocus={true}
+            kind={kind}
+            isSpinning={isSpinning}
+            onPress={onConfirm}
+          >
+            {confirmLabel}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default ConfirmModal;