Merge pull request #77 from newrelic/levels-ui

fix: remove useref in levels (for step cells)
newrelic · Sep 26, 2023 · d7b397c · d7b397c
2 parents 3e1aded + 1c77999
commit d7b397c
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 76 deletions.
diff --git a/src/components/level/index.js b/src/components/level/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { Icon } from 'nr1';
@@ -24,33 +24,61 @@ const Level = ({
   const isDragHandleClicked = useRef(false);
   const dragItemIndex = useRef();
   const dragOverItemIndex = useRef();
-  const stepCellsRefs = useRef([]);
-
-  useEffect(() => {
-    if (mode === MODES.EDIT) return;
-    const stepCells = stepCellsRefs.current;
-    const rows = Math.ceil(stepCells.length / 3);
-    const lastRowColumns = stepCells.length % 3;
-    stepCells.forEach((scr, index) => {
-      let col = (index + 1) % 3;
-      if (!col) col = 3;
-      const row = Math.ceil((index + 1) / 3);
-      if (row === 1 && (col === 3 || (rows === 1 && col === lastRowColumns))) {
-        scr.classList.add('top-radius');
-      }
-      if (row < rows) {
-        scr.classList.add('bot-thin-border');
-      } else if (row === rows) {
-        scr.classList.add('top-thin-border');
-        if (col === lastRowColumns) {
-          scr.classList.add('bot-radius');
-          scr.classList.add(`start-col-${col === 1 ? '1' : '2'}`);
-          scr.classList.add('last-col');
+
+  const stepsRows = useMemo(() => {
+    if (!steps.length) return [];
+
+    return steps.reduce(
+      (acc, { id, title, signals = [], status }, index, arr) => {
+        const isLastStep = index + 1 === arr.length;
+        const cell = (
+          <div
+            className={`step-cell ${mode === MODES.EDIT ? 'edit' : ''}`}
+            key={id || index}
+          >
+            <Step
+              title={title}
+              signals={signals}
+              stageName={stageName}
+              level={order}
+              onUpdate={(updates) => updateStepHandler(index, updates)}
+              onDelete={() => deleteStepHandler(index)}
+              onDragStart={(e) => stepDragStartHandler(e, index)}
+              onDragOver={(e) => stepDragOverHandler(e, index)}
+              onDrop={(e) => stepDropHandler(e)}
+              status={status}
+              mode={mode}
+            />
+          </div>
+        );
+        if (mode === MODES.EDIT) {
+          acc.rows.push(
+            <div
+              className="steps-row cols-1"
+              key={`steps_row_${order}_${index}`}
+            >
+              {cell}
+            </div>
+          );
+        } else {
+          acc.cols.push(cell);
+          if (index % 3 === 2 || isLastStep) {
+            acc.rows.push(
+              <div
+                className={`steps-row cols-${acc.cols.length}`}
+                key={`steps_row_${order}_${index}`}
+              >
+                {[...acc.cols]}
+              </div>
+            );
+            acc.cols = [];
+          }
         }
-      }
-      if (col === 3) scr.classList.add('last-col');
-    });
-  }, [mode]);
+        return isLastStep ? acc.rows : acc;
+      },
+      { rows: [], cols: [] }
+    );
+  }, [steps, mode]);
 
   const deleteHandler = useCallback(() => {
     if (onDelete) onDelete();
@@ -163,29 +191,7 @@ const Level = ({
       ) : (
         <div className={`order ${status}`}>{order}</div>
       )}
-      <div className="steps">
-        {steps.map(({ title, signals = [], status }, index) => (
-          <div
-            className={`step-cell ${mode === MODES.EDIT ? 'edit' : ''}`}
-            key={index}
-            ref={(el) => (stepCellsRefs.current[index] = el)}
-          >
-            <Step
-              title={title}
-              signals={signals}
-              stageName={stageName}
-              level={order}
-              onUpdate={(updates) => updateStepHandler(index, updates)}
-              onDelete={() => deleteStepHandler(index)}
-              onDragStart={(e) => stepDragStartHandler(e, index)}
-              onDragOver={(e) => stepDragOverHandler(e, index)}
-              onDrop={(e) => stepDropHandler(e)}
-              status={status}
-              mode={mode}
-            />
-          </div>
-        ))}
-      </div>
+      <div className="steps">{stepsRows}</div>
     </div>
   );
 };

diff --git a/src/components/level/styles.scss b/src/components/level/styles.scss
@@ -40,47 +40,53 @@
   }
   .steps {
     width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
 
-    .step-cell {
-      box-sizing: border-box;
-      border-color: #dedede;
-      border-style: solid;
-      border-width: 0.5px 0.25px;
-
-      &.edit {
-        border-width: 0.5px;
-        grid-column: 1 / 4;
+    div:first-child {
+      div.step-cell {
+        border-top-width: .5px;
       }
-
-      &.top-thin-border {
-        border-top-width: 0.25px;
+      div:last-child {
+        border-top-right-radius: 4px;
       }
+    }
 
-      &.bot-thin-border {
-        border-bottom-width: 0.25px;
+    div:last-child {
+      div.step-cell {
+        border-bottom-width: .5px;
       }
-
-      &.top-radius {
-        border-top-right-radius: 4px;
+      div:last-child {
+        border-bottom-right-radius: 4px;
       }
+    }
 
-      &.bot-radius {
-        border-bottom-right-radius: 4px;
+    .steps-row {
+      box-sizing: border-box;
+      width: 100%;
+      display: grid;
+
+      &.cols-1 {
+        grid-template-columns: 1fr;
       }
 
-      &.start-col-1 {
-        grid-column: 1 / -1;
+      &.cols-2 {
+        grid-template-columns: 1fr 1fr;
       }
 
-      &.start-col-2 {
-        grid-column: 2 / -1;
+      &.cols-3 {
+        grid-template-columns: 1fr 1fr 1fr;
       }
 
-      &.last-col {
+      div:last-child {
         border-right-width: 0.5px;
       }
+
+      .step-cell {
+        box-sizing: border-box;
+        border: 0.25px solid #dedede;
+      }
     }
   }
 }