From 812e4bf382f846a2faacea0e5e7fcfb15c319d73 Mon Sep 17 00:00:00 2001
From: NB <47492535+altmshfkgudtjr@users.noreply.github.com>
Date: Mon, 19 Apr 2021 00:26:39 +0900
Subject: [PATCH] Remove Styled-components code

---
 src/modules/epubViewer/EpubViewer.tsx   | 14 +++++++++++---
 src/modules/epubViewer/style.ts         | 15 ---------------
 src/modules/epubViewer/styles.ts        | 12 ++++++++++++
 src/modules/reactViewer/ReactViewer.tsx |  8 +++++++-
 src/types/index.d.ts                    |  2 +-
 5 files changed, 31 insertions(+), 20 deletions(-)
 delete mode 100644 src/modules/epubViewer/style.ts
 create mode 100644 src/modules/epubViewer/styles.ts

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<ViewerRef> | 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<Book | null>(null);
@@ -286,7 +294,7 @@ const EpubViewer = ({
   
   return (<>
     {!isLoaded && loadingView}
-    <EpubViewerWrapper ref={ref} style={style} />
+    <div ref={ref} style={viewerStyle} />
   </>);
 }
 
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;