diff options
| author | Linus Färnstrand <linus@mullvad.net> | 2017-12-20 11:32:55 +0100 |
|---|---|---|
| committer | Linus Färnstrand <linus@mullvad.net> | 2017-12-20 11:34:21 +0100 |
| commit | 2aae380b0af018bf0187bb31fb0fedf6a457ebf1 (patch) | |
| tree | a8ad6ee12956d92e6257bea07dedc44063f3017f /app/components/HeaderBar.js | |
| parent | 7b47ddf735af7f3d6065fb6c3ffea6e9ddfd86cb (diff) | |
| parent | 8b146934260739ae609791a1fb676d48ceb954c0 (diff) | |
| download | mullvadvpn-2aae380b0af018bf0187bb31fb0fedf6a457ebf1.tar.xz mullvadvpn-2aae380b0af018bf0187bb31fb0fedf6a457ebf1.zip | |
Merge backend and frontend repo master branches
Conflicts:
.gitignore
.travis.yml
README.md
Diffstat (limited to 'app/components/HeaderBar.js')
| -rw-r--r-- | app/components/HeaderBar.js | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js new file mode 100644 index 0000000000..c2e02cc35c --- /dev/null +++ b/app/components/HeaderBar.js @@ -0,0 +1,61 @@ +// @flow +import React from 'react'; +import { + Component, + Text, + Button, + View +} from 'reactxp'; + +import Img from './Img'; + +import styles from './HeaderBarStyles'; + +export type HeaderBarStyle = 'default' | 'defaultDark' | 'error' | 'success'; +export type HeaderBarProps = { + style: HeaderBarStyle; + hidden: boolean; + showSettings: boolean; + onSettings: ?(() => void); +}; + +export default class HeaderBar extends Component { + props: HeaderBarProps; + static defaultProps: $Shape<HeaderBarProps> = { + style: 'default', + hidden: false, + showSettings: false, + onSettings: null + }; + + render() { + let containerClass = [ + styles['headerbar'], + styles['headerbar__' + process.platform], + styles['headerbar__style_' + this.props.style] + ]; + + if(this.props.hidden) { + containerClass.push(styles['headerbar__hidden']); + } + + return ( + <View style={ containerClass }> + {!this.props.hidden ? + <View style={styles.headerbar__container} testName="headerbar__container"> + <Img style={ styles.headerbar__logo } source='logo-icon'/> + <Text style={styles.headerbar__title}>MULLVAD VPN</Text> + </View> + : null} + + {this.props.showSettings ? + <View style={styles.headerbar__settings}> + <Button onPress={ this.props.onSettings } testName="headerbar__settings"> + <Img style={ styles.headerbar__settings } source='icon-settings'/> + </Button> + </View> + : null} + </View> + ); + } +} |
