diff --git a/src/modules/epubViewer/EpubViewer.tsx b/src/modules/epubViewer/EpubViewer.tsx index 10286cf..83b9b83 100644 --- a/src/modules/epubViewer/EpubViewer.tsx +++ b/src/modules/epubViewer/EpubViewer.tsx @@ -1,7 +1,13 @@ -import React, { useState, useEffect, useCallback, useRef } from 'react' +import React, { + useState, + useEffect, + useCallback, + useRef, + CSSProperties +} from 'react' import { Book, Rendition } from "epubjs"; // style -import EpubViewerWrapper from 'modules/epubViewer/style' +import styles from 'modules/epubViewer/styles' // types import { EpubViewerProps, ViewerRef } from 'types' import Toc from 'types/toc' @@ -39,6 +45,8 @@ const EpubViewer = ({ loadingView, }: EpubViewerProps, ref: React.RefObject | any) => { // TODO Fix the ref type correctly instead 'any' type. + const viewerStyle: CSSProperties = style ? { ...styles, ...style} : styles; + const [isLoaded, setIsLoaded] = useState(false); const [book, setBook] = useState(null); @@ -286,7 +294,7 @@ const EpubViewer = ({ return (<> {!isLoaded && loadingView} - +
); } diff --git a/src/modules/epubViewer/style.ts b/src/modules/epubViewer/style.ts deleted file mode 100644 index 57780a0..0000000 --- a/src/modules/epubViewer/style.ts +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components' - -const EpubViewerWrapper = styled.div` - width: 100%; - box-sizing: border-box; - margin: 0 auto; - - & > div { - &::-webkit-scrollbar { - display: none; - } - } -`; - -export default EpubViewerWrapper \ No newline at end of file diff --git a/src/modules/epubViewer/styles.ts b/src/modules/epubViewer/styles.ts new file mode 100644 index 0000000..815fb0d --- /dev/null +++ b/src/modules/epubViewer/styles.ts @@ -0,0 +1,12 @@ +/** + * EpubViewer wrapper style + */ +const styles: { + boxSizing: any, + margin: any +} = { + boxSizing: "border-box", + margin: "0px auto" +} + +export default styles \ No newline at end of file diff --git a/src/modules/reactViewer/ReactViewer.tsx b/src/modules/reactViewer/ReactViewer.tsx index 3daac52..23f74a6 100644 --- a/src/modules/reactViewer/ReactViewer.tsx +++ b/src/modules/reactViewer/ReactViewer.tsx @@ -1,4 +1,10 @@ -import React, { useState, useEffect, useRef, useCallback, useMemo } from "react" +import React, { + useState, + useEffect, + useRef, + useCallback, + useMemo +} from "react" import { Book, Rendition, Contents } from "epubjs" // modules import EpubViewer from "modules/epubViewer/EpubViewer" diff --git a/src/types/index.d.ts b/src/types/index.d.ts index ac70d17..3013445 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -60,7 +60,7 @@ export interface EpubViewerProps { url: string; epubFileOptions?: BookOptions; epubOptions?: RenditionOptions; - style?: Object; + style?: React.CSSProperties; location?: string; bookChanged?(book: Book): void; rendtionChanged?(rendition: Rendition): void;