ModalManager

ModalManager acts as a single mount point for managing multiple modal types through a unified modalConfig object. Given a type, it renders the matching modal (ListModal, FormModal, MultiSelectModal, RelatedRecordsModal, ExportManyModal, ImportManyModal, or ImportOneModal) and spreads any extra configuration from the config field. Use this to manage modal state from a parent component with a single state object.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modalConfig | ModalConfig | Yes | — | Object describing which modal to render and its state. | | onClose | (reason: string, result?: any) => void | Yes | — | Called when any managed modal closes. Receives the close reason and optional result data. |

ModalConfig shape

| Field | Type | Required | Description | |-------|------|----------|-------------| | type | 'list' \| 'form' \| 'multiSelect' \| 'relatedRecords' \| 'exportMany' \| 'importMany' \| 'importOne' | Yes | Which modal to render. | | isOpen | boolean | Yes | Whether the modal is visible. | | title | string | Yes | Title passed to the modal. | | data | any | No | Data passed to the modal. | | config | any | No | Additional props spread onto the modal component. |

Usage

Basic

import React from 'react';
import ModalManager, { ModalConfig } from '@/components/modals/ModalManager';

export default function Example() {
  const [modalConfig, setModalConfig] = React.useState<ModalConfig>({
    type: 'list',
    isOpen: false,
    title: '',
  });

  const openListModal = () => {
    setModalConfig({
      type: 'list',
      isOpen: true,
      title: 'Products',
      config: {
        listPath: '/v1/products',
        useAuthToken: true,
      },
    });
  };

  const openFormModal = () => {
    setModalConfig({
      type: 'form',
      isOpen: true,
      title: 'New Product',
      config: {
        fields: [{ type: 'text', name: 'name', label: 'Name' }],
        savePath: '/v1/products',
        mode: 'create',
      },
    });
  };

  return (
    <>
      <button onClick={openListModal}>Open List</button>
      <button onClick={openFormModal}>Open Form</button>
      <ModalManager
        modalConfig={modalConfig}
        onClose={(reason) => {
          console.log('Closed:', reason);
          setModalConfig((prev) => ({ ...prev, isOpen: false }));
        }}
      />
    </>
  );
}