react-native-smart-gesture-password-angeloslex - npm Package Compare versions

Comparing version 2.1.5 to 2.1.6

GesturePassword.js

@@ -9,3 +9,3 @@ /*
 import React, { Component } from "react";
-import { PanResponder, Dimensions, StyleSheet, View, Text } from "react-native";
+import { PanResponder, Dimensions, StyleSheet, View } from "react-native";
 import PropTypes from "prop-types";
@@ -22,7 +22,9 @@ import * as Utils from "./Utils";
     flex: 1,
-    overflow: "hidden"
+    overflow: "hidden",
+    justifyContent:"center",
+     alignItems:"center"
   }
 });
 
-const { width: deviceWidth, height: deviceHeight } = Dimensions.get("window");
+const { width: deviceWidth } = Dimensions.get("window");
 
@@ -41,10 +43,10 @@ export default class GesturePassword extends Component {
     showArrow: true,
-    allowCross: true
+    allowCross: true,
+    marginStart: 0,
+    marginTop: 0
   };
 
-  // 构造
+  
   constructor(props) {
     super(props);
-
-    // 初始状态
     this.state = {
@@ -57,4 +59,3 @@ isWarning: false,
 
-    this._gestureAreaMarginHorizontal =
-      (deviceWidth - props.gestureAreaLength) / 2;
+    this._gestureAreaMarginHorizontal = (deviceWidth - props.gestureAreaLength) / 2;
     this._gestureAreaLeft = 0;
@@ -67,5 +68,2 @@ this._gestureAreaTop = 0;
     this._sequence = [];
-  }
-
-  componentWillMount() {
     this._panResponder = PanResponder.create({
@@ -81,6 +79,8 @@ onStartShouldSetPanResponder: () => true,
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      isWarning: nextProps.isWarning
-    });
+  componentDidUpdate(nextProps) {
+    if (nextProps.isWarning != this.props.isWarning) {
+      this.setState({
+        isWarning: nextProps.isWarning
+      });
+    }
   }
@@ -119,4 +119,4 @@
   _onLayout = e => {
-    this._gestureAreaLeft = e.nativeEvent.layout.x;
-    this._gestureAreaTop = e.nativeEvent.layout.y;
+    this._gestureAreaLeft = e.nativeEvent.layout.x + this.props.marginStart;
+    this._gestureAreaTop = e.nativeEvent.layout.y + this.props.marginTop;
     this._initializePoints();
@@ -230,3 +230,2 @@ };
   _addSequence(index) {
-    //if (~this._sequence.findIndex((item) => item === index)) {
     if (this._sequence.includes(index)) {
@@ -241,5 +240,3 @@ return;
     let arrows = this.state.arrows;
-    this.setState({
-      arrows
-    });
+    this.setState({ arrows });
   }
@@ -250,5 +247,3 @@
     let lines = this.state.lines;
-    this.setState({
-      lines
-    });
+    this.setState({ lines });
   }
@@ -261,5 +256,3 @@
     let lines = this.state.lines;
-    this.setState({
-      lines
-    });
+    this.setState({ lines });
   }
@@ -269,5 +262,3 @@
     point.isActive = true;
-    this.setState({
-      points: this.state.points
-    });
+    this.setState({ points: this.state.points });
   }
@@ -433,2 +424,4 @@
   warningColor: PropTypes.string,
+  marginStart: PropTypes.number,
+  marginTop: PropTypes.number,
   warningDuration: PropTypes.number,
@@ -435,0 +428,0 @@ topComponent: PropTypes.element,

package.json

 {
   "name": "react-native-smart-gesture-password-angeloslex",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "A smart gesture password locker for react-native apps",
@@ -5,0 +5,0 @@ "main": "GesturePassword.js",

README.md

@@ -182,2 +182,5 @@ # react-native-smart-gesture-password
 }
+
+// In case you want to render the password in a dialog, then you need to calculate the x and y of this dialog's outer view. So, on the view that contains this gesturePassword view (the dialogView), implement onLayout and set the event's y to marginTop prop and event's x to marginStart prop, so that the touches are correctly handled
+
 ```
@@ -184,0 +187,0 @@

No alert changes

Improved metrics

Total package byte prevSize

32063

increased by1.27%

Number of lines in readme file

210

increased by1.45%

Worsened metrics

Lines of code

724

decreased by-0.82%

No dependency changes