lucid-ui
Version:
A UI component library from AppNexus.
117 lines (116 loc) • 3.65 kB
TypeScript
/// <reference types="node" />
import React from 'react';
import { IOverlayProps } from '../Overlay/Overlay';
import { StandardProps } from '../../util/component-types';
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: {
children: any;
className: any;
Header: any;
isAnimated: any;
isExpanded: any;
isResizeDisabled: any;
onCollapse: any;
onResize: any;
position: any;
preventBodyScroll: any;
width: any;
minWidth: any;
maxWidth: any;
topOffset: any;
};
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: any;
};
};
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;