update: add propTypes

Author: Andrew Paramoshkin

index.js

@@ -1,9 +1,9 @@
-/*   
-  ReactNativeCircleCheckbox 0.1.0
+/*
+  ReactNativeCircleCheckbox 0.1.1
   https://github.com/ParamoshkinAndrew/ReactNativeCircleCheckbox
   (c) 2016 Andrew Paramoshkin <paramoshkin.andrew@gmail.com>
   ReactNativeCircleCheckbox may be freely distributed under the MIT license.
- */ 
+ */
 
 'use strict'
 
@@ -17,37 +17,54 @@ var {
 
 class CircleCheckBox extends Component {
 
+  static propTypes = {
+   checked: React.PropTypes.bool,
+   outerSize: React.PropTypes.number,
+   filterSize: React.PropTypes.number,
+   innerSize: React.PropTypes.number,
+   outerColor: React.PropTypes.string,
+   filterColor: React.PropTypes.string,
+   innerColor: React.PropTypes.string,
+   onToggle: React.PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    checked: false,
+    outerSize: 26,
+    filterSize: 23,
+    innerSize: 18,
+    outerColor: '#FC9527',
+    filterColor: '#FFF',
+    innerColor: '#FC9527'
+  };
+
   constructor(props) {
     super(props);
-    var outerSize = (props.outerSize) ? props.outerSize : 26;
-    outerSize = (parseInt(outerSize) < 10 || isNaN(parseInt(outerSize))) ? 10 : parseInt(outerSize);
-    var outerColor = (props.outerColor) ? props.outerColor : '#FC9527';
+    var outerSize = (parseInt(props.outerSize) < 10 || isNaN(parseInt(props.outerSize))) ? 10 : parseInt(props.outerSize);
     var outerStyle = {
       width: outerSize,
       height: outerSize,
       borderRadius: outerSize/2,
-      backgroundColor: outerColor
+      backgroundColor: props.outerColor
     };
     var filterSize = (parseInt(props.filterSize) > outerStyle.width + 3 || isNaN(parseInt(props.filterSize))) ? outerStyle.width - 3 : parseInt(props.filterSize);
-    var filterColor = (props.filterColor) ? props.filterColor : '#FFF';
     var filterStyle = {
       width: filterSize,
       height: filterSize,
       borderRadius: filterSize/2,
-      backgroundColor: filterColor
+      backgroundColor: props.filterColor
     };
     var innerSize = (parseInt(props.innerSize) > filterStyle.width + 5 || isNaN(parseInt(props.innerSize))) ? filterStyle.width - 5 : parseInt(props.innerSize);
-    var innerColor = (props.innerColor) ? props.innerColor : '#FC9527';
     var innerStyle = {
       width: innerSize,
       height: innerSize,
       borderRadius: innerSize/2,
-      backgroundColor: innerColor
+      backgroundColor: props.innerColor
     };
 
     this.state = {
-      checked: props.checked ? props.checked : false,
-      onPress: props.onPress,
+      checked: props.checked,
+      onToggle: props.onToggle,
       _circleOuterStyle: outerStyle,
       _circleFilterStyle: filterStyle,
       _circleInnerStyle: innerStyle
@@ -56,27 +73,22 @@ class CircleCheckBox extends Component {
 
   render() {
     return (
-      <TouchableHighlight style={[styles.alignStyle, this.state._circleOuterStyle]}
-        onPress={ () =>
-          (this.state.onPress) ?
-          this.state.onPress(this.state.checked) :
-          this._onPress(this.state.checked) }
-      >
+      <TouchableHighlight style={[styles.alignStyle, this.state._circleOuterStyle]} onPress={() => this._onToggle()}>
         <View style={[styles.alignStyle, this.state._circleFilterStyle]}>
           {this._renderInner()}
         </View>
       </TouchableHighlight>
     );
   }
 
-  _onPress(checked) {
-    this.setState({
-      checked: !checked
-    });
+  _onToggle() {
+    if(this.props.onToggle) {
+      this.props.onToggle(!this.props.checked);
+    }
   }
 
   _renderInner() {
-    return this.state.checked ? (<View style={this.state._circleInnerStyle} />) : (<View/>);
+    return this.props.checked ? (<View style={this.state._circleInnerStyle} />) : (<View/>);
   }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-circle-checkbox",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Circle checkbox component for React Native",
   "main": "index.js",
   "scripts": {