import { CSSProperties, ReactNode } from 'react';
/**
 * @title ResizeBox
 */
export interface ResizeBoxProps {
    style?: CSSProperties;
    className?: string | string[];
    /**
     * 宽度，受控属性
     */
    width?: number;
    /**
     * 高度，受控属性
     */
    height?: number;
    /**
     * 伸缩框的 html 标签
     * @defaultValue div
     */
    component?: string;
    /**
     * 可以进行伸缩的边，有上、下、左、右可以使用，默认是右方向。
     * @defaultValue ['right']
     */
    directions?: Array<'left' | 'right' | 'top' | 'bottom'>;
    /**
     * 定制伸缩杆的图标，四个方向都支持定制。
     * @defaultValue {}
     */
    resizeIcons?: {
        top?: ReactNode;
        bottom?: ReactNode;
        left?: ReactNode;
        right?: ReactNode;
    };
    /**
     * 定制伸缩杆的内容，四个方向都支持定制。
     * @defaultValue {}
     */
    resizeTriggers?: {
        top?: ReactNode;
        bottom?: ReactNode;
        left?: ReactNode;
        right?: ReactNode;
    };
    /**
     * 开始拖拽之前的回调
     */
    onMovingStart?: () => void;
    /**
     * 拖拽中的回调
     */
    onMoving?: (e: MouseEvent, size: {
        width: number;
        height: number;
    }) => void;
    /**
     * 拖拽结束之后的回调
     */
    onMovingEnd?: () => void;
}
/**
 * @title ResizeBox.Split
 */
export interface SplitProps {
    style?: CSSProperties;
    className?: string | string[];
    /**
     * 分割框的 html 标签
     * @defaultValue div
     */
    component?: string;
    /**
     * 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割
     * @defaultValue horizontal
     */
    direction?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
    /**
     * 定制伸缩杆的图标
     */
    icon?: ReactNode;
    /**
     * 定制伸缩杆的内容
     */
    trigger?: ReactNode;
    /**
     * 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px
     */
    size?: number | string;
    /**
     * 是否将size指向第二个children
     */
    isLastSize?: boolean;
    /**
     * 最小阈值
     */
    min?: number | string;
    /**
     * 最大阈值
     */
    max?: number | string;
    /**
     * 面板，[firstPane, secondPane]
     */
    children: ReactNode;
    /**
     * 禁用
     */
    disabled?: boolean;
    /**
     * 开始拖拽之前的回调
     */
    onMovingStart?: () => void;
    /**
     * 拖拽中的回调
     */
    onMoving?: (e: MouseEvent, size: number | string) => void;
    /**
     * 拖拽结束之后的回调
     */
    onMovingEnd?: () => void;
    /**
     * 面板大小变化的回调
     */
    onPaneResize?: (paneContainers: HTMLElement[]) => void;
}
/**
 * @title ResizeBox.SplitGroup in `2.27.0`
 */
export interface SplitGroupProps {
    style?: CSSProperties;
    className?: string | string[];
    /**
     * 分割框的 html 标签
     * @defaultValue div
     */
    component?: string;
    /**
     * 分割方向分为水平 `horizontal` 和垂直 `vertical`，默认是水平分割
     * @defaultValue horizontal
     */
    direction?: 'horizontal' | 'vertical';
    /**
     * 定制伸缩杆的图标
     */
    icon?: ReactNode;
    /**
     * 面板
     */
    panes: SplitGroupPane[];
    /**
     * 开始拖拽之前的回调
     */
    onMovingStart?: (activeIndex: number) => void;
    /**
     * 拖拽中的回调, `size` 参数是各个面板占的像素值
     */
    onMoving?: (e: MouseEvent, size: string[], activeIndex: number) => void;
    /**
     * 拖拽结束之后的回调
     */
    onMovingEnd?: (activeIndex: number) => void;
    /**
     * 面板大小变化的回调
     */
    onPaneResize?: (paneContainers: HTMLElement[]) => void;
}
/**
 * @title ResizeBox.SplitGroup.CollapsedConfig
 */
export interface CollapsedConfig {
    /**
     * 快速折叠按钮的icon
     */
    icon?: ReactNode;
    /**
     * 点击快速折叠的回调
     */
    onClick?: (e: any, collapsed: any, activeIndex: any, direction: 'prev' | 'next') => void;
}
/**
 * @title ResizeBox.SplitGroup.Pane
 */
export interface SplitGroupPane {
    /**
     * 当前面板的内容
     */
    content: ReactNode;
    /**
     * 分割的大小，可以是 0~1 代表百分比，或具体数值的像素，如 300px
     */
    size?: number | string;
    /**
     * 最小阈值，优先级比 `max`高，并且会影响相邻面板的阈值。
     */
    min?: number | string;
    /**
     * 最大阈值
     */
    max?: number | string;
    /**
     * 禁用，将不会展示伸缩杆。
     */
    disabled?: boolean;
    /**
     * 是否支持快速折叠;
     */
    collapsible?: boolean | {
        prev?: boolean | CollapsedConfig;
        next?: boolean | CollapsedConfig;
    };
    /**
     * 是否支持拖拽伸缩
     * @defaultValue true
     */
    resizable?: boolean;
    /**
     * 定制伸缩杆内容, 参数分别表示向前快速收缩、拖拽伸缩触发器、向后快速收缩的触发器
     */
    trigger?: (prevNode: ReactNode, resizeNode: ReactNode, nextNode: ReactNode) => ReactNode;
}