wip(react): map control

packages/react-ngw-map/src/ButtonControl.ts

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+
+import { useNgwMapContext } from './context';
+import { mapControlCreator } from './mapControlCreator';
+
+import type { ReactNode } from 'react';
+import type { ControlOptions, ButtonControlOptions } from '@nextgis/webmap';
+
+interface MapControlProps extends ButtonControlOptions, ControlOptions {
+  children?: ReactNode;
+}
+
+export function ButtonControl<P extends MapControlProps = MapControlProps>(
+  props: P,
+) {
+  const context = useNgwMapContext();
+  const el = document.createElement('div');
+  const portal = useRef(el);
+
+  function createControl() {
+    return context.ngwMap.createButtonControl(props);
+  }
+
+  return mapControlCreator({ ...props, context, portal, createControl });
+}

packages/react-ngw-map/src/MapControl.ts

@@ -1,7 +1,8 @@
-import { ReactNode, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import { MutableRefObject } from 'react';
 import { useNgwMapContext } from './context';
+import { mapControlCreator } from './mapControlCreator';
 
+import type { ReactNode } from 'react';
 import type { ControlOptions, CreateControlOptions } from '@nextgis/webmap';
 
 interface MapControlProps extends CreateControlOptions, ControlOptions {
@@ -12,13 +13,9 @@ export function MapControl<P extends MapControlProps = MapControlProps>(
   props: P,
 ) {
   const { bar, margin, addClass } = props;
-
   const context = useNgwMapContext();
 
-  const el = document.createElement('div');
-  const portal = useRef(el);
-
-  function createInstance() {
+  function createControl(portal: MutableRefObject<HTMLDivElement>) {
     return context.ngwMap.createControl(
       {
         onAdd() {
@@ -34,19 +31,6 @@ export function MapControl<P extends MapControlProps = MapControlProps>(
       { bar, margin, addClass },
     );
   }
-  const instance = useRef(createInstance());
-  const position = props.position || 'top-left';
-
-  useEffect(
-    function addControl() {
-      context.ngwMap.addControl(instance.current, position);
-
-      return function removeControl() {
-        context.ngwMap.removeControl(instance.current);
-      };
-    },
-    [context.ngwMap, instance],
-  );
 
-  return createPortal(props.children, portal.current);
+  return mapControlCreator({ ...props, context, createControl });
 }

packages/react-ngw-map/src/index.ts

@@ -1,3 +1,4 @@
 export * from './interfaces';
 
 export { ReactNgwMap } from './ReactNgwMap';
+export { MapControl } from './MapControl';

packages/react-ngw-map/src/mapControlCreator.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+import type { ReactNode, MutableRefObject } from 'react';
+import type { ControlOptions } from '@nextgis/webmap';
+import type { NgwMapContextInterface } from './interfaces';
+
+interface MapControlProps extends ControlOptions {
+  children?: ReactNode;
+  context: NgwMapContextInterface;
+  createControl: (portal: MutableRefObject<HTMLDivElement>) => Promise<unknown>;
+}
+
+export function mapControlCreator<P extends MapControlProps = MapControlProps>(
+  props: P,
+) {
+  const { context, createControl, children, position } = props;
+
+  const el = document.createElement('div');
+  const portal = useRef(el);
+
+  const instance = useRef(createControl(portal));
+  const pos = position || 'top-left';
+
+  useEffect(
+    function addControl() {
+      context.ngwMap.addControl(instance.current, pos);
+
+      return function removeControl() {
+        context.ngwMap.removeControl(instance.current);
+      };
+    },
+    [context.ngwMap, instance],
+  );
+
+  return createPortal(children, portal.current);
+}