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

A UI component library from Xandr.

/// <reference types="node" />
import React from 'react';
import PropTypes from 'prop-types';
import { IOverlayProps } from '../Overlay/Overlay';
import { StandardProps } from '../../util/component-types';
/** Side Panel */
export interface ISidePanelProps extends Partial<IOverlayProps> {
    /** Alternative to using `<SidePanel.Header>`. */
    Header?: string | (React.ReactNode & {
        props: StandardProps;
    });
    /** Controls the expanded/collapsed state as a boolean prop. */
    isExpanded: boolean;
    /** When true, hides the resizer at the edge of the SidePanel. */
    isResizeDisabled: boolean;
    /** Callback triggered when user clicks the background, hits the Esc key, or
     * clicks the close button in the Header. */
    onCollapse: ({ event, props, }: {
        event: React.MouseEvent | KeyboardEvent;
        props: ISidePanelProps;
    }) => void;
    /** Callback triggered after a user resizes to a new width. */
    onResize: (width: number, { event, props, }: {
        event: MouseEvent | TouchEvent;
        props: ISidePanelProps;
    }) => void;
    /** Controls the position on the screen. */
    position: 'left' | 'right';
    /** When true, it will prevent scrolling in the background when \`isExpanded\;
     * is true. This is accomplished by setting \`document.body.style.overflow =
     * 'hidden'\`. */
    preventBodyScroll: boolean;
    /** Sets the initial width in pixels. The actual width may change if the user
     * resizes it. */
    width: number;
    /** Sets the minimum width in pixels. */
    minWidth: number;
    /** Sets the maximim width in pixels. */
    maxWidth: number;
    /** Sets the top margin for the panel. Defaults to \`0\`. */
    topOffset: number | string;
}
interface ISidePanelState {
    isResizing: boolean;
    width: number;
    startWidth: number;
    isExpanded: boolean;
}
declare class SidePanel extends React.Component<ISidePanelProps, ISidePanelState, {}> {
    static displayName: string;
    static peek: {
        description: string;
        categories: string[];
    };
    static propTypes: {
        /**
            Content of the SidePanel, but also accepts \`<SidePanel.Header>\` to define
            header content.
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Appended to the component-specific class names set on the root element.
        */
        className: PropTypes.Requireable<string>;
        /**
            Alternative to using \`<SidePanel.Header>\`.
        */
        Header: PropTypes.Requireable<any>;
        /**
            Enables animated transitions during expansion and collapse.
        */
        isAnimated: PropTypes.Requireable<boolean>;
        /**
            Controls the expanded/collapsed state as a boolean prop.
        */
        isExpanded: PropTypes.Requireable<boolean>;
        /**
            When true, hides the resizer at the edge of the SidePanel.
        */
        isResizeDisabled: PropTypes.Requireable<boolean>;
        /**
            Callback triggered when user clicks the background, hits the Esc key, or
            clicks the close button in the Header.
            Signature: \`({ event, props }) => {}\`
        */
        onCollapse: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Callback triggered after a user resizes to a new width.
            Signature: \`(width, { event, props }) => {}\`
        */
        onResize: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Controls the position on the screen.
        */
        position: PropTypes.Requireable<string>;
        /**
            When true, it will prevent scrolling in the background when \`isExpanded\`
            is true. This is accomplished by setting \`document.body.style.overflow =
            'hidden'\`.
        */
        preventBodyScroll: PropTypes.Requireable<boolean>;
        /**
            Sets the initial width in pixels. The actual width may change if the user
            resizes it.
        */
        width: PropTypes.Requireable<number>;
        /**
            Sets the minimum width of the Side Panel.
        */
        minWidth: PropTypes.Requireable<number>;
        /**
            Sets the maximum width of the Side Panel.
        */
        maxWidth: PropTypes.Requireable<number>;
        /**
            Sets the top margin for the panel. Defaults to \`0\`.
        */
        topOffset: PropTypes.Requireable<string | number>;
    };
    state: {
        isResizing: boolean;
        width: number;
        startWidth: number;
        isExpanded: boolean;
    };
    static defaultProps: {
        isAnimated: boolean;
        isExpanded: boolean;
        isResizeDisabled: boolean;
        onCollapse: (...args: any[]) => void;
        onResize: (...args: any[]) => void;
        position: string;
        preventBodyScroll: boolean;
        topOffset: number;
        width: number;
        minWidth: number;
        maxWidth: number;
    };
    static Header: {
        (_props: StandardProps): null;
        displayName: string;
        propName: string;
        peek: {
            description: string;
        };
        propTypes: {
            /**
                Children that will be rendered.
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        };
    };
    timerId: NodeJS.Timeout;
    handleResizeStart: () => void;
    handleResize: ({ dX }: {
        dX: number;
    }) => void;
    handleResizeEnd: ({ dX }: {
        dX: number;
    }, { event }: {
        event: MouseEvent | TouchEvent;
    }) => void;
    handleCollapse: ({ event, }: {
        event: React.MouseEvent | KeyboardEvent;
    }) => void;
    componentDidUpdate(prevProps: ISidePanelProps): void;
    componentWillUnmount(): void;
    render(): React.ReactNode;
}
export default SidePanel;
//# sourceMappingURL=SidePanel.d.ts.map