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

refactor(components): show displayName in react profiler correctly

Browse Source
This commit is contained in:
moklick
2020-07-27 18:50:53 +02:00
parent 05786fcee6
commit 30e811225a
15 changed files with 643 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Controls/index.tsx
+37 -39
View File
@@ -17,49 +17,47 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
showInteractive?: boolean;
}
const Controls = memo(
({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
const setInteractive = useStoreActions((actions) => actions.setInteractive);
const fitView = useStoreActions((actions) => actions.fitView);
const zoomIn = useStoreActions((actions) => actions.zoomIn);
const zoomOut = useStoreActions((actions) => actions.zoomOut);
const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
const setInteractive = useStoreActions((actions) => actions.setInteractive);
const fitView = useStoreActions((actions) => actions.fitView);
const zoomIn = useStoreActions((actions) => actions.zoomIn);
const zoomOut = useStoreActions((actions) => actions.zoomOut);
const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
const mapClasses = cc(['react-flow__controls', className]);
const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
const mapClasses = cc(['react-flow__controls', className]);
return (
<div className={mapClasses} style={style}>
{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({ padding: 0.1 })}
>
<FitviewIcon />
return (
<div className={mapClasses} style={style}>
{showZoom && (
<>
<div className="react-flow__controls-button react-flow__controls-zoomin" onClick={() => zoomIn()}>
<PlusIcon />
</div>
)}
{showInteractive && (
<div
className="react-flow__controls-button react-flow__controls-interactive"
onClick={() => setInteractive(!isInteractive)}
>
{isInteractive ? <UnlockIcon /> : <LockIcon />}
<div className="react-flow__controls-button react-flow__controls-zoomout" onClick={() => zoomOut()}>
<MinusIcon />
</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';
export default Controls;
export default memo(Controls);