react-native-swipeout - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

example/index.ios.js

@@ -19,23 +19,71 @@ /**
   render: function() {
-    var swipeoutBtns = [
+    var btnsDefault = [
       {
-        text: 'Custom Styles'
-      , backgroundColor: '#4fba8a'
-      , color: '#17807a'
-      }, {
+        text: 'Button'
+      }
+    ]
+    var btnsOnPress = [
+      {
+        text: 'onPress'
+      , onPress: function(){alert('button pressed')}
+      , type: 'primary'
+      }
+    ]
+    var btnsTypes = [
+      {
         text: 'Primary'
       , type: 'primary'
       }, {
+        text: 'Secondary'
+      , type: 'secondary'
+      }, {
         text: 'Delete'
       , type: 'delete'
-      , onPress: function(){alert('Delete pressed')}
       }
     ]
+    var btnsCustomStyles = [
+      {
+        backgroundColor: '#4fba8a'
+      , color: '#17807a'
+      , text: 'Button'
+      }
+    ]
+    var btnsFive = [
+      {
+        text: 'One'
+      }, {
+        text: 'Two'
+      }, {
+        text: 'Three'
+      }, {
+        text: 'Four'
+      }, {
+        text: 'Five'
+      }
+    ]
     return (
       <View style={styles.container}>
-        <Swipeout btns={swipeoutBtns}>
-          <View style={styles.swipeoutContent}>
-            <Text style={styles.swipeoutContentText}>Swipe me left</Text>
-          </View>
-        </Swipeout>
+        <View style={styles.liContainer}>
+          <Swipeout btns={btnsDefault}>
+            <Listitem text="Basic example"/>
+          </Swipeout>
+          <Swipeout btns={btnsOnPress}>
+            <Listitem text="onPress callback"/>
+          </Swipeout>
+          <Swipeout btns={btnsTypes}>
+            <Listitem text="Button types"/>
+          </Swipeout>
+          <Swipeout btns={btnsCustomStyles}>
+            <Listitem text="Custom button background and text color"/>
+          </Swipeout>
+          <Swipeout btns={btnsDefault} backgroundColor="#006fff">
+            <Listitem text="Custom background color (drag me far)"/>
+          </Swipeout>
+          <Swipeout btns={btnsDefault} autoClose={true}>
+            <Listitem text="autoClose={true}"/>
+          </Swipeout>
+          <Swipeout btns={btnsFive} autoClose={true}>
+            <Listitem text="Five buttons (full-width) and autoClose={true}"/>
+          </Swipeout>
+        </View>
       </View>
@@ -46,24 +94,38 @@ );
 
+var Listitem = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.li}>
+        <Text style={styles.liText}>{this.props.text}</Text>
+      </View>
+    );
+  }
+});
+
 var styles = StyleSheet.create({
-  swipeoutContent: {
-    backgroundColor: '#FFFFFF',
+  container: {
+    alignItems: 'center',
+    backgroundColor: '#f2f2f2',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  li: {
+    backgroundColor: '#fff',
     borderBottomColor: '#eee',
     borderColor: 'transparent',
     borderWidth: 1,
-    flex: 1,
-    padding: 16,
+    paddingLeft: 16,
     paddingTop: 14,
+    paddingBottom: 16,
   },
-  swipeoutContentText: {
+  liContainer: {
+    flex: 1,
+  },
+  liText: {
+    color: '#333',
     fontSize: 16,
   },
-  container: {
-    alignItems: 'center',
-    backgroundColor: '#f2f2f2',
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
 });
 
 AppRegistry.registerComponent('swipeoutExample', () => swipeoutExample);

index.js

@@ -102,3 +102,3 @@ var React = require('react-native')
     var openX = -1*(contentWidth*0.33)
-    var expose = posX < openX
+    var expose = posX < openX || posX < btnsWidth
     if (this.state.exposed) var expose = posX+openX < openX
@@ -105,0 +105,0 @@

package.json

 {
   "name": "react-native-swipeout",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "iOS-style swipeout buttons behind component",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

62995

increased by2.36%

Lines of code

387

increased by18.71%

No dependency changes