[pull] master from Twotalltotems:master

.github/workflows/npmpublish.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Release NPM Package
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm install && npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm install
+      - run: npm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Tests
+
+on:
+    push:
+      branches: 
+        - master
+    pull_request:
+      branches:
+        - master
+
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    container:
+      image: node:13.4.0
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Run Jest
+      uses: stefanoeb/jest-action@1.0.2
+    - name: Run Unit Test
+      run: npm install && npm test
+

.gitignore

@@ -56,3 +56,6 @@ buck-out/
 # Environment file
 .env
 ReactotronConfig.js
+
+# ts build dir
+dist

CONTRIBUTING.md

@@ -0,0 +1,32 @@
+# Introduction
+
+Thank you for considering contributing to `@twotalltotems/react-native-otp-input`. It's people like you that make the library better.
+
+# Ways to Contribute
+
+There are many ways to contribute, from writing tutorials or blog posts, improving the documentation, submitting bug reports and feature requests or writing code which can be incorporated into the library.
+
+
+# Your First Contribution
+If you decided to look into a pending issue, hope the guideline below can help you start.
+
+>1. Create your own fork of the code
+>2. Do the changes in your fork
+>3. If you like the change and think the project could use it: 
+	* Be sure you have followed the code style for the project.
+	* Well test your changes and add unit tests if necessary. 
+	* Be sure to run `npm test` before submitting a pull request. This would help us maintain the compatablity of the library. 
+>4. Send a pull request. 
+
+# Code review process
+The development team in TTT Studios looks at Pull Requests on a regular basis. Depends on the PR reviewed, we might reach out with some feedback or clarification. 
+
+After feedback/clarification has been given we expect responses within two weeks. After two weeks we may close the pull request if it isn't showing any activity.
+
+TTT Studios appreaciate your interest and effort in contributing to the library. Look forward to your great Pull Requests!
+
+
+
+
+
+

README.md

@@ -1,24 +1,55 @@
 ![PaginatableList](https://raw.githubusercontent.com/Twotalltotems/react-native-otp-input/master/assets/otp_banner.jpg)
+
 # React Native OTP Input
 
+![Tests](https://github.com/Twotalltotems/react-native-otp-input/workflows/Tests/badge.svg)
+
 **@twotalltotems/react-native-otp-input** is a tiny Javascript library which provides an elegant UI for the end user to input one time passcode (OTP). It handles the input suggestion on iOS when the OTP SMS is received. For Android, it will autofill when the user presses the copy button on the SMS notification bar. It also features a carefully crafted flow to handle edge cases for volatile user gestures. We provide default UI, but you can always customize the appearance as you like.
 
 ![demo.gif](https://s3.ca-central-1.amazonaws.com/tttevents/iosvideo.gif)
 ![demo.gif](https://s3.ca-central-1.amazonaws.com/tttevents/android.gif)
 
+## Project Status
+This project is not actively maintained anymore. If you’d like to contribute, we encourage you to fork this repository and improve it for the community.
+
+Here are some alternatives you could try:
+
+- [react-native-otp-inputs](https://www.npmjs.com/package/react-native-otp-inputs)
+- [react-native-otp-textinput](https://www.npmjs.com/package/react-native-otp-textinput)
+
 ## Installation
+
 `npm install --save @twotalltotems/react-native-otp-input`
 or
 `yarn add @twotalltotems/react-native-otp-input`
 
 ## Dependencies
-It does not have additional dependencies except for React Native itself.
+
+### NOTES: 
+From version 1.3.10: We use @react-native-community/clipboard to handle the clipboard in this package, So you should install @react-native-community/clipboard
+
+`npm install --save @react-native-community/clipboard`
+or
+`yarn add @react-native-community/clipboard`
 
 ## Basic Usage
 
+```js
+import OTPInputView from '@twotalltotems/react-native-otp-input'
+
+...
+
+<OTPInputView pinCount={4} />
+
 ```
+
+## More Advanced Usage
+
+```js
 import OTPInputView from '@twotalltotems/react-native-otp-input'
 
+...
+
 <OTPInputView
     style={{width: '80%', height: 200}}
     pinCount={4}
@@ -27,9 +58,9 @@ import OTPInputView from '@twotalltotems/react-native-otp-input'
     autoFocusOnLoad
     codeInputFieldStyle={styles.underlineStyleBase}
     codeInputHighlightStyle={styles.underlineStyleHighLighted}
-    onCodeFilled = {(code => {
+    onCodeFilled = {(code) => {
         console.log(`Code is ${code}, you are good to go!`)
-    })}
+    }}
 />
 
 const styles = StyleSheet.create({
@@ -58,32 +89,43 @@ const styles = StyleSheet.create({
 
 ## Parameters
 
-| Parameter   | required | Description |
-|-------------|----------|-------------|
-| pinCount    |    YES   |  Number of digits in the component |
-| code        |    NO    |  You can use this library as a controlled / uncontrolled component by supplying this prop or not |
-| codeInputFieldStyle | NO | The style of the input field which is NOT focused |
-| codeInputHighlightStyle | NO | The style of the input field which is focused |
-| autoFocusOnLoad | NO | Auto activate the input and bring up the keyboard when component is loaded |
-| onCodeChanged | NO | Callback when the digits are changed |
-| onCodeFilled | NO | Callback when the last digit is entered |
-| secureTextEntry | NO | Hide contents of text fields |
+| Parameter               | required | Description                                                                                     |
+| ----------------------- | -------- | ----------------------------------------------------------------------------------------------- |
+| pinCount                | YES      | Number of digits in the component                                                               |
+| code                    | NO       | You can use this library as a controlled / uncontrolled component by supplying this prop or not |
+| codeInputFieldStyle     | NO       | The style of the input field which is NOT focused                                               |
+| codeInputHighlightStyle | NO       | The style of the input field which is focused                                                   |
+| autoFocusOnLoad         | NO       | Auto activate the input and bring up the keyboard when component is loaded                      |
+| onCodeChanged           | NO       | Callback when the digits are changed                                                            |
+| onCodeFilled            | NO       | Callback when the last digit is entered                                                         |
+| secureTextEntry         | NO       | Hide contents of text fields                                                                    |
+| editable                | NO       | Set editable for inputs                                                                         |
+| keyboardAppearance      | NO       | Keyboard appearance ('default', 'dark', 'light')                                                |
+| keyboardType            | NO       | Keyboard type                                                                                   |
+| clearInputs             | NO       | Clear inputs after entering code                                                                |
+| placeholderCharacter    | NO       | The character/string that will be used as placeholder in the individual code input fields       |
+| placeholderTextColor    | NO       | Color of the placeholderCharacter                                                               |
 
 ## Notes
-The iOS input suggestion requires React Native 0.58+ and works for iOS 12 and above. 
 
-On Android, it will be auto filled when you press the copy code button in the notification bar (see above GIF). It will do so  only if the code is sent after the view is loaded. So make sure you request the code **AFTER** this view is loaded.
+The iOS input suggestion requires React Native 0.58+ and works for iOS 12 and above.
+
+On Android, it will be auto filled when you press the copy code button in the notification bar (see above GIF). It will do so only if the code is sent after the view is loaded. So make sure you request the code **AFTER** this view is loaded.
 
 If you are interested in Android SMS Retriever API, we would suggest @Faizal's repo [React-Native-OTP-Verify](https://github.com/faizalshap/react-native-otp-verify). It looks pretty cool and it should be straight-forward to use React-Native-OTP-Verify along with this library.
 
 ## Roadmap
-* [ ] Typescript
-* [ ] Add unit tests
+
+- [x] Typescript definition file
+- [x] Typescript implementation
+- [x] Add basic unit tests
+- [ ] Add integration tests
 
 ## Contributors
+
 <table>
     <tr border="0" style="border: none; ">
-	<th border="0" style="border-left: none; border-right: none;">
+	      <th border="0" style="border-left: none; border-right: none;">
         	<img src="https://avatars1.githubusercontent.com/u/1243479?s=400&v=4" width="60px;" style="border-radius: 50%;"/>
         	<br />
         	<sub><a href="https://github.com/ansonyao">Anson Yao</a></sub> <br />
@@ -100,6 +142,11 @@ If you are interested in Android SMS Retriever API, we would suggest @Faizal's r
         	<br />
         	<sub><a href="https://github.com/fpena">Felipe Peña</a></sub> <br />
         </th>
+        <th border="0" style="border-left: none; border-right: none;">
+        	<img src="https://avatars3.githubusercontent.com/u/60905710?s=400&v=4" width="60px;" style="border-radius: 50%;"/>
+        	<br />
+        	<sub><a href="https://github.com/ericdao-ttt">Eric Dao</a></sub> <br />
+        </th>
         <th border="0" style="border-left: none; border-right: none;">
         	<img src="https://avatars3.githubusercontent.com/u/3868329?s=460&v=4" width="60px;" style="border-radius: 50%;"/>
         	<br />
@@ -118,9 +165,23 @@ If you are interested in Android SMS Retriever API, we would suggest @Faizal's r
     </tr>
 </table>
 
-## Premium Support By TTT Studios
+## External Contributors
+
+<table>
+    <tr border="0" style="border: none; ">
+        <th border="0" style="border-left: none; border-right: none;">
+        <div>
+        	<img src="https://avatars2.githubusercontent.com/u/17710983?s=400&v=4" width="60px;" style="border-radius: 50%;"/>
+        	<br />
+        	<sub><a href="https://github.com/mikhailshvets">Mikhail.sh</a></sub> <br />
+        </div>
+        </th>
+    </tr>
+</table>
+
+## About the Creators
 
-OTP input is presented by the mobile team at [TTT Studios](https://ttt.studio). We are a Digital Innovation Studio based out of Vancouver, Canada, delivering custom software and solutions that are designed and developed 100% in-house. The technologies we work with include AR & VR, IoT, AI, security & encryption, and cloud computing.
+OTP input is developed by the mobile team at [TTT Studios](https://ttt.studio). We are a Digital Innovation Studio based out of Vancouver, Canada, delivering custom software and solutions that are designed and developed 100% in-house. The technologies we work with include AR & VR, IoT, AI, security & encryption, and cloud computing.
 
 <div align="right">
 	<img src="https://ttt.studio/wp-content/themes/tttwordpresstheme/imgs/ttt-colour.png" width="200px"/>

__tests__/App.test.js

@@ -0,0 +1,122 @@
+import "react-native"
+import React from 'react'
+import { shallow, mount } from 'enzyme'
+import OTPInputView from '../index'
+import {TextInput} from "react-native"
+
+const setup = (props = {}) => {
+    const wrapper = shallow(<OTPInputView {...props} />)
+    return wrapper
+}
+
+describe('OTPInputView renders correclty.', () => {
+    let shallowWrapper
+    it('OTP container view renders correctly.', () => {
+        shallowWrapper = setup()
+        const otpInputView = shallowWrapper.find({ testID: 'OTPInputView' })
+
+        expect(otpInputView.length).toBe(1)
+    })
+
+    it('Render same amount of input slots as prop `pinCount`', () => {
+        const pinCount = 6
+        shallowWrapper = setup({ pinCount })
+        const inputSlotViews = shallowWrapper.find({ testID: 'inputSlotView' })
+
+        expect(inputSlotViews.length).toBe(pinCount)
+    })
+
+    it('Render the slots initial state as `code` prop.', () => {
+        const code = '123456'
+        const pinCount = code.length
+        const reactWrapper = mount(<OTPInputView code={code} pinCount={pinCount} />)
+        const textInputs = reactWrapper.find({ testID: 'textInput' }).hostNodes()
+        const chars = code.split('')
+
+        textInputs.map((textInput, index) => {
+            expect(textInput.props().value).toBe(chars[index])
+        })
+    })
+})
+
+describe('Highlighted Slot Logic', () => {
+    const pinCount = Math.floor(Math.random() * 50) + 1
+    it('Input in slots to increase selectedIndex state.', () => {
+        const reactWrapper = mount(<OTPInputView pinCount={pinCount} />)
+
+        const componentInstance = reactWrapper.instance()
+        componentInstance.handleChangeText(0, "1")
+
+        expect(reactWrapper.state("selectedIndex")).toBe(1)
+    })
+
+    it('Stop increasing selectedIndex after inputting in the last slot.', () => {
+        const numberCharEntered = Math.floor(Math.random() * 100) + pinCount
+
+        const reactWrapper = mount(<OTPInputView pinCount={pinCount} />)
+
+        const componentInstance = reactWrapper.instance()
+
+        for(i=0; i < numberCharEntered; i++) {
+            componentInstance.handleChangeText(i, "1")
+        }
+
+        expect(reactWrapper.state("selectedIndex")).toBeLessThanOrEqual(pinCount - 1)
+    })
+    it('Press backspace in keyboard to decrease selectedIndex state. ', () => {
+        const numberCharEntered = Math.floor(Math.random() * (pinCount - 1)) + 1
+
+        const reactWrapper = mount(<OTPInputView pinCount={pinCount} />)
+
+        const componentInstance = reactWrapper.instance()
+
+        for(i=0; i < numberCharEntered; i++) {
+            componentInstance.handleChangeText(i, "1")
+        }
+        componentInstance.handleKeyPressTextInput(numberCharEntered, 'Backspace')
+
+        expect(reactWrapper.state("selectedIndex")).toBe(numberCharEntered - 1)
+    })
+    it('Stop decreasing selectedIndex after deleting the text in the first slot.', () => {
+        const reactWrapper = mount(<OTPInputView pinCount={pinCount} />)
+
+        const componentInstance = reactWrapper.instance()
+        componentInstance.handleKeyPressTextInput(0, 'Backspace')
+
+        expect(reactWrapper.state("selectedIndex")).toBe(0)
+    })
+})
+
+describe('Slot Content Change Logic', () => {
+    const pinCount = Math.floor(Math.random() * 50) + 1
+    it('handleChangeText is called with proper index and text param after making content change to a slot.', () => {
+        const reactWrapper = mount(<OTPInputView pinCount={pinCount} />)
+        const componentInstance = reactWrapper.instance()
+
+        const textParam = "1"
+        componentInstance.handleChangeText(0, textParam)
+
+        reactWrapper.update()
+
+        const textInput = reactWrapper.find(TextInput).at(0)
+        expect(textInput.props().value).toBe(textParam)
+
+    })
+
+    it('Enter required digits of code triggers onCodeFilled callback method with code string.', () => {
+        const onCodeFilled = jest.fn()
+
+        let passCode = ""
+
+        const reactWrapper = mount(<OTPInputView pinCount={pinCount} onCodeFilled={onCodeFilled} />)
+        const componentInstance = reactWrapper.instance()
+        for(i=0; i < pinCount; i++) {
+            componentInstance.handleChangeText(i, "1")
+            passCode += "1"
+        }
+
+        expect(onCodeFilled).toHaveBeenCalledWith(passCode)
+    })
+
+})
+