esrieact 0.2.0 → 0.2.1

package/dist/layers/GeoJSONLayer.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import EsriGeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+/**
+ * An event handler function map specific to a GeoJSONLayer
+ */
+export type GeoJSONLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.GeoJSONLayerRefreshEventHandler;
+    edits: __esri.GeoJSONLayerEditsEventHandler;
+    "layerview-create": __esri.GeoJSONLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.GeoJSONLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
+}>;
+/**
+ * The GeoJSONLayer React component
+ */
+export declare const GeoJSONLayer: React.ForwardRefExoticComponent<__esri.GeoJSONLayerProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: Partial<{
+        refresh: __esri.GeoJSONLayerRefreshEventHandler;
+        edits: __esri.GeoJSONLayerEditsEventHandler;
+        "layerview-create": __esri.GeoJSONLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.GeoJSONLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
+    }> | undefined;
+    layerOrder?: number | undefined;
+} & React.RefAttributes<EsriGeoJSONLayer>>;

package/dist/layers/GeoJSONLayer.js

@@ -0,0 +1,13 @@
+import React from "react";
+import EsriGeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+import { createLayerComponent, } from "./createLayerComponent";
+/**
+ * Function that takes in properties of a GeoJSONLayer, and returns the GeoJSONLayer instance
+ */
+const createLayer = (properties) => {
+    return new EsriGeoJSONLayer(properties);
+};
+/**
+ * The GeoJSONLayer React component
+ */
+export const GeoJSONLayer = React.forwardRef((properties, ref) => createLayerComponent(createLayer, ref, properties));

package/dist/layers/GraphicsLayer.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
 import EsriGraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
+export type GraphicsLayerEventHandlerFnMap = Partial<{
+    refresh: __esri.FeatureLayerRefreshEventHandler;
+    edits: __esri.FeatureLayerEditsEventHandler;
+    "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
+    "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
+    "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
+}>;
 /**
  * A GraphicsLayer component
  *
@@ -9,6 +16,12 @@ import EsriGraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
 export declare const GraphicsLayer: React.ForwardRefExoticComponent<__esri.GraphicsLayerProperties & {
     children?: React.ReactNode;
 } & {
-    events?: {} | undefined;
+    events?: Partial<{
+        refresh: __esri.FeatureLayerRefreshEventHandler;
+        edits: __esri.FeatureLayerEditsEventHandler;
+        "layerview-create": __esri.FeatureLayerLayerviewCreateEventHandler;
+        "layerview-create-error": __esri.FeatureLayerLayerviewCreateErrorEventHandler;
+        "layerview-destroy": __esri.FeatureLayerLayerviewDestroyEventHandler;
+    }> | undefined;
     layerOrder?: number | undefined;
 } & React.RefAttributes<EsriGraphicsLayer>>;

package/dist/layers/index.d.ts

@@ -10,3 +10,4 @@ export * from "./WebTileLayer";
 export * from "./WMSLayer";
 export * from "./VectorTileLayer";
 export * from "./MapImageLayer";
+export * from "./GeoJSONLayer";

package/dist/layers/index.js

@@ -10,3 +10,4 @@ export * from "./WebTileLayer";
 export * from "./WMSLayer";
 export * from "./VectorTileLayer";
 export * from "./MapImageLayer";
+export * from "./GeoJSONLayer";

package/dist/widgets/createWidgetComponent.d.ts

@@ -4,7 +4,9 @@ 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> & {
+export type WidgetComponentProps<T extends __esri.WidgetProperties = __esri.WidgetProperties & {
+    view?: __esri.MapView;
+}, E extends Record<string, Function> = {}> = React.PropsWithChildren<T> & {
     events?: E;
     position?: string | __esri.UIAddPosition;
 };
@@ -26,4 +28,4 @@ export declare const WidgetContext: React.Context<EsriWidget>;
  * @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;
+export declare function createWidgetComponent<P extends WidgetComponentProps>(createWidget: CreateWidgetFunction, ref: Ref<EsriWidget>, { children, events, position, view, ...properties }: P): import("react/jsx-runtime").JSX.Element | null;

package/dist/widgets/createWidgetComponent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import React, { createContext, useContext, useEffect, useImperativeHandle, useMemo, useRef, } from "react";
 import Expand from "@arcgis/core/widgets/Expand";
 import { useMap } from "..";
 import { useEsriPropertyUpdates, useEvents } from "../utils";
@@ -16,9 +16,10 @@ export const WidgetContext = createContext({});
  * @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 }) {
+export function createWidgetComponent(createWidget, ref, { children, events, position, view: viewFromProps, ...properties }) {
     const { view } = useMap();
     const parentWidgetContext = useContext(WidgetContext);
+    const childrenRef = useRef(null);
     const instance = useMemo(() => {
         const instance = createWidget({ ...properties, view });
         if (parentWidgetContext instanceof Expand) {
@@ -29,10 +30,23 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
             view.ui.add(instance, position);
         }
         return instance;
-    }, []);
+    }, [view]);
     useImperativeHandle(ref, () => instance);
     useEsriPropertyUpdates(instance, properties);
     useEvents(instance, events);
+    /**
+     * Check if children is a singular HTML element and assign its ref to instance.content,
+     * enables dev to make arbitrary UI elements children of an Expand widget
+     */
+    useEffect(() => {
+        if (children && childrenRef.current && instance) {
+            if (React.isValidElement(children)) {
+                if (instance instanceof Expand) {
+                    instance.content = childrenRef.current;
+                }
+            }
+        }
+    }, [children, instance]);
     /**
      * Remove widget on unmount
      */
@@ -43,5 +57,8 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
     }, []);
     if (!children)
         return null;
-    return (_jsx(WidgetContext.Provider, { value: instance, children: children }));
+    // Pass ref to the child element - works for both HTML elements and forwardRef components
+    return (_jsx(WidgetContext.Provider, { value: instance, children: React.cloneElement(children, {
+            ref: childrenRef,
+        }) }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "esrieact",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [