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 | 1x 4x 4x 4x 11x 1x 1x | import React, { PropTypes } from 'react'; import { View, Text as NativeText, StyleSheet, TouchableHighlight, Platform } from 'react-native'; import colors from '../config/colors'; import Text from '../text/Text'; import normalize from '../helpers/normalizeText'; const ButtonGroup = props => { const { component, buttons, onPress, selectedIndex, containerStyle, innerBorderStyle, buttonStyle, textStyle, selectedTextStyle, selectedBackgroundColor, underlayColor, activeOpacity, onHideUnderlay, onShowUnderlay, setOpacityTo, ...attributes, } = props; const Component = component || TouchableHighlight; return ( <View style={[styles.container, containerStyle && containerStyle]} {...attributes}> { buttons.map((button, i) => { return ( <Component activeOpacity={activeOpacity} setOpacityTo={setOpacityTo} onHideUnderlay={onHideUnderlay} onShowUnderlay={onShowUnderlay} underlayColor={underlayColor || '#ffffff'} onPress={onPress? () => onPress(i) : () => {}} key={i} style={[ styles.button, i < buttons.length - 1 && { borderRightWidth: innerBorderStyle && innerBorderStyle.width || 1, borderRightColor: innerBorderStyle && innerBorderStyle.color || colors.grey4 }, selectedIndex === i && {backgroundColor: selectedBackgroundColor || 'white'} ]}> <View style={[styles.textContainer, buttonStyle && buttonStyle]}> { button.element ? <button.element /> : ( <Text style={[ styles.buttonText, textStyle && textStyle, selectedIndex === i && {color: colors.grey1}, selectedIndex === i && selectedTextStyle ]}>{button}</Text> ) } </View> </Component> ); }) } </View> ); }; const styles = StyleSheet.create({ button: { flex: 1 }, textContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, container: { marginLeft: 10, marginRight: 10, marginBottom: 5, marginTop: 5, borderColor: '#e3e3e3', borderWidth: 1, flexDirection: 'row', borderRadius: 3, overflow: 'hidden', backgroundColor: '#f5f5f5', height: 40 }, buttonText: { fontSize: normalize(13), color: colors.grey2, ...Platform.select({ ios: { fontWeight: '500' } }) } }); ButtonGroup.propTypes = { button: PropTypes.object, component: PropTypes.any, onPress: PropTypes.func, buttons: PropTypes.array, containerStyle: View.propTypes.style, textStyle: View.propTypes.style, selectedTextStyle: NativeText.propTypes.style, underlayColor: PropTypes.string, selectedIndex: PropTypes.number, activeOpacity: PropTypes.number, onHideUnderlay: PropTypes.func, onShowUnderlay: PropTypes.func, setOpacityTo: PropTypes.any, innerBorderStyle: PropTypes.oneOf(View.propTypes.style, NativeText.propTypes.style), buttonStyle: View.propTypes.style, selectedBackgroundColor: PropTypes.string, }; export default ButtonGroup; |