Modals

There is currently a hook called useModal that we use to open modals in many places. This hook has been deprecated. There is also a function named openModal in LayerConext that has been deprecated. Please don't continue to use either of these approaches. Instead, use the openModalModal functioncomponent in LayerConextthe asNautilus Component Library and described in this article.

Example

Storybook Usage

Docs

constcan {be openModalfound }here
Bootstrap =Docs useLayerContext();can openModal((closeModalFn)be =>found <ConfirmClearLogsModalhere

ctas={getConfirmationCtas(closeModalFn)}
Introduction
text={t(SystemLogsTKeys.ClearLogsConfirmMsg,
We {have count:a systemLogs.lengthModal })}component />);in 

the Nautilus Component Library that is built on top of the Bootstrap Modal component. You can reference the Bootstrap documentation on Modals for any details on how the modal works and the options available, as well as our Nautilus Storybook documentation for the Modal component.

Toggling Modal Display

The useLayerContextIsHiddenState prop hook has a function called openModal that can beis used to opencontrol awhether modalor from anywhere. It is a function whose single parameter is a function called getModalComponent that should returnnot the modal tois behidden displayedor asnot. JSX.You Thecan modal should be styledpass in such a wayreact state that itis willreturned appear as a popup over all the other UI (such as by using EfcModaldirectly from the componentuseState library). The closeModalFn parameter passed to the getModalComponent function will close the modal when called.hook.

Modal Content

IfThere yourare modalthree is dependent on data from a context, be sure to wrap your modal in the openModal call inprops that context.

are

openModal((closeModal) => {
    return (
        <NodeDetailsProvider>
            <EditAccessLinkModal destroyModal={closeModal} accessLink={item as IAccessLink} />
        </NodeDetailsProvider>
    );
}

When using EfcModal you will probably wantused to set the content of the Modal, isOpenHeader, Body, and Footer. The props for each of these are union types. One type in the union allows you to pass in custom JSX to display whatever you want in that section of the modal. The other is a simple type that has a small number of properties to support common usage.

When custom JSX is passed to any section, it will be wrapped in a div propwith that section's corresponding bootstrap class (i.e: modal-header, modal-body, modal-footer) to true,enforce andmodal havestyling.

Toggle between modals

Bootstrap only supports displaying one modal at a time so you cannot stack them. You can see bootstrap docs here for details on a clever way for toggling between modals when needed by setting the data-bs-toggle prop calland closeModalFn.data-bs-toggle attributes on buttons in each modal. 

In the Nautilus UI modal, footer buttons have a prop named altModalToShowOnClickElementId that will set both data attributes accordingly and open the modal with the specified modal element id when the button is cliicked.