react-native-circle-checkbox - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

index.js

 /*
-  ReactNativeCircleCheckbox 0.1.2
+  ReactNativeCircleCheckbox 0.1.3
   https://github.com/ParamoshkinAndrew/ReactNativeCircleCheckbox
@@ -14,2 +14,3 @@ (c) 2016 Andrew Paramoshkin <[e-mail]>
   View,
+  Text,
   Component,
@@ -23,2 +24,3 @@ TouchableHighlight
    checked: React.PropTypes.bool,
+   label: React.PropTypes.string,
    outerSize: React.PropTypes.number,
@@ -30,3 +32,4 @@ filterSize: React.PropTypes.number,
    innerColor: React.PropTypes.string,
-   onToggle: React.PropTypes.func.isRequired
+   onToggle: React.PropTypes.func.isRequired,
+   labelPosition: React.PropTypes.oneOf(['right', 'left'])
   };
@@ -41,3 +44,5 @@
     filterColor: '#FFF',
-    innerColor: '#FC9527'
+    innerColor: '#FC9527',
+    label: '',
+    labelPosition: 'right'
   };
@@ -79,7 +84,11 @@
     return (
-      <TouchableHighlight style={[styles.alignStyle, this.state.customStyle._circleOuterStyle]} onPress={this._onToggle.bind(this)}>
-        <View style={[styles.alignStyle, this.state.customStyle._circleFilterStyle]}>
-          {this._renderInner()}
-        </View>
-      </TouchableHighlight>
+      <View style={styles.checkBoxContainer}>
+        {this._renderLabel('left')}
+        <TouchableHighlight style={[styles.alignStyle, this.state.customStyle._circleOuterStyle]} onPress={this._onToggle.bind(this)}>
+          <View style={[styles.alignStyle, this.state.customStyle._circleFilterStyle]}>
+            {this._renderInner()}
+          </View>
+        </TouchableHighlight>
+        {this._renderLabel('right')}
+      </View>
     );
@@ -97,5 +106,18 @@ }
   }
+
+  _renderLabel(position) {
+    var templ = (<View></View>);
+    if ((this.props.label.length > 0) && (position === this.props.labelPosition)) {
+      templ = (<Text style={styles.checkBoxLabel}>{this.props.label}</Text>);
+    }
+    return templ;
+
+  }
 }
 
 var styles = StyleSheet.create({
+  checkBoxContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
   alignStyle: {
@@ -105,4 +127,8 @@ justifyContent: 'center',
   },
+  checkBoxLabel: {
+    marginLeft: 5,
+    marginRight: 5
+  }
 });
 
 module.exports = CircleCheckBox;

package.json

 {
   "name": "react-native-circle-checkbox",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Circle checkbox component for React Native",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -22,15 +22,16 @@ ReactNativeCircleCheckbox
 ![alt tag](http://s28.postimg.org/55twmp73d/uncheck.png)
-![alt tag](http://s22.postimg.org/q8398tg8t/check.png)
+![alt tag](http://s22.postimg.org/q8398tg8t/check.png)   
+![alt tag](http://s13.postimg.org/o5xeouklj/Screen_Shot_2016_01_22_at_17_08_28.png)
 
 ## Available properties:
 
-Name | Default | Type | Required | Description
-:--- | :----- | :- | :-- | :--------------
-checked | false | boolean | - | Initial state of checkbox
-onPress | null | Func | * | Function that will be invoked by pressing to checkbox with checked property as argument
-outerSize | 26 | number | - | Outer circle diameter. Min: 10
-filterSize | 23 | number | - | Underlayer circle diameter. Min: 7
-innerSize | 18 | number | - | Flag circle diameter. Min: 2
-outerColor | #FC9527 | string | - | Outer circle color
-filterColor | #FFF | string | - | Underlayer circle color
-innerColor | #FC9527 | string | - | Flag circle color
+- `checked` : initial state of checkbox. Default: `false`
+- `onPress` : function that will be invoked by pressing to checkbox with checked property as argument.
+- `outerSize` : Diameter of outer circle. Minimum: `10`, default: `26`
+- `filterSize` : Diameter of underlayer circle. Minimum: `7`, default: `23`
+- `innerSize` : Diameter of flag. Minimum: `2`, default: `18`
+- `outerColor` : Color of outer circle. Default: `#FC9527`
+- `filterColor` : Color of underlayer circle. Default: `#FFF`
+- `innerColor` : Color of flag. Default: `#FC9527`
+- `label` : Checkbox label. Default: empty
+- `labelPosition` : Label rendering position. Default: `right`, may be 'right' or 'left'

No alert changes

Improved metrics

Total package byte prevSize

7175

increased by12.97%

Lines of code

112

increased by27.27%

Number of lines in readme file

37

increased by2.78%

No dependency changes