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

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

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