ouisys-component-library 3.0.76 → 3.0.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PinEntryForm.js +1 -1
- package/dist/PinEntryForm.js.map +1 -1
- package/package.json +1 -1
package/dist/PinEntryForm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__read as e}from"tslib";import t,{useEffect as n}from"react";import{B as a}from"./Button-f39f59f4.js";import"classnames";var i=function(i){var o=i.onChange,l=i.pinMaxLength,r=i.
|
|
1
|
+
import{__read as e}from"tslib";import t,{useEffect as n}from"react";import{B as a}from"./Button-f39f59f4.js";import"classnames";var i=function(i){var o=i.onChange,l=i.pinMaxLength,r=i.pinMinLength,m=i.renderTopContent,p=i.pinEntryLabel,u=i.placeholder,c=i.buttonLabel,s=i.renderBottomContent,d=i.buttonDisabled,b=i.pageConfigs,f=i.disableButtonIfInvalidPin,g=i.onButtonClick,h=e(t.useState(""),2),v=h[0],E=h[1],C=e(t.useState(!1),2),L=C[0],N=C[1],x=v.length>=4&&v.length<=(l||6);n((function(){o&&o(v)}),[v,o]);return t.createElement("label",{htmlFor:"pin-input"},m,t.createElement("p",{className:"pinEntryLabel"},p),t.createElement("div",{className:"pin-wrapper"},t.createElement("div",{className:"pin-input ".concat(L&&!x?null==b?void 0:b.inputFocusAnimation:"")},t.createElement("div",{className:"pin"}),t.createElement("input",{className:"text-input",type:"text",placeholder:u,value:v,pattern:"[0-9]*",inputMode:"numeric",maxLength:l||6,minLength:r||4,autoComplete:"one-time-code",onChange:function(e){return E(e.target.value)}})),t.createElement(a,{id:"pin-submit-button",type:"submit",className:"btn",disabled:d||f&&!x,onClick:function(e){N((function(e){return!e})),g&&x&&g(e)}},c)),s)};export{i as PinEntryForm};
|
|
2
2
|
//# sourceMappingURL=PinEntryForm.js.map
|
package/dist/PinEntryForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinEntryForm.js","sources":["../src/PinEntryForm/PinEntryForm.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Button } from '../Button/Button';\nimport { IPinEntryFormProps } from './PinEntryForm.types';\n\nexport const PinEntryForm = (props: IPinEntryFormProps) => {\n const {\n onChange,\n pinMaxLength,\n renderTopContent,\n pinEntryLabel,\n placeholder,\n buttonLabel,\n renderBottomContent,\n buttonDisabled,\n pageConfigs,\n disableButtonIfInvalidPin,\n onButtonClick\n } = props;\n\n const [pin, setPin] = React.useState('');\n const [isFocused, setIsFocused] = React.useState(false);\n const isValid = pin.length >= 4 && pin.length <= (pinMaxLength || 6);\n\n useEffect(() => {\n if (onChange) {\n onChange(pin);\n }\n }, [pin, onChange]);\n\n const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n setIsFocused((prevState) => !prevState);\n if (onButtonClick && isValid) {\n onButtonClick(e);\n }\n };\n\n return (\n <label htmlFor=\"pin-input\">\n {renderTopContent}\n <p className=\"pinEntryLabel\">{pinEntryLabel}</p>\n <div className=\"pin-wrapper\">\n <div className={`pin-input ${isFocused && !isValid ? pageConfigs?.inputFocusAnimation : ''}`}>\n <div className=\"pin\" />\n <input\n className=\"text-input\"\n type=\"text\"\n placeholder={placeholder}\n value={pin}\n pattern=\"[0-9]*\"\n inputMode=\"numeric\"\n maxLength={pinMaxLength || 6}\n minLength={4}\n autoComplete=\"one-time-code\"\n onChange={(ev) => setPin(ev.target.value)}\n />\n </div>\n\n <Button\n id=\"pin-submit-button\"\n type=\"submit\"\n className=\"btn\"\n disabled={buttonDisabled || (disableButtonIfInvalidPin && !isValid)}\n onClick={handleButtonClick}\n >\n {buttonLabel}\n </Button>\n </div>\n {renderBottomContent}\n </label>\n );\n};\n"],"names":["PinEntryForm","props","onChange","pinMaxLength","renderTopContent","pinEntryLabel","placeholder","buttonLabel","renderBottomContent","buttonDisabled","pageConfigs","disableButtonIfInvalidPin","onButtonClick","_a","__read","React","useState","pin","setPin","_b","isFocused","setIsFocused","isValid","length","useEffect","createElement","htmlFor","className","concat","inputFocusAnimation","type","value","pattern","inputMode","maxLength","minLength","autoComplete","ev","target","Button","id","disabled","onClick","e","prevState"],"mappings":"gIAIO,IAAMA,EAAe,SAACC,GAEzB,IAAAC,
|
|
1
|
+
{"version":3,"file":"PinEntryForm.js","sources":["../src/PinEntryForm/PinEntryForm.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Button } from '../Button/Button';\nimport { IPinEntryFormProps } from './PinEntryForm.types';\n\nexport const PinEntryForm = (props: IPinEntryFormProps) => {\n const {\n onChange,\n pinMaxLength,\n pinMinLength,\n renderTopContent,\n pinEntryLabel,\n placeholder,\n buttonLabel,\n renderBottomContent,\n buttonDisabled,\n pageConfigs,\n disableButtonIfInvalidPin,\n onButtonClick\n } = props;\n\n const [pin, setPin] = React.useState('');\n const [isFocused, setIsFocused] = React.useState(false);\n const isValid = pin.length >= 4 && pin.length <= (pinMaxLength || 6);\n\n useEffect(() => {\n if (onChange) {\n onChange(pin);\n }\n }, [pin, onChange]);\n\n const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n setIsFocused((prevState) => !prevState);\n if (onButtonClick && isValid) {\n onButtonClick(e);\n }\n };\n\n return (\n <label htmlFor=\"pin-input\">\n {renderTopContent}\n <p className=\"pinEntryLabel\">{pinEntryLabel}</p>\n <div className=\"pin-wrapper\">\n <div className={`pin-input ${isFocused && !isValid ? pageConfigs?.inputFocusAnimation : ''}`}>\n <div className=\"pin\" />\n <input\n className=\"text-input\"\n type=\"text\"\n placeholder={placeholder}\n value={pin}\n pattern=\"[0-9]*\"\n inputMode=\"numeric\"\n maxLength={pinMaxLength || 6}\n minLength={pinMinLength || 4}\n autoComplete=\"one-time-code\"\n onChange={(ev) => setPin(ev.target.value)}\n />\n </div>\n\n <Button\n id=\"pin-submit-button\"\n type=\"submit\"\n className=\"btn\"\n disabled={buttonDisabled || (disableButtonIfInvalidPin && !isValid)}\n onClick={handleButtonClick}\n >\n {buttonLabel}\n </Button>\n </div>\n {renderBottomContent}\n </label>\n );\n};\n"],"names":["PinEntryForm","props","onChange","pinMaxLength","pinMinLength","renderTopContent","pinEntryLabel","placeholder","buttonLabel","renderBottomContent","buttonDisabled","pageConfigs","disableButtonIfInvalidPin","onButtonClick","_a","__read","React","useState","pin","setPin","_b","isFocused","setIsFocused","isValid","length","useEffect","createElement","htmlFor","className","concat","inputFocusAnimation","type","value","pattern","inputMode","maxLength","minLength","autoComplete","ev","target","Button","id","disabled","onClick","e","prevState"],"mappings":"gIAIO,IAAMA,EAAe,SAACC,GAEzB,IAAAC,EAYED,EAZMC,SACRC,EAWEF,EAAKE,aAVPC,EAUEH,EAVUG,aACZC,EASEJ,EAAKI,iBARPC,EAQEL,EARWK,cACbC,EAOEN,EAAKM,YANPC,EAMEP,EANSO,YACXC,EAKER,EAAKQ,oBAJPC,EAIET,EAJYS,eACdC,EAGEV,EAAKU,YAFPC,EAEEX,EAFuBW,0BACzBC,EACEZ,EAAKY,cAEHC,EAAAC,EAAgBC,EAAMC,SAAS,IAAG,GAAjCC,EAAGJ,EAAA,GAAEK,OACNC,EAAAL,EAA4BC,EAAMC,UAAS,GAAM,GAAhDI,EAASD,EAAA,GAAEE,OACZC,EAAUL,EAAIM,QAAU,GAAKN,EAAIM,SAAWrB,GAAgB,GAElEsB,GAAU,WACJvB,GACFA,EAASgB,EAEb,GAAG,CAACA,EAAKhB,IAST,OACEc,EAAAU,cAAA,QAAA,CAAOC,QAAQ,aACZtB,EACDW,EAAAU,cAAA,IAAA,CAAGE,UAAU,iBAAiBtB,GAC9BU,EAAKU,cAAA,MAAA,CAAAE,UAAU,eACbZ,EAAKU,cAAA,MAAA,CAAAE,UAAW,aAAaC,OAAAR,IAAcE,EAAUZ,eAAAA,EAAamB,oBAAsB,KACtFd,EAAKU,cAAA,MAAA,CAAAE,UAAU,QACfZ,EACEU,cAAA,QAAA,CAAAE,UAAU,aACVG,KAAK,OACLxB,YAAaA,EACbyB,MAAOd,EACPe,QAAQ,SACRC,UAAU,UACVC,UAAWhC,GAAgB,EAC3BiC,UAAWhC,GAAgB,EAC3BiC,aAAa,gBACbnC,SAAU,SAACoC,GAAO,OAAAnB,EAAOmB,EAAGC,OAAOP,MAAM,KAI7ChB,EAAAU,cAACc,EAAM,CACLC,GAAG,oBACHV,KAAK,SACLH,UAAU,MACVc,SAAUhC,GAAmBE,IAA8BW,EAC3DoB,QAjCkB,SAACC,GACzBtB,GAAa,SAACuB,GAAc,OAACA,CAAS,IAClChC,GAAiBU,GACnBV,EAAc+B,EAElB,GA8BSpC,IAGJC,EAGP"}
|