ScheduledEmailDialogShell()

Beta API. Mostly stable, but details may change in a minor release, outside SemVer. See API maturity.

The scheduled-export dialog’s chrome, connected to the dialog’s state: the modal overlay, the dialog frame with the header row (the back button and the title input) and the action bar, the General and Filters tabs, the scrollable content area around the selected tab’s content, the body’s error and validation messages, the stale-filters confirmation step shown before the dialog when the saved filters or schedule timezone no longer match the dashboard, and the delete confirmation reached from the action bar in edit mode. While useScheduledEmailDialogContext().isLoading is true — on scheduled email the ordinary path while a widget export’s filters load — it renders the loading skeleton and none of its children.

The default dialog is <ScheduledEmailDialogShell> around the region blocks and form; a custom ScheduledEmailDialogComponent that keeps this chrome and arranges the blocks differently renders the shell itself. The shell does not own the save: call useSaveScheduledEmailToBackend() and pass its handleSaveScheduledEmail, isSavingScheduledEmail and savingErrorMessage; build Enter handlers for the blocks you place with useScheduledEmailSubmitOnEnter() over the same handleSaveScheduledEmail. Call that hook once useScheduledEmailDialogContext().isLoading is false for the first time — the state hooks throw until the dialog’s data has first loaded (after that they stay available through a refresh) — and render the shell alone (any onSubmit, isSaving: false) until then, as the example does.

Needs an ambient IntlProvider; inside a Dashboard the dashboard’s provider covers it.

export declare function ScheduledEmailDialogShell(props: IScheduledEmailDialogShellProps): ReactElement;

Parameters

Returns

ReactElement

Example

function MyScheduledEmailDialog(props: IScheduledEmailDialogProps) {
    const { isLoading } = useScheduledEmailDialogContext();
    // the state hooks throw until the dialog's data has first loaded; the shell shows the skeleton
    if (isLoading) {
        return <ScheduledEmailDialogShell {...props} onSubmit={() => {}} isSaving={false} />;
    }
    return <MyScheduledEmailDialogBody {...props} />;
}

function MyScheduledEmailDialogBody(props: IScheduledEmailDialogProps) {
    const { handleSaveScheduledEmail, isSavingScheduledEmail, savingErrorMessage } =
        useSaveScheduledEmailToBackend(props);
    const submitOnEnter = useScheduledEmailSubmitOnEnter({
        onSubmit: handleSaveScheduledEmail,
        isSaving: isSavingScheduledEmail,
    });
    return (
        <ScheduledEmailDialogShell
            {...props}
            onSubmit={handleSaveScheduledEmail}
            isSaving={isSavingScheduledEmail}
            savingErrorMessage={savingErrorMessage}
        >
            <ScheduledEmailDialogDestination />
            <ScheduledEmailDialogRecipients onKeyDownSubmit={submitOnEnter} />
        </ScheduledEmailDialogShell>
    );
}