@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.23 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"@mui/material/TextField";import{useMemo as n,useState as i}from"react";import o from"@mui/material/Box";import a from"@mui/icons-material/ArrowDropDown";import m from"@mui/material/Menu";import l from"@mui/material/MenuItem";import s from"@mui/material/IconButton";import u from"@mui/icons-material/KeyboardArrowUp";import d from"@mui/icons-material/KeyboardArrowDown";import p from"@mui/material/InputAdornment";import c from"./UnitLibs/index.js";import f from"./UnitFormatter.styles.js";import{useTranslate as h}from"../locales/index.js";import N from"./locale.json.js";const b="NexusUnitFormatter",v=v=>{const{value:x,showIncrementDecrementButtons:y=!1,unitPlacement:A="start",unitType:E="CustomUnit",units:I=[],onChange:w,onBlur:$,inputProps:C={},InputProps:S={},sx:U={},stepperIncrement:j=1,disabled:F,startAdornment:_,endAdornment:T,onStepDecrement:g,onStepIncrement:B,onUnitSelectChange:D,readOnly:M,...k}=v,P=h(N),V=n((()=>new Set(Object.keys(N["en-US"]))),[]),[G,O]=i(null),R=n((()=>x?.unit||""),[x]),z=n((()=>void 0===x?.value?"":x.value),[x]),K=n((()=>{if("CustomUnit"===E){const e={};return I.forEach((t=>{e[t.type]=t})),e}return c[E]}),[I,E]),X=n((()=>K[R]||{type:R,minValue:0,placeholder:""}),[K,R]),L=e=>{if(M)return;if(B&&"up"===e)return void B();if(g&&"down"===e)return void g();const t=X.minValue??Number.MIN_SAFE_INTEGER,r=X.maxValue??Number.MAX_SAFE_INTEGER;let n=Number(z||0)+("up"===e?j:-j);n=n<=t?t:n,n=n>=r?r:n,w?.({value:n,unit:R})},q=()=>{O(null)},H=()=>t(o,{className:`${b}-dropdown`,sx:{cursor:"pointer",pointerEvents:M?"none":void 0},children:[t(o,{"data-testid":`${b}-dropdown-button`,"aria-controls":G?"basic-menu":void 0,"aria-haspopup":"true","aria-expanded":G?"true":void 0,sx:{display:"flex",alignItems:"center",justifyContent:"center"},onClick:e=>{O(e.currentTarget)},children:[I.find((e=>e.type===R))?.shortUnits??R,!M&&e(a,{})]}),e(m,{"data-testid":`${b}-menu`,anchorEl:F?null:G,open:Boolean(G&&!F),onClose:q,children:Object.entries(K).map((([t,r])=>e(l,{"data-testid":`${b}-menu-item-${t}`,onClick:()=>{(e=>{D?D(e):w?.({value:z,unit:e})})(t),q()},children:V.has(r.displayName)?P(r.displayName):r.displayName},t)))})]});return e(r,{"data-testid":`${b}-root`,className:`${b}-root`,sx:[f.root,...Array.isArray(U)?U:[U]],placeholder:X.placeholder,value:z,disabled:F,...k,onChange:e=>{w?.({value:e.target.value,unit:R})},onBlur:()=>{$?.({value:z,unit:R})},slotProps:{input:{readOnly:M,...S,startAdornment:(()=>{if("start"===A)return t(p,{position:"start",children:[_,H()]})})(),endAdornment:t(p,{position:"end",children:["end"===A?H():"",e(o,{children:y?t(o,{"data-testid":`${b}-stepper`,className:`${b}-stepper`,sx:[f[".NexusSimpleUnitFormatter-stepper"],{pointerEvents:M?"none":void 0}],children:[e(s,{"data-testid":`${b}-stepper-up`,size:"small",onClick:()=>L("up"),disabled:z===(K[R]?.maxValue??Number.MAX_SAFE_INTEGER)||F,"aria-label":"Increment",children:e(u,{})}),e(s,{"data-testid":`${b}-stepper-down`,size:"small",onClick:()=>L("down"),disabled:z===(K[R]?.minValue??Number.MIN_SAFE_INTEGER)||F,"aria-label":"Decrement",children:e(d,{})})]}):""}),T]}),inputProps:{...C,"data-testid":`${b}-input`}}}})};export{v as default};