lucid-ui
Version:
A UI component library from Xandr.
190 lines • 6.69 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps } from '../../util/component-types';
import * as reducers from './Sidebar.reducers';
export interface ISidebarPrimaryProps extends StandardProps {
}
export interface ISidebarTitleProps extends StandardProps {
}
export interface ISidebarBarProps extends StandardProps {
Title?: ISidebarTitleProps | string;
title?: ISidebarTitleProps | string;
hasGutters?: boolean;
}
export interface ISidebarState {
isExpanded: boolean;
width: number;
}
export interface ISidebarProps extends StandardProps {
/** Sets the starting width of the Bar. */
width?: number;
/** Force the Sidebar to be expanded or collapsed. */
isExpanded?: boolean;
/** Allows animated expand and collapse behavior. */
isAnimated?: boolean;
/** Render the Sidebar to the left or right of primary content. */
position?: 'left' | 'right';
/** Disable user resizing of the Sidebar. */
isResizeDisabled?: boolean;
/** Set the title of the Sidebar. (alias for \`Title\` and \`Sidebar.Title\`) */
title?: React.ReactNode;
/** Set the title of the Sidebar. (alias for \`title\` and \`Sidebar.Title\`) */
Title?: React.ReactNode;
/** Called when the user is currently resizing the Sidebar. */
onResizing?: (width: number, { event, props }: {
event: MouseEvent | TouchEvent;
props: ISidebarProps;
}) => void;
/** Called when the user resizes the Sidebar. */
onResize?: (width: number, { event, props }: {
event: MouseEvent | TouchEvent;
props: ISidebarProps;
}) => void;
/** Called when the user expands or collapses the Sidebar. */
onToggle?: ({ event, props, }: {
event: React.MouseEvent<HTMLButtonElement>;
props: ISidebarProps;
}) => void;
}
declare class Sidebar extends React.Component<ISidebarProps, ISidebarState> {
static displayName: string;
static Bar: {
(_props: ISidebarBarProps): null;
peek: {
description: string;
};
displayName: string;
propName: string;
propTypes: {
/**
Set the title of the Sidebar. (alias for \`title\` and \`Sidebar.Title\`)
*/
Title: PropTypes.Requireable<any>;
/**
Adds default padding to the sidebar content.
*/
hasGutters: PropTypes.Requireable<boolean>;
};
defaultProps: {
hasGutters: boolean;
};
};
static Primary: {
(_props: ISidebarPrimaryProps): null;
peek: {
description: string;
};
displayName: string;
propName: string;
};
static Title: {
(_props: ISidebarTitleProps): null;
peek: {
description: string;
};
propTypes: {
/**
Content that will be displayed as the title of the Bar. It's only
shown when the user has the Bar expanded.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
};
displayName: string;
propName: string[];
};
static peek: {
description: string;
categories: string[];
};
static reducers: typeof reducers;
static propTypes: {
/**
Style object that gets applied to the outer element.
*/
style: PropTypes.Requireable<object>;
/**
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 {Sidebar.Primary, Sidebar.Bar,
Sidebar.Title}. All content is composed as children of these respective
elements.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
Sets the starting width of the Bar.
*/
width: PropTypes.Requireable<string | number>;
/**
Force the Sidebar to be expanded or collapsed.
*/
isExpanded: PropTypes.Requireable<boolean>;
/**
Allows animated expand and collapse behavior.
*/
isAnimated: PropTypes.Requireable<boolean>;
/**
Render the Sidebar to the left or right of primary content.
*/
position: PropTypes.Requireable<string>;
/**
Disable user resizing of the Sidebar.
*/
isResizeDisabled: PropTypes.Requireable<boolean>;
/**
Set the title of the Sidebar. (alias for \`Title\` and \`Sidebar.Title\`)
*/
title: PropTypes.Requireable<any>;
/**
Set the title of the Sidebar. (alias for \`title\` and \`Sidebar.Title\`)
*/
Title: PropTypes.Requireable<any>;
/**
Content to be placed alongside the Primary pane.
*/
Bar: PropTypes.Requireable<any>;
/**
Main pane content that will have a paired \`Bar\`.
*/
Primary: PropTypes.Requireable<any>;
/**
Called when the user is currently resizing the Sidebar. Signature:
\`(width, { event, props }) => {}\`
*/
onResizing: PropTypes.Requireable<(...args: any[]) => any>;
/**
Called when the user resizes the Sidebar. Signature: \`(width, { event,
props }) => {}\`
*/
onResize: PropTypes.Requireable<(...args: any[]) => any>;
/**
Called when the user expands or collapses the Sidebar. Signature: \`({
event, props }) => {}\`
*/
onToggle: PropTypes.Requireable<(...args: any[]) => any>;
};
static defaultProps: {
isExpanded: boolean;
isAnimated: boolean;
width: number;
position: "left";
isResizeDisabled: boolean;
onResizing: (...args: any[]) => void;
onResize: (...args: any[]) => void;
onToggle: (...args: any[]) => void;
};
handleExpanderClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
handleResizing: (width: number, { event }: {
event: MouseEvent | TouchEvent;
}) => void;
handleResize: (width: number, { event }: {
event: MouseEvent | TouchEvent;
}) => void;
render(): JSX.Element;
}
declare const _default: typeof Sidebar & import("../../util/state-management").IHybridComponent<ISidebarProps, ISidebarState>;
export default _default;
export { Sidebar as SidebarDumb };
//# sourceMappingURL=Sidebar.d.ts.map