Updated pin view

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "vsicons.presets.angular": false
+}

README.md

@@ -1,2 +1,33 @@
 # react-native-pin-keyboard
 Pin entry component for react-native
+
+You can set different options for the `Pin` component.
+
+### Configuration ###
+
+Required options:
+* Pincode (`pinCode`) -  this is the value displayed and modified by the `Pin` component
+* Callback method (`onPinEntered(value)`) - this is called for everytime the use touches the keyboard (except when a digit is pressed and the `pinLength` has been reached)
+
+Optional options:
+* Title (`prompt`) - The title shown above the entered pincode (default: "Enter passcode")
+* Number of digits (`pinLength`) - The length of the key (default: 5)
+* Enable/disable Clear button (`clearVisible`) - (default: true)
+* Enable/disable Delete button (`deleteVisible`) - (default: true)
+
+### Usage ###
+The `pinCode` option is to be maintained by the parent component and it is the parent componts responsibility to implement the desired workflow.
+
+Based on the `pinLength` the `Pin` component will limit the number of digits that can be entered - i.e. when the `pinLength` number of digits are entered you will not get any further updates on changes in the pin until you change the local pin code state of the parent container or the user press `Delete` or `Clear`.
+
+Example (using default values of the component):
+`
+    <Pin
+        prompt="Enter passcode"
+        pinLength={5}
+        clearVisible={true}
+        deleteVisible={true}
+        onPinEntered={(value) => this.setState(pinCode: value)}
+        pinCode={this.state.pinCode}
+    />
+`

index.js

@@ -1,40 +1,66 @@
-import React, {Component, StyleSheet, Text, View} from 'react-native';
+import React, {Component } from 'react';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 
 const styles = StyleSheet.create({
     row: {
-        flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
     },
     pad: {
         flex: 1,
-        margin: 20,
-    },
-    btn: {
-        fontFamily: 'Droid Sans Mono',
-        fontSize: 50,
         justifyContent: 'center',
-        alignItems: 'center',
-        paddingVertical: 10,
-        paddingHorizontal: 35,
-        textAlign: 'center',
+    },
+    headerPad: {
+        margin: 10,
+    },
+    keyPad: {
         margin: 10,
     },
+    btn: {
+        fontFamily: 'Helvetica Light',
+        fontSize: 25,
+        color: 'white',
+    },
+    clearBtn: {
+        fontFamily: 'Helvetica Light',
+        fontSize: 17,
+        color: 'white',
+    },
     header: {
-        fontSize: 30,
-        fontWeight: '500',
+        fontFamily: 'Helvetica Light',
+        fontSize: 15,
+        color: 'white',
+        textAlign: 'center',
+        margin: 10,
     },
     pin: {
-        fontFamily: 'Droid Sans Mono',
-        fontSize: 40,
+        fontSize: 15,
         fontWeight: '500',
+        color: 'white',
+    },
+    circle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: 10,
+        borderRadius: 30,
+        width: 60,
+        height: 60,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.5)',
+    },
+    invisibleCircle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: 10,
+        borderRadius: 30,
+        width: 60,
+        height: 60,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.0)',
     },
-
 });
 
-const MAX_LENGTH = 6;
-
 function makeDots(num) {
     let ret = '';
     while (num > 0) {
@@ -45,72 +71,107 @@ function makeDots(num) {
 }
 
 export default class Pin extends Component {
-    state = {value: ''};
-
-    handleClear() {
-        this.setState({value: ''});
+    static defaultProps = {
+        pinLength: 5,
+        prompt: "Enter passcode",
+        clearVisible: true,
+        deleteVisible: true,
     }
 
     handlePress(num) {
-        let {value} = this.state;
-        value += String(num);
+        const pinLength = this.props.pinLength ? this.props.pinLength : this.defaultProps.pinLength;
+        let pinCode = this.props.pinCode;
 
-        this.setState({value});
+        if (pinCode.length < pinLength) {
+            pinCode += String(num);
 
-        if (value.length == MAX_LENGTH) {
-            this.props.onSubmit(value);
-            this.props.onDone();
+            this.doCallback(pinCode);
         }
     }
 
-    handleRemove() {
-        const {value} = this.state;
-        this.setState({value: value.substr(0, value.length - 1)});
+    doCallback(pincode) {
+        this.props.onPinEntered(pincode);
     }
 
-    renderButton(num) {
-        return (<Text onPress={()=> this.handlePress(num)}
-                      style={styles.btn}>{num}
-        </Text>);
+    doClear() {
+        this.doCallback('');
     }
 
-    render() {
-        const {value} = this.state;
-        const marks = value.replace(/./g, ' ● ');
-        const dots = makeDots(MAX_LENGTH - value.length);
-
-        return (<View style={styles.pad} >
-            <Text style={styles.header} >
-                Enter pin:
-            </Text>
-
-            <View style={styles.row} >
-                <Text style={styles.pin} >{marks}{dots}</Text>
-            </View>
-
-            <View style={styles.row} >
-                {this.renderButton(1)}
-                {this.renderButton(2)}
-                {this.renderButton(3)}
-            </View>
+    doDelete() {
+        const pinCode = this.props.pinCode;
+        this.doCallback(pinCode.substr(0, pinCode.length - 1));
+    }
 
-            <View style={styles.row} >
-                {this.renderButton(4)}
-                {this.renderButton(5)}
-                {this.renderButton(6)}
-            </View>
+    renderButton(num) {
+        return (
+            <TouchableOpacity onPress={()=> this.handlePress(num)} style={styles.circle}>
+                <Text style={styles.btn}>{num}</Text>
+            </TouchableOpacity>
+        );
+    }
 
-            <View style={styles.row} >
-                {this.renderButton(7)}
-                {this.renderButton(8)}
-                {this.renderButton(9)}
-            </View>
+    buildButton(isVisible, text, clickHandler) {
+        if (isVisible) {
+            return <TouchableOpacity style={styles.invisibleCircle} onPress={clickHandler}><Text style={styles.clearBtn}>{text}</Text></TouchableOpacity>;
+        } else {
+            return <TouchableOpacity style={styles.invisibleCircle} />;
+        }
+    }
 
-            <View style={styles.row} >
-                <Text onPress={()=> this.handleClear()} style={styles.btn}>C</Text>
-                {this.renderButton(0)}
-                <Text onPress={()=> this.handleRemove()} style={styles.btn}>{'<'}</Text>
+    render() {
+        // Extract props
+        const pinCode = this.props.pinCode;
+        const pinLength = this.props.pinLength ? this.props.pinLength : this.defaultProps.pinLength;
+        const prompt = this.props.prompt ? this.props.prompt : this.defaultProps.prompt;
+        const clearVisible = this.props.clearVisible ? this.props.clearVisible : this.defaultProps.clearVisible;
+        const deleteVisible = this.props.deleteVisible ? this.props.deleteVisible : this.defaultProps.deleteVisible;
+
+        // Format the pincode for display
+        const marks = pinCode.replace(/./g, ' ● ');
+        const dots = makeDots(pinLength - pinCode.length);
+
+        // Build buttons
+        const clearButton = this.buildButton(clearVisible, "Clear", () => this.doClear());
+        const deleteButton = this.buildButton(deleteVisible, "Delete", () => this.doDelete());
+
+        return (
+            <View style={styles.pad} >
+                <View style={styles.headerPad}>
+                    <Text style={styles.header} >
+                        {prompt}
+                    </Text>
+
+                    <View style={styles.row} >
+                        <Text style={styles.pin} >{marks}{dots}</Text>
+                    </View>
+                </View>
+
+                <View style={styles.keyPad}>
+                    <View style={styles.row} >
+                        {this.renderButton(1)}
+                        {this.renderButton(2)}
+                        {this.renderButton(3)}
+                    </View>
+
+                    <View style={styles.row} >
+                        {this.renderButton(4)}
+                        {this.renderButton(5)}
+                        {this.renderButton(6)}
+                    </View>
+
+                    <View style={styles.row} >
+                        {this.renderButton(7)}
+                        {this.renderButton(8)}
+                        {this.renderButton(9)}
+                    </View>
+
+                    <View style={styles.row} >
+                        {clearButton}
+                        {this.renderButton(0)}
+                        {deleteButton}
+                    </View>
+                </View>
             </View>
-        </View>);
+        );
     }
 }