react-input-code - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/CodeItem.d.ts

@@ -15,4 +15,5 @@ import * as React from 'react';
     placeholder?: string;
+    disabled?: boolean;
 }
 declare const CodeItem: (props: CodeItemProps) => JSX.Element;
 export default CodeItem;

dist/index.css

@@ -19,2 +19,7 @@ ._1TXHq {
 }
+
+._1TXHq:disabled {
+  color: #999;
+  border-color: #999;
+}
 ._1XM5Z {
@@ -21,0 +26,0 @@ position: relative;

dist/index.js

@@ -15,3 +15,4 @@ var React = require('react');
       autoFocus = props.autoFocus,
-      placeholder = props.placeholder;
+      placeholder = props.placeholder,
+      disabled = props.disabled;
   var inputRef = React.useRef(null);
@@ -51,3 +52,4 @@ React.useEffect(function () {
     onFocus: handleFocus,
-    placeholder: placeholder
+    placeholder: placeholder,
+    disabled: disabled
   }));
@@ -66,3 +68,4 @@ };
       autoFocus = props.autoFocus,
-      placeholder = props.placeholder;
+      placeholder = props.placeholder,
+      disabled = props.disabled;
 
@@ -132,3 +135,4 @@ var _useState = React.useState(0),
         autoFocus: autoFocus,
-        placeholder: placeholderFirstChar
+        placeholder: placeholderFirstChar,
+        disabled: disabled
       });
@@ -135,0 +139,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  placeholder?: string;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder } = 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      />\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 } = 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      />\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","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","currentIndex","setCurrentIndex","setInteractionCounter","onChangeHandler","_index","itemValue","codeLength","length","str","split","join","placeholderFirstChar","useMemo","charAt","getElements","retElements","i","elValue","el","key","push","ReactInputCode"],"mappings":";;;;AAoBA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;EACf,IAAQC,aAAR,GAA6ID,KAA7I,CAAQC,aAAR;MAAuBC,KAAvB,GAA6IF,KAA7I,CAAuBE,KAAvB;MAA8BC,SAA9B,GAA6IH,KAA7I,CAA8BG,QAA9B;MAAwCC,SAAxC,GAA6IJ,KAA7I,CAAwCI,SAAxC;MAAmDC,IAAnD,GAA6IL,KAA7I,CAAmDK,IAAnD;MAAyDC,cAAzD,GAA6IN,KAA7I,CAAyDM,cAAzD;MAAyEC,SAAzE,GAA6IP,KAA7I,CAAyEO,SAAzE;MAAoFC,kBAApF,GAA6IR,KAA7I,CAAoFQ,kBAApF;MAAwGC,SAAxG,GAA6IT,KAA7I,CAAwGS,SAAxG;MAAmHC,WAAnH,GAA6IV,KAA7I,CAAmHU,WAAnH;MAAgIC,QAAhI,GAA6IX,KAA7I,CAAgIW,QAAhI;EACA,IAAMC,QAAQ,GAAGC,YAAM,CAAC,IAAD,CAAvB;EAEAC,eAAS,CAAC;IACR,IAAMC,OAAO,GAAQH,QAAQ,CAACI,OAA9B;;IACA,IAAIR,kBAAkB,KAAK,CAAvB,IAA4B,CAACC,SAAjC,EAA4C;MAC1CM,OAAO,IAAIA,OAAO,CAACE,IAAR,EAAX;MACA;;;IAEF,IAAIV,SAAJ,EAAe;MACbQ,OAAO,IAAIA,OAAO,CAACG,KAAR,EAAX;KADF,MAEO;MACLH,OAAO,IAAIA,OAAO,CAACE,IAAR,EAAX;;GATK,EAWN,CAACV,SAAD,EAAYC,kBAAZ,CAXM,CAAT;EAaAM,eAAS,CAAC,cAAD,EAEN,EAFM,CAAT;;EAIA,IAAMK,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;IAAA,OAAgBA,KAAK,CAACC,MAAN,CAAaC,MAAb,EAAhB;GAApB;;EAEA,OACEC,mBAAA,CAACA,cAAD,MAAA,EACEA,mBAAA,QAAA;IACEC,GAAG,EAAEZ;IACLP,IAAI,EAAEA;IACNH,KAAK,EAAEA,KAAK,IAAI;IAChBC,QAAQ,EAAE,kBAACsB,CAAD;MAAA,OAAOtB,SAAQ,CAACsB,CAAD,EAAIrB,SAAJ,CAAf;;IACVsB,SAAS,iBAAeC,MAAM,CAAC,WAAD,CAArB,SAAsC1B;IAC/C2B,OAAO,EAAE;MAAA,OAAMtB,cAAc,CAACF,SAAD,CAApB;;IACTyB,SAAS,EAAE;IACXC,OAAO,EAAEX;IACTT,WAAW,EAAEA;IACbC,QAAQ,EAAEA;GAVZ,CADF,CADF;AAgBD,CAvCD;;;;ACdA,IAAMoB,YAAY,GAAG,SAAfA,YAAe,CAAC/B,KAAD;EACnB,IAAQ0B,SAAR,GAC4B1B,KAD5B,CAAQ0B,SAAR;MAAmBM,MAAnB,GAC4BhC,KAD5B,CAAmBgC,MAAnB;MAA2B/B,aAA3B,GAC4BD,KAD5B,CAA2BC,aAA3B;MAA0CC,KAA1C,GAC4BF,KAD5B,CAA0CE,KAA1C;MAAiDG,IAAjD,GAC4BL,KAD5B,CAAiDK,IAAjD;MAAuDF,QAAvD,GAC4BH,KAD5B,CAAuDG,QAAvD;MAAiEM,SAAjE,GAC4BT,KAD5B,CAAiES,SAAjE;MACEC,WADF,GAC4BV,KAD5B,CACEU,WADF;MACeC,QADf,GAC4BX,KAD5B,CACeW,QADf;;EAEA,gBAAwCsB,cAAQ,CAAC,CAAD,CAAhD;MAAOC,YAAP;MAAqBC,eAArB;;EACA,iBAAoDF,cAAQ,CAAC,CAAD,CAA5D;MAAOzB,kBAAP;MAA2B4B,qBAA3B;;EAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACZ,CAAD,EAAyCa,MAAzC;IACtB,IAAMC,SAAS,GAAGd,CAAC,CAACJ,MAAF,CAASnB,KAA3B;IACA,IAAMsC,UAAU,GAAItC,KAAK,IAAIA,KAAK,CAACuC,MAAhB,IAA2B,CAA9C;;IACA,IAAIH,MAAM,IAAIE,UAAd,EAA0B;MACxB,IAAIE,GAAG,GAAGxC,KAAK,CAACyC,KAAN,CAAY,EAAZ,CAAV;MACAD,GAAG,CAACJ,MAAD,CAAH,GAAcC,SAAd;MACAG,GAAG,GAAGA,GAAG,CAACE,IAAJ,CAAS,EAAT,CAAN;MACAzC,QAAQ,CAACuC,GAAD,CAAR;MACAP,eAAe,CAACD,YAAY,GAAG,CAAhB,CAAf;;GARJ;;EAYA,IAAM5B,cAAc,GAAG,SAAjBA,cAAiB,CAACgC,MAAD;IACrB,IAAME,UAAU,GAAItC,KAAK,IAAIA,KAAK,CAACuC,MAAhB,IAA2B,CAA9C;;IACA,IAAIH,MAAM,GAAGE,UAAb,EAAyB;MACvBL,eAAe,CAACK,UAAD,CAAf;KADF,MAEO;MACLL,eAAe,CAACG,MAAD,CAAf;;;IAEFF,qBAAqB,CAAC5B,kBAAkB,GAAG,CAAtB,CAArB;GAPF;;EAUA,IAAMqC,oBAAoB,GAAGC,aAAO,CAAC;IACnC,IAAIpC,WAAW,IAAIA,WAAW,CAAC+B,MAAZ,GAAqB,CAAxC,EAA2C;MACzC,OAAO/B,WAAW,CAACqC,MAAZ,CAAmB,CAAnB,CAAP;;;IAEF,OAAOrC,WAAP;GAJkC,EAKjC,CAACA,WAAD,CALiC,CAApC;;EAOA,IAAMsC,WAAW,GAAG,SAAdA,WAAc;IAClB,IAAMC,WAAW,GAAkB,EAAnC;;IACA,IAAI,CAACjB,MAAL,EAAa;MACX,OAAOiB,WAAP;;;IAEF,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGlB,MAApB,EAA4BkB,CAAC,EAA7B,EAAiC;MAC/B,IAAMC,OAAO,GAAGD,CAAC,IAAIhD,KAAK,IAAIA,KAAK,CAACuC,MAAnB,CAAD,GAA8B,EAA9B,GAAmCvC,KAAK,CAACgD,CAAD,CAAxD;MAEA,IAAME,EAAE,GAAG7B,mBAAA,CAACxB,QAAD;QACTsD,GAAG,YAAUH;QACbhD,KAAK,EAAEiD;QACPhD,QAAQ,EAAEkC;QACV/B,cAAc,EAAEA;QAChBL,aAAa,EAAEA,aAAa,IAAI;QAChCG,SAAS,EAAE8C;QACX7C,IAAI,EAAEA,IAAI,IAAI;QACd6B,YAAY,EAAEA;QACdC,eAAe,EAAEA;QACjB5B,SAAS,EAAE2B,YAAY,KAAKgB;QAC5B1C,kBAAkB,EAAEA;QACpBC,SAAS,EAAEA;QACXC,WAAW,EAAEmC;QACblC,QAAQ,EAAEA;OAdD,CAAX;MAgBAsC,WAAW,CAACK,IAAZ,CAAiBF,EAAjB;;;IAEF,OAAOH,WAAP;GA1BF;;EA6BA,OACE1B,mBAAA,CAACA,cAAD,MAAA,EACEA,mBAAA,MAAA;IAAKG,SAAS,uBAAqBA,SAArB,SAAkCC,QAAM,CAAC,iBAAD;GAAtD,EACGqB,WAAW,EADd,CADF,CADF;AAMD,CAtED;;ACFA,IAAMO,cAAc,GAAG,SAAjBA,cAAiB,CAACvD,KAAD;EAAA,OAAgCuB,mBAAA,CAACQ,YAAD,oBAAkB/B,MAAlB,CAAhC;AAAA,CAAvB;;;;"}

dist/index.modern.js

@@ -15,3 +15,4 @@ import { useRef, useEffect, createElement, Fragment, useState, useMemo } from 'react';
       autoFocus = props.autoFocus,
-      placeholder = props.placeholder;
+      placeholder = props.placeholder,
+      disabled = props.disabled;
   var inputRef = useRef(null);
@@ -51,3 +52,4 @@ useEffect(function () {
     onFocus: handleFocus,
-    placeholder: placeholder
+    placeholder: placeholder,
+    disabled: disabled
   }));
@@ -66,3 +68,4 @@ };
       autoFocus = props.autoFocus,
-      placeholder = props.placeholder;
+      placeholder = props.placeholder,
+      disabled = props.disabled;
 
@@ -132,3 +135,4 @@ var _useState = useState(0),
         autoFocus: autoFocus,
-        placeholder: placeholderFirstChar
+        placeholder: placeholderFirstChar,
+        disabled: disabled
       });
@@ -135,0 +139,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  placeholder?: string;\n}\n\nconst CodeItem = (props: CodeItemProps) => {\n  const { itemClassName, value, onChange, itemIndex, type, onClickHandler, isFocused, interactionCounter, autoFocus, placeholder } = 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      />\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 } = 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      />\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","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","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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"}

dist/types/ReactInputCode.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />
     placeholder?: string;
+    disabled?: boolean;
 }

package.json

 {
   "name": "react-input-code",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React component to insert a code in a series of single char input elements",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -35,3 +35,4 @@ # react-input-code
       autoFocus={true} 
-      placeholder={'-'}/>
+      placeholder={'-'}
+      disabled={true}/>
 }
@@ -50,2 +51,3 @@ ```
 * placeholder - (optional) placeholder, the same char introduced in each element. If more than one char is present, only the first char will be considered
+* disabled - (optional) controls field disabled prop
 
@@ -52,0 +54,0 @@

No alert changes

Improved metrics

Total package byte prevSize

32392

2.71%

Lines of code

321

4.56%

Number of lines in readme file

61

3.39%

No dependency changes