Improve UX by marking changed lines

pomber · Feb 7, 2021 · dcb1014 · dcb1014
1 parent 651dd00
commit dcb1014
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/slide.js b/src/slide.js
@@ -37,6 +37,16 @@ function getLine(line, i, { styles }) {
   );
 }
 
+function getStyleWithMark(styles) {
+  return styles.map((item) => {
+    if(item.opacity && item.opacity === 1) {
+      item.borderLeft = "2px solid rgb(255 190 0 / 71%)";
+      item.paddingLeft = "6px";
+    }
+    return item
+  })
+}
+
 function Slide({ lines, styles, changes }) {
   return (
     <pre
@@ -64,5 +74,6 @@ function Slide({ lines, styles, changes }) {
 export default function SlideWrapper({ time, version }) {
   const { lines, changes } = version;
   const styles = animation((time + 1) / 2, lines);
-  return <Slide lines={lines} styles={styles} changes={changes} />;
+  const stylesWithMarke = getStyleWithMark(styles);
+  return <Slide lines={lines} styles={stylesWithMarke} changes={changes} />;
 }