alertmodel.tsx)¶

Overview¶

A simple alert modal component that provides a warning dialog with confirmation actions.

Features¶

Warning dialog display
Confirmation actions
Cancel option
Bootstrap styling
Modal header
Modal footer
Close button
Backdrop handling
Keyboard support
Focus management

Dependencies¶

import React from 'react'
import { Modal, Button } from 'react-bootstrap'

Props¶

interface AlertModalProps {
  show: boolean;
  handleClose: () => void;
  handleProceed: () => void;
}

Implementation¶

State Management¶

No internal state management - component is fully controlled through props.

Methods¶

Component uses props for method handling: - handleClose: Handles modal dismissal - handleProceed: Handles confirmation action

Unique Functionality¶

Modal dialog management
Action button handling
Bootstrap Modal integration
Warning message display

HTML Structure¶

<Modal show={show} onHide={handleClose}>
  <Modal.Header closeButton>
    <Modal.Title>Warning</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <p>Are you sure you want to leave this page?</p>
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={handleClose}>
      Cancel
    </Button>
    <Button variant="primary" onClick={handleProceed}>
      Proceed
    </Button>
  </Modal.Footer>
</Modal>

API Integration¶

No direct API integration required.

Components Used¶

Modal from react-bootstrap
Button from react-bootstrap

Notes¶

Uses Bootstrap Modal component
Handles confirmation flows
Provides cancel option
Manages modal visibility
Supports keyboard interaction

Pages/Components Referenced By¶

Key Notes¶

Implement proper focus management for accessibility
Handle keyboard interactions (ESC, Enter)
Manage z-index stacking for multiple alerts
Clean up event listeners on unmount
Ensure smooth animations and transitions