@lanaco/lnc-react-ui/dist/DecimalInputV2.cjs

React component library

"use strict";const y=require("react/jsx-runtime"),i=require("./index-BPVoEhTF.cjs"),h=require("react"),$=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),s=require("./utils-NZLCh-J5.cjs"),M=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),Q=$.newStyled.div`
  display: flex;
  align-items: center;

  min-height: ${e=>s.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>s.getSizeValueWithUnits(e.theme,e.size)};
  background-color: ${e=>s.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  border: 1px solid
    ${e=>s.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","border")};
  border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,"regular")};

  ${e=>e.focused===!0&&e.readOnly!==!0?s.getOutlineCss(e.theme):""}
  ${e=>e.isDisabled===!0?s.getDisabledStateCss(e.theme):""}
  ${e=>e.isDisabled===!0?"border: 1px solid "+s.getColorRgbaValue(e.theme,"Input",e.color,"disabled","border"):""}

  & input {
    background: none;
    border: none;
    outline: none;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    width: 100%;

    ${e=>s.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
    min-height: ${e=>s.getSizeValueWithUnits(e.theme,e.size)};
    max-height: ${e=>s.getSizeValueWithUnits(e.theme,e.size)};
    color: ${e=>s.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
    caret-color: ${e=>s.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
    padding-right: ${e=>e.suffix?"0":"0.75rem"};
    padding-left: ${e=>e.prefix?"0":"0.75rem"};
  }

  & input:disabled {
    ${e=>s.getDisabledStateCss(e.theme)}
    background: none;
  }

  & input:read-only {
    cursor: default;
  }

  & input::placeholder {
    color: ${e=>s.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
  }
`,q=$.newStyled.span`
  padding: 0 12px;
  color: ${e=>s.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
`,X=$.newStyled(q)``,W=h.forwardRef((e,R)=>{const{disabled:V,readOnly:j,prefix:m,suffix:f,decimalSeparator:c=",",decimalScale:a=2,allowNegative:U=!0,onKeyDown:B=()=>{},onBlur:b=()=>{},onFocus:T=()=>{},onChange:N=()=>{},value:x,className:F="",style:K={},size:_="small",color:P="primary",onInputChange:k=()=>{},allowNull:z=!0,...E}=e,w=M.useTheme(),[C,I]=h.useState(!1),O=o=>{var t,u;if(isNaN(+o)){if(z===!0&&(o==null||o===""))return""}else{const l=(t=o==null?void 0:o.toString())==null?void 0:t.split(".");if(!(l!=null&&l.length)>0)return"0"+c+new Array(a+1).join("0");if((l==null?void 0:l.length)===1)return l.at(0)+c+new Array(a+1).join("0");if((l==null?void 0:l.length)>1){let n=(u=l==null?void 0:l.at(1))==null?void 0:u.toString();if((n==null?void 0:n.length)===a)return l.at(0)+c+n;if((n==null?void 0:n.length)<a)return l.at(0)+c+l.at(1)+new Array(a-n.length+1).join("0");if((n==null?void 0:n.length)>a)return l.at(0)+c+n.slice(0,a)}}return"0"+c+new Array(a+1).join("0")},D=O(x),[G,p]=h.useState(D),r=h.useRef(D);h.useEffect(()=>{const o=O(x);r.current=o,p(r.current)},[x]);const H=o=>{I(!0),T==null||T(o)},J=o=>{I(!1),b==null||b(o)},L=o=>{var u,l;let t=(u=r.current)==null?void 0:u.replace(c,"");if(o.key==="Delete"||o.key==="Backspace")if(+t!=0){t=t.slice(0,(t==null?void 0:t.length)-1);let n=t.slice(0,(t==null?void 0:t.length)-a),d=t.slice((t==null?void 0:t.length)-a);(n==null?void 0:n.length)===0?n="0":n==="-"&&+t!=0?n="-0":n==="-"&&+t==0&&(n="0");let g=[n,c,d].join("");r.current=g,p(r.current)}else+t==0&&z===!0&&(r==null?void 0:r.current)!==""&&(r.current="",p(r.current),S(o));else if(o.key==="-"&&U===!0&&+t!=0)((l=r==null?void 0:r.current)==null?void 0:l.slice(1))==="-"?r.current=r.current.slice(1,r.current.length):r.current="-"+r.current,p(r.current);else if(!isNaN(o.key)){(t==null?void 0:t.length)===0?t="0"+new Array(a).join("0")+o.key:t=t+o.key;let n=t.slice(0,(t==null?void 0:t.length)-a),d=t.slice((t==null?void 0:t.length)-a);(n==null?void 0:n.length)>1&&(n=n.replace(/^0+/,""),(n==null?void 0:n.length)===0&&(n="0"));let g=[n,c,d].join("");r.current=g,p(r.current)}B(o)},S=o=>{var d,g;if((r==null?void 0:r.current)===""){o.target.value="",k(o,null),N(o,null);return}let t=(d=r==null?void 0:r.current)==null?void 0:d.split(c),u=+(t==null?void 0:t.at(0)),l=((g=t==null?void 0:t.at(1))==null?void 0:g.length)>0?`0.${t==null?void 0:t.at(1)}`:0,n=u+ +l;o.target.value=n,k(o,n),N(o,n)};return y.jsxs(Q,{style:K,className:F,theme:w,color:P,size:_,prefix:m,suffix:f,focused:C,disabled:V,readOnly:j,children:[m&&y.jsx(q,{theme:w,color:P,focused:C,className:"lnc-input-prefix",children:m}),y.jsx("input",{ref:R,type:"text",...E,onKeyDown:L,onBlur:J,value:G,className:"lnc-ui-decimal-v2-input",onFocus:H,disabled:V||j,onChange:o=>{console.log("CHG",o),S(o)}}),f&&y.jsx(X,{theme:w,color:P,focused:C,className:"lnc-input-suffix",children:f})]})});W.propTypes={id:i.PropTypes.string,value:i.PropTypes.any,defaultValue:i.PropTypes.any,disabled:i.PropTypes.bool,readOnly:i.PropTypes.bool,debounceTime:i.PropTypes.number,prefix:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]),suffix:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]),thousandSeparator:i.PropTypes.oneOf([".",","," "]),decimalSeparator:i.PropTypes.oneOf([".",","]),decimalScale:i.PropTypes.number,fixedDecimalScale:i.PropTypes.bool,allowNegative:i.PropTypes.bool,onChange:i.PropTypes.func,onInputChange:i.PropTypes.func,onBlur:i.PropTypes.func,onFocus:i.PropTypes.func,onKeyDown:i.PropTypes.func,className:i.PropTypes.string,style:i.PropTypes.object,size:i.PropTypes.oneOf(["small","medium","large"]),color:i.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=W;