UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

82 lines 2.85 kB
import * as React from 'react'; import { CanvasSpaceValues } from '@workday/canvas-kit-react/tokens'; export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> { /** * If true, set the SidePanel to the open state. * @default false; */ open: boolean; /** * The function called when the toggle button is clicked. The toggle button is only shown if this prop is defined. */ onToggleClick?: () => void; /** * The text or element to display as the SidePanel header. */ header?: string | React.ReactNode; /** * The side from which the SidePanel opens. Accepts `Left` or `Right`. * @default SidePanelOpenDirection.Left */ openDirection?: SidePanelOpenDirection; /** * The function called when the window width changes and reaches a width equivalent to `breakpoint`. For example, if the window is resized from a width of `1000px`, this will be called when the window reaches a width equivalent to `breakpoint`. The `aboveBreakpoint` argument passed to the callback function indicates whether the current window width is above or below `breakpoint` so you can control `open` based on the change. */ onBreakpointChange?: (aboveBreakpoint: boolean) => void; /** * The padding of the SidePanel when it's open. */ padding?: CanvasSpaceValues; /** * The window width at which the SidePanel triggers `onBreakPointChange`. * @default 768px */ breakpoint?: number; /** * The width of the SidePanel when it's open. * @default 300px */ openWidth?: number; /** * The background color of the SidePanel when it's open. * @default SidePanelBackgroundColor.White */ backgroundColor?: SidePanelBackgroundColor; /** * The `aria-label` that describes closing the navigation. * @default 'close navigation' */ closeNavigationAriaLabel?: string; /** * The `aria-label` that describes opening the navigation. * @default 'open navigation' */ openNavigationAriaLabel?: string; } export interface SidePanelState { screenSize: number; } export declare enum SidePanelOpenDirection { Left = 0, Right = 1 } export declare enum SidePanelBackgroundColor { White = 0, Transparent = 1, Gray = 2 } export declare class SidePanel extends React.Component<SidePanelProps, SidePanelState> { static OpenDirection: typeof SidePanelOpenDirection; static BackgroundColor: typeof SidePanelBackgroundColor; constructor(props: SidePanelProps); state: { screenSize: number; }; componentDidMount(): void; componentWillUnmount(): void; render(): React.JSX.Element; private handleResize; private onToggleClick; private toggleButtonDirection; } //# sourceMappingURL=SidePanel.d.ts.map