Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 12x 12x 12x 12x 12x 12x 12x | import React from 'react';
import PropTypes from 'prop-types';
import {
Platform,
TouchableHighlight,
View,
StyleSheet,
Text as NativeText,
} from 'react-native';
import getIconType from '../helpers/getIconType';
import { ViewPropTypes, withTheme } from '../config';
const Icon = props => {
const {
type,
name,
size,
color,
iconStyle,
underlayColor,
reverse,
raised,
containerStyle,
reverseColor,
disabled,
disabledStyle,
onPress,
Component = onPress ? TouchableHighlight : View,
...attributes
} = props;
let Icon = getIconType(type || 'material');
return (
<View style={containerStyle && containerStyle}>
<Component
{...attributes}
underlayColor={reverse ? color : underlayColor || color}
style={StyleSheet.flatten([
(reverse || raised) && styles.button,
(reverse || raised) && {
borderRadius: size + 4,
height: size * 2 + 4,
width: size * 2 + 4,
},
raised && styles.raised,
{
backgroundColor: reverse ? color : raised ? 'white' : 'transparent',
alignItems: 'center',
justifyContent: 'center',
},
disabled && styles.disabled,
disabled && disabledStyle,
])}
{...onPress && { disabled }}
onPress={onPress}
>
<Icon
testID="iconIcon"
style={StyleSheet.flatten([
{ backgroundColor: 'transparent' },
iconStyle && iconStyle,
])}
size={size}
name={name}
color={reverse ? reverseColor : color}
/>
</Component>
</View>
);
};
Icon.propTypes = {
type: PropTypes.string,
name: PropTypes.string,
size: PropTypes.number,
color: PropTypes.string,
Component: PropTypes.func,
underlayColor: PropTypes.string,
reverse: PropTypes.bool,
raised: PropTypes.bool,
containerStyle: ViewPropTypes.style,
iconStyle: NativeText.propTypes.style,
onPress: PropTypes.func,
reverseColor: PropTypes.string,
disabled: PropTypes.bool,
disabledStyle: ViewPropTypes.style,
};
Icon.defaultProps = {
underlayColor: 'white',
reverse: false,
raised: false,
size: 24,
color: 'black',
reverseColor: 'white',
disabled: false,
};
const styles = StyleSheet.create({
button: {
margin: 7,
},
raised: {
...Platform.select({
ios: {
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
},
android: {
elevation: 2,
},
}),
},
disabled: {
backgroundColor: '#D1D5D8',
},
});
export { Icon };
export default withTheme(Icon, 'Icon');
|