Commit 6f28b8bc authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg

Merge branch 'add-iconbutton-style' into 'master'

Add more dynamic styling prop to IconButton

See merge request !343
parents fac5ec0c e631913b
...@@ -54,7 +54,7 @@ exports[`StandardHeader component renders correctly on Android 1`] = ` ...@@ -54,7 +54,7 @@ exports[`StandardHeader component renders correctly on Android 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": undefined, "color": "#FFFFFF",
"fontSize": 24, "fontSize": 24,
}, },
Object { Object {
...@@ -158,7 +158,7 @@ exports[`StandardHeader component renders correctly on iOS 1`] = ` ...@@ -158,7 +158,7 @@ exports[`StandardHeader component renders correctly on iOS 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": undefined, "color": "#FFFFFF",
"fontSize": 24, "fontSize": 24,
}, },
Object { Object {
......
import React from 'react'; import React from 'react';
import { TouchableOpacity } from 'react-native'; import { TouchableOpacity, ViewPropTypes } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons'; import Icon from 'react-native-vector-icons/MaterialIcons';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
...@@ -8,10 +8,11 @@ const IconButton = props => ( ...@@ -8,10 +8,11 @@ const IconButton = props => (
<TouchableOpacity <TouchableOpacity
disabled={props.disabled} disabled={props.disabled}
onPress={props.disabled ? null : props.onPress} onPress={props.disabled ? null : props.onPress}
style={props.style}
> >
<Icon <Icon
name={props.name} name={props.name}
style={props.style} style={props.iconStyle}
color={props.color} color={props.color}
size={props.size} size={props.size}
/> />
...@@ -24,14 +25,16 @@ IconButton.propTypes = { ...@@ -24,14 +25,16 @@ IconButton.propTypes = {
color: PropTypes.string, color: PropTypes.string,
disabled: PropTypes.bool, disabled: PropTypes.bool,
size: PropTypes.number, size: PropTypes.number,
style: Icon.propTypes.style, iconStyle: Icon.propTypes.style,
style: ViewPropTypes.style,
}; };
IconButton.defaultProps = { IconButton.defaultProps = {
color: Colors.white, color: Colors.white,
disabled: false, disabled: false,
size: 24, size: 24,
style: Icon.defaultProps.style, iconStyle: Icon.defaultProps.style,
style: {},
}; };
export default IconButton; export default IconButton;
...@@ -37,7 +37,7 @@ class SearchHeader extends Component { ...@@ -37,7 +37,7 @@ class SearchHeader extends Component {
<IconButton <IconButton
onPress={() => (isSearching ? this.updateSearch(false) : leftIconAction())} onPress={() => (isSearching ? this.updateSearch(false) : leftIconAction())}
name={isSearching ? 'arrow-back' : leftIcon} name={isSearching ? 'arrow-back' : leftIcon}
style={[styles.leftIcon, isSearching ? styles.magenta : styles.white]} iconStyle={[styles.leftIcon, isSearching ? styles.magenta : styles.white]}
/> />
); );
}; };
...@@ -70,7 +70,7 @@ class SearchHeader extends Component { ...@@ -70,7 +70,7 @@ class SearchHeader extends Component {
<IconButton <IconButton
onPress={() => this.updateSearch(true)} onPress={() => this.updateSearch(true)}
name="search" name="search"
style={[styles.rightIcon, styles.white]} iconStyle={[styles.rightIcon, styles.white]}
/> />
); );
} if (searchKey) { } if (searchKey) {
...@@ -78,7 +78,7 @@ class SearchHeader extends Component { ...@@ -78,7 +78,7 @@ class SearchHeader extends Component {
<IconButton <IconButton
onPress={() => this.updateSearchKey('')} onPress={() => this.updateSearchKey('')}
name="close" name="close"
style={[styles.rightIcon, styles.gray]} iconStyle={[styles.rightIcon, styles.gray]}
/> />
); );
} }
......
import React from 'react'; import React from 'react';
import { import { SafeAreaView, Text, View } from 'react-native';
Text, TouchableOpacity, View, SafeAreaView,
} from 'react-native';
import StatusBar from '@react-native-community/status-bar'; import StatusBar from '@react-native-community/status-bar';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { withNavigation } from 'react-navigation'; import { withNavigation } from 'react-navigation';
import Colors from '../../style/Colors'; import Colors from '../../style/Colors';
import styles from './style/StandardHeader'; import styles from './style/StandardHeader';
import IconButton from '../button/IconButton';
const sceneToTitle = (routeName, t) => { const sceneToTitle = (routeName, t) => {
switch (routeName) { switch (routeName) {
...@@ -50,16 +48,12 @@ const StandardHeader = props => ( ...@@ -50,16 +48,12 @@ const StandardHeader = props => (
</View> </View>
<SafeAreaView style={styles.safeArea}> <SafeAreaView style={styles.safeArea}>
<View style={styles.appBar}> <View style={styles.appBar}>
<TouchableOpacity <IconButton
style={styles.iconButton}
onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())} onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
>
<Icon
name={props.menu ? 'menu' : 'arrow-back'} name={props.menu ? 'menu' : 'arrow-back'}
style={styles.icon} style={styles.iconButton}
size={24} iconStyle={styles.icon}
/> />
</TouchableOpacity>
<Text style={styles.title}> <Text style={styles.title}>
{sceneToTitle(props.navigation.state.routeName, props.t)} {sceneToTitle(props.navigation.state.routeName, props.t)}
</Text> </Text>
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { import {
View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableHighlight, FlatList, RefreshControl, ScrollView, Switch, Text, TouchableHighlight, View,
} from 'react-native'; } from 'react-native';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
......
import { TouchableOpacity, View } from 'react-native'; import { View } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer'; import ImageViewer from 'react-native-image-zoom-viewer';
import Icon from 'react-native-vector-icons/MaterialIcons';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Colors from '../../style/Colors';
import styles from './style/AlbumDetailScreen'; import styles from './style/AlbumDetailScreen';
import IconButton from '../../components/button/IconButton';
const AlbumGalleryScreen = ({ photos, goBack, selection }) => ( const AlbumGalleryScreen = ({ photos, goBack, selection }) => (
<View style={styles.screenWrapper}> <View style={styles.screenWrapper}>
...@@ -13,17 +12,12 @@ const AlbumGalleryScreen = ({ photos, goBack, selection }) => ( ...@@ -13,17 +12,12 @@ const AlbumGalleryScreen = ({ photos, goBack, selection }) => (
index={selection} index={selection}
imageUrls={photos} imageUrls={photos}
/> />
<TouchableOpacity <IconButton
style={styles.closeGalleryTouchable}
onPress={goBack} onPress={goBack}
>
<Icon
name="close" name="close"
style={styles.icon} style={styles.closeGalleryTouchable}
size={24} iconStyle={styles.icon}
color={Colors.white}
/> />
</TouchableOpacity>
</View> </View>
</View> </View>
); );
......
...@@ -150,7 +150,7 @@ class ProfileScreen extends Component { ...@@ -150,7 +150,7 @@ class ProfileScreen extends Component {
<IconButton <IconButton
onPress={this.props.goBack} onPress={this.props.goBack}
name="arrow-back" name="arrow-back"
style={styles.icon} iconStyle={styles.icon}
/> />
</Animated.View> </Animated.View>
</Animated.View> </Animated.View>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment