@nexusui/components/core/NumberFormatter/controllers/NumberFormatterMenu.component.js

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.

import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import a,{useState as r,useRef as o,useCallback as s,useEffect as l}from"react";import n from"react-draggable";import c from"lodash/uniqueId";import{PopoverPaper as m}from"@mui/material/Popover";import d from"@mui/material/Box";import u from"@mui/material/Typography";import h from"@mui/material/RadioGroup";import p from"@mui/material/FormControlLabel";import f from"@mui/material/Radio";import b from"@mui/material/Stack";import N from"@mui/material/TextField";import g from"@mui/material/Checkbox";import v from"@mui/icons-material/InfoOutlined";import $ from"@mui/material/Tooltip";import x from"@mui/material/Menu";import w from"@mui/material/Button";import P from"@mui/material/Divider";import{useNumberFormatterContext as T}from"../NumberFormatter.context.js";import{useTranslate as C}from"../../locales/index.js";import I from"../locale.json.js";const y=a.forwardRef(((t,i)=>{const{handle:a,...r}=t;return e(n,{handle:`#${a}`,children:e(d,{children:e(m,{ref:i,...r})})})})),D="NexusNumberFormatterMenu",M=e=>e.stopPropagation(),k=a=>{const{slotProps:n,MenuListProps:m,draggable:d,...k}=a,[F]=r((()=>c(`${D}-draggable`))),R=n?.paper?.sx,{options:S,setOptions:j}=T(),z=o(S),[Z,B]=r("scientific"!==S.notation?"standard":"scientific"),[L,W]=r(S.decimalPlaces),[G,A]=r(S.showTrailingZeros),[O,q]=r("auto"===S.notation),[H,U]=r(S.scientificThresholds?.above),[E,J]=r(S.scientificThresholds?.below),K=C(I),Q=s((()=>{B("scientific"!==z.current.notation?"standard":"scientific"),W(z.current.decimalPlaces),A(z.current.showTrailingZeros),q("auto"===z.current.notation),U(z.current.scientificThresholds?.above),J(z.current.scientificThresholds?.below)}),[]),V=s((()=>Z!==("scientific"!==z.current.notation?"standard":"scientific")||(!(L===z.current.decimalPlaces||void 0===z.current.decimalPlaces&&Number.isNaN(L??NaN))||(G!==z.current.showTrailingZeros||(O!==("auto"===z.current.notation)||(H!==z.current.scientificThresholds?.above||E!==z.current.scientificThresholds?.below))))),[Z,L,G,O,H,E]);return l((()=>{j({notation:O?"auto":Z,decimalPlaces:L,showTrailingZeros:G,scientificThresholds:{above:H,below:E}})}),[Z,L,G,O,H,E,j]),l((()=>{a.open||(z.current=S)}),[a.open,S]),e(x,{autoFocus:!1,className:`${D}-root`,"data-testid":`${D}-root`,MenuListProps:{disablePadding:!0,...m},slots:d?{paper:y}:{},slotProps:{...n,paper:{...n?.paper,handle:d?F:void 0,sx:[{width:330,maxWidth:"100%",minHeight:230},...R?Array.isArray(R)?R:[R]:[]]}},...k,children:t(b,{sx:{p:4,cursor:d?"move":void 0,alignItems:"flex-start"},id:d?F:void 0,"data-testid":d?`${D}-draggable`:void 0,children:[t(b,{className:`${D}-header`,"data-testid":`${D}-header`,direction:"row",alignItems:"center",justifyContent:"space-between",alignSelf:"stretch",children:[e(u,{className:`${D}-title`,"data-testid":`${D}-title`,variant:"subtitle2",children:K("Numerical Format")}),e(w,{className:`${D}-resetButton`,"data-testid":`${D}-resetButton`,onClick:()=>{Q()},disabled:!V(),onMouseDown:M,children:K("Reset")})]}),t(h,{className:`${D}-radioGroup`,"data-testid":`${D}-radioGroup`,row:!0,value:Z,onChange:e=>B(e.target.value),onMouseDown:M,sx:{mt:2,mb:4},children:[e(p,{value:"standard",control:e(f,{size:"small",className:`${D}-standardRadio`,inputProps:{"data-testid":`${D}-standardRadio`}}),label:K("Decimal")}),e(p,{value:"scientific",control:e(f,{size:"small",className:`${D}-scientificRadio`,inputProps:{"data-testid":`${D}-scientificRadio`}}),label:K("Scientific")})]}),"scientific"===Z&&e(u,{sx:{mt:-2,mb:6},variant:"caption",color:"textSecondary",children:K("ScientificDescription")}),e(N,{className:`${D}-decimalInput`,fullWidth:!0,label:K("Decimal Places"),value:Number.isNaN(L??NaN)?"":L,onChange:e=>{W(parseInt(e.target.value,10))},type:"number",slotProps:{htmlInput:{max:20,min:0,step:1,"data-testid":`${D}-decimalInput`}},onMouseDown:M}),e(p,{sx:{mt:2},control:e(g,{size:"small",className:`${D}-trailingZeroCheckbox`,checked:Boolean(G),onChange:(e,t)=>A(t),inputProps:{"data-testid":`${D}-trailingZeroCheckbox`}}),label:e(u,{variant:"body2",children:K("Include trailing zeros")})}),"standard"===Z&&t(i,{children:[e(P,{sx:{mt:4,mb:4,alignSelf:"stretch"}}),e(p,{control:e(g,{size:"small",className:`${D}-thresholdCheckbox`,checked:O,onChange:(e,t)=>q(t),inputProps:{"data-testid":`${D}-thresholdCheckbox`},onMouseDown:M}),label:t(b,{spacing:2,direction:"row",alignItems:"center",children:[e(u,{variant:"body2",children:K("Set thresholds")}),e($,{disableInteractive:!0,title:K("ThresholdTooltip"),children:e(v,{color:"action",fontSize:"small"})})]})}),O&&t(i,{children:[e(N,{sx:{mt:4},className:`${D}-upperThreshold`,fullWidth:!0,label:K("Upper threshold"),value:Number.isNaN(H??NaN)?"":H,onChange:e=>U(parseFloat(e.target.value)),type:"number",slotProps:{htmlInput:{min:0,step:1e3,"data-testid":`${D}-upperThreshold`}},onMouseDown:M}),e(N,{sx:{mt:4},className:`${D}-lowerThreshold`,fullWidth:!0,label:K("Lower threshold"),value:Number.isNaN(E??NaN)?"":E,onChange:e=>J(parseFloat(e.target.value)),type:"number",slotProps:{htmlInput:{min:0,step:1e-6,"data-testid":`${D}-lowerThreshold`}},onMouseDown:M})]})]})]})})};export{k as NumberFormatterMenu};