alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(controls): use memo

Browse Source
This commit is contained in:
moklick
2020-07-27 12:36:03 +02:00
parent 8d0e8c63fb
commit a436260a1c
1 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Controls/index.tsx
+39 -37
View File
@@ -1,4 +1,4 @@
import React from 'react'; import React, { memo } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import { useStoreState, useStoreActions } from '../../store/hooks'; import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -17,46 +17,48 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
showInteractive?: boolean; showInteractive?: boolean;
} }
const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => { const Controls = memo(
const setInteractive = useStoreActions((actions) => actions.setInteractive); ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
const fitView = useStoreActions((actions) => actions.fitView); const setInteractive = useStoreActions((actions) => actions.setInteractive);
const zoomIn = useStoreActions((actions) => actions.zoomIn); const fitView = useStoreActions((actions) => actions.fitView);
const zoomOut = useStoreActions((actions) => actions.zoomOut); const zoomIn = useStoreActions((actions) => actions.zoomIn);
const zoomOut = useStoreActions((actions) => actions.zoomOut);
const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable); const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
const mapClasses = cc(['react-flow__controls', className]); const mapClasses = cc(['react-flow__controls', className]);
return ( return (
<div className={mapClasses} style={style}> <div className={mapClasses} style={style}>
{showZoom && ( {showZoom && (
<> <>
<div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => zoomIn()}> <div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => zoomIn()}>
<PlusIcon /> <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({ padding: 0.1 })}
>
<FitviewIcon />
</div> </div>
<div className="react-flow__controls-button react-flow__controls-zoomout" onClick={() => zoomOut()}> )}
<MinusIcon /> {showInteractive && (
<div
className="react-flow__controls-button react-flow__controls-interactive"
onClick={() => setInteractive(!isInteractive)}
>
{isInteractive ? <UnlockIcon /> : <LockIcon />}
</div> </div>
</> )}
)} </div>
{showFitView && ( );
<div }
className="react-flow__controls-button react-flow__controls-fitview" );
onClick={() => fitView({ padding: 0.1 })}
>
<FitviewIcon />
</div>
)}
{showInteractive && (
<div
className="react-flow__controls-button react-flow__controls-interactive"
onClick={() => setInteractive(!isInteractive)}
>
{isInteractive ? <UnlockIcon /> : <LockIcon />}
</div>
)}
</div>
);
};
Controls.displayName = 'Controls'; Controls.displayName = 'Controls';