haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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:
Saúl Ibarra Corretgé 2018-05-18 13:42:16 +02:00 committed by Lyubo Marinov
parent 12d7ab9026
commit 39e46bacf6
1 changed files with 57 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
react/features/toolbox/components/native/Toolbox.js
View File

@ -84,6 +84,62 @@ class Toolbox extends Component<Props, State> {
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()}.
*
@ -96,50 +152,13 @@ class Toolbox extends Component<Props, State> {
? styles.toolboxNarrow
: styles.toolboxWide;
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 (
<Container
onLayout = { this._onLayout }
style = { toolboxStyle }
visible = { _visible }>
<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>
{ this._renderToolbar() }
</Container>
);
}