From 5c47417eccc3c7dc6b133a56bf5bc5b6827b5a04 Mon Sep 17 00:00:00 2001 From: Andy G Date: Mon, 10 Jul 2023 16:15:45 -0600 Subject: [PATCH 1/5] chore(jsapi-custom-ui): use component terminology --- esm-samples/jsapi-custom-ui/README.md | 4 +++- esm-samples/jsapi-custom-ui/src/App.jsx | 10 +++++----- .../{CenterWidget.jsx => CenterComponent.jsx} | 18 +++++++++--------- ...{center-widget.css => center-component.css} | 0 4 files changed, 17 insertions(+), 15 deletions(-) rename esm-samples/jsapi-custom-ui/src/{CenterWidget.jsx => CenterComponent.jsx} (57%) rename esm-samples/jsapi-custom-ui/src/{center-widget.css => center-component.css} (100%) diff --git a/esm-samples/jsapi-custom-ui/README.md b/esm-samples/jsapi-custom-ui/README.md index 2cbad204f..8aadcb167 100644 --- a/esm-samples/jsapi-custom-ui/README.md +++ b/esm-samples/jsapi-custom-ui/README.md @@ -1,6 +1,8 @@ # Custom UI component with React and Vite -This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). The component is created in React and then added to the Map as a DOM element using [View UI](https://developers.arcgis.com/javascript/latest/view-ui/). This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements. +This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). however you can also use any other major JavaScript framework. For more information building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic. + +The component in this sample is created in [JSX](https://react.dev/learn/writing-markup-with-jsx) and then added to the Map as a DOM element using the ArcGIS JS SDK's [View UI](https://developers.arcgis.com/javascript/latest/view-ui/) interface. This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements. ## Get Started diff --git a/esm-samples/jsapi-custom-ui/src/App.jsx b/esm-samples/jsapi-custom-ui/src/App.jsx index ad8127c00..6a37bba9d 100644 --- a/esm-samples/jsapi-custom-ui/src/App.jsx +++ b/esm-samples/jsapi-custom-ui/src/App.jsx @@ -3,14 +3,14 @@ import Bookmarks from '@arcgis/core/widgets/Bookmarks.js'; import Expand from '@arcgis/core/widgets/Expand.js'; import MapView from "@arcgis/core/views/MapView.js"; import WebMap from "@arcgis/core/WebMap.js"; -import CenterWidget from "./CenterWidget.jsx"; +import CenterComponent from "./CenterComponent.jsx"; import "./App.css"; function App() { const [viewState, setViewState] = useState(null); - const centerWidgetID = useRef("center-widget"); + const centerComponentID = useRef("center-component"); const mapDiv = useRef(null); useEffect(() => { @@ -39,8 +39,8 @@ function App() { // Add the Expand and BookMarks widgets to the top-right corner of the view view.ui.add(bkExpand, "top-right"); - // Add Center widget to the bottom-right corner of the view - view.ui.add(document.getElementById(centerWidgetID.current), "bottom-right"); + // Add Center component to the bottom-right corner of the view + view.ui.add(document.getElementById(centerComponentID.current), "bottom-right"); webmap.when(() => { setViewState({view}); @@ -48,7 +48,7 @@ function App() { } }, [mapDiv]); - return
; + return
; } export default App; diff --git a/esm-samples/jsapi-custom-ui/src/CenterWidget.jsx b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx similarity index 57% rename from esm-samples/jsapi-custom-ui/src/CenterWidget.jsx rename to esm-samples/jsapi-custom-ui/src/CenterComponent.jsx index 8e9a9af02..f2555e00b 100644 --- a/esm-samples/jsapi-custom-ui/src/CenterWidget.jsx +++ b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx @@ -1,15 +1,15 @@ import { useState, useEffect } from 'react'; import { watch } from '@arcgis/core/core/reactiveUtils'; -import './center-widget.css'; +import './center-component.css'; /** - * React component that can be used as an ArcGIS JS SDK widget. - * This widget dynamically displays the center of the map extent + * React component that can be used in ArcGIS JS SDK. + * This component dynamically displays the center of the map extent * @param {*} view an instance of a `Mapview` or `SceneView` - * @param {string} id - The `id` of the widget's parent HTML div element - * @returns The widget's HTML div + * @param {string} id - The `id` of the compenents's parent HTML div element + * @returns The components's HTML div */ -const CenterWidget = ({ view, id }) => { +const CenterComponent = ({ view, id }) => { const [center, setCenter] = useState(null); useEffect(() => { @@ -18,7 +18,7 @@ const CenterWidget = ({ view, id }) => { () => view?.view?.extent, (value) => { const { latitude, longitude } = value.center; - // Update the widget's display + // Update the component's display setCenter(`${longitude.toFixed(4)}, ${latitude.toFixed(4)}`); }); // Clean up any handles or event listeners @@ -26,7 +26,7 @@ const CenterWidget = ({ view, id }) => { return () => handle.remove(); }, [view]); - return
Center: {center}
; + return
Center: {center}
; }; -export default CenterWidget; +export default CenterComponent; diff --git a/esm-samples/jsapi-custom-ui/src/center-widget.css b/esm-samples/jsapi-custom-ui/src/center-component.css similarity index 100% rename from esm-samples/jsapi-custom-ui/src/center-widget.css rename to esm-samples/jsapi-custom-ui/src/center-component.css From 9da5115e975ae3f5706696c78847f0c4970128d7 Mon Sep 17 00:00:00 2001 From: Andy G Date: Mon, 10 Jul 2023 16:21:09 -0600 Subject: [PATCH 2/5] Small wording tweak --- esm-samples/jsapi-custom-ui/src/CenterComponent.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx index f2555e00b..4e50851b1 100644 --- a/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx +++ b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx @@ -3,7 +3,7 @@ import { watch } from '@arcgis/core/core/reactiveUtils'; import './center-component.css'; /** - * React component that can be used in ArcGIS JS SDK. + * React component that can be used in an ArcGIS JS SDK application. * This component dynamically displays the center of the map extent * @param {*} view an instance of a `Mapview` or `SceneView` * @param {string} id - The `id` of the compenents's parent HTML div element From 26e5438c0b84209bc10128ab9c6aba4c9a5a44fe Mon Sep 17 00:00:00 2001 From: Andy G Date: Mon, 10 Jul 2023 16:23:08 -0600 Subject: [PATCH 3/5] Fix spelling error --- esm-samples/jsapi-custom-ui/src/CenterComponent.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx index 4e50851b1..f96b59d23 100644 --- a/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx +++ b/esm-samples/jsapi-custom-ui/src/CenterComponent.jsx @@ -6,7 +6,7 @@ import './center-component.css'; * React component that can be used in an ArcGIS JS SDK application. * This component dynamically displays the center of the map extent * @param {*} view an instance of a `Mapview` or `SceneView` - * @param {string} id - The `id` of the compenents's parent HTML div element + * @param {string} id - The `id` of the components's parent HTML div element * @returns The components's HTML div */ const CenterComponent = ({ view, id }) => { From 32818df350bd54d97fba7e581cc1c7ea8ec10fd5 Mon Sep 17 00:00:00 2001 From: Andy G Date: Mon, 10 Jul 2023 16:25:32 -0600 Subject: [PATCH 4/5] Fix capitalization --- esm-samples/jsapi-custom-ui/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/esm-samples/jsapi-custom-ui/README.md b/esm-samples/jsapi-custom-ui/README.md index 8aadcb167..762833fdb 100644 --- a/esm-samples/jsapi-custom-ui/README.md +++ b/esm-samples/jsapi-custom-ui/README.md @@ -1,6 +1,6 @@ # Custom UI component with React and Vite -This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). however you can also use any other major JavaScript framework. For more information building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic. +This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). You can also use any other major JavaScript framework. For more information building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic. The component in this sample is created in [JSX](https://react.dev/learn/writing-markup-with-jsx) and then added to the Map as a DOM element using the ArcGIS JS SDK's [View UI](https://developers.arcgis.com/javascript/latest/view-ui/) interface. This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements. From e1b892d4d94777acb82ba29c76bc7fcd962c4fd9 Mon Sep 17 00:00:00 2001 From: Andy G Date: Mon, 10 Jul 2023 16:30:07 -0600 Subject: [PATCH 5/5] Fix missing preposition --- esm-samples/jsapi-custom-ui/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/esm-samples/jsapi-custom-ui/README.md b/esm-samples/jsapi-custom-ui/README.md index 762833fdb..f0c5a54ba 100644 --- a/esm-samples/jsapi-custom-ui/README.md +++ b/esm-samples/jsapi-custom-ui/README.md @@ -1,6 +1,6 @@ # Custom UI component with React and Vite -This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). You can also use any other major JavaScript framework. For more information building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic. +This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). You can also use any other major JavaScript framework. For more information about building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic. The component in this sample is created in [JSX](https://react.dev/learn/writing-markup-with-jsx) and then added to the Map as a DOM element using the ArcGIS JS SDK's [View UI](https://developers.arcgis.com/javascript/latest/view-ui/) interface. This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements.