react-input-code - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/index.js

@@ -7,16 +7,15 @@ var React = require('react');
   var itemClassName = props.itemClassName,
-      value = props.value,
-      _onChange = props.onChange,
-      itemIndex = props.itemIndex,
-      type = props.type,
-      onClickHandler = props.onClickHandler,
-      isFocused = props.isFocused,
-      interactionCounter = props.interactionCounter,
-      autoFocus = props.autoFocus,
-      placeholder = props.placeholder,
-      disabled = props.disabled;
+    value = props.value,
+    _onChange = props.onChange,
+    itemIndex = props.itemIndex,
+    type = props.type,
+    onClickHandler = props.onClickHandler,
+    isFocused = props.isFocused,
+    interactionCounter = props.interactionCounter,
+    autoFocus = props.autoFocus,
+    placeholder = props.placeholder,
+    disabled = props.disabled;
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     var inputEl = inputRef.current;
-
     if (interactionCounter === 0 && !autoFocus) {
@@ -26,3 +25,2 @@ inputEl && inputEl.blur();
     }
-
     if (isFocused) {
@@ -35,7 +33,5 @@ inputEl && inputEl.focus();
   React.useEffect(function () {}, []);
-
   var handleFocus = function handleFocus(event) {
     return event.target.select();
   };
-
   return React.createElement(React.Fragment, null, React.createElement("input", {
@@ -63,23 +59,19 @@ ref: inputRef,
   var className = props.className,
-      nItems = props.nItems,
-      itemClassName = props.itemClassName,
-      value = props.value,
-      type = props.type,
-      onChange = props.onChange,
-      autoFocus = props.autoFocus,
-      placeholder = props.placeholder,
-      disabled = props.disabled;
-
+    nItems = props.nItems,
+    itemClassName = props.itemClassName,
+    value = props.value,
+    type = props.type,
+    onChange = props.onChange,
+    autoFocus = props.autoFocus,
+    placeholder = props.placeholder,
+    disabled = props.disabled;
   var _useState = React.useState(0),
-      currentIndex = _useState[0],
-      setCurrentIndex = _useState[1];
-
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
   var _useState2 = React.useState(0),
-      interactionCounter = _useState2[0],
-      setInteractionCounter = _useState2[1];
-
+    interactionCounter = _useState2[0],
+    setInteractionCounter = _useState2[1];
   var onChangeHandler = function onChangeHandler(e, _index) {
     var itemValue = e.target.value;
     var codeLength = value && value.length || 0;
-
     if (_index <= codeLength) {
@@ -93,6 +85,4 @@ var str = value.split('');
   };
-
   var onClickHandler = function onClickHandler(_index) {
     var codeLength = value && value.length || 0;
-
     if (_index > codeLength) {
@@ -103,6 +93,4 @@ setCurrentIndex(codeLength);
     }
-
     setInteractionCounter(interactionCounter + 1);
   };
-
   var placeholderFirstChar = React.useMemo(function () {
@@ -112,13 +100,9 @@ if (placeholder && placeholder.length > 1) {
     }
-
     return placeholder;
   }, [placeholder]);
-
   var getElements = function getElements() {
     var retElements = [];
-
     if (!nItems) {
       return retElements;
     }
-
     for (var i = 0; i < nItems; i++) {
@@ -144,6 +128,4 @@ var elValue = i > (value && value.length) ? '' : value[i];
     }
-
     return retElements;
   };
-
   return React.createElement(React.Fragment, null, React.createElement("div", {
@@ -150,0 +132,0 @@ className: "codes-container " + className + " " + styles$1['codes-container']

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder, disabled } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n\n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n        placeholder={placeholder}\n        disabled={disabled}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useMemo, useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus,\n    placeholder, disabled } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex + 1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const placeholderFirstChar = useMemo(() => {\n    if (placeholder && placeholder.length > 1) {\n      return placeholder.charAt(0)\n    }\n    return placeholder\n  }, [placeholder])\n\n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n        placeholder={placeholderFirstChar}\n        disabled={disabled}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>\n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","placeholder","disabled","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","useState","currentIndex","setCurrentIndex","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","placeholderFirstChar","useMemo","charAt","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder, disabled } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n\n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n        placeholder={placeholder}\n        disabled={disabled}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useMemo, useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus,\n    placeholder, disabled } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex + 1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const placeholderFirstChar = useMemo(() => {\n    if (placeholder && placeholder.length > 1) {\n      return placeholder.charAt(0)\n    }\n    return placeholder\n  }, [placeholder])\n\n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n        placeholder={placeholderFirstChar}\n        disabled={disabled}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>\n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","placeholder","disabled","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","_useState","useState","currentIndex","setCurrentIndex","_useState2","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","placeholderFirstChar","useMemo","charAt","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}

dist/index.modern.js

@@ -7,16 +7,15 @@ import { useRef, useEffect, createElement, Fragment, useState, useMemo } from 'react';
   var itemClassName = props.itemClassName,
-      value = props.value,
-      _onChange = props.onChange,
-      itemIndex = props.itemIndex,
-      type = props.type,
-      onClickHandler = props.onClickHandler,
-      isFocused = props.isFocused,
-      interactionCounter = props.interactionCounter,
-      autoFocus = props.autoFocus,
-      placeholder = props.placeholder,
-      disabled = props.disabled;
+    value = props.value,
+    _onChange = props.onChange,
+    itemIndex = props.itemIndex,
+    type = props.type,
+    onClickHandler = props.onClickHandler,
+    isFocused = props.isFocused,
+    interactionCounter = props.interactionCounter,
+    autoFocus = props.autoFocus,
+    placeholder = props.placeholder,
+    disabled = props.disabled;
   var inputRef = useRef(null);
   useEffect(function () {
     var inputEl = inputRef.current;
-
     if (interactionCounter === 0 && !autoFocus) {
@@ -26,3 +25,2 @@ inputEl && inputEl.blur();
     }
-
     if (isFocused) {
@@ -35,7 +33,5 @@ inputEl && inputEl.focus();
   useEffect(function () {}, []);
-
   var handleFocus = function handleFocus(event) {
     return event.target.select();
   };
-
   return createElement(Fragment, null, createElement("input", {
@@ -63,23 +59,19 @@ ref: inputRef,
   var className = props.className,
-      nItems = props.nItems,
-      itemClassName = props.itemClassName,
-      value = props.value,
-      type = props.type,
-      onChange = props.onChange,
-      autoFocus = props.autoFocus,
-      placeholder = props.placeholder,
-      disabled = props.disabled;
-
+    nItems = props.nItems,
+    itemClassName = props.itemClassName,
+    value = props.value,
+    type = props.type,
+    onChange = props.onChange,
+    autoFocus = props.autoFocus,
+    placeholder = props.placeholder,
+    disabled = props.disabled;
   var _useState = useState(0),
-      currentIndex = _useState[0],
-      setCurrentIndex = _useState[1];
-
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
   var _useState2 = useState(0),
-      interactionCounter = _useState2[0],
-      setInteractionCounter = _useState2[1];
-
+    interactionCounter = _useState2[0],
+    setInteractionCounter = _useState2[1];
   var onChangeHandler = function onChangeHandler(e, _index) {
     var itemValue = e.target.value;
     var codeLength = value && value.length || 0;
-
     if (_index <= codeLength) {
@@ -93,6 +85,4 @@ var str = value.split('');
   };
-
   var onClickHandler = function onClickHandler(_index) {
     var codeLength = value && value.length || 0;
-
     if (_index > codeLength) {
@@ -103,6 +93,4 @@ setCurrentIndex(codeLength);
     }
-
     setInteractionCounter(interactionCounter + 1);
   };
-
   var placeholderFirstChar = useMemo(function () {
@@ -112,13 +100,9 @@ if (placeholder && placeholder.length > 1) {
     }
-
     return placeholder;
   }, [placeholder]);
-
   var getElements = function getElements() {
     var retElements = [];
-
     if (!nItems) {
       return retElements;
     }
-
     for (var i = 0; i < nItems; i++) {
@@ -144,6 +128,4 @@ var elValue = i > (value && value.length) ? '' : value[i];
     }
-
     return retElements;
   };
-
   return createElement(Fragment, null, createElement("div", {
@@ -150,0 +132,0 @@ className: "codes-container " + className + " " + styles$1['codes-container']

dist/index.modern.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder, disabled } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n\n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n        placeholder={placeholder}\n        disabled={disabled}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useMemo, useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus,\n    placeholder, disabled } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex + 1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const placeholderFirstChar = useMemo(() => {\n    if (placeholder && placeholder.length > 1) {\n      return placeholder.charAt(0)\n    }\n    return placeholder\n  }, [placeholder])\n\n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n        placeholder={placeholderFirstChar}\n        disabled={disabled}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>\n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","placeholder","disabled","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","useState","currentIndex","setCurrentIndex","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","placeholderFirstChar","useMemo","charAt","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/CodeItem.tsx","../src/CodeItemList.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef } from 'react';\nimport styles from './CodeItem.module.css'\n\nexport interface CodeItemProps {\n  itemClassName: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;\n  itemIndex: number;\n  currentIndex: number;\n  setCurrentIndex: (index: number) => void;\n  type: React.HTMLInputTypeAttribute | undefined;\n  onClickHandler: (index: number) => void;\n  isFocused: boolean;\n  interactionCounter: number;\n  autoFocus?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder, disabled } = props;\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    const inputEl: any = inputRef.current;\n    if (interactionCounter === 0 && !autoFocus) {\n      inputEl && inputEl.blur();\n      return;\n    }\n    if (isFocused) {\n      inputEl && inputEl.focus();\n    } else {\n      inputEl && inputEl.blur();\n    }\n  }, [isFocused, interactionCounter])\n\n  useEffect(() => {\n\n  }, [])\n\n  const handleFocus = (event: any) => event.target.select();\n\n  return (\n    <React.Fragment>\n      <input\n        ref={inputRef}\n        type={type}\n        value={value || ''}\n        onChange={(e) => onChange(e, itemIndex)}\n        className={`code-item ${styles['code-item']} ${itemClassName}`}\n        onClick={() => onClickHandler(itemIndex)}\n        maxLength={1}\n        onFocus={handleFocus}\n        placeholder={placeholder}\n        disabled={disabled}\n      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { useMemo, useState } from 'react';\nimport CodeItem from './CodeItem';\nimport { ReactInputCodeProps } from './types/ReactInputCode';\nimport styles from './CodeItemList.module.css'\n\nconst CodeItemList = (props: ReactInputCodeProps) => {\n  const { className, nItems, itemClassName, value, type, onChange, autoFocus,\n    placeholder, disabled } = props;\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [interactionCounter, setInteractionCounter] = useState(0)\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, _index: number) => {\n    const itemValue = e.target.value\n    const codeLength = (value && value.length) || 0\n    if (_index <= codeLength) {\n      let str = value.split('');\n      str[_index] = itemValue;\n      str = str.join('');\n      onChange(str)\n      setCurrentIndex(currentIndex + 1)\n    }\n  }\n\n  const onClickHandler = (_index: number) => {\n    const codeLength = (value && value.length) || 0\n    if (_index > codeLength) {\n      setCurrentIndex(codeLength)\n    } else {\n      setCurrentIndex(_index)\n    }\n    setInteractionCounter(interactionCounter + 1)\n  }\n\n  const placeholderFirstChar = useMemo(() => {\n    if (placeholder && placeholder.length > 1) {\n      return placeholder.charAt(0)\n    }\n    return placeholder\n  }, [placeholder])\n\n  const getElements = (): JSX.Element[] => {\n    const retElements: JSX.Element[] = [];\n    if (!nItems) {\n      return retElements;\n    }\n    for (let i = 0; i < nItems; i++) {\n      const elValue = i > (value && value.length) ? '' : value[i]\n\n      const el = <CodeItem\n        key={`item-${i}`}\n        value={elValue}\n        onChange={onChangeHandler}\n        onClickHandler={onClickHandler}\n        itemClassName={itemClassName || ''}\n        itemIndex={i}\n        type={type || 'text'}\n        currentIndex={currentIndex}\n        setCurrentIndex={setCurrentIndex}\n        isFocused={currentIndex === i}\n        interactionCounter={interactionCounter}\n        autoFocus={autoFocus}\n        placeholder={placeholderFirstChar}\n        disabled={disabled}\n      />\n      retElements.push(el)\n    }\n    return retElements;\n  }\n\n  return (\n    <React.Fragment>\n      <div className={`codes-container ${className} ${styles['codes-container']}`}>\n        {getElements()}\n      </div>\n    </React.Fragment>)\n}\n\nexport default CodeItemList;","import * as React from 'react'\nimport CodeItemList from './CodeItemList'\nimport { ReactInputCodeProps } from './types/ReactInputCode'\n\nconst ReactInputCode = (props: ReactInputCodeProps) => <CodeItemList {...props}/>\n\nexport default ReactInputCode;"],"names":["CodeItem","props","itemClassName","value","onChange","itemIndex","type","onClickHandler","isFocused","interactionCounter","autoFocus","placeholder","disabled","inputRef","useRef","useEffect","inputEl","current","blur","focus","handleFocus","event","target","select","React","ref","e","className","styles","onClick","maxLength","onFocus","CodeItemList","nItems","_useState","useState","currentIndex","setCurrentIndex","_useState2","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","placeholderFirstChar","useMemo","charAt","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}

package.json

 {
   "name": "react-input-code",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React component to insert a code in a series of single char input elements",
@@ -40,23 +40,11 @@ "author": {
     "@types/react-dom": "^16.9.7",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "microbundle-crl": "^0.13.10",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-scripts": "^4.0.0",
     "typescript": "^3.7.5"
@@ -63,0 +51,0 @@ },

No alert changes

Improved metrics

Dev dependency count

17

-41.38%

Worsened metrics

Total package byte prevSize

32048

-1.87%

No dependency changes