UNPKG

3.38 kBTypeScriptView Raw
1import * as React from 'react';
2import { RectangleEdge } from '../../utilities/positioning';
3import { ICoachmark, ICoachmarkProps } from './Coachmark.types';
4export declare const COACHMARK_ATTRIBUTE_NAME = "data-coachmarkid";
5/**
6 * An interface for the cached dimensions of entity inner host.
7 */
8export interface IEntityRect {
9 width: number;
10 height: number;
11}
12export interface ICoachmarkState {
13 /**
14 * Is the Coachmark currently collapsed into
15 * a tear drop shape
16 */
17 isCollapsed: boolean;
18 /**
19 * Enables/Disables the beacon that radiates
20 * from the center of the coachmark.
21 */
22 isBeaconAnimating: boolean;
23 /**
24 * Is the teaching bubble currently retreiving the
25 * original dimensions of the hosted entity.
26 */
27 isMeasuring: boolean;
28 /**
29 * Is the Coachmark done measuring the hosted entity
30 */
31 isMeasured: boolean;
32 /**
33 * Cached width and height of _entityInnerHostElement
34 */
35 entityInnerHostRect: IEntityRect;
36 /**
37 * Is the mouse in proximity of the default target element
38 */
39 isMouseInProximity: boolean;
40 /**
41 * The left position of the beak
42 */
43 beakLeft?: string;
44 /**
45 * The right position of the beak
46 */
47 beakTop?: string;
48 /**
49 * The right position of the beak
50 */
51 beakRight?: string;
52 /**
53 * The bottom position of the beak
54 */
55 beakBottom?: string;
56 /**
57 * Alignment edge of callout in relation to target
58 */
59 targetAlignment?: RectangleEdge;
60 /**
61 * Position of Coachmark/TeachingBubble in relation to target
62 */
63 targetPosition?: RectangleEdge;
64 /**
65 * Transform origin of teaching bubble callout
66 */
67 transformOrigin?: string;
68 /**
69 * ARIA alert text to read aloud with Narrator once the Coachmark is mounted
70 */
71 alertText?: string;
72}
73export declare class CoachmarkBase extends React.Component<ICoachmarkProps, ICoachmarkState> implements ICoachmark {
74 static defaultProps: Partial<ICoachmarkProps>;
75 private _async;
76 private _events;
77 /**
78 * The cached HTMLElement reference to the Entity Inner Host
79 * element.
80 */
81 private _entityHost;
82 private _entityInnerHostElement;
83 private _translateAnimationContainer;
84 private _ariaAlertContainer;
85 private _childrenContainer;
86 private _positioningContainer;
87 /**
88 * The target element the mouse would be in
89 * proximity to
90 */
91 private _targetElementRect;
92 constructor(props: ICoachmarkProps);
93 private readonly _beakDirection;
94 render(): JSX.Element;
95 UNSAFE_componentWillReceiveProps(newProps: ICoachmarkProps): void;
96 shouldComponentUpdate(newProps: ICoachmarkProps, newState: ICoachmarkState): boolean;
97 componentDidUpdate(prevProps: ICoachmarkProps, prevState: ICoachmarkState): void;
98 componentDidMount(): void;
99 componentWillUnmount(): void;
100 dismiss: (ev?: Event | React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement> | undefined) => void;
101 private _addListeners;
102 private _dismissOnLostFocus;
103 private _onKeyDown;
104 private _onFocusHandler;
105 private _onPositioned;
106 private _getBounds;
107 private _setBeakPosition;
108 private _openCoachmark;
109 private _addProximityHandler;
110 private _setTargetElementRect;
111 private _isInsideElement;
112}