react-native-confirmation-code-field - npm Package Compare versions

Comparing version 3.6.0 to 3.7.0

package.json

 {
   "name": "react-native-confirmation-code-field",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "main": "src/components/ConfirmationCodeInput/index.js",
-  "scripts": {
-    "test": "jest",
-    "flow": "flow",
-    "lint": "eslint src ./*.js",
-    "docs": "doctoc docs/API.md",
-    "speller": "yaspeller-ci *.md docs/*.md",
-    "ci": "yarn run test & yarn run flow & yarn run lint & yarn run speller",
-    "prepublishOnly": "yarn run ci"
-  },
   "peerDependencies": {
@@ -19,36 +10,5 @@ "prop-types": ">= 15.0.0",
   },
-  "devDependencies": {
-    "@exeto/eslint-config": "^2.0.0",
-    "@exeto/eslint-config-react": "^3.0.0",
-    "@types/react": "^16.8.13",
-    "@types/react-native": "^0.57.45",
-    "babel-eslint": "^10.0.1",
-    "doctoc": "^1.4.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.12.1",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-flowtype": "^3.6.1",
-    "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.4",
-    "flow-bin": "^0.95.1",
-    "husky": "^1.3.1",
-    "jest": "^24.7.1",
-    "lint-staged": "^8.1.5",
-    "prettier": "^1.17.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-native": "^0.59.6",
-    "yaspeller-ci": "^1.0.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "yarn ci"
-    }
-  },
   "description": "A react-native component to input confirmation code for both Android and IOS",
   "repository": "[e-mail]:retyui/react-native-confirmation-code-input.git",
-  "author": "David Nrb <[e-mail]>",
+  "author": "David undefined (https://github.com/retyui/)",
   "license": "MIT",
@@ -55,0 +15,0 @@ "keywords": [

README.md

 # react-native-confirmation-code-field
 
 [![npm](https://img.shields.io/npm/v/react-native-confirmation-code-field.svg)](https://www.npmjs.com/package/react-native-confirmation-code-field)
+[![npm downloads](https://img.shields.io/npm/dm/react-native-confirmation-code-field.svg)](https://www.npmjs.com/package/react-native-confirmation-code-field)
 [![Travis](https://img.shields.io/travis/retyui/react-native-confirmation-code-field.svg?label=unix)](https://travis-ci.org/retyui/react-native-confirmation-code-field)
@@ -5,0 +6,0 @@

src/components/ConfirmationCodeInput/ConfirmationCodeInput.js

@@ -8,2 +8,3 @@ // @flow
 import Cursor from '../Cursor';
+import MaskSymbol from '../MaskSymbol';
 import Cell from '../Cell';
@@ -72,3 +73,3 @@ import TextInputCustom from '../TextInputCustom';
     const { isFocused } = this.state;
-    const { cellProps, maskSymbol, CellComponent } = this.props;
+    const { cellProps, CellComponent } = this.props;
     const isActive = this.getCurrentIndex() === index;
@@ -96,2 +97,3 @@
         editable={false}
+        // eslint-disable-next-line react/jsx-no-bind
         onLayout={event => this.handlerOnLayoutCell(index, event)}
@@ -103,5 +105,3 @@ style={concatStyles(
       >
-        {isActive
-          ? this.renderCursor()
-          : (codeSymbol && maskSymbol) || codeSymbol}
+        {isActive ? this.renderCursor() : this.renderSymbol(codeSymbol, index)}
       </CellComponent>
@@ -111,2 +111,20 @@ );
 
+  renderSymbol(symbol: string, index: number) {
+    const { maskSymbol } = this.props;
+    const lastIndex = this.getLastIndex();
+
+    if (maskSymbol && symbol) {
+      return (
+        <MaskSymbol
+          isLast={index === lastIndex}
+          delay={500}
+          mask={maskSymbol}
+          symbol={symbol}
+        />
+      );
+    }
+
+    return symbol;
+  }
+
   renderCursor() {
@@ -160,2 +178,6 @@ if (this.state.isFocused) {
 
+  getLastIndex() {
+    return Math.min(this.state.codeValue.length, this.props.codeLength) - 1;
+  }
+
   getCodeSymbols(): Array<string> {
@@ -165,6 +187,6 @@ const { codeLength } = this.props;
 
-    return codeValue
-      .split('')
-      .concat(new Array(codeLength).fill(''))
-      .slice(0, codeLength);
+    return [...codeValue, ...new Array(codeLength).fill('')].slice(
+      0,
+      codeLength,
+    );
   }
@@ -171,0 +193,0 @@

src/components/ConfirmationCodeInput/validation.js

@@ -16,5 +16,3 @@ // @flow
       return new Error(
-        `Invalid prop ${propName} supplied to ${componentName}. Validation failed. ${propName} length  is not equal to "codeLength" (${
-          compareWithCode.length
-        } !== ${codeLength}).`,
+        `Invalid prop ${propName} supplied to ${componentName}. Validation failed. ${propName} length  is not equal to "codeLength" (${compareWithCode.length} !== ${codeLength}).`,
       );
@@ -21,0 +19,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

29315

increased by1.33%

Dev dependency count

0

decreased by-100%

Number of package files

17

increased by6.25%

Lines of code

655

increased by9.17%

Number of lines in readme file

105

increased by0.96%

No dependency changes