@janiscommerce/ui-native
Version:
components library for Janis app
67 lines (66 loc) • 2.54 kB
JavaScript
import React from 'react';
import RadioButton from '../../atoms/RadioButton';
import CheckBox from '../../atoms/CheckBox';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import Text from '../../atoms/Text';
import { palette } from '../../../theme/palette';
import { horizontalScale, moderateScale, scaledForDevice, verticalScale } from '../../../scale';
const validPaddingHorizontal = scaledForDevice(16, horizontalScale);
const validMarginVertical = scaledForDevice(13, moderateScale);
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
},
radioButtonContainer: {
display: 'flex',
height: verticalScale(48),
borderRadius: verticalScale(4),
},
checkBoxContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: validPaddingHorizontal,
marginVertical: validMarginVertical,
alignItems: 'center',
height: 'auto',
},
text: {
fontSize: 16,
fontWeight: '400',
color: palette.black.main,
textTransform: 'capitalize',
},
separator: {
alignSelf: 'center',
borderBottomColor: palette.grey[200],
borderBottomWidth: verticalScale(1),
width: '90%',
},
});
const ItemSelectionButton = ({ name, selected = false, radioButton = false, leftSelection = false, rightSelection = false, onSelection = () => { }, }) => {
if (!name) {
return null;
}
const checkPosition = rightSelection || (!rightSelection && !leftSelection) ? 'right' : 'left';
const renderSelectionComponent = () => {
if (!radioButton) {
return <CheckBox onPress={onSelection} checked={selected} customSize={24}/>;
}
return (<RadioButton onPress={onSelection} selected={selected} checkPosition={checkPosition} checkSize="md">
<Text style={styles.text}>{name}</Text>
</RadioButton>);
};
return (<View style={styles.container}>
<TouchableOpacity style={[
radioButton && styles.radioButtonContainer,
!radioButton && styles.checkBoxContainer,
]} onPress={onSelection}>
{leftSelection && !rightSelection && renderSelectionComponent()}
{!radioButton && <Text style={styles.text}>{name}</Text>}
{((rightSelection && !leftSelection) || (!rightSelection && !leftSelection)) &&
renderSelectionComponent()}
</TouchableOpacity>
<View style={styles.separator}/>
</View>);
};
export default ItemSelectionButton;