diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2020-05-28 12:47:10 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2020-06-01 10:16:50 +0200 |
| commit | 9f73d666727e9a50d8260fc42e1ec707d0041f32 (patch) | |
| tree | 9417db8c804a09b59b8915af31723eec0e327cd6 /gui | |
| parent | 4521193b909f816ad391c47d06ddfc1464a08a50 (diff) | |
| download | mullvadvpn-9f73d666727e9a50d8260fc42e1ec707d0041f32.tar.xz mullvadvpn-9f73d666727e9a50d8260fc42e1ec707d0041f32.zip | |
Prevent unnecessary unmounting/mounting of Location, Country and City
Diffstat (limited to 'gui')
| -rw-r--r-- | gui/src/renderer/components/TunnelControl.tsx | 75 |
1 files changed, 31 insertions, 44 deletions
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx index 6324ceb304..5bf00fb9fa 100644 --- a/gui/src/renderer/components/TunnelControl.tsx +++ b/gui/src/renderer/components/TunnelControl.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Component, Styles, Types, View } from 'reactxp'; +import { Component, Styles, View } from 'reactxp'; import styled from 'styled-components'; import { colors } from '../../config.json'; import { TunnelState } from '../../shared/daemon-rpc-types'; @@ -27,23 +27,12 @@ const SwitchLocationButton = styled(AppButton.TransparentButton)({ }); const styles = { - body: Styles.createViewStyle({ - paddingTop: 0, - paddingLeft: 24, - paddingRight: 24, - paddingBottom: 0, - marginTop: 176, - flex: 1, - }), footer: Styles.createViewStyle({ flex: 0, paddingBottom: 16, paddingLeft: 24, paddingRight: 24, }), - wrapper: Styles.createViewStyle({ - flex: 1, - }), status_security: Styles.createTextStyle({ fontFamily: 'Open Sans', fontSize: 16, @@ -51,12 +40,28 @@ const styles = { lineHeight: 22, marginBottom: 2, }), - status_location: Styles.createTextStyle({ - flexDirection: 'column', - marginBottom: 2, - }), }; +const Body = styled.div({ + display: 'flex', + flexDirection: 'column', + padding: '0 24px', + marginTop: '176px', + flex: 1, +}); + +const Wrapper = styled.div({ + display: 'flex', + flexDirection: 'column', + flex: 1, +}); + +const Location = styled.div({ + display: 'flex', + flexDirection: 'column', + marginBottom: 2, +}); + const StyledMarquee = styled(Marquee)({ fontFamily: 'DINPro', fontSize: '34px', @@ -69,12 +74,6 @@ const StyledMarquee = styled(Marquee)({ export default class TunnelControl extends Component<ITunnelControlProps> { public render() { - const Location = ({ children }: { children?: React.ReactNode }) => ( - <View style={styles.status_location}>{children}</View> - ); - const City = () => <StyledMarquee>{this.props.city}</StyledMarquee>; - const Country = () => <StyledMarquee>{this.props.country}</StyledMarquee>; - const SwitchLocation = () => { return ( <SwitchLocationButton onClick={this.props.onSelectLocation}> @@ -152,8 +151,8 @@ export default class TunnelControl extends Component<ITunnelControlProps> { <Body> <Secured displayStyle={SecuredDisplayStyle.securing} /> <Location> - <City /> - <Country /> + {this.renderCity()} + {this.renderCountry()} </Location> <ConnectionPanelContainer /> </Body> @@ -169,8 +168,8 @@ export default class TunnelControl extends Component<ITunnelControlProps> { <Body> <Secured displayStyle={SecuredDisplayStyle.secured} /> <Location> - <City /> - <Country /> + {this.renderCity()} + {this.renderCountry()} </Location> <ConnectionPanelContainer /> </Body> @@ -216,9 +215,7 @@ export default class TunnelControl extends Component<ITunnelControlProps> { <Wrapper> <Body> <Secured displayStyle={SecuredDisplayStyle.secured} /> - <Location> - <Country /> - </Location> + <Location>{this.renderCountry()}</Location> </Body> <Footer> <SelectedLocation /> @@ -232,9 +229,7 @@ export default class TunnelControl extends Component<ITunnelControlProps> { <Wrapper> <Body> <Secured displayStyle={SecuredDisplayStyle.unsecured} /> - <Location> - <Country /> - </Location> + <Location>{this.renderCountry()}</Location> </Body> <Footer> <SelectedLocation /> @@ -247,20 +242,12 @@ export default class TunnelControl extends Component<ITunnelControlProps> { throw new Error(`Unknown TunnelState: ${this.props.tunnelState}`); } } -} - -interface IContainerProps { - children?: Types.ReactNode; -} -class Wrapper extends Component<IContainerProps> { - public render() { - return <View style={styles.wrapper}>{this.props.children}</View>; + private renderCity() { + return <StyledMarquee>{this.props.city}</StyledMarquee>; } -} -class Body extends Component<IContainerProps> { - public render() { - return <View style={styles.body}>{this.props.children}</View>; + private renderCountry() { + return <StyledMarquee>{this.props.country}</StyledMarquee>; } } |