Merge pull request jarden-digital#167 from omorkved/toggleAlphabetOnP…

…INPad

Feature: Toggle English alphabet appearing on PIN pad

README.md

@@ -98,6 +98,7 @@ await resetPinCodeInternalStates()
 
 | Key | Description | Default | Required | Type |
 |---|---|---|---|---|
+|**`alphabetCharsVisible`**|Boolean to hide/show English alphabet on PIN panel|`false`|`false`|`boolean`|
 |**`bottomLeftComponent`**|Component to replace the empty space at the bottom left of the numpad|Empty space|`false`|`any`|
 |**`buttonComponentLockedPage`**|Button component to be used at the bottom of the page on the locked application page|TouchableOpacity exit button killing the application|`false`|`any`|
 |**`buttonDeleteComponent`**|Button component to be used at the bottom right of the PIN panel to delete a previous entry|TouchableHighlight button with a `delete` text and the `backspace` material icon|`false`|`any`|
@@ -166,6 +167,7 @@ await resetPinCodeInternalStates()
 |**`colorPasswordEmpty`**|Color of the dots used for the password component when small|`turquoise`|`string`|
 |**`colorPasswordError`**|Color of the dots used for the password component on error state|`#9DAFC8`|`string`|
 |**`numbersButtonOverlayColor`**|Color of the PIN panel buttons when `highlighted`|`turquoise`|`string`|
+|**`styleAlphabet`**|Text of English letters on PIN panel. (First, set `alphabetCharsVisible={true}`)|`fontSize: grid.unit/2, fontWeight: "300"`|`StyleProp<TextStyle>`|
 |**`styleMainContainer`**|Main container of index file|`flex: 1, justifyContent: 'center', alignItems: 'center'`|`StyleProp<ViewStyle>`|
 |**`stylePinCodeChooseContainer`**|Main container of PinCodeChoose file|`flex: 1, justifyContent: 'center', alignItems: 'center'`|`StyleProp<ViewStyle>`|
 |**`stylePinCodeEnterContainer`**|Main container of PinCodeEnter file|`flex: 1, justifyContent: 'center', alignItems: 'center'`|`StyleProp<ViewStyle>`|

dist/index.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { PinResultStatus } from "./src/utils";
 import * as React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 export declare type IProps = {
+    alphabetCharsVisible?: boolean;
     bottomLeftComponent?: any;
     buttonComponentLockedPage?: any;
     buttonDeleteComponent?: any;
@@ -35,6 +37,7 @@ export declare type IProps = {
     status: "choose" | "enter" | "locked";
     storedPin?: string;
     storePin?: any;
+    styleAlphabet?: StyleProp<TextStyle>;
     styleMainContainer?: StyleProp<ViewStyle>;
     stylePinCodeChooseContainer?: StyleProp<ViewStyle>;
     stylePinCodeEnterContainer?: StyleProp<ViewStyle>;
@@ -115,10 +118,10 @@ declare class PINCode extends React.PureComponent<IProps, IState> {
     static defaultProps: Partial<IProps>;
     constructor(props: IProps);
     changeInternalStatus: (status: PinResultStatus) => void;
-    renderLockedPage: () => any;
-    render(): any;
+    renderLockedPage: () => JSX.Element;
+    render(): JSX.Element;
 }
-export declare function hasUserSetPinCode(serviceName?: string): Promise<any>;
-export declare function deleteUserPinCode(serviceName?: string): Promise<any>;
-export declare function resetPinCodeInternalStates(pinAttempsStorageName?: string, timePinLockedStorageName?: string): Promise<any>;
+export declare function hasUserSetPinCode(serviceName?: string): Promise<boolean>;
+export declare function deleteUserPinCode(serviceName?: string): Promise<void>;
+export declare function resetPinCodeInternalStates(pinAttempsStorageName?: string, timePinLockedStorageName?: string): Promise<void>;
 export default PINCode;

dist/src/ApplicationLocked.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PinResultStatus } from "./utils";
 import * as React from "react";
 export declare type IProps = {
@@ -40,11 +41,11 @@ declare class ApplicationLocked extends React.PureComponent<IProps, IState> {
     componentDidMount(): void;
     timer(): Promise<void>;
     componentWillUnmount(): void;
-    renderButton: () => any;
-    renderTimer: (minutes: number, seconds: number) => any;
-    renderTitle: () => any;
-    renderIcon: () => any;
-    renderErrorLocked: () => any;
-    render(): any;
+    renderButton: () => JSX.Element;
+    renderTimer: (minutes: number, seconds: number) => JSX.Element;
+    renderTitle: () => JSX.Element;
+    renderIcon: () => JSX.Element;
+    renderErrorLocked: () => JSX.Element;
+    render(): JSX.Element;
 }
 export default ApplicationLocked;

dist/src/PinCode.d.ts

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 import * as React from "react";
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 /**
  * Pin Code Component
  */
 export interface IProps {
+    alphabetCharsVisible?: boolean;
     buttonDeleteComponent?: any;
     buttonDeleteText?: string;
     buttonNumberComponent?: any;
@@ -26,6 +28,7 @@ export interface IProps {
     previousPin?: string;
     sentenceTitle: string;
     status: PinStatus;
+    styleAlphabet?: StyleProp<TextStyle>;
     styleButtonCircle?: StyleProp<ViewStyle>;
     styleCircleHiddenPassword?: StyleProp<ViewStyle>;
     styleCircleSizeEmpty?: number;
@@ -79,7 +82,7 @@ export interface IState {
 export declare enum PinStatus {
     choose = "choose",
     confirm = "confirm",
-    enter = "enter"
+    enter = "enter",
 }
 declare class PinCode extends React.PureComponent<IProps, IState> {
     static defaultProps: Partial<IProps>;
@@ -91,14 +94,14 @@ declare class PinCode extends React.PureComponent<IProps, IState> {
     failedAttempt: () => Promise<void>;
     newAttempt: () => Promise<void>;
     onPressButtonNumber: (text: string) => Promise<void>;
-    renderButtonNumber: (text: string) => any;
+    renderButtonNumber: (text: string) => JSX.Element;
     endProcess: (pwd: string) => void;
     doShake(): Promise<void>;
     showError(isErrorValidation?: boolean): Promise<void>;
-    renderCirclePassword: () => any;
-    renderButtonDelete: (opacity: number) => any;
-    renderTitle: (colorTitle: string, opacityTitle: number, attemptFailed?: boolean, showError?: boolean) => any;
-    renderSubtitle: (colorTitle: string, opacityTitle: number, attemptFailed?: boolean, showError?: boolean) => any;
-    render(): any;
+    renderCirclePassword: () => JSX.Element;
+    renderButtonDelete: (opacity: number) => JSX.Element;
+    renderTitle: (colorTitle: string, opacityTitle: number, attemptFailed?: boolean, showError?: boolean) => JSX.Element;
+    renderSubtitle: (colorTitle: string, opacityTitle: number, attemptFailed?: boolean, showError?: boolean) => JSX.Element;
+    render(): JSX.Element;
 }
 export default PinCode;

dist/src/PinCode.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PinStatus = void 0;
 const delay_1 = require("./delay");
 const colors_1 = require("./design/colors");
 const grid_1 = require("./design/grid");
@@ -75,6 +74,18 @@ class PinCode extends React.PureComponent {
             }
         };
         this.renderButtonNumber = (text) => {
+            let alphanumericMap = new Map([
+                ["1", " "],
+                ["2", "ABC"],
+                ["3", "DEF"],
+                ["4", "GHI"],
+                ["5", "JKL"],
+                ["6", "MNO"],
+                ["7", "PQRS"],
+                ["8", "TUV"],
+                ["9", "WXYZ"],
+                ["0", " "]
+            ]);
             const disabled = (this.state.password.length === this.props.passwordLength ||
                 this.state.showError) &&
                 !this.state.attemptFailed;
@@ -92,16 +103,28 @@ class PinCode extends React.PureComponent {
                 ], underlayColor: this.props.numbersButtonOverlayColor, disabled: disabled, onShowUnderlay: () => this.setState({ textButtonSelected: text }), onHideUnderlay: () => this.setState({ textButtonSelected: "" }), onPress: () => {
                     this.onPressButtonNumber(text);
                 }, accessible: true, accessibilityLabel: text },
-                React.createElement(react_native_1.Text, { style: [
-                        styles.text,
-                        this.props.styleTextButton,
-                        {
-                            opacity: opacity,
-                            color: this.state.textButtonSelected === text
-                                ? this.props.styleColorButtonTitleSelected
-                                : this.props.styleColorButtonTitle
-                        }
-                    ] }, text)))));
+                React.createElement(react_native_1.View, null,
+                    React.createElement(react_native_1.Text, { style: [
+                            styles.text,
+                            this.props.styleTextButton,
+                            {
+                                opacity: opacity,
+                                color: this.state.textButtonSelected === text
+                                    ? this.props.styleColorButtonTitleSelected
+                                    : this.props.styleColorButtonTitle
+                            }
+                        ] }, text),
+                    ((this.props.alphabetCharsVisible) &&
+                        React.createElement(react_native_1.Text, { style: [
+                                styles.tinytext,
+                                this.props.styleAlphabet,
+                                {
+                                    opacity: opacity,
+                                    color: this.state.textButtonSelected === text
+                                        ? this.props.styleColorButtonTitleSelected
+                                        : this.props.styleColorButtonTitle
+                                }
+                            ] }, alphanumericMap.get(text))))))));
         };
         this.endProcess = (pwd) => {
             setTimeout(() => {
@@ -418,6 +441,7 @@ class PinCode extends React.PureComponent {
     }
 }
 PinCode.defaultProps = {
+    alphabetCharsVisible: false,
     styleButtonCircle: null,
     colorCircleButtons: "rgb(242, 245, 251)",
     styleDeleteButtonColorHideUnderlay: "rgb(211, 213, 218)",
@@ -498,6 +522,10 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: grid_1.grid.unit * 2,
         fontWeight: "200"
     },
+    tinytext: {
+        fontSize: grid_1.grid.unit / 2,
+        fontWeight: "300"
+    },
     buttonCircle: {
         alignItems: "center",
         justifyContent: "center",

dist/src/PinCodeChoose.d.ts

@@ -1,10 +1,12 @@
+/// <reference types="react" />
 import { PinStatus } from './PinCode';
 import * as React from 'react';
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 /**
  * Pin Code Choose PIN Page
  */
 export interface IProps {
+    alphabetCharsVisible?: boolean;
     buttonDeleteComponent: any;
     buttonDeleteText?: string;
     buttonNumberComponent: any;
@@ -23,6 +25,7 @@ export interface IProps {
     pinCodeKeychainName: string;
     pinCodeVisible?: boolean;
     storePin: any;
+    styleAlphabet?: StyleProp<TextStyle>;
     styleButtonCircle?: StyleProp<ViewStyle>;
     styleCircleHiddenPassword?: StyleProp<ViewStyle>;
     styleCircleSizeEmpty?: number;
@@ -75,6 +78,6 @@ declare class PinCodeChoose extends React.PureComponent<IProps, IState> {
     endProcessCreation: (pinCode: string, isErrorValidation?: boolean) => void;
     endProcessConfirm: (pinCode: string) => Promise<void>;
     cancelConfirm: () => void;
-    render(): any;
+    render(): JSX.Element;
 }
 export default PinCodeChoose;