import wizards: use position sticky for preview headers & remove react-scroll-sync

2025-12-28 16:06:41 +01:00 · 2021-10-07 16:28:27 +11:00
parent 176d2ee67e
commit 4219d8e74c
7 changed files with 94 additions and 107 deletions
--- 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",
--- 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,
--- 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 && (
--- 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>
  );
 }
--- 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 && (
--- 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>
  );
 }
--- 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"