Merge pull request #93 from craigatk/styled-comps

(feature) Switching to styled components to improve performance with large system out
craigatk · May 16, 2020 · 3e92706 · 3e92706
2 parents 18aab93 + 07b3db4
commit 3e92706
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 39 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -46,6 +46,7 @@
     "@types/reach__router": "1.2.6",
     "@types/react": "16.9.17",
     "@types/react-dom": "16.9.4",
+    "@types/styled-components": "5.1.0",
     "axios": "0.19.2",
     "axios-cache-adapter": "2.5.0",
     "axios-case-converter": "0.3.0",
@@ -55,6 +56,7 @@
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-scroll": "1.7.14",
+    "styled-components": "5.1.0",
     "use-query-params": "0.4.1"
   },
   "jest-junit": {

diff --git a/ui/src/CodeText/CodeText.tsx b/ui/src/CodeText/CodeText.tsx
@@ -78,15 +78,15 @@ const CodeText = ({ text }: CodeTextProps) => {
           key={`line-element-${lineIdx}-${highlighted}`}
         >
           <CodeTextLine
-            key={`code-line-${lineIdx}`}
+            key={`code-line-${lineIdx}-${highlighted}`}
             line={line}
             idx={lineIdx}
             highlighted={highlighted}
             handleLineClick={handleLineClick}
           />
         </Element>
       ),
-      [line, lineIdx, highlighted]
+      [lineIdx, highlighted]
     );
   });
 

diff --git a/ui/src/CodeText/CodeTextLine.tsx b/ui/src/CodeText/CodeTextLine.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import styled from 'styled-components'
 
 interface CodeTextLineProps {
   line: String;
@@ -12,53 +12,49 @@ interface CodeTextLineStyleProps {
   highlighted: boolean;
 }
 
-const useStyles = makeStyles({
-  lineClass: ({ highlighted }: CodeTextLineStyleProps) => ({
-    backgroundColor: highlighted ? "#F9F9F9" : "inherit",
-    cursor: "default",
-    "&:hover": {
-      backgroundColor: "lightgrey",
-    },
-    fontSize: ".9em",
-    display: "inline-block",
-    width: "100%",
-    paddingRight: "10px",
-  }),
-  lineNumberClass: {
-    userSelect: "none",
-    minWidth: "40px",
-    display: "inline-block",
-    textAlign: "right",
-    paddingRight: "15px",
-  },
-});
+const Line = styled.div<CodeTextLineStyleProps>`
+  cursor: default;
+  background-color: ${({highlighted}) => (highlighted ? "#F9F9F9": "inherit")};
+  &:hover {
+    background-color: lightgrey;
+  }
+  font-size: .9em;
+  display: inline-block;
+  width: 100%;
+  padding-right: 10px;
+`;
+
+const LineNumber = styled.span`
+  user-select: none;
+  min-width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-Right: 15px;
+`
 
 const CodeTextLine = ({
   line,
   idx,
   handleLineClick,
   highlighted,
 }: CodeTextLineProps) => {
-  const classes = useStyles({ highlighted });
-
   function handleClick(e: React.MouseEvent) {
     handleLineClick(e, idx);
   }
 
   return (
-    <div
+    <Line
       onClick={handleClick}
-      className={classes.lineClass}
       data-testid={`code-text-line-${idx}-${highlighted}`}
+      highlighted={highlighted}
     >
-      <span
-        className={classes.lineNumberClass}
+      <LineNumber
         data-testid={`code-text-line-number-${idx}`}
       >
         {idx}
-      </span>
+      </LineNumber>
       <span data-testid={`code-text-line-content-${idx}`}>{line}</span>
-    </div>
+    </Line>
   );
 };