refactor sheets

src/HelpSheet.jsx

@@ -1,34 +1,23 @@
 import React, { memo } from 'react';
-import { IoIosCloseCircleOutline } from 'react-icons/io';
 import { FaClipboard, FaHandPointRight, FaHandPointLeft, FaStepBackward, FaStepForward } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 
 import SetCutpointButton from './SetCutpointButton';
 import { toast } from './util';
 import { primaryTextColor } from './colors';
+import Sheet from './Sheet';
 
 const electron = window.require('electron');
 const { clipboard } = electron;
 
 const { githubLink } = electron.remote.require('./constants');
 
-const HelpSheet = memo(({
+const HelpSheet = memo(({ visible, onTogglePress, ffmpegCommandLog, currentCutSeg }) => {
-  visible, onTogglePress, ffmpegCommandLog, currentCutSeg,
-}) => {
   const { t } = useTranslation();
 
   return (
-    <AnimatePresence>
+    <Sheet visible={visible} onClosePress={onTogglePress} style={{ background: '#6b6b6b', color: 'white' }}>
-      {visible && (
+      <div className="help-sheet">
-        <motion.div
-          initial={{ scale: 0, opacity: 0.5 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0, opacity: 0 }}
-          className="help-sheet"
-        >
-          <IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
-
         <h1>{t('Common problems')}</h1>
         <p>
           {t('Lossless cutting is not an exact science. For some codecs and files it just works. For others you may need to trial and error depending on the codec, keyframes etc to get the best cut.')}
@@ -105,9 +94,8 @@ const HelpSheet = memo(({
         ) : (
           <p>{t('The last executed ffmpeg commands will show up here after you run operations. You can copy them to clipboard and modify them to your needs before running on your command line.')}</p>
         )}
-        </motion.div>
+      </div>
-      )}
+    </Sheet>
-    </AnimatePresence>
   );
 });
 

src/SettingsSheet.jsx

@@ -1,25 +1,14 @@
 import React, { memo } from 'react';
-import { IoIosCloseCircleOutline } from 'react-icons/io';
-import { motion, AnimatePresence } from 'framer-motion';
 import { Table } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
-const SettingsSheet = memo(({
+import Sheet from './Sheet';
-  visible, onTogglePress, renderSettings,
+
-}) => {
+const SettingsSheet = memo(({ visible, onTogglePress, renderSettings }) => {
   const { t } = useTranslation();
 
   return (
-    <AnimatePresence>
+    <Sheet visible={visible} onClosePress={onTogglePress} style={{ background: 'white', color: 'black' }}>
-      {visible && (
-        <motion.div
-          initial={{ scale: 0, opacity: 0 }}
-          animate={{ scale: 1, opacity: 1 }}
-          exit={{ scale: 0, opacity: 0 }}
-          className="settings-sheet"
-        >
-          <IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
-
       <Table style={{ marginTop: 40 }}>
         <Table.Head>
           <Table.TextHeaderCell>
@@ -33,9 +22,7 @@ const SettingsSheet = memo(({
           {renderSettings()}
         </Table.Body>
       </Table>
-        </motion.div>
+    </Sheet>
-      )}
-    </AnimatePresence>
   );
 });
 

src/Sheet.jsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { IoIosCloseCircleOutline } from 'react-icons/io';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const sheetStyle = {
+  padding: '1em 2em',
+  position: 'fixed',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  zIndex: 10,
+  overflowY: 'scroll',
+};
+
+const Sheet = memo(({ visible, onClosePress, style, children }) => (
+  <AnimatePresence>
+    {visible && (
+      <motion.div
+        initial={{ scale: 0, opacity: 0.5 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0, opacity: 0 }}
+        style={{ ...sheetStyle, ...style }}
+      >
+        <IoIosCloseCircleOutline role="button" onClick={onClosePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
+
+        {children}
+      </motion.div>
+    )}
+  </AnimatePresence>
+));
+
+export default Sheet;

src/main.css

@@ -19,35 +19,14 @@ body {
     cursor: default;
 }
 
-.help-sheet, .settings-sheet {
+.help-sheet h1 {
-  padding: 1em 2em;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 10;
-  overflow-y: scroll;
-}
-
-.help-sheet {
-  background: #6b6b6b;
-  color: white;
-}
-
-.settings-sheet {
-  background: white;
-  color: black;
-}
-
-.help-sheet h1, .settings-sheet h1 {
   font-size: 1.2em;
   margin-bottom: .5em;
   margin-top: 1.3em;
   text-transform: uppercase;
 }
 
-.help-sheet h2, .settings-sheet h2 {
+.help-sheet h2 {
   font-size: 1em;
   margin-bottom: .5em;
   text-transform: uppercase;