@@ -8,55 +8,51 @@ import MenuItem from "@mui/material/MenuItem";
88
99import Card from "@mui/material/Card" ;
1010import CardContent from "@mui/material/CardContent" ;
11- import FormControl from '@mui/material/FormControl' ;
12-
11+ import FormControl from "@mui/material/FormControl" ;
1312
1413import { units } from "./common" ;
1514
1615export function ComponentAdjuster ( { componentValues, setComponentValues } ) {
17- function handleValueChange ( name , value ) {
16+ function handleValueChange ( name , value ) {
1817 setComponentValues ( ( prevValues ) => ( {
1918 ...prevValues ,
20- [ name ] : { ...prevValues [ name ] , value : value }
19+ [ name ] : { ...prevValues [ name ] , value : value } ,
2120 } ) ) ;
22- } ;
23- function handleUnitChange ( name , value ) {
21+ }
22+ function handleUnitChange ( name , value ) {
2423 setComponentValues ( ( prevValues ) => ( {
2524 ...prevValues ,
26- [ name ] : { ...prevValues [ name ] , unit : value }
25+ [ name ] : { ...prevValues [ name ] , unit : value } ,
2726 } ) ) ;
28- } ;
27+ }
2928
3029 return (
3130 < Grid container spacing = { 2 } >
3231 { Object . keys ( componentValues ) . map ( ( key ) => (
33- < Grid size = { { md :3 } } key = { key } >
34- < Card sx = { { p :1 , m :1 , width :"100%" } } >
35- < Stack direction = "row" spacing = { 0 } alignItems = "center" sx = { { borderRadius : 1 } } >
36- < Typography variant = "h5" sx = { { mr : 1 } } >
37- { key }
38- </ Typography >
39- < TextField
40- name = { key }
41- value = { componentValues [ key ] . value }
42- sx = { { width : "8ch" } }
43- size = "small"
44- onChange = { ( e ) => handleValueChange ( key , e . target . value ) }
45- // fullWidth
46- />
47- < FormControl size = "small" >
48- < Select
49- value = { componentValues [ key ] . unit }
50- onChange = { ( e ) => handleUnitChange ( key , e . target . value ) }
51- >
32+ < Grid size = { { md : 3 } } key = { key } >
33+ < Card sx = { { p : 1 , m : 1 , width : "100%" } } >
34+ < Stack direction = "row" spacing = { 0 } alignItems = "center" sx = { { borderRadius : 1 } } >
35+ < Typography variant = "h5" sx = { { mr : 1 } } >
36+ { key }
37+ </ Typography >
38+ < TextField
39+ name = { key }
40+ value = { componentValues [ key ] . value }
41+ sx = { { width : "8ch" } }
42+ size = "small"
43+ onChange = { ( e ) => handleValueChange ( key , e . target . value ) }
44+ // fullWidth
45+ />
46+ < FormControl size = "small" >
47+ < Select value = { componentValues [ key ] . unit } onChange = { ( e ) => handleUnitChange ( key , e . target . value ) } >
5248 { Object . keys ( units [ componentValues [ key ] . type ] ) . map ( ( opt ) => (
5349 < MenuItem key = { opt } value = { opt } size = "small" >
5450 { opt }
5551 </ MenuItem >
5652 ) ) }
5753 </ Select >
58- </ FormControl >
59- </ Stack >
54+ </ FormControl >
55+ </ Stack >
6056 </ Card >
6157 </ Grid >
6258 ) ) }
0 commit comments