#16 Make components DRY

MetaCell · Jul 27, 2022 · 5fc0394 · 5fc0394
1 parent be962bb
commit 5fc0394
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 121 deletions.
diff --git a/example/components/widgets/NodeSelection.tsx b/example/components/widgets/NodeSelection.tsx
@@ -1,6 +1,7 @@
 import { Box, Button } from "@material-ui/core";
 import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams";
 import * as React from "react";
+import PortWigetComp from "./PortWidgetComp";
 
 type styleObject = {
   background: string;
@@ -17,6 +18,9 @@ export interface NodeSelectionProps {
 class NodeSelection extends React.Component<NodeSelectionProps> {
   render() {
     const { style, engine, port } = this.props;
+    const selectionPoint = '-0.375rem';
+    const IN = 'in';
+    const OUT = 'out';
     return (
       <>
         <Button className="node-button">
@@ -28,31 +32,10 @@ class NodeSelection extends React.Component<NodeSelectionProps> {
         </Button>
 
         <Box className="nodes">
-          <PortWidget
-            engine={engine}
-            port={port.getPort("in")}
-          >
-            <Box style={{ left: '-0.375rem', top: '-0.375rem' }} className="pointer" />
-          </PortWidget>
-          <PortWidget
-            engine={engine}
-            port={port.getPort("out")}
-          >
-            <Box style={{ right: '-0.375rem', top: '-0.375rem' }} className="pointer" />
-          </PortWidget>
-
-          <PortWidget
-            engine={engine}
-            port={port.getPort("in")}
-          >
-            <Box style={{ left: '-0.375rem', bottom: '-0.375rem' }} className="pointer" />
-          </PortWidget>
-          <PortWidget
-            engine={engine}
-            port={port.getPort("out")}
-          >
-            <Box style={{ bottom: '-0.375rem', right: '-0.375rem' }} className="pointer" />
-          </PortWidget>
+          <PortWigetComp engine={engine} port={port} direction={IN} startPoints={{ left: selectionPoint, top: selectionPoint }} />
+          <PortWigetComp engine={engine} port={port} direction={OUT} startPoints={{ right: selectionPoint, top: selectionPoint }} />
+          <PortWigetComp engine={engine} port={port} direction={IN} startPoints={{ left: selectionPoint, bottom: selectionPoint }} />
+          <PortWigetComp engine={engine} port={port} direction={OUT} startPoints={{ right: selectionPoint, bottom: selectionPoint }} />
         </Box>
       </>
     )

diff --git a/example/components/widgets/PortWidgetComp.tsx b/example/components/widgets/PortWidgetComp.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Box } from "@material-ui/core";
+import { PortWidget } from "@projectstorm/react-diagrams";
+
+const PortWigetComp = (props) => {
+  const { engine, port, direction, startPoints } = props;
+  return (
+    <PortWidget
+      engine={engine}
+      port={port.getPort(direction)}
+    >
+      <Box style={startPoints} className="pointer" />
+    </PortWidget>
+  )
+}
+export default PortWigetComp;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -33,117 +33,72 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+type sidebarItemProps = {
+  image: string;
+  name: string;
+  selectedImage: string;
+  selection: string;
+};
+
 const Sidebar = () => {
   const classes = useStyles();
   const [selected, setSelected] = React.useState('1');
+  const svgImg = (img: string) =>
+    `data:image/svg+xml;base64,${new Buffer(img).toString('base64')}`;
+  const SidebarItem = (props: sidebarItemProps) => {
+    const { image, name, selectedImage, selection } = props;
+    return (
+      <ListItemButton
+        selected={selected === selection}
+        onClick={() => setSelected(selection)}
+      >
+        <ListItemIcon>
+          {selected === selection ? (
+            <img src={svgImg(image)} alt={name} />
+          ) : (
+            <img src={svgImg(selectedImage)} alt={name} />
+          )}
+        </ListItemIcon>
+      </ListItemButton>
+    );
+  };
 
   return (
     <Box className="sidebar">
       <List disablePadding component="nav">
-        <ListItemButton
-          selected={selected === '1'}
-          onClick={() => setSelected('1')}
-        >
-          <ListItemIcon>
-            {selected === '1' ? (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(
-                  CursorActive
-                ).toString('base64')}`}
-                alt="icon"
-              />
-            ) : (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(
-                  'base64'
-                )}`}
-                alt="icon"
-              />
-            )}
-          </ListItemIcon>
-        </ListItemButton>
-
-        <ListItemButton
-          selected={selected === '2'}
-          onClick={() => setSelected('2')}
-        >
-          <ListItemIcon>
-            {selected === '2' ? (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(
-                  MoveActive
-                ).toString('base64')}`}
-                alt="move"
-              />
-            ) : (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(Move).toString(
-                  'base64'
-                )}`}
-                alt="move"
-              />
-            )}
-          </ListItemIcon>
-        </ListItemButton>
+        <SidebarItem
+          image={CursorActive}
+          selectedImage={Cursor}
+          name="cursor"
+          selection="1"
+        />
+        <SidebarItem
+          image={MoveActive}
+          selectedImage={Move}
+          name="move"
+          selection="2"
+        />
       </List>
 
       <Box className={classes.node}>
         <Divider />
-        <img
-          src={`data:image/svg+xml;base64,${new Buffer(Node).toString(
-            'base64'
-          )}`}
-          alt="node"
-        />
+        <img src={svgImg(Node)} alt="Node" />
         <Divider />
       </Box>
 
       <List disablePadding component="nav">
-        <ListItemButton
-          selected={selected === '3'}
-          onClick={() => setSelected('3')}
-        >
-          <ListItemIcon>
-            {selected === '3' ? (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(
-                  IconActive
-                ).toString('base64')}`}
-                alt="icon"
-              />
-            ) : (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(
-                  'base64'
-                )}`}
-                alt="icon"
-              />
-            )}
-          </ListItemIcon>
-        </ListItemButton>
-
-        <ListItemButton
-          selected={selected === '4'}
-          onClick={() => setSelected('4')}
-        >
-          <ListItemIcon>
-            {selected === '4' ? (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(
-                  FullscreenActive
-                ).toString('base64')}`}
-                alt="fullscreen"
-              />
-            ) : (
-              <img
-                src={`data:image/svg+xml;base64,${new Buffer(
-                  Fullscreen
-                ).toString('base64')}`}
-                alt="fullscreen"
-              />
-            )}
-          </ListItemIcon>
-        </ListItemButton>
+        <SidebarItem
+          image={IconActive}
+          selectedImage={Icon}
+          name="draw"
+          selection="3"
+        />
+        <SidebarItem
+          image={FullscreenActive}
+          selectedImage={Fullscreen}
+          name="fullscreen"
+          selection="4"
+        />
       </List>
     </Box>
   );