/
ArrowPanel.js
127 lines (108 loc) · 3.41 KB
/
ArrowPanel.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
// @flow
// This implements a panel with a "arrow" triangle graphic that points to the
// button that triggers it.
// Please do not use this component directly. This is used by ButtonWithPanel
// to wrap the panel content.
import * as React from 'react';
import classNames from 'classnames';
import './ArrowPanel.css';
type Props = {|
+onOpen: () => mixed,
+onClose: () => mixed,
+className?: string,
+children: React.Node,
|};
type State = {|
+open: boolean,
+isClosing: boolean,
+openGeneration: number,
|};
export class ArrowPanel extends React.PureComponent<Props, State> {
closeTimeout = null;
state = {
open: false,
isClosing: false,
openGeneration: 0,
};
/* These 2 methods are called from other components.
/* See https://github.com/firefox-devtools/profiler/issues/1888 and
* https://github.com/firefox-devtools/profiler/issues/1641 */
/* eslint-disable-next-line react/no-unused-class-component-methods */
open() {
if (this.state.open) {
return;
}
this.setState({ open: true });
}
/* eslint-disable-next-line react/no-unused-class-component-methods */
close() {
this.setState((state) => {
if (!state.open) {
return null;
}
const openGeneration = state.openGeneration + 1;
clearTimeout(this.closeTimeout);
this.closeTimeout = setTimeout(
this._onCloseAnimationFinish(openGeneration),
400
);
return { open: false, isClosing: true, openGeneration };
});
}
_onCloseAnimationFinish(openGeneration: number) {
return () => {
this.setState((state) => {
if (state.openGeneration === openGeneration) {
return { isClosing: false };
}
return null;
});
};
}
_onArrowPanelClick = (e: { target: HTMLElement } & SyntheticMouseEvent<>) => {
// The arrow panel element contains the element that has the top arrow,
// that is visually outside the panel. We still want to hide the panel
// when clicking in this area.
if (e.target.className !== 'arrowPanelArrow') {
// Stop the click propagation to reach the _onWindowClick event when the
// click is visually inside the panel.
e.stopPropagation();
}
};
// We're calling open and close callbacks in componentDidUpdate because they
// often run side-effects, so we want them out of the render phase.
componentDidUpdate(prevProps: Props, prevState: State) {
if (!prevState.open && this.state.open) {
// Opening
this.props.onOpen();
}
if (!this.state.open && prevState.isClosing && !this.state.isClosing) {
// Closing... but only after the animation.
this.props.onClose();
}
}
componentWillUnmount() {
clearTimeout(this.closeTimeout);
}
render() {
const { className, children } = this.props;
const { open, isClosing } = this.state;
if (!open && !isClosing) {
return null;
}
return (
<div className="arrowPanelAnchor">
<div
className={classNames('arrowPanel', { open }, className)}
onClick={this._onArrowPanelClick}
>
<div className="arrowPanelArrow" />
<div className="arrowPanelContent">{children}</div>
</div>
</div>
);
}
}