1 | import * as React from 'react';
|
2 | import { TeachingBubbleBase } from './TeachingBubble.base';
|
3 | import { TeachingBubbleContentBase } from './TeachingBubbleContent.base';
|
4 | import { IImageProps } from '../../Image';
|
5 | import { IButtonProps } from '../../Button';
|
6 | import { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps';
|
7 | import { ICalloutProps, ICalloutContentStyleProps } from '../../Callout';
|
8 | import { IStyle, ITheme } from '../../Styling';
|
9 | import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
|
10 | import { IFocusTrapZoneProps } from '../FocusTrapZone/index';
|
11 | import { Target } from '@uifabric/react-hooks';
|
12 | /**
|
13 | * {@docCategory TeachingBubble}
|
14 | */
|
15 | export interface ITeachingBubble {
|
16 | /** Sets focus to the TeachingBubble root element */
|
17 | focus(): void;
|
18 | }
|
19 | /**
|
20 | * TeachingBubble component props.
|
21 | * {@docCategory TeachingBubble}
|
22 | */
|
23 | export interface ITeachingBubbleProps extends React.ClassAttributes<TeachingBubbleBase | TeachingBubbleContentBase>, IAccessiblePopupProps {
|
24 | /**
|
25 | * Optional callback to access the ITeachingBubble interface. Use this instead of ref for accessing
|
26 | * the public methods and properties of the component.
|
27 | */
|
28 | componentRef?: IRefObject<ITeachingBubble>;
|
29 | /**
|
30 | * Call to provide customized styling that will layer on top of the variant rules.
|
31 | */
|
32 | styles?: IStyleFunctionOrObject<ITeachingBubbleStyleProps, ITeachingBubbleStyles>;
|
33 | /**
|
34 | * Theme provided by High-Order Component.
|
35 | */
|
36 | theme?: ITheme;
|
37 | /**
|
38 | * Properties to pass through for Callout, reference detail properties in ICalloutProps
|
39 | */
|
40 | calloutProps?: ICalloutProps;
|
41 | /**
|
42 | * Properties to pass through for FocusTrapZone, reference detail properties in IFocusTrapZoneProps
|
43 | */
|
44 | focusTrapZoneProps?: IFocusTrapZoneProps;
|
45 | /**
|
46 | * A headline for the Teaching Bubble.
|
47 | */
|
48 | headline?: string;
|
49 | /**
|
50 | * A variation with smaller bold headline and no margins.
|
51 | */
|
52 | hasCondensedHeadline?: boolean;
|
53 | /**
|
54 | * @deprecated Use `hasCloseButton`.
|
55 | */
|
56 | hasCloseIcon?: boolean;
|
57 | /**
|
58 | * Whether the TeachingBubble renders close button in the top right corner.
|
59 | */
|
60 | hasCloseButton?: boolean;
|
61 | /**
|
62 | * An Image for the TeachingBubble.
|
63 | */
|
64 | illustrationImage?: IImageProps;
|
65 | /**
|
66 | * The Primary interaction button
|
67 | */
|
68 | primaryButtonProps?: IButtonProps;
|
69 | /**
|
70 | * The Secondary interaction button
|
71 | */
|
72 | secondaryButtonProps?: IButtonProps;
|
73 | /**
|
74 | * Text that will be rendered in the footer of the TeachingBubble.
|
75 | * May be rendered alongside primary and secondary buttons.
|
76 | */
|
77 | footerContent?: string | JSX.Element;
|
78 | /**
|
79 | * @deprecated use target instead
|
80 | * Element to anchor the TeachingBubble to.
|
81 | */
|
82 | targetElement?: HTMLElement;
|
83 | /**
|
84 | * Element, MouseEvent, Point, or querySelector string that the TeachingBubble
|
85 | * should anchor to.
|
86 | */
|
87 | target?: Target;
|
88 | /**
|
89 | * Callback when the TeachingBubble tries to close.
|
90 | */
|
91 | onDismiss?: (ev?: any) => void;
|
92 | /**
|
93 | * Whether or not the TeachingBubble is wide, with image on the left side.
|
94 | */
|
95 | isWide?: boolean;
|
96 | /**
|
97 | * A variation with smaller bold headline and margins to the body.
|
98 | * (`hasCondensedHeadline` takes precedence if it is also set to true.)
|
99 | */
|
100 | hasSmallHeadline?: boolean;
|
101 | /**
|
102 | * Defines the element id referencing the element containing label text for TeachingBubble.
|
103 | */
|
104 | ariaLabelledBy?: string;
|
105 | /**
|
106 | * Defines the element id referencing the element containing the description for the TeachingBubble.
|
107 | */
|
108 | ariaDescribedBy?: string;
|
109 | }
|
110 | /**
|
111 | * {@docCategory TeachingBubble}
|
112 | */
|
113 | export declare type ITeachingBubbleStyleProps = Required<Pick<ITeachingBubbleProps, 'theme'>> & Pick<ITeachingBubbleProps, 'hasCondensedHeadline' | 'hasSmallHeadline' | 'isWide'> & {
|
114 | /** Style props for callout. */
|
115 | calloutProps?: ICalloutContentStyleProps;
|
116 | /** Class name for primary button. */
|
117 | primaryButtonClassName?: string;
|
118 | /** Class name for secondary button. */
|
119 | secondaryButtonClassName?: string;
|
120 | /** If the close button is visible. */
|
121 | hasCloseButton?: boolean;
|
122 | /** If a headline has been specified. */
|
123 | hasHeadline?: boolean;
|
124 | };
|
125 | /**
|
126 | * {@docCategory TeachingBubble}
|
127 | */
|
128 | export interface ITeachingBubbleStyles {
|
129 | root: IStyle;
|
130 | body: IStyle;
|
131 | bodyContent: IStyle;
|
132 | closeButton: IStyle;
|
133 | content: IStyle;
|
134 | footer: IStyle;
|
135 | header: IStyle;
|
136 | headline: IStyle;
|
137 | imageContent: IStyle;
|
138 | primaryButton: IStyle;
|
139 | secondaryButton: IStyle;
|
140 | subText: IStyle;
|
141 | subComponentStyles?: ITeachingBubbleSubComponentStyles;
|
142 | }
|
143 | /**
|
144 | * {@docCategory TeachingBubble}
|
145 | */
|
146 | export interface ITeachingBubbleSubComponentStyles {
|
147 | /** Refers to the callout that hosts the TeachingBubble. */
|
148 | callout: IStyleFunctionOrObject<any, any>;
|
149 | }
|