@@ -56,6 +56,7 @@ export default function FluentCoordinateConversion({ vm }) {
5656
5757 const [ activeFormat , setActiveFormat ] = useState ( ) ;
5858
59+ // todo: use hook
5960 useEffect ( ( ) => {
6061 const handle = watch (
6162 ( ) => vm ?. conversions ?. getItemAt ( 0 ) ?. format ,
@@ -70,6 +71,7 @@ export default function FluentCoordinateConversion({ vm }) {
7071
7172 const [ activeDisplayCoordinate , setActiveDisplayCoordinate ] = useState ( ) ;
7273
74+ // todo: use hook
7375 useEffect ( ( ) => {
7476 const handle = watch (
7577 ( ) => vm ?. conversions ?. getItemAt ( 0 ) ?. displayCoordinate ,
@@ -87,7 +89,7 @@ export default function FluentCoordinateConversion({ vm }) {
8789 editing : [ ] ,
8890 } ) ;
8991
90- const onToolbarChange = ( e , { name, checkedItems } ) => {
92+ const onToolbarChange = ( _e , { name, checkedItems } ) => {
9193 setToolbarCheckedValues ( ( s ) => {
9294 return s ? { ...s , [ name ] : checkedItems } : { [ name ] : checkedItems } ;
9395 } ) ;
@@ -99,7 +101,7 @@ export default function FluentCoordinateConversion({ vm }) {
99101 format : [ activeFormat ?. name ] ,
100102 } ) ;
101103
102- const onFormatChange = ( e , { name, checkedItems } ) => {
104+ const onFormatChange = ( _e , { name, checkedItems } ) => {
103105 const value = checkedItems [ 0 ] ;
104106 const format = vm . formats . find ( ( format ) => format . name === value ) ;
105107 const newConversion = new Conversion ( { format } ) ;
@@ -111,12 +113,6 @@ export default function FluentCoordinateConversion({ vm }) {
111113 } ) ;
112114 } ;
113115
114- const formats = vm ?. formats ?. toArray ( ) . map ( ( format ) => (
115- < MenuItemRadio name = "format" value = { format . name } key = { format . name } >
116- { format . name . toLowerCase ( ) }
117- </ MenuItemRadio >
118- ) ) ;
119- 120116 return (
121117 < div className = "fluent-coordinate-conversion" >
122118 < FluentProvider theme = { webDarkTheme } >
@@ -126,11 +122,6 @@ export default function FluentCoordinateConversion({ vm }) {
126122 onCheckedValueChange = { onToolbarChange }
127123 >
128124 < Location24Regular />
129- { ! showEditing ? (
130- < Text className = "text" >
131- { activeDisplayCoordinate || "No position" }
132- </ Text >
133- ) : null }
134125 { showEditing ? (
135126 < Input
136127 placeholder = "Enter coordinates"
@@ -146,7 +137,11 @@ export default function FluentCoordinateConversion({ vm }) {
146137 }
147138 } }
148139 />
149- ) : null }
140+ ) : (
141+ < Text className = "text" >
142+ { activeDisplayCoordinate || "No position" }
143+ </ Text >
144+ ) }
150145 < ToolbarDivider />
151146 < ToolbarToggleButton
152147 aria-label = "Edit Coordinate"
@@ -174,7 +169,17 @@ export default function FluentCoordinateConversion({ vm }) {
174169 />
175170 </ MenuTrigger >
176171 < MenuPopover >
177- < MenuList > { formats } </ MenuList >
172+ < MenuList >
173+ { vm ?. formats ?. toArray ( ) . map ( ( format ) => (
174+ < MenuItemRadio
175+ name = "format"
176+ value = { format . name }
177+ key = { format . name }
178+ >
179+ { format . name . toLowerCase ( ) }
180+ </ MenuItemRadio >
181+ ) ) }
182+ </ MenuList >
178183 </ MenuPopover >
179184 </ Menu >
180185 </ Toolbar >
0 commit comments