@wix/design-system/dist/types/MessageBoxFunctionalLayout/MessageBoxFunctionalLayout.types.d.ts

@wix/design-system

import { ReactNode, MouseEventHandler } from 'react';
import { IconElement } from '../common';
import { ButtonSize } from '../Button';
export type MessageBoxFunctionalLayoutTheme = 'red' | 'blue' | 'purple';
export interface MessageBoxFunctionalLayoutProps {
    /** applied as data-hook HTML attribute that can be used to create driver in testing */
    dataHook?: string;
    /** Hides the footer that contains the action buttons */
    hideFooter?: boolean;
    /** Defines the main action button text */
    confirmText?: ReactNode;
    /** Add a prefix icon for the main action button */
    confirmPrefixIcon?: IconElement;
    /** Add a suffix icon for the main action button */
    confirmSuffixIcon?: IconElement;
    /** Defines the secondary action button text */
    cancelText?: ReactNode;
    /** Add a prefix icon for the secondary action button */
    cancelPrefixIcon?: IconElement;
    /** Add a suffix icon for the secondary action button */
    cancelSuffixIcon?: IconElement;
    /** modal theme color */
    theme?: MessageBoxFunctionalLayoutTheme;
    /** Called when the main action (confirm) is clicked */
    onOk?: MouseEventHandler<HTMLButtonElement>;
    /** Called when the secondary action (cancel) is clicked */
    onCancel?: MouseEventHandler<HTMLButtonElement>;
    /** Called when the close button is clicked */
    onClose?: MouseEventHandler<HTMLButtonElement>;
    /** Specify exact width */
    width?: string;
    /**
     * Specify exact margin. Use to fine tune position inside other elements.
     * When used inside `<Modal>`, beware that `<Modal>` is a flex container, therefore specific flex item CSS rules apply for this margin.
     */
    margin?: string;
    /** Defines the modals's header title */
    title?: ReactNode;
    /** The content to be displayed. can be text or some node */
    children?: ReactNode;
    /** Max height. When supplied - will allow internal scroll to the component */
    maxHeight?: string | number;
    /** Defines the buttons size */
    buttonsHeight?: ButtonSize;
    /** Show/hide the close button */
    closeButton?: boolean;
    /** Defines the secondary action button */
    disableCancel?: boolean;
    /** Defines the main action button */
    disableConfirmation?: boolean;
    /** Removes the content padding. Used in custom modal that defines it's own padding */
    noBodyPadding?: boolean;
    /** A render slot to display a foot note */
    footerBottomChildren?: ReactNode;
    /** Stretches the component to a full screen mode (with some padding) */
    fullscreen?: boolean;
    /** Changes the internal padding to be used with `<EmptyState/>` component */
    withEmptyState?: boolean;
    /** Used to display some side component in the footer, for example `<Checkbox/>` */
    sideActions?: ReactNode;
    /** Used to display an illustration on the left side */
    image?: ReactNode;
}
//# sourceMappingURL=MessageBoxFunctionalLayout.types.d.ts.map