UNPKG

3.71 kBTypeScriptView Raw
1import * as React from 'react';
2import { OUIAProps } from '../../helpers';
3export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
4 /** Optional callback for clearing all filters in the toolbar */
5 clearAllFilters?: () => void;
6 /** Text to display in the clear all filters button */
7 clearFiltersButtonText?: string;
8 /** Custom content appended to the filter generated chip group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button. */
9 customChipGroupContent?: React.ReactNode;
10 /** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */
11 collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';
12 /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
13 isExpanded?: boolean;
14 /** A callback for setting the isExpanded flag */
15 toggleIsExpanded?: () => void;
16 /** Classes applied to root element of the data toolbar */
17 className?: string;
18 /** Content to be rendered as rows in the data toolbar */
19 children?: React.ReactNode;
20 /** Id of the data toolbar */
21 id?: string;
22 /** Flag indicating the toolbar height should expand to the full height of the container */
23 isFullHeight?: boolean;
24 /** Flag indicating the toolbar is static */
25 isStatic?: boolean;
26 /** Flag indicating the toolbar should use the Page insets */
27 usePageInsets?: boolean;
28 /** Flag indicating the toolbar should stick to the top of its container */
29 isSticky?: boolean;
30 /** Insets at various breakpoints. */
31 inset?: {
32 default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
33 sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
34 md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
35 lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
36 xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
37 '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
38 };
39 /** Text to display in the total number of applied filters ToolbarFilter */
40 numberOfFiltersText?: (numberOfFilters: number) => string;
41}
42export interface ToolbarState {
43 /** Flag used if the user has opted NOT to manage the 'isExpanded' state of the toggle group.
44 * Indicates whether or not the toggle group is expanded. */
45 isManagedToggleExpanded: boolean;
46 /** Object managing information about how many chips are in each chip group */
47 filterInfo: FilterInfo;
48 /** Used to keep track of window width so we can collapse expanded content when window is resizing */
49 windowWidth: number;
50 ouiaStateId: string;
51}
52interface FilterInfo {
53 [key: string]: number;
54}
55export declare class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
56 static displayName: string;
57 chipGroupContentRef: React.RefObject<HTMLDivElement>;
58 staticFilterInfo: {};
59 state: {
60 isManagedToggleExpanded: boolean;
61 filterInfo: {};
62 windowWidth: number;
63 ouiaStateId: string;
64 };
65 isToggleManaged: () => boolean;
66 toggleIsExpanded: () => void;
67 closeExpandableContent: (e: any) => void;
68 componentDidMount(): void;
69 componentWillUnmount(): void;
70 updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;
71 getNumberOfFilters: () => number;
72 renderToolbar: (randomId: string) => JSX.Element;
73 render(): JSX.Element;
74}
75export {};
76//# sourceMappingURL=Toolbar.d.ts.map
\No newline at end of file