forked from Expensify/App
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PopoverWithMeasuredContent.js
215 lines (192 loc) · 8.18 KB
/
PopoverWithMeasuredContent.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
import _ from 'underscore';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import lodashGet from 'lodash/get';
import PopoverWithoutOverlay from './PopoverWithoutOverlay';
import Popover from './Popover';
import {propTypes as popoverPropTypes, defaultProps as defaultPopoverProps} from './Popover/popoverPropTypes';
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
import CONST from '../CONST';
import styles from '../styles/styles';
import {computeHorizontalShift, computeVerticalShift} from '../styles/getPopoverWithMeasuredContentStyles';
const propTypes = {
// All popover props except:
// 1) anchorPosition (which is overridden for this component)
...(_.omit(popoverPropTypes, ['anchorPosition'])),
/** The horizontal and vertical anchors points for the popover */
anchorPosition: PropTypes.shape({
horizontal: PropTypes.number.isRequired,
vertical: PropTypes.number.isRequired,
}).isRequired,
/** Where the popover should be positioned relative to the anchor points. */
anchorOrigin: PropTypes.shape({
horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
}),
/** A function with content to measure. This component will use this.props.children by default,
but in the case the children are not displayed, the measurement will not work. */
measureContent: PropTypes.func.isRequired,
/** Static dimensions for the popover.
* Note: When passed, it will skip dimensions measuring of the popover, and provided dimensions will be used to calculate the anchor position.
*/
popoverDimensions: PropTypes.shape({
height: PropTypes.number,
width: PropTypes.number,
}),
...windowDimensionsPropTypes,
withoutOverlay: PropTypes.bool,
};
const defaultProps = {
...defaultPopoverProps,
// Default positioning of the popover
anchorOrigin: {
horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
},
popoverDimensions: {
height: 0,
width: 0,
},
withoutOverlay: false,
};
/**
* This is a convenient wrapper around the regular Popover component that allows us to use a more sophisticated
* positioning schema responsively (without having to provide a static width and height for the popover content).
* This way, we can shift the position of popover so that the content is anchored where we want it relative to the
* anchor position.
*/
class PopoverWithMeasuredContent extends Component {
constructor(props) {
super(props);
this.popoverWidth = lodashGet(this.props, 'popoverDimensions.width', 0);
this.popoverHeight = lodashGet(this.props, 'popoverDimensions.height', 0);
this.state = {
isContentMeasured: this.popoverWidth > 0 && this.popoverHeight > 0,
isVisible: false,
};
this.measurePopover = this.measurePopover.bind(this);
}
/**
* When Popover becomes visible, we need to recalculate the Dimensions.
* Skip render on Popover until recalculations have done by setting isContentMeasured false as early as possible.
*
* @static
* @param {Object} props
* @param {Object} state
* @return {Object|null}
*/
static getDerivedStateFromProps(props, state) {
// When Popover is shown recalculate
if (!state.isVisible && props.isVisible) {
return {isContentMeasured: lodashGet(props, 'popoverDimensions.width', 0) > 0 && lodashGet(props, 'popoverDimensions.height', 0) > 0, isVisible: true};
}
if (!props.isVisible) {
return {isVisible: false};
}
return null;
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.isVisible
&& (nextProps.windowWidth !== this.props.windowWidth
|| nextProps.windowHeight !== this.props.windowHeight)) {
return true;
}
// This component does not require re-render until any prop or state changes as we get the necessary info
// at first render. This component is attached to each message on the Chat list thus we prevent its re-renders
return !_.isEqual(
_.omit(this.props, ['windowWidth', 'windowHeight']),
_.omit(nextProps, ['windowWidth', 'windowHeight']),
) || !_.isEqual(this.state, nextState);
}
/**
* Measure the size of the popover's content.
*
* @param {Object} nativeEvent
*/
measurePopover({nativeEvent}) {
this.popoverWidth = nativeEvent.layout.width;
this.popoverHeight = nativeEvent.layout.height;
this.setState({isContentMeasured: true});
}
/**
* Calculate the adjusted position of the popover.
*
* @returns {Object}
*/
calculateAdjustedAnchorPosition() {
let horizontalConstraint;
switch (this.props.anchorOrigin.horizontal) {
case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT:
horizontalConstraint = {left: this.props.anchorPosition.horizontal - this.popoverWidth};
break;
case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER:
horizontalConstraint = {
left: Math.floor(this.props.anchorPosition.horizontal - (this.popoverWidth / 2)),
};
break;
case CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT:
default:
horizontalConstraint = {left: this.props.anchorPosition.horizontal};
}
let verticalConstraint;
switch (this.props.anchorOrigin.vertical) {
case CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM:
verticalConstraint = {top: this.props.anchorPosition.vertical - this.popoverHeight};
break;
case CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.CENTER:
verticalConstraint = {
top: Math.floor(this.props.anchorPosition.vertical - (this.popoverHeight / 2)),
};
break;
case CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP:
default:
verticalConstraint = {top: this.props.anchorPosition.vertical};
}
return {
...horizontalConstraint,
...verticalConstraint,
};
}
render() {
const adjustedAnchorPosition = this.calculateAdjustedAnchorPosition();
const horizontalShift = computeHorizontalShift(
adjustedAnchorPosition.left,
this.popoverWidth,
this.props.windowWidth,
);
const verticalShift = computeVerticalShift(
adjustedAnchorPosition.top,
this.popoverHeight,
this.props.windowHeight,
);
const shifedAnchorPosition = {
left: adjustedAnchorPosition.left + horizontalShift,
top: adjustedAnchorPosition.top + verticalShift,
};
const PopoverComponentToUse = this.props.withoutOverlay ? PopoverWithoutOverlay : Popover;
return this.state.isContentMeasured
? (
<PopoverComponentToUse
// eslint-disable-next-line react/jsx-props-no-spreading
{...this.props}
anchorPosition={shifedAnchorPosition}
>
{this.props.measureContent()}
</PopoverComponentToUse>
) : (
/*
This is an invisible view used to measure the size of the popover,
before it ever needs to be displayed.
We do this because we need to know its dimensions in order to correctly animate the popover,
but we can't measure its dimensions without first rendering it.
*/
<View style={styles.invisible} onLayout={this.measurePopover}>
{this.props.children}
</View>
);
}
}
PopoverWithMeasuredContent.propTypes = propTypes;
PopoverWithMeasuredContent.defaultProps = defaultProps;
export default withWindowDimensions(PopoverWithMeasuredContent);