esrieact 0.3.1 → 0.4.1

package/dist/widgets/ColorSlider.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import EsriColorSliderWidget from "@arcgis/core/widgets/smartMapping/ColorSlider.js";
+export type ColorSliderEventHandlerFnMap = Partial<{
+    "max-change": __esri.SmartMappingSliderBaseMaxChangeEventHandler;
+    "min-change": __esri.SmartMappingSliderBaseMinChangeEventHandler;
+    "segment-drag": __esri.SmartMappingSliderBaseSegmentDragEventHandler;
+    "thumb-change": __esri.SmartMappingSliderBaseThumbChangeEventHandler;
+    "thumb-drag": __esri.SmartMappingSliderBaseThumbDragEventHandler;
+}>;
+/**
+ * A ColorSlider Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [ColorSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSlider.html)
+ */
+export declare const ColorSlider: React.ForwardRefExoticComponent<__esri.ColorSliderProperties & {
+    children?: React.ReactNode;
+} & {
+    events?: {} | ((widgetInstance: __esri.Widget) => {}) | undefined;
+    position?: string | __esri.UIAddPosition | undefined;
+} & React.RefAttributes<EsriColorSliderWidget>>;

package/dist/widgets/ColorSlider.js

@@ -0,0 +1,16 @@
+import React from "react";
+import EsriColorSliderWidget from "@arcgis/core/widgets/smartMapping/ColorSlider.js";
+import { createWidgetComponent } from ".";
+const createWidget = (properties) => {
+    return new EsriColorSliderWidget(properties);
+};
+/**
+ * A ColorSlider Widget component
+ *
+ * ArcGIS JS API Source Components:
+ * - [ColorSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSlider.html)
+ */
+export const ColorSlider = React.forwardRef((properties, ref) => {
+    // @ts-expect-error internal mismatch of arcgis types?
+    return createWidgetComponent(createWidget, ref, properties);
+});

package/dist/widgets/createWidgetComponent.js

@@ -21,16 +21,29 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
     const parentWidgetContext = useContext(WidgetContext);
     const childrenRef = useRef(null);
     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 createWidget({ ...properties, view, position });
+    }, []);
+    useEffect(() => {
+        if (instance && view) {
+            if (parentWidgetContext instanceof Expand) {
+                parentWidgetContext.content = instance;
+            }
+            else {
+                if (!properties.container) {
+                    view.ui.add(instance, position);
+                }
+            }
         }
-        return instance;
-    }, [view]);
+        /**
+         * Remove widget on unmount
+         */
+        return () => {
+            if (parentWidgetContext instanceof Expand) {
+                parentWidgetContext.content = "";
+            }
+            view.ui.remove(instance);
+        };
+    }, [instance, view, parentWidgetContext]);
     useImperativeHandle(ref, () => instance);
     useEsriPropertyUpdates(instance, properties);
     useEvents(instance, typeof events === "function" ? events(instance) : events);
@@ -47,14 +60,6 @@ export function createWidgetComponent(createWidget, ref, { children, events, pos
             }
         }
     }, [children, instance]);
-    /**
-     * Remove widget on unmount
-     */
-    useEffect(() => {
-        return () => {
-            view.ui.remove(instance);
-        };
-    }, []);
     if (!children)
         return null;
     // Pass ref to the child element - works for both HTML elements and forwardRef components

package/dist/widgets/index.d.ts

@@ -1,9 +1,10 @@
 export * from "./createWidgetComponent";
 export * from "./BasemapGallery";
+export * from "./ColorSlider";
 export * from "./Expand";
+export * from "./Histogram";
+export * from "./HistogramRangeSlider";
 export * from "./LayerList";
 export * from "./Legend";
 export * from "./SearchBar";
 export * from "./Sketch";
-export * from "./Histogram";
-export * from "./HistogramRangeSlider";

package/dist/widgets/index.js

@@ -1,9 +1,10 @@
 export * from "./createWidgetComponent";
 export * from "./BasemapGallery";
+export * from "./ColorSlider";
 export * from "./Expand";
+export * from "./Histogram";
+export * from "./HistogramRangeSlider";
 export * from "./LayerList";
 export * from "./Legend";
 export * from "./SearchBar";
 export * from "./Sketch";
-export * from "./Histogram";
-export * from "./HistogramRangeSlider";

package/package.json

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