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`] = `
style={
Array [
Object {
"color": undefined,
"color": "#FFFFFF",
"fontSize": 24,
},
Object {
......@@ -158,7 +158,7 @@ exports[`StandardHeader component renders correctly on iOS 1`] = `
style={
Array [
Object {
"color": undefined,
"color": "#FFFFFF",
"fontSize": 24,
},
Object {
......
import React from 'react';
import { TouchableOpacity } from 'react-native';
import { TouchableOpacity, ViewPropTypes } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import PropTypes from 'prop-types';
import Colors from '../../style/Colors';
......@@ -8,10 +8,11 @@ const IconButton = props => (
<TouchableOpacity
disabled={props.disabled}
onPress={props.disabled ? null : props.onPress}
style={props.style}
>
<Icon
name={props.name}
style={props.style}
style={props.iconStyle}
color={props.color}
size={props.size}
/>
......@@ -24,14 +25,16 @@ IconButton.propTypes = {
color: PropTypes.string,
disabled: PropTypes.bool,
size: PropTypes.number,
style: Icon.propTypes.style,
iconStyle: Icon.propTypes.style,
style: ViewPropTypes.style,
};
IconButton.defaultProps = {
color: Colors.white,
disabled: false,
size: 24,
style: Icon.defaultProps.style,
iconStyle: Icon.defaultProps.style,
style: {},
};
export default IconButton;
......@@ -37,7 +37,7 @@ class SearchHeader extends Component {
<IconButton
onPress={() => (isSearching ? this.updateSearch(false) : leftIconAction())}
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 {
<IconButton
onPress={() => this.updateSearch(true)}
name="search"
style={[styles.rightIcon, styles.white]}
iconStyle={[styles.rightIcon, styles.white]}
/>
);
} if (searchKey) {
......@@ -78,7 +78,7 @@ class SearchHeader extends Component {
<IconButton
onPress={() => this.updateSearchKey('')}
name="close"
style={[styles.rightIcon, styles.gray]}
iconStyle={[styles.rightIcon, styles.gray]}
/>
);
}
......
import React from 'react';
import {
Text, TouchableOpacity, View, SafeAreaView,
} from 'react-native';
import { SafeAreaView, Text, View } from 'react-native';
import StatusBar from '@react-native-community/status-bar';
import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { withNavigation } from 'react-navigation';
import Colors from '../../style/Colors';
import styles from './style/StandardHeader';
import IconButton from '../button/IconButton';
const sceneToTitle = (routeName, t) => {
switch (routeName) {
......@@ -50,16 +48,12 @@ const StandardHeader = props => (
</View>
<SafeAreaView style={styles.safeArea}>
<View style={styles.appBar}>
<TouchableOpacity
style={styles.iconButton}
<IconButton
onPress={() => (props.menu ? props.navigation.toggleDrawer() : props.navigation.goBack())}
>
<Icon
name={props.menu ? 'menu' : 'arrow-back'}
style={styles.icon}
size={24}
/>
</TouchableOpacity>
name={props.menu ? 'menu' : 'arrow-back'}
style={styles.iconButton}
iconStyle={styles.icon}
/>
<Text style={styles.title}>
{sceneToTitle(props.navigation.state.routeName, props.t)}
</Text>
......
import React, { Component } from 'react';
import {
View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableHighlight,
FlatList, RefreshControl, ScrollView, Switch, Text, TouchableHighlight, View,
} from 'react-native';
import { withTranslation } from 'react-i18next';
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 Icon from 'react-native-vector-icons/MaterialIcons';
import React from 'react';
import PropTypes from 'prop-types';
import Colors from '../../style/Colors';
import styles from './style/AlbumDetailScreen';
import IconButton from '../../components/button/IconButton';
const AlbumGalleryScreen = ({ photos, goBack, selection }) => (
<View style={styles.screenWrapper}>
......@@ -13,17 +12,12 @@ const AlbumGalleryScreen = ({ photos, goBack, selection }) => (
index={selection}
imageUrls={photos}
/>
<TouchableOpacity
style={styles.closeGalleryTouchable}
<IconButton
onPress={goBack}
>
<Icon
name="close"
style={styles.icon}
size={24}
color={Colors.white}
/>
</TouchableOpacity>
name="close"
style={styles.closeGalleryTouchable}
iconStyle={styles.icon}
/>
</View>
</View>
);
......
......@@ -150,7 +150,7 @@ class ProfileScreen extends Component {
<IconButton
onPress={this.props.goBack}
name="arrow-back"
style={styles.icon}
iconStyle={styles.icon}
/>
</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