@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) • 4.71 kB
JavaScript
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useState as a,useCallback as o}from"react";import r from"@mui/material/Typography";import s from"@mui/material/RadioGroup";import l from"@mui/material/FormControlLabel";import n from"@mui/material/Radio";import c from"@mui/material/Stack";import m from"@mui/material/TextField";import d from"@mui/material/Checkbox";import h from"@mui/icons-material/InfoOutlined";import p from"@mui/material/Tooltip";import u from"@mui/material/Divider";import{useNumberFormatterContext as N}from"../NumberFormatter.context.js";import{Dialog as f}from"../../Dialog/Dialog.container.js";import{useTranslate as b}from"../../locales/index.js";import g from"../locale.json.js";const $="NexusNumberFormatterDialog",v=v=>{const{open:x,onClose:w,title:T,sx:C}=v,{options:y,setOptions:P}=N(),[F,I]=a("scientific"!==y.notation?"standard":"scientific"),[D,k]=a(y.decimalPlaces),[j,B]=a(y.showTrailingZeros),[R,Z]=a("auto"===y.notation),[A,S]=a(y.scientificThresholds?.above),[W,G]=a(y.scientificThresholds?.below),z=b(g),K=new Intl.NumberFormat(void 0,{notation:"standard",maximumFractionDigits:Number.isNaN(D??NaN)?20:D,minimumFractionDigits:Number.isNaN(D??NaN)?0:D}),L=new Intl.NumberFormat(void 0,{notation:"scientific",maximumFractionDigits:Number.isNaN(D??NaN)?20:D,minimumFractionDigits:Number.isNaN(D??NaN)?0:D}),O=o((()=>{I("scientific"!==y.notation?"standard":"scientific"),k(y.decimalPlaces),B(y.showTrailingZeros),Z("auto"===y.notation),S(y.scientificThresholds?.above),G(y.scientificThresholds?.below)}),[y]),H=o((()=>F!==("scientific"!==y.notation?"standard":"scientific")||(!(D===y.decimalPlaces||void 0===y.decimalPlaces&&Number.isNaN(D??NaN))||(j!==y.showTrailingZeros||(R!==("auto"===y.notation)||(A!==y.scientificThresholds?.above||W!==y.scientificThresholds?.below))))),[y,F,D,j,R,A,W]);return e(f,{className:`${$}-root`,"data-testid":`${$}-root`,title:T??z("Numerical Format"),open:x,onClose:(e,t)=>{w?.(e,t),O()},leftActions:[{children:z("Reset"),onClick:()=>{O()},disabled:!H(),className:`${$}-resetButton`,"data-testid":`${$}-resetButton`}],rightActions:[{children:z("Cancel"),color:"primary",onClick:e=>{w?.(e,"escapeKeyDown"),O()},className:`${$}-cancelButton`,"data-testid":`${$}-cancelButton`},{children:z("Apply"),color:"primary",variant:"contained",onClick:e=>{w?.(e,"escapeKeyDown"),P({notation:R?"auto":F,decimalPlaces:D,showTrailingZeros:j,scientificThresholds:{above:A,below:W}})},disabled:!H(),className:`${$}-applyButton`,"data-testid":`${$}-applyButton`}],PaperProps:{sx:[{"&.MuiPaper-root":{width:500,minHeight:340,maxWidth:"100%"}},...Array.isArray(C)?C:[C]]},children:t(c,{children:[t(s,{className:`${$}-radioGroup`,"data-testid":`${$}-radioGroup`,row:!0,value:F,onChange:e=>I(e.target.value),sx:{mb:4},children:[e(l,{value:"standard",control:e(n,{className:`${$}-standardRadio`,inputProps:{"data-testid":`${$}-standardRadio`}}),label:z("Decimal")}),e(l,{value:"scientific",control:e(n,{className:`${$}-scientificRadio`,inputProps:{"data-testid":`${$}-scientificRadio`}}),label:z("Scientific")})]}),e(m,{className:`${$}-decimalInput`,fullWidth:!0,label:z("Decimal Places"),value:Number.isNaN(D??NaN)?"":D,onChange:e=>{k(parseInt(e.target.value,10))},type:"number",slotProps:{htmlInput:{max:20,min:0,step:1,"data-testid":`${$}-decimalInput`}}}),t(c,{direction:"row",justifyContent:"space-between",alignItems:"center",sx:{mt:1},children:[e(r,{variant:"caption",children:`${z("Sample")}: ${("scientific"===F?L:K).format("standard"===F?1.23456789:123456789)}`}),e(l,{control:e(d,{className:`${$}-trailingZeroCheckbox`,checked:Boolean(j),onChange:(e,t)=>B(t),inputProps:{"data-testid":`${$}-trailingZeroCheckbox`}}),label:e(r,{variant:"body2",children:z("Include trailing zeros")})})]}),"standard"===F&&t(i,{children:[e(u,{sx:{mt:4,mb:4}}),e(l,{control:e(d,{className:`${$}-thresholdCheckbox`,checked:R,onChange:(e,t)=>Z(t),inputProps:{"data-testid":`${$}-thresholdCheckbox`}}),label:t(c,{spacing:2,direction:"row",alignItems:"center",children:[e(r,{variant:"body2",children:z("Set thresholds")}),e(p,{disableInteractive:!0,title:z("ThresholdTooltip"),children:e(h,{color:"action",fontSize:"small"})})]})}),R&&t(i,{children:[e(m,{sx:{mt:4},className:`${$}-upperThreshold`,fullWidth:!0,label:z("Upper threshold"),value:A,onChange:e=>S(parseFloat(e.target.value)),type:"number",slotProps:{htmlInput:{min:0,step:1e3,"data-testid":`${$}-upperThreshold`}}}),e(m,{sx:{mt:4},className:`${$}-lowerThreshold`,fullWidth:!0,label:z("Lower threshold"),value:W,onChange:e=>G(parseFloat(e.target.value)),type:"number",slotProps:{htmlInput:{min:0,step:1e-6,"data-testid":`${$}-lowerThreshold`}}})]})]})]})})};export{v as NumberFormatterDialog};