Add value param, enable clear value, and fixes maxLength when input is number type

Author: kbardi

package.json

@@ -11,6 +11,7 @@
     "demo:prod": "webpack --mode production",
     "format": "prettier --write '**/*.{js,jsx}'",
     "lint": "eslint '**/*.{js,jsx}' --quiet",
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx}'",
     "prepublish": "npm run build",
     "predeploy": "npm run demo:prod",
     "deploy": "gh-pages -d demo"

src/demo/index.jsx

@@ -24,6 +24,10 @@ class Demo extends Component {
     this.setState({ [e.target.name]: e.target.value });
   };
 
+  clearOtp = () => {
+    this.setState({ otp: '' });
+  };
+
   handleCheck = e => {
     const { name } = e.target;
     this.setState(prevState => ({ [name]: !prevState[name] }));
@@ -70,6 +74,19 @@ class Demo extends Component {
               />
             </label>
           </div>
+          <div className="side-bar__segment">
+            <label htmlFor="value">
+              value
+              <input
+                id="value"
+                maxLength={numInputs}
+                name="otp"
+                type="text"
+                value={otp}
+                onChange={this.handleChange}
+              />
+            </label>
+          </div>
           <div className="side-bar__segment">
             <label htmlFor="disabled">
               <input
@@ -134,14 +151,24 @@ class Demo extends Component {
                   separator={<span>{separator}</span>}
                   isInputNum={isInputNum}
                   shouldAutoFocus
+                  value={otp}
                 />
               </div>
-              <button
-                className="btn margin-top--large"
-                disabled={otp.length < numInputs}
-              >
-                Get OTP
-              </button>
+              <div className="btn-row">
+                <button
+                  className="btn margin-top--large"
+                  type="button"
+                  onClick={this.clearOtp}
+                >
+                  Clear
+                </button>
+                <button
+                  className="btn margin-top--large"
+                  disabled={otp.length < numInputs}
+                >
+                  Get OTP
+                </button>
+              </div>
             </form>
           </div>
         </div>

src/demo/styles.css

@@ -82,13 +82,19 @@ a {
   align-items: center;
 }
 
+.btn-row {
+  display: flex;
+  flex-direction: row;
+}
+
 .btn {
   background-color: #3273dc;
   border: none;
   padding: 0.5rem 1rem;
   color: white;
   border-radius: 4px;
   cursor: pointer;
+  margin: 1rem;
 }
 
 .btn:disabled {
@@ -110,4 +116,4 @@ a {
 
 .error {
   border: 1px solid red !important;
-}
+}

src/lib/index.jsx

@@ -20,6 +20,7 @@ type Props = {
   errorStyle?: Object,
   shouldAutoFocus?: boolean,
   isInputNum?: boolean,
+  value?: string,
 };
 
 type State = {
@@ -123,28 +124,30 @@ class OtpInput extends Component<Props, State> {
     onChange: (otp: number): void => console.log(otp),
     isDisabled: false,
     shouldAutoFocus: false,
+    value: '',
   };
 
   state = {
     activeInput: 0,
-    otp: [],
   };
 
+  getOtpValue = () => (
+    this.props.value ? this.props.value.toString().split('') : []
+  );
+
   // Helper to return OTP from input
-  getOtp = () => {
+  handleOtpChange = (otp: string[]) => {
     const { onChange, isInputNum } = this.props;
-    const otp = this.state.otp.join('');
-    onChange(isInputNum ? Number(otp) : otp);
+    const otpValue = otp.join('');
+    onChange(isInputNum ? Number(otpValue) : otpValue);
   };
 
   // Focus on input by index
   focusInput = (input: number) => {
     const { numInputs } = this.props;
     const activeInput = Math.max(Math.min(numInputs - 1, input), 0);
 
-    this.setState({
-      activeInput,
-    });
+    this.setState({ activeInput });
   };
 
   // Focus on next input
@@ -161,20 +164,19 @@ class OtpInput extends Component<Props, State> {
 
   // Change OTP value at focused input
   changeCodeAtFocus = (value: string) => {
-    const { activeInput, otp } = this.state;
+    const { activeInput } = this.state;
+    const otp = this.getOtpValue();
     otp[activeInput] = value[0];
 
-    this.setState({
-      otp,
-    });
-    this.getOtp();
+    this.handleOtpChange(otp);
   };
 
   // Handle pasted OTP
   handleOnPaste = (e: Object) => {
     e.preventDefault();
     const { numInputs } = this.props;
-    const { activeInput, otp } = this.state;
+    const { activeInput } = this.state;
+    const otp = this.getOtpValue();
 
     // Get pastedData in an array of max size (num of inputs - current position)
     const pastedData = e.clipboardData
@@ -189,11 +191,7 @@ class OtpInput extends Component<Props, State> {
       }
     }
 
-    this.setState({
-      otp,
-    });
-
-    this.getOtp();
+    this.handleOtpChange(otp);
   };
 
   handleOnChange = (e: Object) => {
@@ -203,31 +201,31 @@ class OtpInput extends Component<Props, State> {
 
   // Handle cases of backspace, delete, left arrow, right arrow
   handleOnKeyDown = (e: Object) => {
-    switch (e.keyCode) {
-      case BACKSPACE:
-        e.preventDefault();
-        this.changeCodeAtFocus('');
-        this.focusPrevInput();
-        break;
-      case DELETE:
-        e.preventDefault();
-        this.changeCodeAtFocus('');
-        break;
-      case LEFT_ARROW:
-        e.preventDefault();
-        this.focusPrevInput();
-        break;
-      case RIGHT_ARROW:
-        e.preventDefault();
-        this.focusNextInput();
-        break;
-      default:
-        break;
+    if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+      e.preventDefault();
+      this.changeCodeAtFocus('');
+      this.focusPrevInput();
+    } else if (e.keyCode === DELETE || e.key === 'Delete') {
+      e.preventDefault();
+      this.changeCodeAtFocus('');
+    } else if (e.keyCode === LEFT_ARROW || e.key === 'ArrowLeft') {
+      e.preventDefault();
+      this.focusPrevInput();
+    } else if (e.keyCode === RIGHT_ARROW || e.key === 'ArrowRight') {
+      e.preventDefault();
+      this.focusNextInput();
     }
   };
 
+  checkLength = (e: Object) => {
+    if (e.target.value.length > 1) {
+      e.preventDefault();
+      this.focusNextInput();
+    }
+  }
+
   renderInputs = () => {
-    const { activeInput, otp } = this.state;
+    const { activeInput } = this.state;
     const {
       numInputs,
       inputStyle,
@@ -240,6 +238,7 @@ class OtpInput extends Component<Props, State> {
       shouldAutoFocus,
       isInputNum,
     } = this.props;
+    const otp = this.getOtpValue();
     const inputs = [];
 
     for (let i = 0; i < numInputs; i++) {
@@ -250,11 +249,10 @@ class OtpInput extends Component<Props, State> {
           value={otp && otp[i]}
           onChange={this.handleOnChange}
           onKeyDown={this.handleOnKeyDown}
+          onInput={this.checkLength}
           onPaste={this.handleOnPaste}
           onFocus={e => {
-            this.setState({
-              activeInput: i,
-            });
+            this.setState({ activeInput: i });
             e.target.select();
           }}
           onBlur={() => this.setState({ activeInput: -1 })}