[RN] Avoid Toolbox changing size on first render
Wait until the right button size has been calculated before rendering it.
This commit is contained in:
parent
12d7ab9026
commit
39e46bacf6
|
@ -85,21 +85,23 @@ class Toolbox extends Component<Props, State> {
|
|||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
* Renders the toolbar. It will only be rendered if the {@code Toolbox} is
|
||||
* visible and we have already calculated the available width. This avoids
|
||||
* a weird effect in which the toolbar is displayed and then changes size.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
const toolboxStyle
|
||||
= isNarrowAspectRatio(this)
|
||||
? styles.toolboxNarrow
|
||||
: styles.toolboxWide;
|
||||
_renderToolbar() {
|
||||
const { _visible } = this.props;
|
||||
const { width } = this.state;
|
||||
|
||||
if (!_visible || !width) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let buttonStyles = toolbarButtonStyles;
|
||||
let toggledButtonStyles = toolbarToggledButtonStyles;
|
||||
|
||||
if (_visible) {
|
||||
const buttonSize = this._calculateButtonSize();
|
||||
|
||||
if (buttonSize > 0) {
|
||||
|
@ -118,13 +120,8 @@ class Toolbox extends Component<Props, State> {
|
|||
style: [ toggledButtonStyles.style, extraButtonStyle ]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container
|
||||
onLayout = { this._onLayout }
|
||||
style = { toolboxStyle }
|
||||
visible = { _visible }>
|
||||
<View
|
||||
pointerEvents = 'box-none'
|
||||
style = { styles.toolbar }>
|
||||
|
@ -140,6 +137,28 @@ class Toolbox extends Component<Props, State> {
|
|||
styles = { buttonStyles }
|
||||
toggledStyles = { toggledButtonStyles } />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
const toolboxStyle
|
||||
= isNarrowAspectRatio(this)
|
||||
? styles.toolboxNarrow
|
||||
: styles.toolboxWide;
|
||||
const { _visible } = this.props;
|
||||
|
||||
return (
|
||||
<Container
|
||||
onLayout = { this._onLayout }
|
||||
style = { toolboxStyle }
|
||||
visible = { _visible }>
|
||||
{ this._renderToolbar() }
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue