lint: fix @babel/register import and eslint errors

xgi · Jan 16, 2024 · c0902b5 · c0902b5
1 parent 3b15dce
commit c0902b5
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 50 deletions.
diff --git a/.erb/configs/webpack.config.eslint.js b/.erb/configs/webpack.config.eslint.js
@@ -1,4 +1,4 @@
 /* eslint import/no-unresolved: off, import/no-self-import: off */
-require('../.erb/scripts/node_modules/@babel/register');
+require('@babel/register');
 
 module.exports = require('./webpack.config.renderer.dev.babel').default;
diff --git a/src/components/general/ToggleThemeSwitch.tsx b/src/components/general/ToggleThemeSwitch.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorScheme, Switch, useMantineTheme} from '@mantine/core';
+import { ColorScheme, Switch, useMantineTheme } from '@mantine/core';
 import { IconSun, IconMoonStars } from '@tabler/icons';
 
 interface Props {
@@ -12,10 +12,11 @@ const ToggleThemeSwitch: React.FC<Props> = (props: Props) => {
   const theme = useMantineTheme();
 
   return (
-    <Switch size="sm"
-      onLabel={<IconSun size="0.7rem" stroke={2.5} color={theme.colors.yellow[4]}/>}
-      offLabel={<IconMoonStars size="0.7rem" stroke={2.5} color={theme.colors.blue[6]}/>}
-      checked={colorScheme === 'dark' ? false : true}
+    <Switch
+      size="sm"
+      onLabel={<IconSun size="0.7rem" stroke={2.5} color={theme.colors.yellow[4]} />}
+      offLabel={<IconMoonStars size="0.7rem" stroke={2.5} color={theme.colors.blue[6]} />}
+      checked={colorScheme !== 'dark'}
       onChange={() => toggleColorScheme()}
       styles={{
         root: { position: 'fixed', left: '0.5rem', bottom: '0.5rem', zIndex: 1000 },

diff --git a/src/components/reader/ReaderViewer.tsx b/src/components/reader/ReaderViewer.tsx
@@ -46,7 +46,7 @@ const ReaderViewer: React.FC<Props> = (props: Props) => {
   const readingDirection = useRecoilValue(readingDirectionState);
   const hideScrollbar = useRecoilValue(hideScrollbarState);
   const pageGap = useRecoilValue(pageGapState);
-  const [maxPageWidth, setmaxPageWidth] = useRecoilState(maxPageWidthState);
+  const [maxPageWidth, setMaxPageWidth] = useRecoilState(maxPageWidthState);
   const pageWidthMetric = useRecoilValue(pageWidthMetricState);
   const optimizeContrast = useRecoilValue(optimizeContrastState);
 
@@ -257,22 +257,21 @@ const ReaderViewer: React.FC<Props> = (props: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageStyle, pageNumber, lastPageNumber]);
 
-  const handleScroll = (e) => {
+  const handleScroll = (e: WheelEvent) => {
     if (e.ctrlKey) {
-      setmaxPageWidth((maxPageWidth) => {
-        const newWidth = e.deltaY < 0 ? maxPageWidth + 10 : maxPageWidth - 10;
-        const clampedDown = Math.max(newWidth,10);
-        const clampedUp = pageWidthMetric == '%' ? Math.min(clampedDown,100) : clampedDown;
-        return clampedUp;
-      });
+      const newWidth = e.deltaY < 0 ? maxPageWidth + 10 : maxPageWidth - 10;
+      const clampedDown = Math.max(newWidth, 10);
+      const clampedUp = pageWidthMetric === '%' ? Math.min(clampedDown, 100) : clampedDown;
+      setMaxPageWidth(clampedUp);
     }
   };
-
-  useEffect(()=>{
-  window.addEventListener('wheel', handleScroll);
-  return () => {
-    window.removeEventListener('wheel', handleScroll);
-  };
+
+  useEffect(() => {
+    window.addEventListener('wheel', handleScroll);
+    return () => {
+      window.removeEventListener('wheel', handleScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageWidthMetric]);
 
   return (

diff --git a/src/components/settings/ReaderSettings.tsx b/src/components/settings/ReaderSettings.tsx
@@ -13,6 +13,7 @@ import {
   Radio,
   Slider,
   Menu,
+  MantineTheme,
 } from '@mantine/core';
 import {
   IconArrowBigLeft,
@@ -330,44 +331,55 @@ const ReaderSettings: React.FC<Props> = (props: Props) => {
         checked={fitStretch}
         onChange={(e) => updateReaderSetting(ReaderSetting.FitStretch, e.target.checked)}
       />
- 
+
       <Group position="left" align="left" spacing="xs" noWrap>
         <Text size="sm" ml="sm">
-                Max page width
+          Max page width
         </Text>
         <Menu shadow="md" width={50} trigger="hover">
-              <Menu.Target>
-                <Button compact styles={buttonStyles} radius={0} px={4} pb={2}>
-                  {pageWidthMetric}
-                </Button>
-              </Menu.Target>
-              <Menu.Dropdown>
-                <Menu.Item  onClick={() => {updateReaderSetting(ReaderSetting.PageWidthMetric, '%')}}>
-                  %
-                </Menu.Item>
-                <Menu.Item  onClick={() => {updateReaderSetting(ReaderSetting.PageWidthMetric, 'px')}}>
-                  px
-                </Menu.Item>
-              </Menu.Dropdown>
-            </Menu>
+          <Menu.Target>
+            <Button compact styles={buttonStyles} radius={0} px={4} pb={2}>
+              {pageWidthMetric}
+            </Button>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item
+              onClick={() => {
+                updateReaderSetting(ReaderSetting.PageWidthMetric, '%');
+              }}
+            >
+              %
+            </Menu.Item>
+            <Menu.Item
+              onClick={() => {
+                updateReaderSetting(ReaderSetting.PageWidthMetric, 'px');
+              }}
+            >
+              px
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
       </Group>
 
       <Slider
-              label={`${maxPageWidth}${pageWidthMetric}`}
-              mx="sm"
-              min={10}
-              max={pageWidthMetric === '%' ? 100 : window.innerWidth}
-              step={10}
-              styles={{ markLabel: { display: 'none' } }}
-              maw={400}
-              marks={pageWidthMetric === '%' ? Array.from({ length: 10 }, (_v, k) => (k + 1) * 10).map((i: number) => ({
+        label={`${maxPageWidth}${pageWidthMetric}`}
+        mx="sm"
+        min={10}
+        max={pageWidthMetric === '%' ? 100 : window.innerWidth}
+        step={10}
+        styles={{ markLabel: { display: 'none' } }}
+        maw={400}
+        marks={
+          pageWidthMetric === '%'
+            ? Array.from({ length: 10 }, (_v, k) => (k + 1) * 10).map((i: number) => ({
                 value: i,
-              })) : []}
-              disabled={!fitContainToWidth}
-              defaultValue={maxPageWidth}
-              onChange={(value) => updateReaderSetting(ReaderSetting.MaxPageWidth, value)}
-            />
-
+              }))
+            : []
+        }
+        disabled={!fitContainToWidth}
+        defaultValue={maxPageWidth}
+        onChange={(value) => updateReaderSetting(ReaderSetting.MaxPageWidth, value)}
+      />
 
       <Text py="xs">Rendering</Text>
       <Checkbox