UNPKG

@iqmo/browser

Version:
2 lines (1 loc) 7.6 kB
import{r as a,E as O,_ as P,c as R,dc as v,D as g,G as X,l as pe,ao as me,bl as be,d2 as ge,ap as G,j as i,b_ as fe,b$ as he,cg as ye,c0 as ve,bI as we,b8 as Ie,bX as K}from"./index-0xtYjrTa.js";import{u as xe}from"./uniqueId-MII1RI5s.js";import{I as Te}from"./InputInstructions-D_qxDPd4.js";import{u as ke}from"./FormClearHelper-DpOGb8He.js";import{s as Ce}from"./sprintf-CQZ7AWXD.js";import{I as Re}from"./input-BTpFoeVg.js";var q=a.forwardRef(function(e,t){var n={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return a.createElement(O,P({iconAttrs:n,iconVerticalAlign:"middle",iconViewBox:"0 0 8 8"},e,{ref:t}),a.createElement("path",{d:"M0 3v2h8V3H0z"}))});q.displayName="Minus";var J=a.forwardRef(function(e,t){var n={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return a.createElement(O,P({iconAttrs:n,iconVerticalAlign:"middle",iconViewBox:"0 0 8 8"},e,{ref:t}),a.createElement("path",{d:"M3 0v3H0v2h3v3h2V5h3V3H5V0H3z"}))});J.displayName="Plus";const Se=R("div",{target:"e116k4er3"})(({theme:e})=>({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"center",height:e.sizes.minElementHeight,borderWidth:e.sizes.borderWidth,borderStyle:"solid",borderColor:e.colors.widgetBorderColor??e.colors.secondaryBg,transitionDuration:"200ms",transitionProperty:"border",transitionTimingFunction:"cubic-bezier(0.2, 0.8, 0.4, 1)",borderRadius:e.radii.default,overflow:"hidden","&.focused":{borderColor:e.colors.primary},input:{MozAppearance:"textfield","&::-webkit-inner-spin-button, &::-webkit-outer-spin-button":{WebkitAppearance:"none",margin:e.spacing.none}}}),""),ze=R("div",{target:"e116k4er2"})({name:"76z9jo",styles:"display:flex;flex-direction:row;align-self:stretch"}),Q=R("button",{target:"e116k4er1"})(({theme:e})=>({margin:e.spacing.none,border:"none",height:e.sizes.full,display:"flex",alignItems:"center",width:e.sizes.numberInputControlsWidth,justifyContent:"center",color:e.colors.bodyText,transition:"color 300ms, backgroundColor 300ms",backgroundColor:e.colors.secondaryBg,"&:hover:enabled, &:focus:enabled":{color:e.colors.white,backgroundColor:e.colors.primary,transition:"none",outline:"none"},"&:active":{outline:"none",border:"none"},"&:disabled":{cursor:"not-allowed",color:e.colors.fadedText40}}),""),Ee=R("div",{target:"e116k4er0"})(({theme:e,clearable:t})=>({position:"absolute",marginRight:e.spacing.twoXS,left:0,right:`calc(${e.sizes.numberInputControlsWidth} * 2 + ${t?"1em":"0em"})`}),""),Ve=pe.getLogger("NumberInput");function De(e){return g(e)||e===""?void 0:e}const N=({value:e,format:t,step:n,dataType:b})=>{if(g(e))return null;let r=De(t);if(g(r)&&X(n)){const p=n.toString();b===v.DataType.FLOAT&&n!==0&&p.includes(".")&&(r=`%0.${p.split(".")[1].length}f`)}if(g(r))return e.toString();try{return Ce.sprintf(r,e)}catch(p){return Ve.warn(`Error in sprintf(${r}, ${e}): ${p}`),String(e)}},Ne=(e,t,n)=>g(e)?!1:e-t>=n,je=(e,t,n)=>g(e)?!1:e+t<=n,We=e=>(e.element.dataType===v.DataType.INT?e.widgetMgr.getIntValue(e.element):e.widgetMgr.getDoubleValue(e.element))??e.element.default??null,Y=({step:e,dataType:t})=>e||(t===v.DataType.INT?1:.01),Fe=({disabled:e,element:t,widgetMgr:n,fragmentId:b})=>{const r=me(),{dataType:p,id:S,formId:m,default:j,format:W,icon:z,min:f,max:h}=t,[F,Z]=be(),[l,ee]=a.useState(()=>Y(t)),A=We({element:t,widgetMgr:n}),[y,w]=a.useState(!1),[d,I]=a.useState(A),[B,x]=a.useState(()=>N({value:A,...t,step:l})),[L,M]=a.useState(!1),T=a.useRef(null),U=a.useRef(xe("number_input_")),k=Ne(d,l,f),C=je(d,l,h),H=ge({formId:m}),te=H?n.allowFormEnterToSubmit(m):y,re=L&&F>r.breakpoints.hideWidgetDetails;a.useEffect(()=>{ee(Y({step:t.step,dataType:t.dataType}))},[t.dataType,t.step]);const c=a.useCallback(({value:o,source:s})=>{if(X(o)&&(f>o||o>h))T.current?.reportValidity();else{const u=o??j??null;switch(p){case v.DataType.INT:n.setIntValue({id:S,formId:m},u,s,b);break;case v.DataType.FLOAT:n.setDoubleValue({id:S,formId:m},u,s,b);break;default:throw new Error("Invalid data type")}w(!1),I(u),x(N({value:u,dataType:p,format:W,step:l}))}},[f,h,T,n,b,l,p,S,m,j,W]),ae=a.useCallback(()=>{y&&c({value:d,source:{fromUi:!0}}),M(!1)},[y,d,c]),oe=a.useCallback(()=>{M(!0)},[]),$=a.useCallback(()=>{const{value:o}=t;t.setValue=!1,I(o??null),x(N({value:o??null,...t,step:l})),c({value:o??null,source:{fromUi:!1}})},[t,l,c]);a.useEffect(()=>{t.setValue?$():c({value:d,source:{fromUi:!1}});const o=T.current;if(o){const s=u=>{u.preventDefault()};return o.addEventListener("wheel",s),()=>{o.removeEventListener("wheel",s)}}},[]),t.setValue&&$();const E=g(t.default)&&!e,ne=a.useCallback(()=>{const o=t.default??null;I(o),c({value:o,source:{fromUi:!0}})},[t]);ke({element:t,widgetMgr:n,onFormCleared:ne});const ie=o=>{const{value:s}=o.target;if(s==="")w(!0),I(null),x(null);else{let u;t.dataType===v.DataType.INT?u=parseInt(s,10):u=parseFloat(s),w(!0),I(u),x(s)}},V=a.useCallback(()=>{C&&(w(!0),c({value:(d??f)+l,source:{fromUi:!0}}))},[d,f,l,C]),D=a.useCallback(()=>{k&&(w(!0),c({value:(d??h)-l,source:{fromUi:!0}}))},[d,h,l,k]),le=a.useCallback(o=>{const{key:s}=o;switch(s){case"ArrowUp":o.preventDefault(),V();break;case"ArrowDown":o.preventDefault(),D();break}},[V,D]),se=a.useCallback(o=>{o.key==="Enter"&&(y&&c({value:d,source:{fromUi:!0}}),n.allowFormEnterToSubmit(m)&&n.submitForm(m,b))},[y,d,c,n,m,b]),_=z?.startsWith(":material"),de=_?"lg":"base",ce=G(r.iconSizes.lg)+2*G(r.spacing.twoXS),ue=z?r.breakpoints.hideNumberInputControls+ce:r.breakpoints.hideNumberInputControls;return i.jsxs("div",{className:"stNumberInput","data-testid":"stNumberInput",ref:Z,children:[i.jsx(fe,{label:t.label,disabled:e,labelVisibility:he(t.labelVisibility?.value),htmlFor:U.current,children:t.help&&i.jsx(ye,{children:i.jsx(ve,{content:t.help,placement:we.TOP_RIGHT})})}),i.jsxs(Se,{className:L?"focused":"","data-testid":"stNumberInputContainer",children:[i.jsx(Re,{type:"number",inputRef:T,value:B??"",placeholder:t.placeholder,onBlur:ae,onFocus:oe,onChange:ie,onKeyPress:se,onKeyDown:le,clearable:E,clearOnEscape:E,disabled:e,"aria-label":t.label,startEnhancer:t.icon&&i.jsx(Ie,{"data-testid":"stNumberInputIcon",iconValue:t.icon,size:de}),id:U.current,overrides:{ClearIconContainer:{style:{padding:0}},ClearIcon:{props:{overrides:{Svg:{style:{color:r.colors.darkGray,padding:r.spacing.threeXS,height:r.sizes.clearIconSize,width:r.sizes.clearIconSize,":hover":{fill:r.colors.bodyText}}}}}},Input:{props:{"data-testid":"stNumberInputField",step:l,min:f,max:h,type:"number",inputMode:""},style:{fontWeight:r.fontWeights.normal,lineHeight:r.lineHeights.inputWidget,paddingRight:r.spacing.sm,paddingLeft:r.spacing.md,paddingBottom:r.spacing.sm,paddingTop:r.spacing.sm,"::placeholder":{color:r.colors.fadedText60}}},InputContainer:{style:()=>({borderTopRightRadius:0,borderBottomRightRadius:0})},Root:{style:{borderTopRightRadius:0,borderBottomRightRadius:0,borderTopLeftRadius:0,borderBottomLeftRadius:0,borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0,paddingRight:0,paddingLeft:z?r.spacing.sm:0}},StartEnhancer:{style:{paddingLeft:0,paddingRight:0,minWidth:r.iconSizes.lg,color:_?r.colors.fadedText60:"inherit"}}}}),F>ue&&i.jsxs(ze,{children:[i.jsx(Q,{"data-testid":"stNumberInputStepDown",onClick:D,disabled:!k||e,tabIndex:-1,children:i.jsx(K,{content:q,size:"xs",color:k?"inherit":r.colors.disabled})}),i.jsx(Q,{"data-testid":"stNumberInputStepUp",onClick:V,disabled:!C||e,tabIndex:-1,children:i.jsx(K,{content:J,size:"xs",color:C?"inherit":r.colors.disabled})})]})]}),re&&i.jsx(Ee,{clearable:E,children:i.jsx(Te,{dirty:y,value:B??"",inForm:H,allowEnterToSubmit:te})})]})},Ae=a.memo(Fe);export{Ae as default};