From 4219d8e74c3d7499ff24e5b57ba40d48e03544e9 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Thu, 7 Oct 2021 16:28:27 +1100
Subject: [PATCH] import wizards: use position sticky for preview headers &
 remove react-scroll-sync

---
 package.json                                  |  1 -
 src/components/Wizards/Cell.tsx               |  1 -
 .../ImportCsvWizard/Step2NewColumns.tsx       | 34 +++++-----
 .../Wizards/ImportCsvWizard/Step3Preview.tsx  | 62 +++++++++---------
 .../Wizards/ImportWizard/Step3Types.tsx       | 35 ++++++-----
 .../Wizards/ImportWizard/Step4Preview.tsx     | 63 +++++++++----------
 yarn.lock                                     |  5 --
 7 files changed, 94 insertions(+), 107 deletions(-)

diff --git a/package.json b/package.json
index ecd82024..d6577484 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
     "react-router-dom": "^5.0.1",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "^4.0.3",
-    "react-scroll-sync": "^0.8.0",
     "react-usestateref": "^1.0.5",
     "serve": "^11.3.2",
     "swr": "^1.0.1",
diff --git a/src/components/Wizards/Cell.tsx b/src/components/Wizards/Cell.tsx
index 858d4ed7..c45d5e40 100644
--- a/src/components/Wizards/Cell.tsx
+++ b/src/components/Wizards/Cell.tsx
@@ -75,7 +75,6 @@ export default function Cell({
           React.createElement(formatter, {
             value,
             rowIdx: 0,
-            style: { paddingLeft: "12px" },
             column: {
               type,
               key: field,
diff --git a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
index 54b93db2..6824f768 100644
--- a/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
+++ b/src/components/Wizards/ImportCsvWizard/Step2NewColumns.tsx
@@ -120,23 +120,25 @@ export default function Step2NewColumns({
           </Grid>
         </Grid>
 
-        <Divider className={classes.previewDivider} />
-
-        <Grid container spacing={3}>
-          {!isXs && (
-            <Grid item xs={12} sm={6}>
-              <Column label={config.newColumns[fieldToEdit].key} />
-            </Grid>
-          )}
-          <Grid item xs={12} sm={6}>
-            <Column
-              label={config.newColumns[fieldToEdit].name}
-              type={config.newColumns[fieldToEdit].type}
-            />
-          </Grid>
-        </Grid>
-
         <FadeList listSx={{ pt: 0 }}>
+          <Grid
+            container
+            spacing={3}
+            style={{ position: "sticky", top: 0, zIndex: 1, marginTop: 0 }}
+          >
+            {!isXs && (
+              <Grid item xs={12} sm={6} style={{ paddingTop: 0 }}>
+                <Column label={config.newColumns[fieldToEdit].key} />
+              </Grid>
+            )}
+            <Grid item xs={12} sm={6} style={{ paddingTop: 0 }}>
+              <Column
+                label={config.newColumns[fieldToEdit].name}
+                type={config.newColumns[fieldToEdit].type}
+              />
+            </Grid>
+          </Grid>
+
           {rowData.slice(0, 20).map((cell, i) => (
             <Grid container key={i} wrap="nowrap">
               {!isXs && (
diff --git a/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx b/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx
index 34e4cd57..b6303592 100644
--- a/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx
+++ b/src/components/Wizards/ImportCsvWizard/Step3Preview.tsx
@@ -1,4 +1,3 @@
-import { ScrollSync, ScrollSyncPane } from "react-scroll-sync";
 import _find from "lodash/find";
 
 import { makeStyles, createStyles } from "@mui/styles";
@@ -13,7 +12,6 @@ import { useProjectContext } from "contexts/ProjectContext";
 const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
-      position: "relative",
       minHeight: 300,
       height: "calc(100% - 80px)",
     },
@@ -22,6 +20,7 @@ const useStyles = makeStyles((theme) =>
       height: "100%",
       display: "flex",
       flexDirection: "column",
+      overflow: "scroll",
     },
 
     spacer: {
@@ -30,9 +29,12 @@ const useStyles = makeStyles((theme) =>
       flexShrink: 0,
     },
 
-    header: { overflowX: "inherit" },
+    header: {
+      position: "sticky",
+      top: 0,
+      zIndex: 1,
+    },
     data: {
-      overflow: "initial",
       flexGrow: 1,
     },
 
@@ -62,40 +64,34 @@ export default function Step4Preview({ csvData, config }: IStepProps) {
 
   return (
     <div className={classes.root}>
-      <ScrollSync vertical={false} proportional={false}>
-        <div className={classes.container}>
-          <ScrollSyncPane>
-            <Grid container wrap="nowrap" className={classes.header}>
-              {columns.map(({ key, name, type }) => (
-                <Grid item key={key} className={classes.column}>
-                  <Column label={name} type={type} />
-                </Grid>
-              ))}
-              <Grid item className={classes.spacer} />
+      <div className={classes.container}>
+        <Grid container wrap="nowrap" className={classes.header}>
+          {columns.map(({ key, name, type }) => (
+            <Grid item key={key} className={classes.column}>
+              <Column label={name} type={type} />
             </Grid>
-          </ScrollSyncPane>
+          ))}
+          <Grid item className={classes.spacer} />
+        </Grid>
 
-          <ScrollSyncPane>
-            <Grid container wrap="nowrap" className={classes.data}>
-              {columns.map(({ csvKey, name, columnKey, type }) => (
-                <Grid item key={csvKey} className={classes.column}>
-                  {csvData.rows.slice(0, 50).map((row, i) => (
-                    <Cell
-                      key={csvKey + i}
-                      field={columnKey}
-                      value={row[columnKey]}
-                      type={type}
-                      name={name}
-                    />
-                  ))}
-                  <Grid item className={classes.spacer} />
-                </Grid>
+        <Grid container wrap="nowrap" className={classes.data}>
+          {columns.map(({ csvKey, name, columnKey, type }) => (
+            <Grid item key={csvKey} className={classes.column}>
+              {csvData.rows.slice(0, 50).map((row, i) => (
+                <Cell
+                  key={csvKey + i}
+                  field={columnKey}
+                  value={row[columnKey]}
+                  type={type}
+                  name={name}
+                />
               ))}
               <Grid item className={classes.spacer} />
             </Grid>
-          </ScrollSyncPane>
-        </div>
-      </ScrollSync>
+          ))}
+          <Grid item className={classes.spacer} />
+        </Grid>
+      </div>
     </div>
   );
 }
diff --git a/src/components/Wizards/ImportWizard/Step3Types.tsx b/src/components/Wizards/ImportWizard/Step3Types.tsx
index cad1c3a4..9c4299b9 100644
--- a/src/components/Wizards/ImportWizard/Step3Types.tsx
+++ b/src/components/Wizards/ImportWizard/Step3Types.tsx
@@ -25,7 +25,6 @@ const useStyles = makeStyles((theme) =>
 
     typeHeading: { margin: theme.spacing(52 / 8, 0, 1) },
 
-    previewDivider: { marginBottom: theme.spacing(2) },
     previewSpacer: { width: theme.spacing(3) },
     cellContainer: { overflow: "hidden" },
   })
@@ -105,23 +104,25 @@ export default function Step3Types({ config, updateConfig, isXs }: IStepProps) {
         </Grid>
       </Grid>
 
-      <Divider className={classes.previewDivider} />
-
-      <Grid container spacing={3}>
-        {!isXs && (
-          <Grid item xs={12} sm={6}>
-            <Column label={fieldToEdit} />
-          </Grid>
-        )}
-        <Grid item xs={12} sm={6}>
-          <Column
-            label={config[fieldToEdit].name}
-            type={config[fieldToEdit].type}
-          />
-        </Grid>
-      </Grid>
-
       <FadeList listSx={{ pt: 0 }}>
+        <Grid
+          container
+          spacing={3}
+          style={{ position: "sticky", top: 0, zIndex: 1, marginTop: 0 }}
+        >
+          {!isXs && (
+            <Grid item xs={12} sm={6} style={{ paddingTop: 0 }}>
+              <Column label={fieldToEdit} />
+            </Grid>
+          )}
+          <Grid item xs={12} sm={6} style={{ paddingTop: 0 }}>
+            <Column
+              label={config[fieldToEdit].name}
+              type={config[fieldToEdit].type}
+            />
+          </Grid>
+        </Grid>
+
         {tableState!.rows!.slice(0, 20).map((row) => (
           <Grid container key={row.id} wrap="nowrap">
             {!isXs && (
diff --git a/src/components/Wizards/ImportWizard/Step4Preview.tsx b/src/components/Wizards/ImportWizard/Step4Preview.tsx
index e23ff184..3ae82719 100644
--- a/src/components/Wizards/ImportWizard/Step4Preview.tsx
+++ b/src/components/Wizards/ImportWizard/Step4Preview.tsx
@@ -1,5 +1,3 @@
-import { ScrollSync, ScrollSyncPane } from "react-scroll-sync";
-
 import { makeStyles, createStyles } from "@mui/styles";
 import { Grid } from "@mui/material";
 
@@ -12,7 +10,6 @@ import { useProjectContext } from "contexts/ProjectContext";
 const useStyles = makeStyles((theme) =>
   createStyles({
     root: {
-      position: "relative",
       minHeight: 300,
       height: "calc(100% - 80px)",
     },
@@ -21,6 +18,7 @@ const useStyles = makeStyles((theme) =>
       height: "100%",
       display: "flex",
       flexDirection: "column",
+      overflow: "scroll",
     },
 
     spacer: {
@@ -29,9 +27,12 @@ const useStyles = makeStyles((theme) =>
       flexShrink: 0,
     },
 
-    header: { overflowX: "hidden" },
+    header: {
+      position: "sticky",
+      top: 0,
+      zIndex: 1,
+    },
     data: {
-      overflow: "scroll",
       flexGrow: 1,
     },
 
@@ -51,40 +52,34 @@ export default function Step4Preview({ config }: IStepProps) {
 
   return (
     <div className={classes.root}>
-      <ScrollSync vertical={false} proportional={false}>
-        <div className={classes.container}>
-          <ScrollSyncPane>
-            <Grid container wrap="nowrap" className={classes.header}>
-              {Object.entries(config).map(([field, { name, type }]) => (
-                <Grid item key={field} className={classes.column}>
-                  <Column label={name} type={type} />
-                </Grid>
-              ))}
-              <Grid item className={classes.spacer} />
+      <div className={classes.container}>
+        <Grid container wrap="nowrap" className={classes.header}>
+          {Object.entries(config).map(([field, { name, type }]) => (
+            <Grid item key={field} className={classes.column}>
+              <Column label={name} type={type} />
             </Grid>
-          </ScrollSyncPane>
+          ))}
+          <Grid item className={classes.spacer} />
+        </Grid>
 
-          <ScrollSyncPane>
-            <Grid container wrap="nowrap" className={classes.data}>
-              {Object.entries(config).map(([field, { name, type }]) => (
-                <Grid item key={field} className={classes.column}>
-                  {tableState!.rows!.slice(0, 20).map((row) => (
-                    <Cell
-                      key={field + row.id}
-                      field={field}
-                      value={row[field]}
-                      type={type}
-                      name={name}
-                    />
-                  ))}
-                  <Grid item className={classes.spacer} />
-                </Grid>
+        <Grid container wrap="nowrap" className={classes.data}>
+          {Object.entries(config).map(([field, { name, type }]) => (
+            <Grid item key={field} className={classes.column}>
+              {tableState!.rows!.slice(0, 20).map((row) => (
+                <Cell
+                  key={field + row.id}
+                  field={field}
+                  value={row[field]}
+                  type={type}
+                  name={name}
+                />
               ))}
               <Grid item className={classes.spacer} />
             </Grid>
-          </ScrollSyncPane>
-        </div>
-      </ScrollSync>
+          ))}
+          <Grid item className={classes.spacer} />
+        </Grid>
+      </div>
     </div>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 979a0694..8aa3e69c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13759,11 +13759,6 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-scroll-sync@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.8.0.tgz#61fabed2afc47d41e6938819d620799da3610548"
-  integrity sha512-Ms9srm41UM+lWexuqdocXjqaqqt6ZRSFxcudgB0sYhC7Or+m12WemTwY8BaQCRf7hA8zHDk55FHvMkqsH7gF+w==
-
 react-side-effect@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"