esrieact 0.1.0

package/dist/widgets/Sketch.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import EsriSketch from "@arcgis/core/widgets/Sketch";
+interface SketchProperties extends __esri.SketchProperties {
+    layer: __esri.GraphicsLayer;
+}
+/**
+ * An Sketch Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Sketch](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html)
+ */
+export declare const Sketch: React.ForwardRefExoticComponent<SketchProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: Partial<{
+        delete: __esri.SketchDeleteEventHandler;
+        create: __esri.SketchCreateEventHandler;
+        update: __esri.SketchUpdateEventHandler;
+        redo: __esri.SketchRedoEventHandler;
+        undo: __esri.SketchUndoEventHandler;
+    }> | undefined;
+    position?: string | __esri.UIAddPosition | undefined;
+} & React.RefAttributes<EsriSketch>>;
+export {};

package/dist/widgets/Sketch.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriSketch from "@arcgis/core/widgets/Sketch";
+import { createWidgetComponent } from ".";
+const createWidget = (properties) => {
+    return new EsriSketch(properties);
+};
+/**
+ * An Sketch Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Sketch](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html)
+ */
+export const Sketch = React.forwardRef((properties, ref) => createWidgetComponent(createWidget, ref, properties));

package/dist/widgets/createWidgetComponent.d.ts

@@ -0,0 +1,29 @@
+import React, { Ref } from "react";
+import EsriWidget from "@arcgis/core/widgets/Widget";
+/**
+ * Properties that can be applied to any ESRIEACT Widget component.  Extends from
+ * esri's WidgetProperties to include child components and the widget position
+ */
+export type WidgetComponentProps<T extends __esri.WidgetProperties = __esri.WidgetProperties, E extends Record<string, Function> = {}> = React.PropsWithChildren<T> & {
+    events?: E;
+    position?: string | __esri.UIAddPosition;
+};
+/**
+ * Function that takes in layer properties and returns an esri Layer instance. Properties must be
+ * any esri properties that extend esri.LayerProperties, and optional children
+ */
+export type CreateWidgetFunction<T extends WidgetComponentProps = WidgetComponentProps> = (properties: T) => __esri.Widget;
+/**
+ * The react context object that any widget component creates when rendered
+ * and makes available to its descendants
+ */
+export declare const WidgetContext: React.Context<EsriWidget>;
+/**
+ * Factory function to create an esrieact widget component
+ * @param createWidget Function that takes in the widget properties (which must extend from __esri.WidgetProperties)
+ *  and returns the widget instance
+ * @param ref The react ref to be passed from the parent
+ * @param properties The widget properties
+ * @returns A context provider whose context is the instance to be passed to children, or if there are no children, returns null
+ */
+export declare function createWidgetComponent<P extends WidgetComponentProps>(createWidget: CreateWidgetFunction, ref: Ref<EsriWidget>, { children, events, position, ...properties }: P): import("react/jsx-runtime").JSX.Element | null;

package/dist/widgets/createWidgetComponent.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import Expand from "@arcgis/core/widgets/Expand";
+import { useMap } from "..";
+import { useEsriPropertyUpdates, useEvents } from "../utils";
+/**
+ * The react context object that any widget component creates when rendered
+ * and makes available to its descendants
+ */
+export const WidgetContext = createContext({});
+/**
+ * Factory function to create an esrieact widget component
+ * @param createWidget Function that takes in the widget properties (which must extend from __esri.WidgetProperties)
+ *  and returns the widget instance
+ * @param ref The react ref to be passed from the parent
+ * @param properties The widget properties
+ * @returns A context provider whose context is the instance to be passed to children, or if there are no children, returns null
+ */
+export function createWidgetComponent(createWidget, ref, { children, events, position, ...properties }) {
+    const { view } = useMap();
+    const parentWidgetContext = useContext(WidgetContext);
+    const instance = useMemo(() => {
+        const instance = createWidget({ ...properties, view });
+        if (parentWidgetContext instanceof Expand) {
+            parentWidgetContext.content = instance;
+            return instance;
+        }
+        if (!properties.container) {
+            view.ui.add(instance, position);
+        }
+        return instance;
+    }, []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    useEvents(instance, events);
+    /**
+     * Remove widget on unmount
+     */
+    useEffect(() => {
+        return () => {
+            view.ui.remove(instance);
+        };
+    }, []);
+    if (!children)
+        return null;
+    return (_jsx(WidgetContext.Provider, { value: instance, children: children }));
+}

package/dist/widgets/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./createWidgetComponent";
+export * from "./BasemapGallery";
+export * from "./Expand";
+export * from "./LayerList";
+export * from "./Legend";
+export * from "./SearchBar";
+export * from "./Sketch";

package/dist/widgets/index.js

@@ -0,0 +1,7 @@
+export * from "./createWidgetComponent";
+export * from "./BasemapGallery";
+export * from "./Expand";
+export * from "./LayerList";
+export * from "./Legend";
+export * from "./SearchBar";
+export * from "./Sketch";

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "esrieact",
+  "private": false,
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc && cp ../../README.md .",
+    "tsc": "tsc --noEmit",
+    "tsc:watch": "tsc --noEmit --watch --preserveWatchOutput"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./core/*": "./dist/core/*",
+    "./layers/*": "./dist/layers/*",
+    "./map/*": "./dist/map/*",
+    "./symbols/*": "./dist/symbols/*",
+    "./utils/*": "./dist/utils/*",
+    "./widgets/*": "./dist/widgets/*"
+  },
+  "dependencies": {
+    "lodash.isequal": "^4.5.0",
+    "usehooks-ts": "^2.9.1"
+  },
+  "peerDependencies": {
+    "@arcgis/core": "^4.28.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "typescript": "^5.2.2"
+  }
+}