import React from 'react';

/**
 * @public
 */
export declare interface ISlidePanelGroupProps {
    /**
     * 控制整个SlidePanelGroup的滑入、滑出。
     */
    isShowing?: boolean;
    /**
     * 当前哪个panel处于激活状态。非激活状态的panel会有宽度坍缩，并展示`...`而不是实际内容，使用户注意力聚焦于激活状态的面板。
     */
    activeId?: string;
    /**
     * 滑动组件离视口顶部的距离。比如，开发者不希望SlidePanel滑出时挡住顶栏，那么可以将`props.top`设置为顶栏的高度。
     */
    top?: number | string;
    /**
     * 是否在`isShowing===true`时展示背景蒙板。
     */
    hasMask?: boolean;
    /**
     * 自定义整个SlidePanelGroup的wrapper div的类名。
     */
    className?: string;
    /**
     * 用户点击背景蒙板。大部分情况下，开发者想要在这个事件处理函数中设置`props.isShowing`为`false`。
     */
    onMaskClick?: () => void;
    /**
     * children可以包含一个或多个面板。
     */
    children?: React.ReactNode;
    /**
     * 用户点击切换面板。大部分情况下，开发者想要在这个事件处理函数中设置`props.activeId`为当前被点击的`id`。
     */
    onSwitchPanelItem?: (id: string) => void;
    /**
     * **整个面板组**的滑出、滑入动画开始了。
     */
    onSlideStarted?: () => void;
    /* Excluded from this release type: onSlideCancled */
    /**
     * **整个面板组**的滑出、滑入动画完成了。
     */
    onSlideCompleted?: () => void;
}

/**
 * @public
 */
export declare interface ISlidePanelItemProps {
    /**
     * 面板的id。用于在`SlidePanelGroup`中匹配`props.activeId`。id匹配的面板处于激活状态（全宽度展示）。非激活状态的panel会有宽度坍缩，并展示`...`而不是实际内容，使用户注意力聚焦于激活状态的面板。
     */
    id: string;
    /**
     * 面板的内容。
     */
    children: React.ReactNode;
    /**
     * 面板处于激活状态时的正常宽度。
     */
    width?: 'tiny' | 'small' | 'medium' | 'large' | number | string;
    /**
     * header title的内容。
     */
    title?: React.ReactNode;
    /**
     * header的额外内容，展示在title的右侧。
     */
    headerExtra?: React.ReactNode;
    /**
     * 如果传入该回调，则在title的左侧展示返回按钮，并且被点击时触发此回调。
     */
    onBackArrowClicked?: () => void;
    /**
     * header的关闭按钮的点击事件。如果没有传入此事件处理函数，则不展示关闭按钮。
     */
    onClose?: () => void;
    /**
     * footer取消按钮的点击事件。如果没有传入此事件处理函数，则不展示取消按钮。
     */
    onCancel?: () => void;
    /**
     * footer取消按钮文字。
     */
    cancelText?: React.ReactNode;
    /**
     * footer确认按钮的点击事件。如果没有传入此事件处理函数，则不展示确认按钮。
     */
    onOk?: () => void;
    /**
     * footer确认按钮文字。
     */
    okText?: React.ReactNode;
    /**
     * footer确认按钮是否展示加载中状态。加载中的按钮不可点击。
     */
    isProcessing?: boolean;
    /**
     * footer确认按钮处于加载中状态时的文字。
     */
    processingText?: React.ReactNode;
    /**
     * 自定义整个footer的内容。
     */
    customFooter?: React.ReactNode;
    className?: string;
    /* Excluded from this release type: onSwitchStarted */
    /* Excluded from this release type: onSwitchCancled */
    /**
     * **面板之间的切换**动画完成了。
     */
    onSwitchCompleted?: () => void;
}

/**
 * @public
 */
export declare interface ISlidePanelProps {
    /**
     * 面板的内容。
     */
    children: React.ReactNode;
    /**
     * 面板处于激活状态时的正常宽度。
     */
    width?: 'tiny' | 'small' | 'medium' | 'large' | number | string;
    /**
     * header title的内容。
     */
    title?: React.ReactNode;
    /**
     * header的额外内容，展示在title的右侧。
     */
    headerExtra?: React.ReactNode;
    /**
     * header的关闭按钮的点击事件。如果没有传入此事件处理函数，则不展示关闭按钮。
     */
    onClose?: () => void;
    /**
     * footer取消按钮的点击事件。如果没有传入此事件处理函数，则不展示取消按钮。
     */
    onCancel?: () => void;
    /**
     * footer取消按钮文字。
     */
    cancelText?: React.ReactNode;
    /**
     * footer确认按钮的点击事件。如果没有传入此事件处理函数，则不展示确认按钮。
     */
    onOk?: () => void;
    /**
     * footer确认按钮文字。
     */
    okText?: React.ReactNode;
    /**
     * footer确认按钮是否展示加载中状态。加载中的按钮不可点击。
     */
    isProcessing?: boolean;
    /**
     * footer确认按钮处于加载中状态时的文字。
     */
    processingText?: React.ReactNode;
    /**
     * 自定义整个footer的内容。
     */
    customFooter?: React.ReactNode;
    /**
     * 是否在`isShowing===true`时展示背景蒙板。
     */
    hasMask?: boolean;
    /**
     * 用户点击背景蒙板。大部分情况下，开发者想要在这个事件处理函数中设置`props.isShowing`为`false`。
     */
    onMaskClick?: () => void;
    /**
     * 控制整个SlidePanelGroup的滑入、滑出。
     */
    isShowing?: boolean;
    /**
     * 滑动组件离视口顶部的距离。比如，开发者不希望SlidePanel滑出时挡住顶栏，那么可以将`props.top`设置为顶栏的高度。
     */
    top?: number | string;
    /**
     * 面板的滑出、滑入动画完成了。
     */
    onSlideCompleted?: () => void;
}

/**
 * @public
 */
export declare interface IUsePanelStackReturn {
    /**
     * 当前展示的面板（栈顶）。
     * 注意，当你把所有面板都出栈以后，top为undefined。
     */
    top: React.ReactElement;
    /**
     * 推入新的面板（入栈）。
     */
    push: (el: React.ReactElement) => void;
    /**
     * 从当前面板返回（出栈）。
     */
    pop: () => void;
}

/**
 * 基于SlidePanelGroup和SlidePanelItem的简单封装，用于**只展示一个panel**的情况(其实这应该符合大部分情况)。
 * 如果要展示多个panel，请使用SlidePanelGroup和SlidePanelItem。
 * @public
 */
declare const SlidePanel: React.FC<ISlidePanelProps>;
export { SlidePanel }
export default SlidePanel;

/**
 * 定义一组滑动面板。属于同一组的滑动面板会同时滑入、滑出。用户可以点击切换当前要展示哪个面板。
 * @public
 */
export declare const SlidePanelGroup: React.FC<ISlidePanelGroupProps>;

/**
 * 定义一个滑动面板。一个SlidePanelGroup中可以定义多个SlidePanelItem。绝大部分情况下，一个SlidePanelGroup只需要一个滑动面板就足够了。
 *
 * SlidePanelItem的内容分成三个区域：
 * - header
 *    - back arrow
 *    - title
 *    - extra
 *    - close button
 * - body
 * - footer
 *    - 确定按钮
 *    - 取消按钮
 *
 * @public
 */
export declare const SlidePanelItem: React.FC<ISlidePanelItemProps>;

/**
 * @public
 */
export declare function usePanelStack(initer?: () => React.ReactElement): {
    top: JSX.Element;
    push: (el: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) => void;
    pop: () => void;
};

/**
 * @public
 */
export declare const usePanelStackCtx: () => Pick<IUsePanelStackReturn, "push" | "pop">;

export { }