@cerberus-design/react
Version:
The Cerberus Design React component library.
82 lines (81 loc) • 2.59 kB
text/typescript
import { PropsWithChildren, ReactNode } from 'react';
/**
* This module provides a context and hook for the confirm modal.
* @module
*/
export interface BaseConfirmOptions {
/**
* The heading of the confirm modal.
*/
heading: string;
/**
* The text for the action button.
*/
actionText: string;
/**
* The text for the cancel button.
*/
cancelText: string;
/**
* Whether to show the avatar icon at the top of the modal.
* @default true
*/
showAvatar?: boolean;
}
export interface DestructiveConfirmOptions extends BaseConfirmOptions {
/**
* The kind of confirm modal to show.
*/
kind?: 'destructive';
/**
* The description of the confirm modal. Can only be a string for destructive confirm modals.
*/
description?: string;
}
export interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {
/**
* The kind of confirm modal to show.
* @default 'non-destructive'
*/
kind?: 'non-destructive';
/**
* The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.
* @example
* ```tsx
* description: <>Use a Fragment because we put the content within a Paragraph tag.</>
*/
description?: ReactNode;
}
export type ShowConfirmModalOptions = NonDestructiveConfirmModalOptions | DestructiveConfirmOptions;
export type ShowResult = ((value: boolean | null) => void) | null;
export interface ConfirmModalValue {
show: (options: ShowConfirmModalOptions) => Promise<boolean | null>;
}
export type ConfirmModalProviderProps = PropsWithChildren<unknown>;
/**
* Provides a confirm modal to the app.
* @see https://cerberus.digitalu.design/react/confirm-modal
* @example
* ```tsx
* // Wrap the Provider around the root of the feature.
* <ConfirmModal>
* <SomeFeatureSection />
* </ConfirmModal>
*
* // Use the hook to show the confirm modal.
* const confirm = useConfirmModal()
*
* const handleClick = useCallback(async () => {
* const userConsent = await confirm.show({
* heading: 'Add new payment method?',
* description:
* 'This will add a new payment method to your account to be billed for future purchases.',
* actionText: 'Yes, add payment method',
* cancelText: 'No, cancel',
* })
* setConsent(userConsent)
* }, [confirm])
* ```
*/
export declare function ConfirmModal(props: PropsWithChildren<ConfirmModalProviderProps>): import("react/jsx-runtime").JSX.Element;
export declare function useConfirmModal(): ConfirmModalValue;