Revert "migrate some components to Mui5 new styling system (#72)"

This reverts commit 72ef61e286.
2021-11-15 17:21:31 +03:30
parent 0eedbe6626
commit 04a1898ea7
28 changed files with 501 additions and 341 deletions
--- a/src/components/reader/DoublePage.tsx
+++ b/src/components/reader/DoublePage.tsx
@@ -5,16 +5,28 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

+import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
-import { Box, styled } from '@mui/system';

-const Image = styled('img')({
-    marginBottom: 0,
-    width: 'auto',
-    minHeight: '99vh',
-    height: 'auto',
-    maxHeight: '99vh',
-    objectFit: 'contain',
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    image: {
+        display: 'block',
+        marginBottom: 0,
+        width: 'auto',
+        minHeight: '99vh',
+        height: 'auto',
+        maxHeight: '99vh',
+        objectFit: 'contain',
+    },
+    page: {
+        display: 'flex',
+        flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'scroll',
+    },
 });

 interface IProps {
@@ -29,28 +41,21 @@ const DoublePage = React.forwardRef((props: IProps, ref: any) => {
        image1src, image2src, index, settings,
    } = props;

+    const classes = useStyles(settings)();
+
    return (
-        <Box
-            ref={ref}
-            sx={{
-                display: 'flex',
-                flexDirection: settings.readerType === 'DoubleLTR' ? 'row' : 'row-reverse',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: 'auto',
-                height: 'auto',
-                overflowX: 'scroll',
-            }}
-        >
-            <Image
+        <div ref={ref} className={classes.page}>
+            <img
+                className={classes.image}
                src={image1src}
                alt={`Page #${index}`}
            />
-            <Image
+            <img
+                className={classes.image}
                src={image2src}
                alt={`Page #${index + 1}`}
            />
-        </Box>
+        </div>
    );
 });

--- a/src/components/reader/Page.tsx
+++ b/src/components/reader/Page.tsx
@@ -5,6 +5,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import SpinnerImage from 'components/util/SpinnerImage';
 import useLocalStorage from 'util/useLocalStorage';
@@ -52,6 +53,22 @@ function imageStyle(settings: IReaderSettings): any {
    };
 }

+const useStyles = (settings: IReaderSettings) => makeStyles({
+    loading: {
+        margin: '100px auto',
+        height: '100vh',
+        width: '100vw',
+    },
+    loadingImage: {
+        height: '100vh',
+        width: '70vw',
+        padding: '50px calc(50% - 20px)',
+        backgroundColor: '#525252',
+        marginBottom: 10,
+    },
+    image: imageStyle(settings),
+});
+
 interface IProps {
    src: string
    index: number
@@ -67,6 +84,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => {

    const [useCache] = useLocalStorage<boolean>('useCache', true);

+    const classes = useStyles(settings)();
    const imgRef = useRef<HTMLImageElement>(null);

    const handleVerticalScroll = () => {
@@ -109,14 +127,8 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
                onImageLoad={onImageLoad}
                alt={`Page #${index}`}
                imgRef={imgRef}
-                spinnerStyle={{
-                    height: '100vh',
-                    width: '70vw',
-                    padding: '50px calc(50% - 20px)',
-                    backgroundColor: '#525252',
-                    marginBottom: 10,
-                }}
-                imgStyle={imageStyle(settings)}
+                spinnerClassName={`${classes.image} ${classes.loadingImage}`}
+                imgClassName={classes.image}
            />
        </div>
    );
--- a/src/components/reader/PageNumber.tsx
+++ b/src/components/reader/PageNumber.tsx
@@ -5,8 +5,21 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

+import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
-import { Box } from '@mui/system';
+
+const useStyles = (settings: IReaderSettings) => makeStyles({
+    pageNumber: {
+        display: settings.showPageNumber ? 'block' : 'none',
+        position: 'fixed',
+        bottom: '50px',
+        right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
+        padding: '2px',
+        textAlign: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: '10px',
+    },
+});

 interface IProps {
    settings: IReaderSettings
@@ -16,20 +29,11 @@ interface IProps {

 export default function PageNumber(props: IProps) {
    const { settings, curPage, pageCount } = props;
+    const classes = useStyles(settings)();

    return (
-        <Box sx={{
-            display: settings.showPageNumber ? 'block' : 'none',
-            position: 'fixed',
-            bottom: '50px',
-            right: settings.staticNav ? 'calc((100vw - 325px)/2)' : 'calc((100vw - 25px)/2)',
-            padding: '2px',
-            textAlign: 'center',
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            borderRadius: '10px',
-        }}
-        >
+        <div className={classes.pageNumber}>
            {`${curPage + 1} / ${pageCount}`}
-        </Box>
+        </div>
    );
 }
--- a/src/components/reader/pager/DoublePagedPager.tsx
+++ b/src/components/reader/pager/DoublePagedPager.tsx
@@ -5,17 +5,34 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { Box } from '@mui/system';
 import Page from '../Page';
 import DoublePage from '../DoublePage';

+const useStyles = (settings: IReaderSettings) => makeStyles({
+    preload: {
+        display: 'none',
+    },
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'scroll',
+    },
+});
+
 export default function DoublePagedPager(props: IReaderProps) {
    const {
        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
    } = props;

+    const classes = useStyles(settings)();
+
    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLImageElement[]>([]);

@@ -175,8 +192,8 @@ export default function DoublePagedPager(props: IReaderProps) {
    }, [selfRef, curPage, settings.readerType]);

    return (
-        <Box ref={selfRef}>
-            <Box id="preload" sx={{ display: 'none' }}>
+        <div ref={selfRef}>
+            <div id="preload" className={classes.preload}>
                {
                    pages.map((page) => (
                        <img
@@ -188,19 +205,8 @@ export default function DoublePagedPager(props: IReaderProps) {
                        />
                    ))
                }
-            </Box>
-            <Box
-                id="display"
-                sx={{
-                    display: 'flex',
-                    flexDirection: (settings.readerType === 'DoubleLTR') ? 'row' : 'row-reverse',
-                    justifyContent: 'center',
-                    margin: '0 auto',
-                    width: 'auto',
-                    height: 'auto',
-                    overflowX: 'scroll',
-                }}
-            />
-        </Box>
+            </div>
+            <div id="display" className={classes.reader} />
+        </div>
    );
 }
--- a/src/components/reader/pager/HorizontalPager.tsx
+++ b/src/components/reader/pager/HorizontalPager.tsx
@@ -5,15 +5,30 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';

+const useStyles = (settings: IReaderSettings) => makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
+        justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
+        margin: '0 auto',
+        width: 'auto',
+        height: 'auto',
+        overflowX: 'visible',
+        userSelect: 'none',
+    },
+});
+
 export default function HorizontalPager(props: IReaderProps) {
    const {
        pages, curPage, settings, setCurPage, prevChapter, nextChapter,
    } = props;

+    const classes = useStyles(settings)();
+
    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLDivElement[]>([]);

@@ -114,19 +129,7 @@ export default function HorizontalPager(props: IReaderProps) {
    }, [selfRef, curPage]);

    return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: (settings.readerType === 'ContinuesHorizontalLTR') ? 'row' : 'row-reverse',
-                justifyContent: (settings.readerType === 'ContinuesHorizontalLTR') ? 'flex-start' : 'flex-end',
-                margin: '0 auto',
-                width: 'auto',
-                height: 'auto',
-                overflowX: 'visible',
-                userSelect: 'none',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
            {
                pages.map((page) => (
                    <Page
@@ -140,6 +143,6 @@ export default function HorizontalPager(props: IReaderProps) {
                    />
                ))
            }
-        </Box>
+        </div>
    );
 }
--- a/src/components/reader/pager/PagedPager.tsx
+++ b/src/components/reader/pager/PagedPager.tsx
@@ -5,15 +5,28 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';

+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+        height: '100vh',
+    },
+});
+
 export default function PagedReader(props: IReaderProps) {
    const {
        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
    } = props;

+    const classes = useStyles();
+
    const selfRef = useRef<HTMLDivElement>(null);

    function nextPage() {
@@ -84,17 +97,7 @@ export default function PagedReader(props: IReaderProps) {
    }, [selfRef, curPage, settings.readerType]);

    return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
-                height: '100vh',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
            <Page
                key={curPage}
                index={curPage}
@@ -103,6 +106,6 @@ export default function PagedReader(props: IReaderProps) {
                setCurPage={setCurPage}
                settings={settings}
            />
-        </Box>
+        </div>
    );
 }
--- a/src/components/reader/pager/VerticalPager.tsx
+++ b/src/components/reader/pager/VerticalPager.tsx
@@ -5,15 +5,27 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

+import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import { Box } from '@mui/system';
 import Page from '../Page';

+const useStyles = makeStyles({
+    reader: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        margin: '0 auto',
+        width: '100%',
+    },
+});
+
 export default function VerticalReader(props: IReaderProps) {
    const {
        pages, settings, setCurPage, curPage, nextChapter, prevChapter,
    } = props;

+    const classes = useStyles();
+
    const selfRef = useRef<HTMLDivElement>(null);
    const pagesRef = useRef<HTMLDivElement[]>([]);

@@ -93,16 +105,7 @@ export default function VerticalReader(props: IReaderProps) {
    }, [pagesRef.current.length]);

    return (
-        <Box
-            ref={selfRef}
-            sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                margin: '0 auto',
-                width: '100%',
-            }}
-        >
+        <div ref={selfRef} className={classes.reader}>
            {
                pages.map((page) => (
                    <Page
@@ -116,6 +119,6 @@ export default function VerticalReader(props: IReaderProps) {
                    />
                ))
            }
-        </Box>
+        </div>
    );
 }