@start-base/react-form-elements/AmountInput/index.mjs

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import e,{forwardRef as r,useMemo as a,useState as t,useRef as l,useImperativeHandle as n,useEffect as o,useCallback as i}from"react";import u from"clsx";var c=Object.defineProperty,p=Object.defineProperties,s=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,g=(e,r,a)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,S=(e,r)=>{for(var a in r||(r={}))d.call(r,a)&&g(e,a,r[a]);if(m)for(var a of m(r))f.call(r,a)&&g(e,a,r[a]);return e},v=(e,r)=>p(e,s(r)),b=(e,r)=>{var a={};for(var t in e)d.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&m)for(var t of m(e))r.indexOf(t)<0&&f.call(e,t)&&(a[t]=e[t]);return a},h=e=>e.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),w={k:1e3,m:1e6,b:1e9},y=({value:e,groupSeparator:r=",",decimalSeparator:a=".",allowDecimals:t=!0,decimalsLimit:l=2,allowNegativeValue:n=!0,disableAbbreviations:o=!1,prefix:i="",transformRawValue:u=e=>e})=>{const c=u(e);if("-"===c)return c;const p=o?[]:["k","m","b"],s=new RegExp(`((^|\\D)-\\d)|(-${h(i)})`).test(c),[m,d]=RegExp(`(\\d+)-?${h(i)}`).exec(e)||[],f=((e,r=",")=>{const a=new RegExp(h(r),"g");return e.replace(a,"")})(i?m?c.replace(m,"").concat(d):c.replace(i,""):c,r),g=((e,r)=>{const a=h(r.join("")),t=new RegExp(`[^\\d${a}]`,"gi");return e.replace(t,"")})(f,[r,a,...p]);let S=g;if(!o){if(p.some((e=>e===g.toLowerCase().replace(a,""))))return"";const e=((e,r=".")=>{const a=new RegExp(`(\\d+(${h(r)}\\d*)?)([kmb])$`,"i"),t=e.match(a);if(t){const[,e,,a]=t,l=w[a.toLowerCase()];return Number(e.replace(r,"."))*l}})(g,a);e&&(S=String(e))}const v=s&&n?"-":"";if(a&&S.includes(a)){const[e,r]=g.split(a),n=l&&r?r.slice(0,l):r;return`${v}${e}${t?`${a}${n}`:""}`}return`${v}${S}`},$=(e,{groupSeparator:r=",",decimalSeparator:a="."})=>{const t=new RegExp(`\\d([^${h(r)}${h(a)}0-9]+)`),l=e.match(t);return l?l[1]:void 0},x=e=>{const{value:r,decimalSeparator:a,intlConfig:t,decimalScale:l,prefix:n="",suffix:o=""}=e;if(""===r||void 0===r)return"";if("-"===r)return"-";const i=new RegExp(`^\\d?-${n?`${h(n)}?`:""}\\d`).test(r);let u="."!==a?I(r,a,i):r;a&&"-"!==a&&u.startsWith(a)&&(u="0"+u);const c={minimumFractionDigits:l||0,maximumFractionDigits:20},p=(t?new Intl.NumberFormat(t.locale,t.currency?v(S({},c),{style:"currency",currency:t.currency}):c):new Intl.NumberFormat(void 0,c)).formatToParts(Number(u));let s=N(p,e);const m=$(s,S({},e)),d=r.slice(-1)===a?a:"",[,f]=u.match(RegExp("\\d+\\.(\\d+)"))||[];return void 0===l&&f&&a&&(s=s.includes(a)?s.replace(RegExp(`(\\d+)(${h(a)})(\\d+)`,"g"),`$1$2${f}`):m&&!o?s.replace(m,`${a}${f}${m}`):`${s}${a}${f}`),o&&d?`${s}${d}${o}`:m&&d?s.replace(m,`${d}${m}`):m&&o?s.replace(m,`${d}${o}`):[s,d,o].join("")},I=(e,r,a)=>{let t=e;return r&&"."!==r&&(t=t.replace(RegExp(h(r),"g"),"."),a&&"-"===r&&(t=`-${t.slice(1)}`)),t},N=(e,{prefix:r,groupSeparator:a,decimalSeparator:t,decimalScale:l,disableGroupSeparators:n=!1})=>e.reduce(((e,{type:o,value:i},u)=>0===u&&r?"minusSign"===o?[i,r]:"currency"===o?[...e,r]:[r,i]:"currency"===o?r?e:[...e,i]:"group"===o?n?e:[...e,void 0!==a?a:i]:"decimal"===o?void 0!==l&&0===l?e:[...e,void 0!==t?t:i]:"fraction"===o?[...e,void 0!==l?i.slice(0,l):i]:[...e,i]),[""]).join(""),E={currencySymbol:"",groupSeparator:"",decimalSeparator:"",prefix:"",suffix:""},A=e=>RegExp(/\d/,"gi").test(e),C=r(((r,i)=>{var u=r,{allowDecimals:c=!0,allowNegativeValue:p=!0,id:s,name:m,className:d,customInput:f,decimalsLimit:g,defaultValue:h,disabled:w=!1,maxLength:I,value:N,onValueChange:C,fixedDecimalLength:D,placeholder:R,decimalScale:U,prefix:V,suffix:F,intlConfig:O,step:L,min:k,max:P,disableGroupSeparators:j=!1,disableAbbreviations:K=!1,decimalSeparator:B,groupSeparator:T,onChange:G,onFocus:M,onBlur:W,onKeyDown:q,onKeyUp:z,transformRawValue:H,formatValueOnBlur:X=!0}=u,Y=b(u,["allowDecimals","allowNegativeValue","id","name","className","customInput","decimalsLimit","defaultValue","disabled","maxLength","value","onValueChange","fixedDecimalLength","placeholder","decimalScale","prefix","suffix","intlConfig","step","min","max","disableGroupSeparators","disableAbbreviations","decimalSeparator","groupSeparator","onChange","onFocus","onBlur","onKeyDown","onKeyUp","transformRawValue","formatValueOnBlur"]);if(B&&A(B))throw new Error("decimalSeparator cannot be a number");if(T&&A(T))throw new Error("groupSeparator cannot be a number");const Z=a((()=>(e=>{const{locale:r,currency:a}=e||{};return(r?new Intl.NumberFormat(r,a?{currency:a,style:"currency"}:void 0):new Intl.NumberFormat).formatToParts(1000.1).reduce(((e,r,a)=>"currency"===r.type?v(S({},e),0===a?{currencySymbol:r.value,prefix:r.value}:{currencySymbol:r.value,suffix:r.value}):"group"===r.type?v(S({},e),{groupSeparator:r.value}):"decimal"===r.type?v(S({},e),{decimalSeparator:r.value}):e),E)})(O)),[O]),J=B||Z.decimalSeparator||"",Q=T||Z.groupSeparator||"";if(J&&Q&&J===Q&&!1===j)throw new Error("decimalSeparator cannot be the same as groupSeparator");const _={decimalSeparator:J,groupSeparator:Q,disableGroupSeparators:j,intlConfig:O,prefix:V||Z.prefix,suffix:F},ee={decimalSeparator:J,groupSeparator:Q,allowDecimals:c,decimalsLimit:g||D||2,allowNegativeValue:p,disableAbbreviations:K,prefix:V||Z.prefix,transformRawValue:H},[re,ae]=t((()=>null!=h?x(v(S({},_),{decimalScale:U,value:String(h)})):null!=N?x(v(S({},_),{decimalScale:U,value:String(N)})):"")),[te,le]=t(!1),[ne,oe]=t(0),[ie,ue]=t(0),[ce,pe]=t(null),se=l(null);n(i,(()=>se.current));const me=(e,r)=>{le(!0);const{modifiedValue:a,cursorPosition:t}=(({selectionStart:e,value:r,lastKeyStroke:a,stateValue:t,groupSeparator:l})=>{let n=e,o=r;if(t&&n){const e=r.split("");return"Backspace"===a&&t[n]===l&&(e.splice(n-1,1),n-=1),"Delete"===a&&t[n]===l&&(e.splice(n,1),n+=1),o=e.join(""),{modifiedValue:o,cursorPosition:n}}return{modifiedValue:o,cursorPosition:e}})({selectionStart:r,value:e,lastKeyStroke:ce,stateValue:re,groupSeparator:Q}),l=y(S({value:a},ee));if(I&&l.replace(/-/g,"").length>I)return;if(""===l||"-"===l||l===J)return C&&C(void 0,m,{float:null,formatted:"",value:""}),ae(l),void oe(1);const n=J?l.replace(J,"."):l,o=parseFloat(n),i=x(S({value:l},_));if(null!=t){let r=t+(i.length-e.length);r=r<=0?V?V.length:0:r,oe(r),ue(ie+1)}if(ae(i),C){C(l,m,{float:o,formatted:i,value:l})}};o((()=>{null==N&&null==h&&ae("")}),[h,N]),o((()=>{te&&"-"!==re&&se.current&&document.activeElement===se.current&&se.current.setSelectionRange(ne,ne)}),[re,ne,se,te,ie]);const de=S({type:"text",inputMode:"decimal",id:s,name:m,className:d,onChange:e=>{const{target:{value:r,selectionStart:a}}=e;me(r,a),G&&G(e)},onBlur:e=>{const{target:{value:r}}=e,a=y(S({value:r},ee));if("-"===a||a===J||!a)return ae(""),void(W&&W(e));const t=((e,r,a)=>{if(void 0!==a&&e.length>1){if(0===a)return e.replace(r,"");if(e.includes(r)){const[t,l]=e.split(r);if(l.length===a)return e;if(l.length>a)return`${t}${r}${l.slice(0,a)}`}const t=e.length>a?new RegExp(`(\\d+)(\\d{${a}})`):new RegExp("(\\d)(\\d+)"),l=e.match(t);if(l){const[,e,a]=l;return`${e}${r}${a}`}}return e})(a,J,D),l=((e,r=".",a)=>{if(void 0===a||""===e||void 0===e)return e;if(!e.match(/\d/g))return"";const[t,l]=e.split(r);if(0===a)return t;let n=l||"";if(n.length<a)for(;n.length<a;)n+="0";else n=n.slice(0,a);return`${t}${r}${n}`})(t,J,void 0!==U?U:D),n=parseFloat(l.replace(J,".")),o=x(v(S({},_),{value:l}));C&&X&&C(l,m,{float:n,formatted:o,value:l}),ae(o),W&&W(e)},onFocus:e=>(M&&M(e),re?re.length:0),onKeyDown:e=>{const{key:r}=e;if(pe(r),L&&("ArrowUp"===r||"ArrowDown"===r)){e.preventDefault(),oe(re.length);const a=parseFloat(null!=N?String(N).replace(J,"."):y(S({value:re},ee)))||0,t="ArrowUp"===r?a+L:a-L;if(void 0!==k&&t<Number(k))return;if(void 0!==P&&t>Number(P))return;const l=String(L).includes(".")?Number(String(L).split(".")[1].length):void 0;me(String(l?t.toFixed(l):t).replace(".",J))}q&&q(e)},onKeyUp:e=>{const{key:r,currentTarget:{selectionStart:a}}=e;if("ArrowUp"!==r&&"ArrowDown"!==r&&"-"!==re){const e=$(re,{groupSeparator:Q,decimalSeparator:J});if(e&&a&&a>re.length-e.length&&se.current){const r=re.length-e.length;se.current.setSelectionRange(r,r)}}z&&z(e)},placeholder:R,disabled:w,value:null==N||"-"===re||J&&re===J?re:x(v(S({},_),{decimalScale:te?void 0:U,value:String(N)})),ref:se},Y);if(f){const r=f;return e.createElement(r,S({},de))}return e.createElement("input",S({},de))}));C.displayName="AmountInputRoot";var D=C,R="SUI-AmountInput-module-root-DmMLf",U="SUI-AmountInput-module-inputRoot-DUIeP",V="SUI-AmountInput-module-label-jCFRn",F="SUI-AmountInput-module-disableShrink-X7g2x",O="SUI-AmountInput-module-focusedLabel-HNFBu",L="SUI-AmountInput-module-disabledLabel-1cOpe",k="SUI-AmountInput-module-input-D1Pda",P="SUI-AmountInput-module-append-TgPrI",j="SUI-AmountInput-module-prepend-oNwFo",K="SUI-AmountInput-module-appendDisabledShrink-qgeyC",B="SUI-AmountInput-module-prependDisabledShrink-S8YwO",T="SUI-AmountInput-module-noLabel-MkZBO",G="SUI-AmountInput-module-errorLabel-DoF7g",M="SUI-AmountInput-module-inputError-KTWVt",W="SUI-AmountInput-module-disabled-WFO7z",q=r(((r,t)=>{var l=r,{name:n,onChange:o,error:c=null,label:p=null,placeholder:s,value:m,inputClassName:d=null,labelClassName:f=null,errorClassName:g=null,prepend:v=null,prependClassName:h=null,append:w=null,appendClassName:y=null,disableShrink:$=!1,disabled:x=!1}=l,I=b(l,["name","onChange","error","label","placeholder","value","inputClassName","labelClassName","errorClassName","prepend","prependClassName","append","appendClassName","disableShrink","disabled"]);const N=i(((e,r)=>{o({target:{name:r,value:e}})}),[o]),E=a((()=>e.createElement(D,S({id:n,className:u(k,{[F]:$,[T]:!p,[W]:x,[M]:"boolean"==typeof c&&c,[d]:d}),name:n,placeholder:s,value:m,ref:t,onValueChange:N,disabled:x,groupSeparator:",",decimalSeparator:".",prefix:"$"},I))),[n,$,p,x,c,d,s,m,t,N,I]),A=a((()=>e.createElement("label",{htmlFor:n,className:u(V,{[F]:$,[L]:x,[O]:p&&s&&!$,[f]:f})},p)),[x,n,$,p,s,f]),C=a((()=>{let e=null;return"string"==typeof c?e=c:c&&"object"==typeof c&&c.message&&(e=c.message),e}),[c]);return e.createElement("div",{className:u(R)},e.createElement("div",{className:u(U)},v&&e.createElement("div",{className:u(j,{[B]:$,[h]:h})},v),w&&e.createElement("div",{className:u(P,{[K]:$,[y]:y})},w),p&&$?A:null,E,p&&!$?A:null),C?e.createElement("div",{className:u(G,{[g]:g})},C):null)}));q.displayName="AmountInput";var z=q;export{z as default};