feat(controls): add showZoom, showFitView, showInteractive options #211

README.md

@@ -254,7 +254,7 @@ const GraphWithMiniMap = () => (
 
 ### Controls
 
-The control panel contains a zoom-in, zoom-out and a fit-view button. You can use it by passing it as a children to your React Flow component:
+The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button. You can use it by passing it as a children to the React Flow component:
 
 ```javascript
 import ReactFlow, { Controls } from 'react-flow-renderer';
@@ -272,6 +272,9 @@ const GraphWithControls = () => (
 
 - `style`: css properties
 - `className`: class name
+- `showZoom`: boolean - default: true
+- `showFitView`: boolean - default: true
+- `showInteractive`: boolean - default: true
 
 ## Examples
 

src/plugins/Controls/index.tsx

@@ -17,12 +17,16 @@ const baseStyle: CSSProperties = {
   left: 10,
 };
 
-interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
+  showZoom?: boolean;
+  showFitView?: boolean;
+  showInteractive?: boolean;
+}
 
-export default ({ style, className }: ControlProps) => {
+export default ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
   const mapClasses: string = classnames('react-flow__controls', className);
 
-  const setInteractive = useStoreActions(actions => actions.setInteractive);
+  const setInteractive = useStoreActions((actions) => actions.setInteractive);
   const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
 
   return (
@@ -33,30 +37,29 @@ export default ({ style, className }: ControlProps) => {
         ...style,
       }}
     >
-      <div
-        className="react-flow__controls-button react-flow__controls-zoomin"
-        onClick={zoomIn}
-      >
-        <PlusIcon />
-      </div>
-      <div
-        className="react-flow__controls-button  react-flow__controls-zoomout"
-        onClick={zoomOut}
-      >
-        <MinusIcon />
-      </div>
-      <div
-        className="react-flow__controls-button  react-flow__controls-fitview"
-        onClick={() => fitView()}
-      >
-        <FitviewIcon />
-      </div>
-      <div
-        className={`react-flow__controls-button react-flow__controls-${isInteractive? 'unlocked' : 'locked' }`}
-        onClick={() => setInteractive(!isInteractive)}
-      >
-        { isInteractive ? <UnlockIcon /> : <LockIcon /> }
-      </div>
+      {showZoom && (
+        <>
+          <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={zoomIn}>
+            <PlusIcon />
+          </div>
+          <div className="react-flow__controls-button react-flow__controls-zoomout" onClick={zoomOut}>
+            <MinusIcon />
+          </div>
+        </>
+      )}
+      {showFitView && (
+        <div className="react-flow__controls-button react-flow__controls-fitview" onClick={() => fitView()}>
+          <FitviewIcon />
+        </div>
+      )}
+      {showInteractive && (
+        <div
+          className="react-flow__controls-button react-flow__controls-interactive"
+          onClick={() => setInteractive(!isInteractive)}
+        >
+          {isInteractive ? <UnlockIcon /> : <LockIcon />}
+        </div>
+      )}
     </div>
   );
 };