feat(controls): extendable controls via control button comp closes #1030

src/additional-components/Controls/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, HTMLAttributes } from 'react';
+import React, { memo, useCallback, HTMLAttributes, FC } from 'react';
 import cc from 'classcat';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -23,7 +23,15 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   onInteractiveChange?: (interactiveStatus: boolean) => void;
 }
 
-const Controls = ({
+export interface ControlButtonProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const ControlButton: FC<ControlButtonProps> = ({ children, className, onClick }) => (
+  <div className={cc(['react-flow__controls-button', className])} onClick={onClick}>
+    {children}
+  </div>
+);
+
+const Controls: FC<ControlProps> = ({
   style,
   showZoom = true,
   showFitView = true,
@@ -34,7 +42,8 @@ const Controls = ({
   onFitView,
   onInteractiveChange,
   className,
-}: ControlProps) => {
+  children,
+}) => {
   const setInteractive = useStoreActions((actions) => actions.setInteractive);
   const { zoomIn, zoomOut, fitView } = useZoomPanHelper();
 
@@ -65,27 +74,25 @@ const Controls = ({
     <div className={mapClasses} style={style}>
       {showZoom && (
         <>
-          <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={onZoomInHandler}>
+          <ControlButton onClick={onZoomInHandler} className="react-flow__controls-zoomin">
             <PlusIcon />
-          </div>
+          </ControlButton>
-          <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={onZoomOutHandler}>
+          <ControlButton onClick={onZoomOutHandler} className="react-flow__controls-zoomout">
             <MinusIcon />
-          </div>
+          </ControlButton>
         </>
       )}
       {showFitView && (
-        <div className="react-flow__controls-button react-flow__controls-fitview" onClick={onFitViewHandler}>
+        <ControlButton className="react-flow__controls-fitview" onClick={onFitViewHandler}>
           <FitviewIcon />
-        </div>
+        </ControlButton>
       )}
       {showInteractive && (
-        <div
+        <ControlButton className="react-flow__controls-interactive" onClick={onInteractiveChangeHandler}>
-          className="react-flow__controls-button react-flow__controls-interactive"
-          onClick={onInteractiveChangeHandler}
-        >
           {isInteractive ? <UnlockIcon /> : <LockIcon />}
-        </div>
+        </ControlButton>
       )}
+      {children}
     </div>
   );
 };

src/additional-components/index.ts

@@ -2,6 +2,6 @@
 // but the user can add them as children of a React Flow component
 
 export { default as MiniMap } from './MiniMap';
-export { default as Controls } from './Controls';
+export { default as Controls, ControlButton } from './Controls';
 export { default as Background } from './Background';
 export { default as ReactFlowProvider } from './ReactFlowProvider';