Merge pull request #89 from craigatk/output-size

(feature) Setting height of output section to keep page size static during progressive render
craigatk · May 10, 2020 · ee647e7 · ee647e7
2 parents bf4b2fe + 7addaf7
commit ee647e7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/ui/src/CodeText/CodeText.tsx b/ui/src/CodeText/CodeText.tsx
@@ -28,7 +28,7 @@ const CodeText = ({ text }: CodeTextProps) => {
   function handleLineClick(event: React.MouseEvent, clickedIdx: number) {
     if (highlightedLine == null) {
       setHighlightedLine(clickedIdx);
-    } else if (event.shiftKey && highlightedLine != null) {
+    } else if (event.shiftKey) {
       if (clickedIdx > highlightedLine) {
         setHighlightedRangeEnd(clickedIdx);
       } else {
@@ -57,12 +57,12 @@ const CodeText = ({ text }: CodeTextProps) => {
       scroller.scrollTo(`line-${highlightedLine}`, {
         duration: 0,
         delay: 0,
-        offset: -55,
+        offset: -45,
         smooth: "easeInOutQuart",
       });
-
-      setAlreadyScrolled(true);
     }
+
+    setAlreadyScrolled(true);
   };
 
   function isLineHighlighted(lineIdx: number) {

diff --git a/ui/src/CodeText/CodeTextProgressiveRender.tsx b/ui/src/CodeText/CodeTextProgressiveRender.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import CodeTextLine from "./CodeTextLine";
 import { Element } from "react-scroll";
+import { makeStyles } from "@material-ui/core/styles";
 
 interface CodeTextProgressiveRenderProps {
   lines: string[];
@@ -12,6 +13,23 @@ interface CodeTextProgressiveRenderProps {
   pageSize: number;
 }
 
+interface CodeTextProgressiveRenderStyleProps {
+  lineCount: number;
+  lineHeight: number;
+}
+
+const useStyles = makeStyles({
+  // style rule
+  wrapper: ({
+    lineCount,
+    lineHeight,
+  }: CodeTextProgressiveRenderStyleProps) => ({
+    height: lineCount * lineHeight,
+    display: "inline-block",
+    width: "100%",
+  }),
+});
+
 const CodeTextProgressiveRender = ({
   lines,
   highlightedLine,
@@ -21,6 +39,8 @@ const CodeTextProgressiveRender = ({
   renderComplete,
   pageSize,
 }: CodeTextProgressiveRenderProps) => {
+  const classes = useStyles({ lineCount: lines.length, lineHeight: 13.333 });
+
   const [currentRenderLimit, setCurrentRenderLimit] = React.useState(pageSize);
   const maxRenderSize = lines.length - 1;
 
@@ -37,31 +57,24 @@ const CodeTextProgressiveRender = ({
 
     return React.useMemo(
       () => (
-        <CodeTextLine
-          key={`code-line-${lineIdx}`}
-          line={line}
-          idx={lineIdx}
-          highlighted={isLineHighlighted(lineIdx)}
-          handleLineClick={handleLineClick}
-        />
+        <Element name={`line-${lineIdx}`} key={`line-element-${lineIdx}`}>
+          <CodeTextLine
+            key={`code-line-${lineIdx}`}
+            line={line}
+            idx={lineIdx}
+            highlighted={isLineHighlighted(lineIdx)}
+            handleLineClick={handleLineClick}
+          />
+        </Element>
       ),
       [line, lineIdx, highlightedLine, highlightedRangeEnd]
     );
   });
 
   return (
-    <span>
-      {allLines.slice(0, currentRenderLimit).map((theLine, theLineIdx) => {
-        return (
-          <Element
-            name={`line-${theLineIdx}`}
-            key={`line-element-${theLineIdx}`}
-          >
-            {theLine}
-          </Element>
-        );
-      })}
-    </span>
+    <div className={classes.wrapper}>
+      {allLines.slice(0, currentRenderLimit)}
+    </div>
   );
 };
 

diff --git a/ui/src/CodeText/__tests__/CodeText.spec.tsx b/ui/src/CodeText/__tests__/CodeText.spec.tsx
@@ -9,6 +9,8 @@ describe("CodeText", () => {
 
     const { findByTestId, queryByTestId } = render(<CodeText text={text} />);
 
+    await findByTestId("code-text");
+
     expect(getNodeText(await findByTestId("code-text-line-content-1"))).toBe(
       "line 1"
     );
@@ -26,10 +28,12 @@ describe("CodeText", () => {
     expect(queryByTestId("code-text-line-number-3")).toBeNull();
   });
 
-  it("when output is blank should not show any lines", () => {
+  it("when output is blank should not show any lines", async () => {
     const text = "";
 
-    const { queryByTestId } = render(<CodeText text={text} />);
+    const { findByTestId, queryByTestId } = render(<CodeText text={text} />);
+
+    await findByTestId("code-text");
 
     expect(queryByTestId("code-text-line-number-1")).toBeNull();
   });