lucid-ui/dist/esm/components/SplitHorizontal/SplitHorizontal.d.ts

A UI component library from Xandr.

import React, { RefObject } from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
/** SplitHorizontal TopPane */
export interface ISplitHorizontalTopPaneProps extends StandardProps {
    /** Set height of this pane. */
    height?: number | string;
    /** Define this pane as the primary content pane. When the split is
        collapsed, this pane becomes full height. */
    isPrimary: boolean;
}
export declare const SplitHorizontalTopPane: {
    (_props: ISplitHorizontalTopPaneProps): null;
    displayName: string;
    peek: {
        description: string;
    };
    propName: string;
    propTypes: {
        /**
            Any valid React children.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Set height of this pane.
        */
        height: PropTypes.Requireable<string | number>;
        /**
            Define this pane as the primary content pane. When the split is
            collapsed, this pane becomes full height.
        */
        isPrimary: PropTypes.Requireable<boolean>;
    };
    defaultProps: {
        isPrimary: boolean;
    };
};
/** SplitHorizontal Bottom Pane */
export interface ISplitHorizontalBottomPaneProps extends StandardProps {
    /** Set height of this pane. */
    height?: number | string;
    /** Define this pane as the primary content pane. When the split is
        collapsed, this pane becomes full height. */
    isPrimary: boolean;
}
export declare const SplitHorizontalBottomPane: {
    (_props: ISplitHorizontalBottomPaneProps): null;
    displayName: string;
    peek: {
        description: string;
    };
    propName: string;
    propTypes: {
        /**
            Any valid React children.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Set height of this pane.
        */
        height: PropTypes.Requireable<string | number>;
        /**
            Define this pane as the primary content pane. When the split is
            collapsed, this pane becomes full height.
        */
        isPrimary: PropTypes.Requireable<boolean>;
    };
    defaultProps: {
        isPrimary: boolean;
    };
};
/** SplitHorizontal Divider */
export interface ISplitHorizontalDividerProps extends StandardProps {
}
/** Split Horizontal */
export interface ISplitHorizontalProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    /** Render as expanded or collapsed. */
    isExpanded: boolean;
    /** Allows animated expand and collapse behavior. */
    isAnimated: boolean;
    /** Called when the user is currently resizing the split with the Divider. */
    onResizing: (height: number, { event, props, }: {
        event: MouseEvent | TouchEvent;
        props: ISplitHorizontalProps;
    }) => void;
    /** Called when the user resizes the split with the Divider. */
    onResize: (height: number, { event, props, }: {
        event: MouseEvent | TouchEvent;
        props: ISplitHorizontalProps;
    }) => void;
    /** Use this prop to shift the collapsed position by a known value. */
    collapseShift: number;
}
interface ISplitHorizontalState {
    collapseAmount: number;
    isAnimated: boolean;
    isExpanded: boolean;
}
declare class SplitHorizontal extends React.Component<ISplitHorizontalProps, ISplitHorizontalState, {}> {
    static displayName: string;
    static peek: {
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    static _isPrivate: boolean;
    static propTypes: {
        /**
            Appended to the component-specific class names set on the root element.
            Value is run through the \`classnames\` library.
        */
        className: PropTypes.Requireable<string>;
        /**
            Direct children must be types {Splitvertical.Toppane,
            Splitvertical.Divider, Splitvertical.BottomPane}.	All content is
            composed as children of these respective elements.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Render as expanded or collapsed.
        */
        isExpanded: PropTypes.Requireable<boolean>;
        /**
            Allows animated expand and collapse behavior.
        */
        isAnimated: PropTypes.Requireable<boolean>;
        /**
            Called when the user is currently resizing the split with the Divider.
            Signature: \`(height, { event, props }) => {}\`
        */
        onResizing: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when the user resizes the split with the Divider.	Signature:
            \`(height, { event, props }) => {}\`
        */
        onResize: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Use this prop to shift the collapsed position by a known value.
        */
        collapseShift: PropTypes.Requireable<number>;
        TopPane: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        BottomPane: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        Divider: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    static defaultProps: {
        isExpanded: boolean;
        isAnimated: boolean;
        collapseShift: number;
        onResizing: (...args: any[]) => void;
        onResize: (...args: any[]) => void;
    };
    state: {
        collapseAmount: number;
        isAnimated: boolean;
        isExpanded: boolean;
    };
    static TopPane: {
        (_props: ISplitHorizontalTopPaneProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                Any valid React children.
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            /**
                Set height of this pane.
            */
            height: PropTypes.Requireable<string | number>;
            /**
                Define this pane as the primary content pane. When the split is
                collapsed, this pane becomes full height.
            */
            isPrimary: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isPrimary: boolean;
        };
    };
    static BottomPane: {
        (_props: ISplitHorizontalBottomPaneProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                Any valid React children.
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            /**
                Set height of this pane.
            */
            height: PropTypes.Requireable<string | number>;
            /**
                Define this pane as the primary content pane. When the split is
                collapsed, this pane becomes full height.
            */
            isPrimary: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isPrimary: boolean;
        };
    };
    static Divider: {
        (_props: ISplitHorizontalDividerProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                Any valid React children.
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        };
    };
    private innerRef;
    private topPaneRef;
    private bottomPaneRef;
    secondaryStartRect: DOMRect | null;
    getPanes: () => {
        top: ISplitHorizontalTopPaneProps;
        bottom: ISplitHorizontalBottomPaneProps;
        primary: ISplitHorizontalTopPaneProps | ISplitHorizontalBottomPaneProps;
        secondary: ISplitHorizontalTopPaneProps | ISplitHorizontalBottomPaneProps;
        primaryRef: React.RefObject<HTMLDivElement>;
        secondaryRef: React.RefObject<HTMLDivElement>;
    };
    panes: {
        top: ISplitHorizontalTopPaneProps;
        bottom: ISplitHorizontalBottomPaneProps;
        primary: ISplitHorizontalTopPaneProps | ISplitHorizontalBottomPaneProps;
        secondary: ISplitHorizontalTopPaneProps | ISplitHorizontalBottomPaneProps;
        primaryRef: React.RefObject<HTMLDivElement>;
        secondaryRef: React.RefObject<HTMLDivElement>;
    };
    applyDeltaToSecondaryHeight: (dY: number, isExpanded: boolean, secondaryStartRect: ClientRect | DOMRect, secondaryRef: React.RefObject<HTMLDivElement>, secondary: ISplitHorizontalTopPaneProps | ISplitHorizontalBottomPaneProps, bottom: ISplitHorizontalBottomPaneProps, innerRef: React.RefObject<HTMLDivElement>, primaryRef: React.RefObject<HTMLDivElement>, collapseShift?: number) => number;
    expandSecondary: () => void;
    collapseSecondary: (collapseAmount: number) => void;
    disableAnimation: (innerRef: RefObject<HTMLDivElement>, secondaryRef: RefObject<HTMLDivElement>, primaryRef: RefObject<HTMLDivElement>) => void;
    resetAnimation: (innerRef: RefObject<HTMLDivElement>, secondaryRef: RefObject<HTMLDivElement>, primaryRef: RefObject<HTMLDivElement>) => void;
    handleDragStart: () => void;
    handleDrag: ({ dY }: {
        dY: number;
    }, { event }: {
        event: MouseEvent | TouchEvent;
    }) => void;
    handleDragEnd: ({ dY }: {
        dY: number;
    }, { event }: {
        event: MouseEvent | TouchEvent;
    }) => void;
    UNSAFE_componentWillReceiveProps(nextProps: ISplitHorizontalProps): void;
    componentDidMount(): void;
    render(): React.ReactNode;
}
export default SplitHorizontal;
//# sourceMappingURL=SplitHorizontal.d.ts.map