Updating the example

pritishvaidya · Jan 3, 2019 · 565ba64 · 565ba64
1 parent 0f351c1
commit 565ba64
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 25 deletions.
diff --git a/example/App.js b/example/App.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import {
   StyleSheet,
-  ScrollView,
+  View,
   TextInput,
 } from 'react-native';
 
@@ -26,56 +26,167 @@ const styles = StyleSheet.create({
   },
 });
 
-export default class App extends Component {
-  state = {
-    password: '',
+class PasswordInputBar extends Component {
+  onChange = (password, score, { label, labelColor, activeBarColor }) => {
+    console.log(password, score, { label, labelColor, activeBarColor });
   }
 
-  onChange = password => this.setState({ password })
-
   render() {
-    const { password } = this.state;
     return (
-      <ScrollView contentContainerStyle={styles.container}>
+      <View style={styles.container}>
         <RNPasswordStrengthMeter
           onChangeText={this.onChange}
           meterType="bar"
-          containerWrapperStyle={{ marginTop: 20 }}
         />
+      </View>
+    );
+  }
+}
+
+class PasswordInputBox extends Component {
+  onChange = (password, score, { label, labelColor, activeBarColor }) => {
+    console.log(password, score, { label, labelColor, activeBarColor });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
         <RNPasswordStrengthMeter
           onChangeText={this.onChange}
           meterType="box"
-          containerWrapperStyle={{ marginTop: 20 }}
         />
+      </View>
+    );
+  }
+}
+
+class PasswordInputCircle extends Component {
+  onChange = (password, score, { label, labelColor, activeBarColor }) => {
+    console.log(password, score, { label, labelColor, activeBarColor });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
         <RNPasswordStrengthMeter
           onChangeText={this.onChange}
-          meterType="text"
-          containerWrapperStyle={{ marginTop: 20 }}
+          meterType="circle"
         />
+      </View>
+    );
+  }
+}
+
+class PasswordInputText extends Component {
+  onChange = (password, score, { label, labelColor, activeBarColor }) => {
+    console.log(password, score, { label, labelColor, activeBarColor });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
         <RNPasswordStrengthMeter
           onChangeText={this.onChange}
-          meterType="circle"
-          containerWrapperStyle={{ marginTop: 20 }}
+          meterType="text"
         />
+      </View>
+    );
+  }
+}
+
+class BarComponent extends Component {
+  state = {
+    password: '',
+  }
+
+  onChange = password => this.setState({ password })
 
+  render() {
+    const { password } = this.state;
+    return (
+      <View style={styles.container}>
         <TextInput style={styles.textInput} onChangeText={this.onChange} />
         <BarPasswordStrengthDisplay
           password={password}
-          wrapperStyle={{ marginTop: 30 }}
         />
+      </View>
+    );
+  }
+}
+
+class BoxComponent extends Component {
+  state = {
+    password: '',
+  }
+
+  onChange = password => this.setState({ password })
+
+  render() {
+    const { password } = this.state;
+    return (
+      <View style={styles.container}>
+        <TextInput style={styles.textInput} onChangeText={this.onChange} />
         <BoxPasswordStrengthDisplay
           password={password}
-          wrapperStyle={{ marginTop: 30 }}
         />
-        <CircularPasswordStrengthDisplay
+      </View>
+    );
+  }
+}
+
+class TextComponent extends Component {
+  state = {
+    password: '',
+  }
+
+  onChange = password => this.setState({ password })
+
+  render() {
+    const { password } = this.state;
+    return (
+      <View style={styles.container}>
+        <TextInput style={styles.textInput} onChangeText={this.onChange} />
+        <TextPasswordStrengthDisplay
           password={password}
-          wrapperStyle={{ marginTop: 30 }}
         />
-        <TextPasswordStrengthDisplay
+      </View>
+    );
+  }
+}
+
+class CircleComponent extends Component {
+  state = {
+    password: '',
+  }
+
+  onChange = password => this.setState({ password })
+
+  render() {
+    const { password } = this.state;
+    return (
+      <View style={styles.container}>
+        <TextInput style={styles.textInput} onChangeText={this.onChange} />
+        <CircularPasswordStrengthDisplay
           password={password}
-          wrapperStyle={{ marginTop: 30 }}
         />
-      </ScrollView>
+      </View>
+    );
+  }
+}
+
+export default class App extends Component {
+  onChange = (password, score, { label, labelColor, activeBarColor }) => {
+    console.log(password, score, { label, labelColor, activeBarColor });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <RNPasswordStrengthMeter
+          onChangeText={this.onChange}
+          meterType="text"
+        />
+      </View>
     );
   }
 }
diff --git a/example/package.json b/example/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "16.6.3",
     "react-native": "0.57.8",
-    "react-native-password-strength-meter": "file:.yalc/react-native-password-strength-meter"
+    "react-native-password-strength-meter": "*"
   },
   "devDependencies": {
     "babel-jest": "23.6.0",

diff --git a/src/components/box-password-strength-display.js b/src/components/box-password-strength-display.js
@@ -60,6 +60,7 @@ class BoxPasswordStrengthDisplay extends Component {
             }
             return (
               <View
+                key={label.label}
                 style={[style.boxContainer,
                   boxContainerStyle,
                   { backgroundColor: boxColor, width: levelWidth, marginHorizontal: boxSpacing },

diff --git a/src/components/circular-password-strength-display.js b/src/components/circular-password-strength-display.js
@@ -14,7 +14,6 @@ function CircularPasswordStrengthDisplay({
   minLength,
   scoreLimit,
   variations,
-  minValue,
   easeDuration,
   levels,
   needleImage,
@@ -37,7 +36,6 @@ function CircularPasswordStrengthDisplay({
     <RNSpeedometer
       value={score}
       labels={convertedLevels}
-      minValue={minValue}
       maxValue={scoreLimit}
       easeDuration={easeDuration}
       needleImage={needleImage}
@@ -59,7 +57,6 @@ CircularPasswordStrengthDisplay.propTypes = {
   password: PropTypes.string.isRequired,
   labelVisible: PropTypes.bool,
   minLength: PropTypes.number,
-  minValue: PropTypes.number,
   variations: PropTypes.object,
   scoreLimit: PropTypes.number,
   easeDuration: PropTypes.number,