1 | import * as React from 'react';
|
2 | import { PivotBase } from './Pivot.base';
|
3 | import { IStyle, ITheme } from '../../Styling';
|
4 | import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
|
5 | import { PivotItem } from './PivotItem';
|
6 | import { IFocusZoneProps } from '../../FocusZone';
|
7 | /**
|
8 | * {@docCategory Pivot}
|
9 | */
|
10 | export interface IPivot {
|
11 | /**
|
12 | * Sets focus to the first pivot tab.
|
13 | */
|
14 | focus(): void;
|
15 | }
|
16 | /**
|
17 | * {@docCategory Pivot}
|
18 | */
|
19 | export interface IPivotProps extends React.ClassAttributes<PivotBase>, React.HTMLAttributes<HTMLDivElement> {
|
20 | /**
|
21 | * Optional callback to access the IPivot interface. Use this instead of ref for accessing
|
22 | * the public methods and properties of the component.
|
23 | */
|
24 | componentRef?: IRefObject<IPivot>;
|
25 | /**
|
26 | * Call to provide customized styling that will layer on top of the variant rules.
|
27 | */
|
28 | styles?: IStyleFunctionOrObject<IPivotStyleProps, IPivotStyles>;
|
29 | /**
|
30 | * Theme provided by High-Order Component.
|
31 | */
|
32 | theme?: ITheme;
|
33 | /**
|
34 | * Additional css class to apply to the Pivot
|
35 | * @defaultvalue undefined
|
36 | */
|
37 | className?: string;
|
38 | /**
|
39 | * Default selected key for the pivot. Only provide this if the pivot is an uncontrolled component;
|
40 | * otherwise, use the `selectedKey` property.
|
41 | *
|
42 | * This property is also mutually exclusive with `defaultSelectedIndex`.
|
43 | */
|
44 | defaultSelectedKey?: string;
|
45 | /**
|
46 | * Default selected index for the pivot. Only provide this if the pivot is an uncontrolled component;
|
47 | * otherwise, use the `selectedKey` property.
|
48 | *
|
49 | * This property is also mutually exclusive with `defaultSelectedKey`.
|
50 | *
|
51 | * @deprecated Use `defaultSelectedKey`
|
52 | */
|
53 | defaultSelectedIndex?: number;
|
54 | /**
|
55 | * Index of the pivot item initially selected. Mutually exclusive with `initialSelectedKey`.
|
56 | * Only provide this if the pivot is an uncontrolled component; otherwise, use `selectedKey`.
|
57 | *
|
58 | * @deprecated Use `defaultSelectedKey`
|
59 | */
|
60 | initialSelectedIndex?: number;
|
61 | /**
|
62 | * Key of the pivot item initially selected. Mutually exclusive with `initialSelectedIndex`.
|
63 | * Only provide this if the pivot is an uncontrolled component; otherwise, use `selectedKey`.
|
64 | *
|
65 | * @deprecated Use `defaultSelectedKey`
|
66 | */
|
67 | initialSelectedKey?: string;
|
68 | /**
|
69 | * Key of the selected pivot item. Updating this will override the Pivot's selected item state.
|
70 | * Only provide this if the pivot is a controlled component where you are maintaining the
|
71 | * current state; otherwise, use `defaultSelectedKey`.
|
72 | */
|
73 | selectedKey?: string | null;
|
74 | /**
|
75 | * Callback for when the selected pivot item is changed.
|
76 | */
|
77 | onLinkClick?: (item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) => void;
|
78 | /**
|
79 | * PivotLinkSize to use (normal, large)
|
80 | */
|
81 | linkSize?: PivotLinkSize;
|
82 | /**
|
83 | * PivotLinkFormat to use (links, tabs)
|
84 | */
|
85 | linkFormat?: PivotLinkFormat;
|
86 | /**
|
87 | * Whether to skip rendering the tabpanel with the content of the selected tab.
|
88 | * Use this prop if you plan to separately render the tab content
|
89 | * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
|
90 | */
|
91 | headersOnly?: boolean;
|
92 | /**
|
93 | * Callback to customize how IDs are generated for each tab header.
|
94 | * Useful if you're rendering content outside and need to connect aria-labelledby.
|
95 | */
|
96 | getTabId?: (itemKey: string, index: number) => string;
|
97 | /**
|
98 | * Props passed to the `FocusZone` component used as the root of `Pivot`.
|
99 | */
|
100 | focusZoneProps?: IFocusZoneProps;
|
101 | }
|
102 | /**
|
103 | * {@docCategory Pivot}
|
104 | */
|
105 | export declare type IPivotStyleProps = Required<Pick<IPivotProps, 'theme'>> & Pick<IPivotProps, 'className'> & {
|
106 | /** Indicates whether Pivot has large format. */
|
107 | rootIsLarge?: boolean;
|
108 | /** Indicates whether Pivot has tabbed format. */
|
109 | rootIsTabs?: boolean;
|
110 | /**
|
111 | * Indicates whether Pivot link is selected.
|
112 | * @deprecated Is not populated with valid value. Specify `linkIsSelected` styling instead.
|
113 | */
|
114 | linkIsSelected?: boolean;
|
115 | };
|
116 | /**
|
117 | * {@docCategory Pivot}
|
118 | */
|
119 | export interface IPivotStyles {
|
120 | /**
|
121 | * Style for the root element.
|
122 | */
|
123 | root: IStyle;
|
124 | link: IStyle;
|
125 | linkContent: IStyle;
|
126 | linkIsSelected: IStyle;
|
127 | text: IStyle;
|
128 | count: IStyle;
|
129 | icon: IStyle;
|
130 | itemContainer?: IStyle;
|
131 | }
|
132 | /**
|
133 | * {@docCategory Pivot}
|
134 | */
|
135 | export declare enum PivotLinkFormat {
|
136 | /**
|
137 | * Display Pivot Links as links
|
138 | */
|
139 | links = 0,
|
140 | /**
|
141 | * Display Pivot Links as Tabs
|
142 | */
|
143 | tabs = 1
|
144 | }
|
145 | /**
|
146 | * {@docCategory Pivot}
|
147 | */
|
148 | export declare enum PivotLinkSize {
|
149 | /**
|
150 | * Display Link using normal font size
|
151 | */
|
152 | normal = 0,
|
153 | /**
|
154 | * Display links using large font size
|
155 | */
|
156 | large = 1
|
157 | }
|