arm-components/components/CheckBox.js

components for react-native

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default class CheckBox extends Component{
	constructor(props){
		super(props);
		this.state = {
			disabled: this.props.disabled || false,
			checked: this.props.checked || false,
			activeOpacity: this.props.activeOpacity || 1,
			title: this.props.title,
			titleLeft: this.props.titleLeft,
			color: this.props.color || '#000000',
			width: this.props.width || 18,
			onLayout: this.props.onLayout
		};
	}

	componentWillReceiveProps(newProps){
		this.setState({
			disabled: newProps.disabled || false,
			checked: newProps.checked || false,
			activeOpacity: newProps.activeOpacity || 1,
			title: newProps.title,
			titleLeft: newProps.titleLeft,
			color: newProps.color || '#000000',
			width: newProps.width || 18
		});
	}

	render(){
		const { checked, activeOpacity, title, titleLeft, width, disabled, color, onLayout } = this.state;
		return(
			<TouchableOpacity 
				activeOpacity={(disabled)?(1):(activeOpacity)}
				onPress={(disabled)?(null):(this.props.onChange)}
				onLongPress={(disabled)?(null):(this.props.onLongPress)}
				onPressIn={(disabled)?(null):(this.props.onPressIn)}
				onPressOut={(disabled)?(null):(this.props.onPressOut)}
				onLayout={onLayout}
				style={
					{
						margin: 5,
						display: 'flex',
						flexDirection: 'row',
						flexWrap: 'wrap'
					}
				}
			>
				<View>
					{
						(typeof titleLeft !== 'undefined')?(<Text style={{
							marginRight: 5,
							color: color
						}}>{ titleLeft }</Text>):(null)
					}
				</View>
				<View
					style={
						{
							position: 'relative',
							borderStyle: 'solid',
							borderWidth: 2,
							borderColor: color,
							borderRadius: 2,
							width: width,
							height: width
						}
					}
					opacity={(disabled)?(0.5):(1)}
				>
					{
						(checked)?(<View style={
							{
								position: 'absolute',
								borderRightWidth: 2,
								borderBottomWidth: 2,
								borderRightColor: color,
								borderBottomColor: color,
								borderStyle: 'solid',
								width: '50%',
								height: '80%',
								top: '5%',
								left: '25%',
								transform:[{rotate: '30deg'}]
							}
						}></View>):(null)
					}
				</View>
				<View>
					{
						(typeof title !== 'undefined')?(<Text style={{
							marginLeft: 5,
							color: color
						}}>{ title }</Text>):(null)
					}
				</View>
			</TouchableOpacity>
		)
	}
}