ActionModal

ActionModal acts as a router for modals. Given an actionName, it delegates rendering to the correct specialized modal (FormModal, MultiSelectModal, RelatedRecordsModal, ExportManyModal, ImportManyModal, or ImportOneModal). All extra props are forwarded to the selected modal.

Props

Base props (always required)

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | (reason?: any) => void | Yes | — | Called when the modal closes. | | title | string | Yes | — | Title passed to the rendered modal. | | actionName | string | Yes | — | Determines which modal to render. See supported values below. | | backdropStyle | React.CSSProperties | No | — | Styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Styles for the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Styles for the close button. | | closeIcon | string | No | — | Icon name for the close button. | | closeIconPaths | any[] | No | — | Custom icon paths for the close button. | | closeIconSize | number | No | — | Icon size for the close button. | | zIndex | number | No | — | CSS z-index of the overlay. | | id | string | No | — | HTML id for the modal element. | | subtitle | string | No | — | Subtitle passed to the rendered modal. | | fullScreen | boolean | No | — | When true, the modal occupies the full viewport. | | data | any | No | — | Data passed to the rendered modal. | | apiBaseUrl | string | No | — | Base URL for the HTTP client. |

actionName: "openFormModal" — additional props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | formTitle | string | No | — | Title shown inside the form. | | formWidth | number | No | — | Max width of the form panel. | | formMode | "create" \| "edit" \| "globalEdit" \| "readOnly" \| "submit" | No | — | Form mode. | | fields | any[] | No | — | Field definitions for the form. | | savePath | string | No | — | API path to POST form data. | | fetchPath | string | No | — | API path to prefetch form data. | | onSuccess | (data: any) => void | No | — | Called on successful submission. | | useAuthToken | boolean | No | — | Use the authenticated HTTP client. |

actionName: "openMultiSelectModal" — additional props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | searchPath | string | No | — | API path for the autocomplete search. | | searchPlaceholder | string | No | — | Placeholder for the search input. | | searchItemLabelKey | string | No | — | Key used as the item label in search results. | | searchItemDescriptionKey | string | No | — | Key used as the item description in search results. | | searchItemImageKey | string | No | — | Key used as the item image in search results. | | startSlots | any | No | — | Slots rendered at the start of each list item. | | endSlots | any | No | — | Slots rendered at the end of each list item. | | savePath | string | No | — | API path to save the selection. | | useAuthToken | boolean | No | — | Use the authenticated HTTP client. | | noContentText | string | No | — | Empty-state text. | | noContentIcon | string | No | — | Empty-state icon name. |

actionName: "openRelatedRecordsModal" — additional props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | startSlots | any | No | — | Slots rendered at the start of each list item. | | endSlots | any | No | — | Slots rendered at the end of each list item. | | noContentText | string | No | — | Empty-state text. | | noContentIcon | string | No | — | Empty-state icon name. |

actionName: "openExportManyModal" — additional props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | exportPath | string | Yes | — | API path for the export request. | | columns | { label: string; value: string }[] | Yes | — | Column definitions to export. | | format | "excel" \| "pdf" \| "json" | Yes | — | Export format. |

actionName: "openImportManyModal" — additional props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | importPath | string | Yes | — | API path for the import request. | | acceptFileTypes | string[] | Yes | — | Accepted file extensions (e.g. ["xlsx", "csv"]). |

actionName: "openImportOneModal" — additional props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | importPath | string | Yes | — | API path for the import request. | | useAuthToken | boolean | No | — | Use the authenticated HTTP client. |

Usage

Basic

import React from 'react';
import ActionModal from '@/components/modals/ActionModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>
      <ActionModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Add Members"
        actionName="openMultiSelectModal"
        searchPath="/v1/users/search"
        searchItemLabelKey="name"
        savePath="/v1/team/members"
        useAuthToken
      />
    </>
  );
}