@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 3.62 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/TextField"),r=require("react"),n=require("@mui/material/Box"),a=require("@mui/icons-material/ArrowDropDown"),i=require("@mui/material/Menu"),u=require("@mui/material/MenuItem"),s=require("@mui/material/IconButton"),l=require("@mui/icons-material/KeyboardArrowUp"),o=require("@mui/icons-material/KeyboardArrowDown"),d=require("@mui/material/InputAdornment"),m=require("./UnitLibs/index.js"),p=require("./UnitFormatter.styles.js"),c=require("../locales/index.js"),f=require("./locale.json.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=x(t),h=x(n),v=x(a),b=x(i),y=x(u),N=x(s),A=x(l),E=x(o),q=x(d);const I="NexusUnitFormatter";exports.default=t=>{const{value:n,showIncrementDecrementButtons:a=!1,unitPlacement:i="start",unitType:u="CustomUnit",units:s=[],onChange:l,onBlur:o,inputProps:d={},InputProps:x={},sx:w={},stepperIncrement:M=1,disabled:$,startAdornment:C,endAdornment:S,onStepDecrement:U,onStepIncrement:_,onUnitSelectChange:F,readOnly:T,...g}=t,B=c.useTranslate(f.default),D=r.useMemo((()=>new Set(Object.keys(f.default["en-US"]))),[]),[P,k]=r.useState(null),O=r.useMemo((()=>n?.unit||""),[n]),V=r.useMemo((()=>void 0===n?.value?"":n.value),[n]),G=r.useMemo((()=>{if("CustomUnit"===u){const e={};return s.forEach((t=>{e[t.type]=t})),e}return m.default[u]}),[s,u]),R=r.useMemo((()=>G[O]||{type:O,minValue:0,placeholder:""}),[G,O]),z=e=>{if(T)return;if(_&&"up"===e)return void _();if(U&&"down"===e)return void U();const t=R.minValue??Number.MIN_SAFE_INTEGER,r=R.maxValue??Number.MAX_SAFE_INTEGER;let n=Number(V||0)+("up"===e?M:-M);n=n<=t?t:n,n=n>=r?r:n,l?.({value:n,unit:O})},K=()=>{k(null)},X=()=>e.jsxs(h.default,{className:`${I}-dropdown`,sx:{cursor:"pointer",pointerEvents:T?"none":void 0},children:[e.jsxs(h.default,{"data-testid":`${I}-dropdown-button`,"aria-controls":P?"basic-menu":void 0,"aria-haspopup":"true","aria-expanded":P?"true":void 0,sx:{display:"flex",alignItems:"center",justifyContent:"center"},onClick:e=>{k(e.currentTarget)},children:[s.find((e=>e.type===O))?.shortUnits??O,!T&&e.jsx(v.default,{})]}),e.jsx(b.default,{"data-testid":`${I}-menu`,anchorEl:$?null:P,open:Boolean(P&&!$),onClose:K,children:Object.entries(G).map((([t,r])=>e.jsx(y.default,{"data-testid":`${I}-menu-item-${t}`,onClick:()=>{(e=>{F?F(e):l?.({value:V,unit:e})})(t),K()},children:D.has(r.displayName)?B(r.displayName):r.displayName},t)))})]});return e.jsx(j.default,{"data-testid":`${I}-root`,className:`${I}-root`,sx:[p.default.root,...Array.isArray(w)?w:[w]],placeholder:R.placeholder,value:V,disabled:$,...g,onChange:e=>{l?.({value:e.target.value,unit:O})},onBlur:()=>{o?.({value:V,unit:O})},slotProps:{input:{readOnly:T,...x,startAdornment:(()=>{if("start"===i)return e.jsxs(q.default,{position:"start",children:[C,X()]})})(),endAdornment:e.jsxs(q.default,{position:"end",children:["end"===i?X():"",e.jsx(h.default,{children:a?e.jsxs(h.default,{"data-testid":`${I}-stepper`,className:`${I}-stepper`,sx:[p.default[".NexusSimpleUnitFormatter-stepper"],{pointerEvents:T?"none":void 0}],children:[e.jsx(N.default,{"data-testid":`${I}-stepper-up`,size:"small",onClick:()=>z("up"),disabled:V===(G[O]?.maxValue??Number.MAX_SAFE_INTEGER)||$,"aria-label":"Increment",children:e.jsx(A.default,{})}),e.jsx(N.default,{"data-testid":`${I}-stepper-down`,size:"small",onClick:()=>z("down"),disabled:V===(G[O]?.minValue??Number.MIN_SAFE_INTEGER)||$,"aria-label":"Decrement",children:e.jsx(E.default,{})})]}):""}),S]}),inputProps:{...d,"data-testid":`${I}-input`}}}})};