fomantic-ui/types/fomantic-ui-toast.d.ts

declare namespace FomanticUI {
    interface Toast {
        settings: ToastSettings;

        /**
         * Pauses the display time decrease (and possible progress bar animation)
         */
        (behavior: 'animate pause'): JQuery;

        /**
         * Continues decreasing display time (and possible progress bar animation)
         */
        (behavior: 'animate continue'): JQuery;

        /**
         * Closes the toast
         */
        (behavior: 'close'): JQuery;

        /**
         * Returns all toasts as an array of objects which are visible within the current toast-container
         */
        (behavior: 'get toasts'): object[];

        /**
         * Returns the remaining time in milliseconds
         */
        (behavior: 'get remainingTime'): number;

        (behavior: 'refresh' | 'destroy'): JQuery;
        <K extends keyof ToastSettings>(behavior: 'setting', name: K, value?: undefined, ): Partial<Pick<ToastSettings, keyof ToastSettings>>;
        <K extends keyof ToastSettings>(behavior: 'setting', name: K, value: ToastSettings[K]): JQuery;
        (behavior: 'setting', value: Partial<Pick<ToastSettings, keyof ToastSettings>>): JQuery;
        (settings?: Partial<Pick<ToastSettings, keyof ToastSettings>>): JQuery;
    }

    /**
     * @see {@link https://fomantic-ui.com/modules/toast.html#/settings}
     */
    interface ToastSettings {
        // region Toast Settings

        /**
         * Sets where the toast can be displayed. Can be 'top right', 'top center', 'top left', 'bottom right', 'bottom center' and 'bottom left'.
         *
         * @default 'top right'
         */
        position: string;

        /**
         * If the toasts should stack horizontal instead of vertical.
         *
         * @default false
         */
        horizontal: boolean;

        /**
         * Define the class of notification. Can be any existing color definition or 'info', 'success', 'warning' and 'error'.
         * If ui message is used in className.toast option (see below), this option can hold any supported class of the message component.
         *
         * @default 'neutral'
         */
        class: string;

        /**
         * Can hold a string to be added to the progress bar class, for example a separate color
         *
         * @default false
         */
        classProgress: false | string;

        /**
         * Can hold a string to be added to the actions class to control its appearance.
         * Usually a combination of 'basic', 'left', 'top', 'bottom', 'vertical' and 'attached'.
         *
         * @default false
         */
        classActions: false | string;

        /**
         * Can hold a string to be added to the image class. 'mini', 'tiny', 'small' and 'avatar' are supported out of the box.
         *
         * @default 'mini'
         */
        classImage: string;

        /**
         * Selector or jquery object specifying the area to attach the toast container to.
         *
         * @default 'body'
         */
        context: string | JQuery;

        /**
         * Set the time (in ms) of the toast appearance. Set '0' to disable the automatic dismissal.
         * Set 'auto' to calculate the time by the given amount of words within the toast.
         *
         * @default 3000
         */
        displayTime: number | 'auto';

        /**
         * Minimum display time in case displayTime is set to 'auto'.
         *
         * @default 1000
         */
        minDisplayTime: number;

        /**
         * Base to calculate display time in case displayTime is set to 'auto'.
         *
         * @default 120
         */
        wordsPerMinute: number;

        /**
         * If an URL to an image is given, that image will be shown to the left of the toast.
         *
         * @default false
         */
        showImage: false | string;

        /**
         * Define if the toast should display an icon which matches to a given class.
         * If a string is given, this will be used as icon classname.
         *
         * @default true
         */
        showIcon: boolean | string;

        /**
         * This will make the toast closable by the top right corner icon instead of clicking anywhere on the toast when set to 'true'.
         * When set to 'left' the closeIcon is shown to the left instead of right.
         *
         * @default false
         */
        closeIcon: boolean | 'left';

        /**
         * Set to 'false' to avoid closing the toast when it is clicked.
         *
         * @default true
         */
        closeOnClick: boolean;

        /**
         * If a given DOM-Node should stay reusable by using a clone of it as toast.
         * If set to false the original DOM-Node will be detached and removed from the DOM then the toast is closed.
         *
         * @default true
         */
        cloneModule: boolean;

        /**
         * Displays a progress bar on 'top' or 'bottom' increasing until 'displayTime' is reached.
         * 'false' won't display any progress bar. If 'displayTime' option is '0', this option is ignored.
         *
         * @default false
         */
        showProgress: boolean | 'top' | 'bottom';

        /**
         * 'true' Increases the progress bar from 0% to 100%.
         * 'false' Decreases the progress bar from 100% to 0%.
         *
         * @default false
         */
        progressUp: boolean;

        /**
         * Set to 'false' if the display timer should not pause when the toast is hovered.
         *
         * @default true
         */
        pauseOnHover: boolean;

        /**
         * 'true' will display the toast in a fixed width, 'false' displays the toast responsively with dynamic width.
         *
         * @default true
         */
        compact: boolean;

        /**
         * Opacity value of the toast after the show-transition.
         *
         * @default 1
         */
        opacity: number;

        /**
         * Define if new toasts should be displayed above the others.
         *
         * @default false
         */
        newestOnTop: boolean;

        /**
         * Whether HTML included in given title, message or actions should be preserved.
         * Set to 'false' in case you work with untrusted 3rd party content.
         *
         * @default true
         */
        preserveHTML: boolean;

        /**
         * Settings to set the transitions and durations during the show or the hide of a toast.
         */
        transition: Toast.TransitionSettings;

        // endregion

        // region Callbacks

        /**
         * Callback before toast is shown. Returning 'false' from this callback will cancel the toast from showing.
         */
        onShow(this: JQuery): void;

        /**
         * Callback before toast is shown. Returning false from this callback will cancel the toast from showing..
         */
        onVisible(this: JQuery): void;

        /**
         * Callback after popup is clicked in
         */
        onClick(this: JQuery): void;

        /**
         * Callback before toast is hidden. Returning 'false' from this callback will cancel the toast from hiding.
         */
        onHide(this: JQuery): void;

        /**
         * Callback after toast is hidden.
         */
        onHidden(this: JQuery): void;

        /**
         * Callback before toast is destroyed.
         */
        onRemove(this: JQuery): void;

        /**
         * Callback when an existing button with class 'positive' or 'ok' or 'approve' is clicked. Return 'false' to avoid closing the toast.
         */
        onApprove(this: JQuery): void;

        /**
         * Callback when an existing button with class 'negative' or 'cancel' or 'deny' is clicked. Return 'false' to avoid closing the toast.
         */
        onDeny(this: JQuery): void;

        // endregion

        // region Content Settings

        /**
         * A title for the toast. Leave empty to not display it.
         *
         * @default ''
         */
        title: string;

        /**
         * Message to display.
         *
         * @default ''
         */
        message: string;

        /**
         * An array of objects. Each object defines an action with 'properties' 'text', 'class', 'icon' and 'click'.
         */
        actions: Toast.ActionsSettings;

        // endregion

        // region DOM Settings

        /**
         * Event namespace. Makes sure module teardown does not effect other events attached to an element.
         * @default 'toast'
         */
        namespace: string;

        /**
         * DOM Selectors used internally.
         */
        selector: Toast.SelectorSettings;

        /**
         * Class names used to attach style to state.
         */
        className: Toast.ClassNameSettings;

        /**
         * Icon names used internally.
         */
        icons: Toast.IconSettings;

        // endregion

        // region Debug Settings

        /**
         * Name used in log statements
         * @default 'Toast'
         */
        name: string;

        /**
         * Silences all console output including error messages, regardless of other debug settings.
         * @default false
         */
        silent: boolean;

        /**
         * Debug output to console
         * @default false
         */
        debug: boolean;

        /**
         * Show console.table output with performance metrics
         * @default true
         */
        performance: boolean;

        /**
         * Debug output includes all internal behaviors
         * @default false
         */
        verbose: boolean;

        error: Toast.ErrorSettings;

        // endregion
    }

    namespace Toast {
        type TransitionSettings = Partial<Pick<Settings.Transition, keyof Settings.Transition>>;
        type ActionsSettings = Partial<Pick<Settings.Actions, keyof Settings.Actions>>;
        type SelectorSettings = Partial<Pick<Settings.Selectors, keyof Settings.Selectors>>;
        type ClassNameSettings = Partial<Pick<Settings.ClassNames, keyof Settings.ClassNames>>;
        type IconSettings = Partial<Pick<Settings.Icons, keyof Settings.Icons>>;
        type ErrorSettings = Partial<Pick<Settings.Errors, keyof Settings.Errors>>;

        namespace Settings {
            interface Transition {
                /**
                 * @default 'scale'
                 */
                showMethod: string;

                /**
                 * @default 500
                 */
                showDuration: number;

                /**
                 * @default 'scale'
                 */
                hideMethod: string;

                /**
                 * @default 500
                 */
                hideDuration: number;

                /**
                 * @default 'closeEasing'
                 */
                closeEasing: string;
            }

            interface Actions {
                /**
                 * @default 'Wait'
                 */
                text: string;

                /**
                 * @default 'red'
                 */
                class: string;

                /**
                 * @default 'exclamation'
                 */
                icon: string;

                /**
                 * @default function() {}
                 */
                click: () => void;
            }

            interface Selectors {
                /**
                 * @default '.ui.toast-container'
                 */
                container: string;

                /**
                 * @default '.toast-box'
                 */
                box: string;

                /**
                 * @default '.ui.toast'
                 */
                toast: string;

                /**
                 * @default 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown'
                 */
                input: string;

                /**
                 * @default '.actions .positive, .actions .approve, .actions .ok'
                 */
                approve: string;

                /**
                 * @default '.actions .negative, .actions .deny, .actions .cancel'
                 */
                deny: string;
            }

            interface ClassNames {
                /**
                 * @default 'toast-container'
                 */
                container: string;

                /**
                 * @default 'toast-box'
                 */
                box: string;

                /**
                 * @default 'ui attached active progress'
                 */
                progress: string;

                /**
                 * @default 'ui toast'
                 */
                toast: string;

                /**
                 * @default 'icon'
                 */
                icon: string;

                /**
                 * @default 'visible'
                 */
                visible: string;

                /**
                 * @default 'content'
                 */
                content: string;

                /**
                 * @default 'header'
                 */
                title: string;
            }

            interface Icons {
                /**
                 * @default 'info'
                 */
                info: string;

                /**
                 * @default 'checkmark'
                 */
                success: string;

                /**
                 * @default 'warning'
                 */
                warning: string;

                /**
                 * @default 'times'
                 */
                error: string;
            }

            interface Errors {
                /**
                 * @default 'The method you called is not defined.'
                 */
                method: string;

                /**
                 * @default 'This module requires ui transitions.'
                 */
                noElement: string;

                /**
                 * @default 'Vertical but not attached actions are not supported for card layout.'
                 */
                verticalCard: string;
            }
        }
    }
}