Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e7aba6f

Browse files
committed
toast
1 parent b08fb66 commit e7aba6f

File tree

2 files changed

+77
-33
lines changed

2 files changed

+77
-33
lines changed

‎coordinate/src/components/FluentCoordinateConversion.css

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@
44
right: 15px;
55
}
66

7-
.fluent-coordinate-conversion .text {
8-
width: 250px;
9-
text-align: right;
10-
}
11-
7+
.fluent-coordinate-conversion .text,
128
.fluent-coordinate-conversion .input {
139
width: 250px;
14-
text-align: right;
1510
}

‎coordinate/src/components/FluentCoordinateConversion.js

Lines changed: 76 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,16 @@ import {
99
MenuTrigger,
1010
MenuPopover,
1111
MenuList,
12-
MenuItem,
12+
MenuItemRadio,
1313
Text,
1414
Input,
1515
Switch,
16+
useId,
17+
Toaster,
18+
useToastController,
19+
Toast,
20+
ToastTitle,
21+
ToastBody,
1622
} from "@fluentui/react-components";
1723
import * as React from "react";
1824
import { useEffect, useState } from "react";
@@ -23,21 +29,31 @@ import {
2329
} from "@fluentui/react-icons";
2430

2531
import { watch } from "@arcgis/core/core/reactiveUtils.js";
32+
import Conversion from "@arcgis/core/widgets/CoordinateConversion/support/Conversion.js";
2633

2734
import "./FluentCoordinateConversion.css";
2835

29-
async function reverseConvert({ vm, value, activeFormat }) {
30-
//coordinateEditable.editingEnabled = false;
31-
//const value = coordinateInput.value;
32-
try {
33-
const point = await vm.reverseConvert(value, activeFormat);
34-
vm.view.goTo(point);
35-
} catch (e) {
36-
//coordinateInput.status = "invalid";
36+
export default function FluentCoordinateConversion({ vm }) {
37+
const toasterId = useId("toaster");
38+
const { dispatchToast } = useToastController(toasterId);
39+
const toastError = () =>
40+
dispatchToast(
41+
<Toast>
42+
<ToastTitle>Error</ToastTitle>
43+
<ToastBody>Invalid coordinates entered.</ToastBody>
44+
</Toast>,
45+
{ intent: "error" }
46+
);
47+
48+
async function reverseConvert({ vm, value, activeFormat }) {
49+
try {
50+
const point = await vm.reverseConvert(value, activeFormat);
51+
vm.view.goTo(point);
52+
} catch (e) {
53+
toastError();
54+
}
3755
}
38-
}
3956

40-
export default function FluentCoordinateConversion({ vm }) {
4157
const [activeFormat, setActiveFormat] = useState();
4258

4359
useEffect(() => {
@@ -67,27 +83,47 @@ export default function FluentCoordinateConversion({ vm }) {
6783
};
6884
}, [vm]);
6985

70-
console.log({ vm, reverseConvert, activeFormat });
71-
72-
const [checkedValues, setCheckedValues] = useState({
86+
const [toolbarCheckedValues, setToolbarCheckedValues] = useState({
7387
editing: [],
7488
});
7589

76-
const onChange = (e, { name, checkedItems }) => {
77-
setCheckedValues((s) => {
90+
const onToolbarChange = (e, { name, checkedItems }) => {
91+
setToolbarCheckedValues((s) => {
92+
return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
93+
});
94+
};
95+
96+
const showEditing = toolbarCheckedValues.editing.includes("edit");
97+
98+
const [formatCheckedValues, setFormatCheckedValues] = useState({
99+
format: [activeFormat?.name],
100+
});
101+
102+
const onFormatChange = (e, { name, checkedItems }) => {
103+
const value = checkedItems[0];
104+
const format = vm.formats.find((format) => format.name === value);
105+
const newConversion = new Conversion({ format });
106+
vm.conversions.removeAt(0);
107+
vm.conversions.add(newConversion, 0);
108+
109+
setFormatCheckedValues((s) => {
78110
return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
79111
});
80112
};
81113

82-
const showEditing = checkedValues.editing.includes("edit");
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+
));
83119

84120
return (
85121
<div className="fluent-coordinate-conversion">
86122
<FluentProvider theme={webDarkTheme}>
87123
<Toolbar
88-
checkedValues={checkedValues}
124+
checkedValues={toolbarCheckedValues}
89125
aria-label="Default"
90-
onCheckedValueChange={onChange}
126+
onCheckedValueChange={onToolbarChange}
91127
>
92128
<Location24Regular />
93129
{!showEditing ? (
@@ -96,7 +132,20 @@ export default function FluentCoordinateConversion({ vm }) {
96132
</Text>
97133
) : null}
98134
{showEditing ? (
99-
<Input className="input" value={activeDisplayCoordinate} />
135+
<Input
136+
placeholder="Enter coordinates"
137+
className="input"
138+
defaultValue={activeDisplayCoordinate}
139+
onKeyDown={(event) => {
140+
if (event.key === "Enter") {
141+
reverseConvert({
142+
vm,
143+
value: event.target.value,
144+
activeFormat,
145+
});
146+
}
147+
}}
148+
/>
100149
) : null}
101150
<ToolbarDivider />
102151
<ToolbarToggleButton
@@ -113,23 +162,23 @@ export default function FluentCoordinateConversion({ vm }) {
113162
}}
114163
/>
115164
<ToolbarDivider />
116-
<Menu>
165+
<Menu
166+
hasCheckmarks
167+
onCheckedValueChange={onFormatChange}
168+
checkedValues={formatCheckedValues}
169+
>
117170
<MenuTrigger>
118171
<ToolbarButton
119172
aria-label="Formats"
120173
icon={<Settings24Regular />}
121174
/>
122175
</MenuTrigger>
123176
<MenuPopover>
124-
<MenuList>
125-
<MenuItem>New </MenuItem>
126-
<MenuItem>New Window</MenuItem>
127-
<MenuItem disabled>Open File</MenuItem>
128-
<MenuItem>Open Folder</MenuItem>
129-
</MenuList>
177+
<MenuList>{formats}</MenuList>
130178
</MenuPopover>
131179
</Menu>
132180
</Toolbar>
181+
<Toaster toasterId={toasterId} />
133182
</FluentProvider>
134183
</div>
135184
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /