react-input-code - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/CodeItem.d.ts

@@ -13,5 +13,5 @@ import * as React from 'react';
     interactionCounter: number;
-    autofocus?: boolean;
+    autoFocus?: boolean;
 }
 declare const CodeItem: (props: CodeItemProps) => JSX.Element;
 export default CodeItem;

dist/index.js

@@ -14,3 +14,3 @@ var React = require('react');
       interactionCounter = props.interactionCounter,
-      autofocus = props.autofocus;
+      autoFocus = props.autoFocus;
   var inputRef = React.useRef(null);
@@ -20,3 +20,3 @@ React.useEffect(function () {
 
-    if (interactionCounter === 0 && !autofocus) {
+    if (interactionCounter === 0 && !autoFocus) {
       inputEl && inputEl.blur();
@@ -63,3 +63,3 @@ return;
       onChange = props.onChange,
-      autofocus = props.autofocus;
+      autoFocus = props.autoFocus;
 
@@ -120,3 +120,3 @@ var _useState = React.useState(0),
         interactionCounter: interactionCounter,
-        autofocus: autofocus
+        autoFocus: autoFocus
       });
@@ -123,0 +123,0 @@ retElements.push(el);

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}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autofocus } = 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      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { 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 } = 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 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      />\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","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","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}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus } = 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      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { 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 } = 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 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      />\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","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","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}

dist/index.modern.js

@@ -14,3 +14,3 @@ import { useRef, useEffect, createElement, Fragment, useState } from 'react';
       interactionCounter = props.interactionCounter,
-      autofocus = props.autofocus;
+      autoFocus = props.autoFocus;
   var inputRef = useRef(null);
@@ -20,3 +20,3 @@ useEffect(function () {
 
-    if (interactionCounter === 0 && !autofocus) {
+    if (interactionCounter === 0 && !autoFocus) {
       inputEl && inputEl.blur();
@@ -63,3 +63,3 @@ return;
       onChange = props.onChange,
-      autofocus = props.autofocus;
+      autoFocus = props.autoFocus;
 
@@ -120,3 +120,3 @@ var _useState = useState(0),
         interactionCounter: interactionCounter,
-        autofocus: autofocus
+        autoFocus: autoFocus
       });
@@ -123,0 +123,0 @@ retElements.push(el);

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}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autofocus } = 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      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { 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 } = 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 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      />\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","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","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":";;;;AAkBA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;EACf,IAAQC,aAAR,GAAsHD,KAAtH,CAAQC,aAAR;MAAuBC,KAAvB,GAAsHF,KAAtH,CAAuBE,KAAvB;MAA8BC,SAA9B,GAAsHH,KAAtH,CAA8BG,QAA9B;MAAwCC,SAAxC,GAAsHJ,KAAtH,CAAwCI,SAAxC;MAAmDC,IAAnD,GAAsHL,KAAtH,CAAmDK,IAAnD;MAAyDC,cAAzD,GAAsHN,KAAtH,CAAyDM,cAAzD;MAAyEC,SAAzE,GAAsHP,KAAtH,CAAyEO,SAAzE;MAAoFC,kBAApF,GAAsHR,KAAtH,CAAoFQ,kBAApF;MAAwGC,SAAxG,GAAsHT,KAAtH,CAAwGS,SAAxG;EACA,IAAMC,QAAQ,GAAGC,MAAM,CAAC,IAAD,CAAvB;EAEAC,SAAS,CAAC;IACR,IAAMC,OAAO,GAAQH,QAAQ,CAACI,OAA9B;;IACA,IAAIN,kBAAkB,KAAK,CAAvB,IAA4B,CAACC,SAAjC,EAA4C;MAC1CI,OAAO,IAAIA,OAAO,CAACE,IAAR,EAAX;MACA;;;IAEF,IAAIR,SAAJ,EAAe;MACbM,OAAO,IAAIA,OAAO,CAACG,KAAR,EAAX;KADF,MAEO;MACLH,OAAO,IAAIA,OAAO,CAACE,IAAR,EAAX;;GATK,EAWN,CAACR,SAAD,EAAYC,kBAAZ,CAXM,CAAT;EAaAI,SAAS,CAAC,cAAD,EAEN,EAFM,CAAT;;EAIA,IAAMK,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;IAAA,OAAgBA,KAAK,CAACC,MAAN,CAAaC,MAAb,EAAhB;GAApB;;EAEA,OACEC,aAAA,CAACA,QAAD,MAAA,EACEA,aAAA,QAAA;IACEC,GAAG,EAAEZ;IACLL,IAAI,EAAEA;IACNH,KAAK,EAAEA,KAAK,IAAI;IAChBC,QAAQ,EAAE,kBAACoB,CAAD;MAAA,OAAOpB,SAAQ,CAACoB,CAAD,EAAInB,SAAJ,CAAf;;IACVoB,SAAS,iBAAeC,MAAM,CAAC,WAAD,CAArB,SAAsCxB;IAC/CyB,OAAO,EAAE;MAAA,OAAMpB,cAAc,CAACF,SAAD,CAApB;;IACTuB,SAAS,EAAE;IACXC,OAAO,EAAEX;GARX,CADF,CADF;AAcD,CArCD;;;;ACZA,IAAMY,YAAY,GAAG,SAAfA,YAAe,CAAC7B,KAAD;EACnB,IAAQwB,SAAR,GAA+ExB,KAA/E,CAAQwB,SAAR;MAAmBM,MAAnB,GAA+E9B,KAA/E,CAAmB8B,MAAnB;MAA2B7B,aAA3B,GAA+ED,KAA/E,CAA2BC,aAA3B;MAA0CC,KAA1C,GAA+EF,KAA/E,CAA0CE,KAA1C;MAAiDG,IAAjD,GAA+EL,KAA/E,CAAiDK,IAAjD;MAAuDF,QAAvD,GAA+EH,KAA/E,CAAuDG,QAAvD;MAAiEM,SAAjE,GAA+ET,KAA/E,CAAiES,SAAjE;;EACA,gBAAwCsB,QAAQ,CAAC,CAAD,CAAhD;MAAOC,YAAP;MAAqBC,eAArB;;EACA,iBAAoDF,QAAQ,CAAC,CAAD,CAA5D;MAAOvB,kBAAP;MAA2B0B,qBAA3B;;EAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACZ,CAAD,EAAyCa,MAAzC;IACtB,IAAMC,SAAS,GAAGd,CAAC,CAACJ,MAAF,CAASjB,KAA3B;IACA,IAAMoC,UAAU,GAAIpC,KAAK,IAAIA,KAAK,CAACqC,MAAhB,IAA2B,CAA9C;;IACA,IAAIH,MAAM,IAAIE,UAAd,EAA0B;MACxB,IAAIE,GAAG,GAAGtC,KAAK,CAACuC,KAAN,CAAY,EAAZ,CAAV;MACAD,GAAG,CAACJ,MAAD,CAAH,GAAcC,SAAd;MACAG,GAAG,GAAGA,GAAG,CAACE,IAAJ,CAAS,EAAT,CAAN;MACAvC,QAAQ,CAACqC,GAAD,CAAR;MACAP,eAAe,CAACD,YAAY,GAAC,CAAd,CAAf;;GARJ;;EAYA,IAAM1B,cAAc,GAAG,SAAjBA,cAAiB,CAAC8B,MAAD;IACrB,IAAME,UAAU,GAAIpC,KAAK,IAAIA,KAAK,CAACqC,MAAhB,IAA2B,CAA9C;;IACA,IAAIH,MAAM,GAAGE,UAAb,EAAyB;MACvBL,eAAe,CAACK,UAAD,CAAf;KADF,MAEO;MACLL,eAAe,CAACG,MAAD,CAAf;;;IAEFF,qBAAqB,CAAC1B,kBAAkB,GAAG,CAAtB,CAArB;GAPF;;EAUA,IAAMmC,WAAW,GAAG,SAAdA,WAAc;IAClB,IAAMC,WAAW,GAAkB,EAAnC;;IACA,IAAI,CAACd,MAAL,EAAa;MACX,OAAOc,WAAP;;;IAEF,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGf,MAApB,EAA4Be,CAAC,EAA7B,EAAiC;MAC/B,IAAMC,OAAO,GAAGD,CAAC,IAAI3C,KAAK,IAAIA,KAAK,CAACqC,MAAnB,CAAD,GAA8B,EAA9B,GAAmCrC,KAAK,CAAC2C,CAAD,CAAxD;MAEA,IAAME,EAAE,GAAG1B,aAAA,CAACtB,QAAD;QACTiD,GAAG,YAAUH;QACb3C,KAAK,EAAE4C;QACP3C,QAAQ,EAAEgC;QACV7B,cAAc,EAAEA;QAChBL,aAAa,EAAEA,aAAa,IAAI;QAChCG,SAAS,EAAEyC;QACXxC,IAAI,EAAEA,IAAI,IAAI;QACd2B,YAAY,EAAEA;QACdC,eAAe,EAAEA;QACjB1B,SAAS,EAAEyB,YAAY,KAAKa;QAC5BrC,kBAAkB,EAAEA;QACpBC,SAAS,EAAEA;OAZF,CAAX;MAcAmC,WAAW,CAACK,IAAZ,CAAiBF,EAAjB;;;IAEF,OAAOH,WAAP;GAxBF;;EA2BA,OACEvB,aAAA,CAACA,QAAD,MAAA,EACEA,aAAA,MAAA;IAAKG,SAAS,uBAAqBA,SAArB,SAAkCC,QAAM,CAAC,iBAAD;GAAtD,EACGkB,WAAW,EADd,CADF,CADF;AAMD,CA5DD;;ACFA,IAAMO,cAAc,GAAG,SAAjBA,cAAiB,CAAClD,KAAD;EAAA,OAAgCqB,aAAA,CAACQ,YAAD,oBAAkB7B,MAAlB,CAAhC;AAAA,CAAvB;;;;"}
+{"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}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus } = 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      />\n    </React.Fragment>\n  )\n}\n\nexport default CodeItem;","import * as React from 'react'\nimport { 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 } = 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 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      />\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","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","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":"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"}

dist/types/ReactInputCode.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" />
     type: React.HTMLInputTypeAttribute | undefined;
-    autofocus?: boolean;
+    autoFocus?: boolean;
 }

package.json

 {
   "name": "react-input-code",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React component to insert a code in a series of single char input elements",
@@ -65,3 +65,15 @@ "author": {
     "dist"
+  ],
+  "keywords": [
+    "react",
+    "react-input-code",
+    "react-component",
+    "react-input",
+    "react-input-activation-code",
+    "react-input-registration-code",
+    "react-code",
+    "html-input",
+    "html-input-code",
+    "react-cipher-code"
   ]
 }

README.md

@@ -30,7 +30,7 @@ # react-input-code
       onChange={setValue}
-      type={'text'}
-      className='my-input-code'
-      itemClassName='my-code-item'
+      type="text"
+      className="my-input-code"
+      itemClassName="my-code-item"
       nItems={6}
-      autofocus={true} />
+      autoFocus={true} />
 
@@ -42,4 +42,20 @@ <p>Current value: {value}</p>
 
+## Props
+
+* nItems - number of items composing che html input code component
+* value - control the current value
+* onChange - subscribe to change events
+* type - type attribute of each html input element ('text', 'number', 'password', etc...)
+* className - additional class applied to the component container
+* itemClassName - additional class applied to each element
+* autoFocus - (optional) if set to true the first elemnt will be focused on component load
+
+
+## Controlled Props
+
+You can control the value / onChange props (specify the current value of the control) by providing values for them.
+
+
 ## License
 
 MIT © [Mario Fornaroli](https://github.com/Mario Fornaroli)

No alert changes

Improved metrics

Total package byte prevSize

29193

3.05%

Number of lines in readme file

60

36.36%

No dependency changes