[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
|
@ -84,6 +84,62 @@ class Toolbox extends Component<Props, State> {
|
||||||
this._onLayout = this._onLayout.bind(this);
|
this._onLayout = this._onLayout.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*
|
||||||
|
* @returns {ReactElement}
|
||||||
|
*/
|
||||||
|
_renderToolbar() {
|
||||||
|
const { _visible } = this.props;
|
||||||
|
const { width } = this.state;
|
||||||
|
|
||||||
|
if (!_visible || !width) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let buttonStyles = toolbarButtonStyles;
|
||||||
|
let toggledButtonStyles = toolbarToggledButtonStyles;
|
||||||
|
|
||||||
|
const buttonSize = this._calculateButtonSize();
|
||||||
|
|
||||||
|
if (buttonSize > 0) {
|
||||||
|
const extraButtonStyle = {
|
||||||
|
borderRadius: buttonSize / 2,
|
||||||
|
height: buttonSize,
|
||||||
|
width: buttonSize
|
||||||
|
};
|
||||||
|
|
||||||
|
buttonStyles = {
|
||||||
|
...buttonStyles,
|
||||||
|
style: [ buttonStyles.style, extraButtonStyle ]
|
||||||
|
};
|
||||||
|
toggledButtonStyles = {
|
||||||
|
...toggledButtonStyles,
|
||||||
|
style: [ toggledButtonStyles.style, extraButtonStyle ]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
pointerEvents = 'box-none'
|
||||||
|
style = { styles.toolbar }>
|
||||||
|
<InviteButton styles = { buttonStyles } />
|
||||||
|
<AudioMuteButton
|
||||||
|
styles = { buttonStyles }
|
||||||
|
toggledStyles = { toggledButtonStyles } />
|
||||||
|
<HangupButton styles = { hangupButtonStyles } />
|
||||||
|
<VideoMuteButton
|
||||||
|
styles = { buttonStyles }
|
||||||
|
toggledStyles = { toggledButtonStyles } />
|
||||||
|
<OverflowMenuButton
|
||||||
|
styles = { buttonStyles }
|
||||||
|
toggledStyles = { toggledButtonStyles } />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Implements React's {@link Component#render()}.
|
* Implements React's {@link Component#render()}.
|
||||||
*
|
*
|
||||||
|
@ -96,50 +152,13 @@ class Toolbox extends Component<Props, State> {
|
||||||
? styles.toolboxNarrow
|
? styles.toolboxNarrow
|
||||||
: styles.toolboxWide;
|
: styles.toolboxWide;
|
||||||
const { _visible } = this.props;
|
const { _visible } = this.props;
|
||||||
let buttonStyles = toolbarButtonStyles;
|
|
||||||
let toggledButtonStyles = toolbarToggledButtonStyles;
|
|
||||||
|
|
||||||
if (_visible) {
|
|
||||||
const buttonSize = this._calculateButtonSize();
|
|
||||||
|
|
||||||
if (buttonSize > 0) {
|
|
||||||
const extraButtonStyle = {
|
|
||||||
borderRadius: buttonSize / 2,
|
|
||||||
height: buttonSize,
|
|
||||||
width: buttonSize
|
|
||||||
};
|
|
||||||
|
|
||||||
buttonStyles = {
|
|
||||||
...buttonStyles,
|
|
||||||
style: [ buttonStyles.style, extraButtonStyle ]
|
|
||||||
};
|
|
||||||
toggledButtonStyles = {
|
|
||||||
...toggledButtonStyles,
|
|
||||||
style: [ toggledButtonStyles.style, extraButtonStyle ]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container
|
<Container
|
||||||
onLayout = { this._onLayout }
|
onLayout = { this._onLayout }
|
||||||
style = { toolboxStyle }
|
style = { toolboxStyle }
|
||||||
visible = { _visible }>
|
visible = { _visible }>
|
||||||
<View
|
{ this._renderToolbar() }
|
||||||
pointerEvents = 'box-none'
|
|
||||||
style = { styles.toolbar }>
|
|
||||||
<InviteButton styles = { buttonStyles } />
|
|
||||||
<AudioMuteButton
|
|
||||||
styles = { buttonStyles }
|
|
||||||
toggledStyles = { toggledButtonStyles } />
|
|
||||||
<HangupButton styles = { hangupButtonStyles } />
|
|
||||||
<VideoMuteButton
|
|
||||||
styles = { buttonStyles }
|
|
||||||
toggledStyles = { toggledButtonStyles } />
|
|
||||||
<OverflowMenuButton
|
|
||||||
styles = { buttonStyles }
|
|
||||||
toggledStyles = { toggledButtonStyles } />
|
|
||||||
</View>
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue