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

A UI component library from Xandr.

import React, { RefObject } from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
/** SplitVertical Right Pane */
export interface ISplitVerticalRightPaneProps extends StandardProps {
    /** Set width of this pane. */
    width?: number | string;
    /** Define this pane as the primary content pane. When the split is
        collapsed, this pane becomes full width. */
    isPrimary: boolean;
}
export declare const SplitVerticalRightPane: {
    (_props: ISplitVerticalRightPaneProps): null;
    displayName: string;
    peek: {
        description: string;
    };
    propName: string;
    propTypes: {
        /**
            Any valid React children.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Set width of this pane.
        */
        width: PropTypes.Requireable<string | number>;
        /**
            Define this pane as the primary content pane. When the split is
            collapsed, this pane becomes full width.
        */
        isPrimary: PropTypes.Requireable<boolean>;
    };
    defaultProps: {
        isPrimary: boolean;
    };
};
/** SplitVertical Left Pane */
export interface ISplitVerticalLeftPaneProps extends StandardProps {
    /** Set width of this pane. */
    width?: number | string;
    /** Define this pane as the primary content pane. When the split is
        collapsed, this pane becomes full width. */
    isPrimary: boolean;
}
export declare const SplitVerticalLeftPane: {
    (_props: ISplitVerticalLeftPaneProps): null;
    displayName: string;
    peek: {
        description: string;
    };
    propName: string;
    propTypes: {
        /**
            Any valid React children.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Set width of this pane.
        */
        width: PropTypes.Requireable<string | number>;
        /**
            Define this pane as the primary content pane. When the split is
            collapsed, this pane becomes full width.
        */
        isPrimary: PropTypes.Requireable<boolean>;
    };
    defaultProps: {
        isPrimary: boolean;
    };
};
/** SplitVertical */
export interface ISplitVerticalProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    /** Render as expanded or collapsed. */
    isExpanded: boolean;
    /** Allows animated expand and collapse behavior. */
    isAnimated: boolean;
    /** Allows draggable resizing of the SplitVertical */
    isResizeable: boolean;
    /** Called when the user is currently resizing the split with the Divider. */
    onResizing: (height: number, { event, props, }: {
        event: MouseEvent | TouchEvent;
        props: ISplitVerticalProps;
    }) => void;
    /** Called when the user resizes the split with the Divider. */
    onResize: (height: number, { event, props, }: {
        event: MouseEvent | TouchEvent;
        props: ISplitVerticalProps;
    }) => void;
    /** Use this prop to shift the collapsed position by a known value. */
    collapseShift: number;
}
interface ISplitVerticalState {
    collapseAmount: number;
    isAnimated: boolean;
    isExpanded: boolean;
}
declare class SplitVertical extends React.Component<ISplitVerticalProps, ISplitVerticalState, {}> {
    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<any>;
        /**
            Direct children must be types {SplitVertical.Leftpane,
            SplitVertical.Divider, SplitVertical.RightPane}.
            All content is composed as children of these respective elements.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Allows draggable resizing of the SplitVertical
        */
        isResizeable: PropTypes.Requireable<boolean>;
        /**
            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: \`(width, { event, props }) => {}\`
        */
        onResizing: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Called when the user resizes the split with the Divider.  Signature:
            \`(width, { event, props }) => {}\`
        */
        onResize: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Use this prop to shift the collapsed position by a known value.
        */
        collapseShift: PropTypes.Requireable<number>;
        /**
            Direct child of SplitVertical
         */
        RightPane: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Direct child of SplitVertical
         */
        LeftPane: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Direct child of SplitVertical.
            Rendered when `isResizeable` is true.
         */
        Divider: PropTypes.Requireable<PropTypes.ReactNodeLike>;
    };
    static defaultProps: {
        isExpanded: boolean;
        isAnimated: boolean;
        collapseShift: number;
        onResizing: (...args: any[]) => void;
        onResize: (...args: any[]) => void;
        isResizeable: boolean;
    };
    state: {
        isAnimated: boolean;
        isExpanded: boolean;
        collapseAmount: number;
    };
    static RightPane: {
        (_props: ISplitVerticalRightPaneProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                Any valid React children.
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            /**
                Set width of this pane.
            */
            width: PropTypes.Requireable<string | number>;
            /**
                Define this pane as the primary content pane. When the split is
                collapsed, this pane becomes full width.
            */
            isPrimary: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isPrimary: boolean;
        };
    };
    static LeftPane: {
        (_props: ISplitVerticalLeftPaneProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                Any valid React children.
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            /**
                Set width of this pane.
            */
            width: PropTypes.Requireable<string | number>;
            /**
                Define this pane as the primary content pane. When the split is
                collapsed, this pane becomes full width.
            */
            isPrimary: PropTypes.Requireable<boolean>;
        };
        defaultProps: {
            isPrimary: boolean;
        };
    };
    static Divider: {
        (_props: StandardProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propName: string;
        propTypes: {
            /**
                Any valid React children.
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        };
    };
    private innerRef;
    private leftPaneRef;
    private rightPaneRef;
    secondaryStartRect: DOMRect | null;
    getPanes: () => {
        right: ISplitVerticalRightPaneProps;
        left: ISplitVerticalLeftPaneProps;
        primary: ISplitVerticalRightPaneProps | ISplitVerticalLeftPaneProps;
        secondary: ISplitVerticalRightPaneProps | ISplitVerticalLeftPaneProps;
        primaryRef: React.RefObject<HTMLDivElement>;
        secondaryRef: React.RefObject<HTMLDivElement>;
    };
    panes: {
        right: ISplitVerticalRightPaneProps;
        left: ISplitVerticalLeftPaneProps;
        primary: ISplitVerticalRightPaneProps | ISplitVerticalLeftPaneProps;
        secondary: ISplitVerticalRightPaneProps | ISplitVerticalLeftPaneProps;
        primaryRef: React.RefObject<HTMLDivElement>;
        secondaryRef: React.RefObject<HTMLDivElement>;
    };
    applyDeltaToSecondaryWidth: (dX: number, isExpanded: boolean, secondaryStartRect: ClientRect | DOMRect, secondaryRef: React.RefObject<HTMLDivElement>, secondary: ISplitVerticalRightPaneProps | ISplitVerticalLeftPaneProps, right: ISplitVerticalRightPaneProps, 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: ({ dX }: {
        dX: number;
    }, { event }: {
        event: MouseEvent | TouchEvent;
    }) => void;
    handleDragEnd: ({ dX }: {
        dX: number;
    }, { event }: {
        event: MouseEvent | TouchEvent;
    }) => void;
    UNSAFE_componentWillReceiveProps(nextProps: ISplitVerticalProps): void;
    componentDidMount(): void;
    render(): React.ReactNode;
}
export default SplitVertical;
//# sourceMappingURL=SplitVertical.d.ts.map