apphouse/dist/components/popup/Popup.interface.d.ts

Component library for React that uses observable state management and theme-able components.

import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from '../component.interfaces';
import { PositionOptionsType } from '../../utils/styles/getStylesForPosition';
import { ButtonProps } from '../Button';
/**
 * Interface for the Popup Footer component
 */
export interface PopupFooterStyles {
    container?: CSSProperties;
    footerLeft?: CSSProperties;
    footerRight?: CSSProperties;
    btnCancel?: CSSProperties;
    btnConfirm?: CSSProperties;
}
/**
 * Interface for the Popup Header component styles
 */
export interface PopupHeaderStyles {
    container?: CSSProperties;
    title?: CSSProperties;
    headerIcon?: CSSProperties;
}
/**
 * Interface for the Popup Body component
 */
export type PopupBodyStyles = {
    container?: CSSProperties;
    content?: CSSProperties;
};
/**
 * Interface for the Popup component styles
 */
export interface PopupStyles {
    /**
     * Styles applied on the overlay, the div that covers the entire screen
     * behind the popup
     */
    overlay?: CSSProperties;
    popup?: CSSProperties;
    container?: CSSProperties;
    header?: PopupHeaderStyles;
    body?: PopupBodyStyles;
    footer?: PopupFooterStyles;
    closeButton?: CSSProperties;
}
/**
 * Interface for the Popup Header component
 */
export interface PopupHeaderProps extends ApphouseComponent<PopupHeaderStyles> {
    /**
     * If provided, the popup will be rendered with this icon
     *
     */
    headerIcon?: React.ReactNode;
    /**
     * The title of the popup
     */
    title?: React.ReactNode;
    /**
     * If true, the header bottom border will be removed
     * @optional
     * @default false
     */
    clear?: boolean;
    /**
     * If true, the header will be hidden
     */
    hideHeader?: boolean;
}
/**
 * Interface for an action button in the Popup
 */
export interface ActionButtonType extends ButtonProps {
    label: React.ReactNode;
}
/**
 * Interface for props to be passed to the Popup Footer component
 */
export interface PopupFooterProps {
    /**
     * If true, the footer actions will not display
     * and the cancel and confirm button won't show.
     * @optional
     * @default false
     */
    hideFooterActions?: boolean;
    /**
     * If true, the entire footer will not show.
     * @optional
     * @default false
     */
    hideFooter?: boolean;
    /**
     * Unique id for the popup
     * @required
     */
    id: string;
    /**
     * If true, the popup will not be closable
     * @optional
     * @default false
     */
    disableClosing?: boolean;
    /**
     * If true, the popup will be rendered with a sticky footer.
     * This means that the footer will always be visible at the bottom of the popup
     * in a fixed position.
     * @optional
     * @default false
     */
    stickyFooter?: boolean;
    /**
     * Additional actions to be rendered in the footer.
     * They will be rendered to the left of the cancel and confirm buttons when provided.
     * @optional
     */
    actions?: ActionButtonType[];
    /**
     * Settings for the cancel button
     */
    cancel?: ActionButtonType;
    /**
     * Settings for the confirm button
     */
    confirm?: ActionButtonType;
    /**
     * Additional content to be rendered in the footer.
     * If actions are present it renders to the left of the footer.
     * If no actions are present it renders full width.
     */
    additionalFooterContent?: React.ReactNode;
    /**
     * Overwrite styles for the footer
     */
    styleOverwrites?: PopupFooterStyles;
    /**
     * if provided it will be added in addition to the default footer
     */
    children?: React.ReactNode;
}
export interface PopupProps extends ApphouseComponent<PopupStyles>, Omit<PopupHeaderProps, 'styleOverwrites' | 'gutters'>, Omit<PopupFooterProps, 'styleOverwrites' | 'clear' | 'disableClosing' | 'gutters'> {
    /**
     * The content of the popup
     */
    children?: React.ReactNode;
    /**
     * If true, the popup will close when the user clicks outside of it
     */
    closeOnClickOutside?: boolean;
    /**
     * If true, the popup will be rendered in fullscreen
     * @optional
     * @default false
     */
    fullscreen?: boolean;
    /**
     * If true, the popup will be rendered with a close button
     * that will be rendered in the top right corner
     * that will close the popup when clicked
     * @optional
     * @default false
     */
    showCloseButton?: boolean;
    /**
     * The width of the popup
     */
    width?: string;
    /**
     * If true, the popup will not be closable
     * @optional
     * @default false
     */
    disableClosing?: boolean;
    /**
     * If true, the popup will allow clicks to pass through
     * and there will be no overlay
     */
    allowOverlayPassThrough?: boolean;
    /**
     * The position of where the popup will be displayed on the page
     * @optional
     * @default 'center'
     */
    position?: keyof typeof PositionOptionsType;
}