194 lines
4.2 KiB
TypeScript
194 lines
4.2 KiB
TypeScript
import __ReactToolbox from "../index.d.ts";
|
|
|
|
export interface LayoutTheme {
|
|
/**
|
|
* Class used in the container to position and align inner items.
|
|
*/
|
|
layout?: string;
|
|
}
|
|
|
|
interface LayoutProps extends __ReactToolbox.Props {
|
|
/**
|
|
* Children to pass through the component.
|
|
*/
|
|
children?: [NavDrawer | Panel | Sidebar];
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: LayoutTheme;
|
|
}
|
|
|
|
export class Layout extends __React.Component<LayoutProps, {}> { }
|
|
|
|
export interface NavDrawerTheme {
|
|
/**
|
|
* Used when the drawer is active.
|
|
*/
|
|
active?: string;
|
|
/**
|
|
* Used for the content of the drawer.
|
|
*/
|
|
drawerContent?: string;
|
|
/**
|
|
* Added to the root class for large drawer.
|
|
*/
|
|
lgPermangent?: string;
|
|
/**
|
|
* Added to the root class for medium drawer.
|
|
*/
|
|
mdPermangent?: string;
|
|
/**
|
|
* Root class for the drawer.
|
|
*/
|
|
navDrawer?: string;
|
|
/**
|
|
* Added to the root class if positioning is pinned.
|
|
*/
|
|
pinned?: string;
|
|
/**
|
|
* Used as a wrapper for the drawer content.
|
|
*/
|
|
scrim?: string;
|
|
/**
|
|
* Added to the drawer content if its scrollable.
|
|
*/
|
|
scrollY?: string;
|
|
/**
|
|
* Added to the root class for small drawer.
|
|
*/
|
|
smPermanent?: string;
|
|
/**
|
|
* Added to the root class if width is wide.
|
|
*/
|
|
wide?: string;
|
|
/**
|
|
* Added to the root class for extra big drawer.
|
|
*/
|
|
xlPermanent?: string;
|
|
/**
|
|
* Added to the root class for super big drawer.
|
|
*/
|
|
xxlPermangent?: string;
|
|
/**
|
|
* Added to the root class for largest possible drawer.
|
|
*/
|
|
xxxlPermangent?: string;
|
|
}
|
|
|
|
interface NavDrawerProps extends __ReactToolbox.Props {
|
|
/**
|
|
* If true, the drawer will be shown as an overlay.
|
|
* @default false
|
|
*/
|
|
active?: boolean;
|
|
/**
|
|
* Children to pass through the component.
|
|
*/
|
|
children?: __React.ReactNode;
|
|
/**
|
|
* Callback function to be invoked when the overlay is clicked.
|
|
*/
|
|
onOverlayClick?: __React.MouseEventHandler;
|
|
/**
|
|
* The breakpoint at which the drawer is automatically pinned.
|
|
*/
|
|
permanentAt?: "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
|
|
/**
|
|
* If true, the drawer will be pinned open. pinned takes precedence over active.
|
|
* @default false
|
|
*/
|
|
pinned?: boolean;
|
|
/**
|
|
* If true, the drawer will vertically scroll all content.
|
|
* @default false
|
|
*/
|
|
scrollY?: boolean;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: NavDrawerTheme;
|
|
/**
|
|
* 320px or 400px. Only applicable above the sm breakpoint.
|
|
* @default normal
|
|
*/
|
|
width?: "normal" | "wide";
|
|
}
|
|
|
|
export class NavDrawer extends __React.Component<NavDrawerProps, {}> { }
|
|
|
|
export interface PanelTheme {
|
|
/**
|
|
* Used as the root class of the panel component.
|
|
*/
|
|
panel?: string;
|
|
/**
|
|
* Used in case the panel is scrollable.
|
|
*/
|
|
scrollY?: string;
|
|
}
|
|
|
|
interface PanelProps extends __ReactToolbox.Props {
|
|
/**
|
|
* Children to pass through the component.
|
|
*/
|
|
children?: __React.ReactNode;
|
|
/**
|
|
* If true, the panel will vertically scroll all content.
|
|
* @default false
|
|
*/
|
|
scrollY?: boolean;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: PanelTheme;
|
|
}
|
|
|
|
export class Panel extends __React.Component<PanelProps, {}> { }
|
|
|
|
export interface SidebarTheme {
|
|
/**
|
|
* Added to the root class if sidebar is pinned.
|
|
*/
|
|
pinned?: string;
|
|
/**
|
|
* Add to the content of sidebar if its scrollable.
|
|
*/
|
|
scrollY?: string;
|
|
/**
|
|
* Root class of the sidebar.
|
|
*/
|
|
sidebar?: string;
|
|
/**
|
|
* Used in for the content element of the sidebar.
|
|
*/
|
|
sidebarContent?: string;
|
|
}
|
|
|
|
interface SidebarProps extends __ReactToolbox.Props {
|
|
/**
|
|
* Children to pass through the component.
|
|
*/
|
|
children?: __React.ReactNode;
|
|
/**
|
|
* If true, the sidebar will be pinned open.
|
|
* @default false
|
|
*/
|
|
pinned?: boolean;
|
|
/**
|
|
* If true, the sidebar will vertically scroll all content
|
|
* @default false
|
|
*/
|
|
scrollY?: boolean;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: SidebarTheme;
|
|
/**
|
|
* Width in standard increments (1-12) or percentage (25, 33, 50, 66, 75, 100)
|
|
* @default 5
|
|
*/
|
|
width?: number; // 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 25 | 33 | 50 | 66 | 75 | 100;
|
|
}
|
|
|
|
export class Sidebar extends __React.Component<SidebarProps, {}> { }
|