fix: fix scroll on sidebar

slater-notes · Apr 27, 2021 · 34ba385 · 34ba385
1 parent c6dc933
commit 34ba385
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 76 deletions.
diff --git a/src/containers/Sidebar/Files/index.tsx b/src/containers/Sidebar/Files/index.tsx
@@ -7,19 +7,15 @@ import DefaultDialog from '../../../components/Dialogs/DefaultDialog';
 import { FileText, Star, Trash } from 'react-feather';
 import DefaultIconButton from '../../../components/Buttons/DefaultIconButton';
 import FilterFiles from './FilterFiles';
-import { throttle } from 'lodash';
 import ListGroup, { Item } from './ListGroup';
 import NotifBox from '../../../components/NotifBox';
 
 const Files = () => {
   const theme = useTheme();
   const classes = useStyles();
 
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
   const [filter, setFilter] = React.useState<string>('');
   const [emptyTrashConfirm, setEmptyTrashConfirm] = React.useState(false);
-  const [, setContainerShadow] = React.useState(false);
 
   const fileCollection = useStoreState((s) => s.fileCollection);
   const activeNote = useStoreState((s) => s.activeNote);
@@ -29,22 +25,6 @@ const Files = () => {
   const emptyTrash = useStoreActions((a) => a.emptyTrash);
   const setSidebarOpen = useStoreActions((a) => a.setSidebarOpen);
 
-  const handleContainerScroll = () => {
-    if (containerRef.current) {
-      setContainerShadow(containerRef.current.scrollTop > 0);
-    }
-  };
-
-  const handleContainerScrollThrottled = React.useMemo(
-    () => throttle(handleContainerScroll, 250),
-    [],
-  );
-
-  React.useEffect(() => {
-    handleContainerScroll();
-    globalThis.addEventListener('resize', handleContainerScrollThrottled);
-  }, []);
-
   // Reset filter when changing folders
   React.useEffect(() => {
     if (activeFolderId !== 'all') {
@@ -182,67 +162,62 @@ const Files = () => {
   };
 
   return (
-    <React.Fragment>
-      <div className={classes.topShadow}></div>
-      <div
-        ref={containerRef}
-        className={classes.container}
-        onScroll={handleContainerScrollThrottled}
-      >
-        <div className={classes.titleContainer}>
-          <div className={classes.title}>
-            <Box fontSize='1.8rem' fontWeight={theme.typography.fontWeightMedium}>
-              {getTitle()}
-            </Box>
-            {activeFolderId === 'trash' && (
-              <DefaultIconButton
-                icon={Trash}
-                size={18}
-                disabled={!fileCollection?.notes.find((n) => n.isDeleted)}
-                style={{
-                  marginTop: `-${theme.spacing(0.5)}px`,
-                }}
-                onClick={() => {
-                  setEmptyTrashConfirm(true);
-                }}
-              />
-            )}
-          </div>
-
-          {activeFolderId === 'all' && <FilterFiles onChange={(value) => setFilter(value)} />}
+    <div className={classes.container}>
+      <div className={classes.titleContainer}>
+        <div className={classes.title}>
+          <Box fontSize='1.8rem' fontWeight={theme.typography.fontWeightMedium}>
+            {getTitle()}
+          </Box>
+          {activeFolderId === 'trash' && (
+            <DefaultIconButton
+              icon={Trash}
+              size={18}
+              disabled={!fileCollection?.notes.find((n) => n.isDeleted)}
+              style={{
+                marginTop: `-${theme.spacing(0.5)}px`,
+              }}
+              onClick={() => {
+                setEmptyTrashConfirm(true);
+              }}
+            />
+          )}
         </div>
 
-        <ListGroup items={getListItems()} />
-
-        {emptyTrashConfirm && (
-          <DefaultDialog
-            title='Empty Trash?'
-            text='Are you sure you want to empty the trash? Notes in the trash will be deleted permanently.'
-            withCancel
-            withConfirm
-            confirmLabel='Empty Trash'
-            confirmButtonStyle={{ color: theme.palette.error.main }}
-            onCancel={() => setEmptyTrashConfirm(false)}
-            onConfirm={() => {
-              setEmptyTrashConfirm(false);
-              emptyTrash();
-            }}
-          />
-        )}
+        {activeFolderId === 'all' && <FilterFiles onChange={(value) => setFilter(value)} />}
       </div>
-    </React.Fragment>
+
+      <ListGroup items={getListItems()} />
+
+      {emptyTrashConfirm && (
+        <DefaultDialog
+          title='Empty Trash?'
+          text='Are you sure you want to empty the trash? Notes in the trash will be deleted permanently.'
+          withCancel
+          withConfirm
+          confirmLabel='Empty Trash'
+          confirmButtonStyle={{ color: theme.palette.error.main }}
+          onCancel={() => setEmptyTrashConfirm(false)}
+          onConfirm={() => {
+            setEmptyTrashConfirm(false);
+            emptyTrash();
+          }}
+        />
+      )}
+    </div>
   );
 };
 
 const useStyles = makeStyles((theme) => ({
   topShadow: {
+    width: '100%',
     position: 'absolute',
     zIndex: 2,
     height: 1,
     boxShadow: '0px 3px 10px 0px rgb(0 0 0 / 15%)',
   },
 
   container: {
+    width: '100%',
     overflowY: 'auto',
     backgroundColor: theme.palette.background.default,
   },

diff --git a/src/containers/Sidebar/Folders/index.tsx b/src/containers/Sidebar/Folders/index.tsx
@@ -244,6 +244,7 @@ const Folders = () => {
 
 const useStyles = makeStyles((theme) => ({
   container: {
+    width: '100%',
     display: 'flex',
     flexDirection: 'column',
     position: 'relative',

diff --git a/src/containers/Sidebar/index.tsx b/src/containers/Sidebar/index.tsx
@@ -1,6 +1,4 @@
 import { Grid, makeStyles } from '@material-ui/core';
-import { grey } from '@material-ui/core/colors';
-import React from 'react';
 import Files from './Files';
 import Folders from './Folders';
 
@@ -9,10 +7,10 @@ const Sidebar = () => {
 
   return (
     <Grid container className={classes.container}>
-      <Grid item className={classes.gridItems} style={{ width: 300 }}>
+      <Grid item className={`${classes.gridItem} ${classes.foldersContainer}`}>
         <Folders />
       </Grid>
-      <Grid item className={classes.gridItems} style={{ flex: 1, borderColor: grey[100] }}>
+      <Grid item className={`${classes.gridItem} ${classes.filesContainer}`}>
         <Files />
       </Grid>
     </Grid>
@@ -25,16 +23,18 @@ const useStyles = makeStyles((theme) => ({
     width: 700,
   },
 
-  gridItems: {
+  gridItem: {
     height: '100vh',
     display: 'flex',
-    justifyContent: 'stretch',
-    alignItems: 'stretch',
+  },
+
+  foldersContainer: {
+    width: 300,
     borderRight: `1px solid ${theme.palette.divider}`,
+  },
 
-    '& > *': {
-      width: '100%',
-    },
+  filesContainer: {
+    flex: 1,
   },
 }));