Merge pull request #2 from altmshfkgudtjr/demo

Add ViewerRef type

package.json

@@ -91,5 +91,5 @@
       "last 1 safari version"
     ]
   },
-  "types": "dist/types/index.d.ts"
+  "types": "lib/types/index.d.ts"
 }

src/containers/Reader.tsx

@@ -24,6 +24,7 @@ import 'lib/styles/readerStyle.css'
 import viewerLayout from 'lib/styles/viewerLayout'
 // types
 import { RootState } from 'slices'
+import { ViewerRef } from 'types'
 import Book, { BookStyle, BookOption } from 'types/book'
 import Page from 'types/page'
 import Toc from 'types/toc'
@@ -34,8 +35,8 @@ const Reader = ({ url, loadingView }: Props) => {
   const book = useSelector<RootState, Book>(state => state.book.book);	
 	const currentLocation = useSelector<RootState, Page>(state => state.book.currentLocation);
   
-	const viewerRef = useRef<any>(null);
-  const navRef = useRef<HTMLDivElement | null>(null);
+	const viewerRef = useRef<ViewerRef | null>(null);
+	const navRef = useRef<HTMLDivElement | null>(null);
   const optionRef = useRef<HTMLDivElement | null>(null);
   const learningRef = useRef<HTMLDivElement | null>(null);
 

src/modules/epubViewer/EpubViewer.tsx

@@ -3,7 +3,7 @@ import { Book, Rendition } from "epubjs";
 // style
 import EpubViewerWrapper from 'modules/epubViewer/style'
 // types
-import { EpubViewerProps } from 'types'
+import { EpubViewerProps, ViewerRef } from 'types'
 import Toc from 'types/toc'
 import Loc from 'types/loc'
 
@@ -37,7 +37,8 @@ const EpubViewer = ({
   tocChanged,
   selectionChanged,
   loadingView,
-}: EpubViewerProps, ref: any) => {
+}: EpubViewerProps, ref: React.RefObject<ViewerRef> | any) => {
+  // TODO Fix the ref type correctly instead 'any' type.
   const [isLoaded, setIsLoaded] = useState(false);
 
   const [book, setBook] = useState<Book | null>(null);
@@ -229,11 +230,17 @@ const EpubViewer = ({
 
 
 
+  /** Ref checker */
+  useEffect(() => {
+    if (!ref) {
+      throw new Error("[React-Epub-Viewer] Put a ref argument that has a ViewerRef type.");
+    }
+  }, [ref]);
+
   /** Epub Init */
   /* eslint-disable */
   useEffect(() => {
     if (!url) return;
-
     initBook();
   }, [url]);
   /* eslint-enable */
@@ -277,7 +284,6 @@ const EpubViewer = ({
   }, [location, rendition]);
 
   
-  
   return (<>
     {!isLoaded && loadingView}
     <EpubViewerWrapper ref={ref} style={style} />

src/modules/reactViewer/ReactViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from "react"
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"
 import { Book, Rendition, Contents } from "epubjs"
 import { debounce } from "throttle-debounce"
 // modules
@@ -10,7 +10,7 @@ import { timeFormatter } from 'lib/utils/commonUtil'
 // styles
 import viewerDefaultStyles from 'modules/reactViewer/viewerStyle'
 // types
-import { ReactViewerProps } from 'types'
+import { ReactViewerProps, ViewerRef } from 'types'
 import BookType, { BookStyle, BookOption } from 'types/book'
 
 
@@ -39,7 +39,8 @@ const ReactViewer = ({
   onTocChange,
   onSelection,
   loadingView
-}: ReactViewerProps, ref: any) => {
+}: ReactViewerProps, ref: React.RefObject<ViewerRef> | any) => {
+  // TODO Fix the ref type correctly instead 'any' type.
   const [book, setBook] = useState<Book | null>(null);
 
   const [rendition, setRendition] = useState<Rendition | null>(null);
@@ -95,7 +96,7 @@ const ReactViewer = ({
    * Viewer resizing function
    * @method
    */
-  const onResize = useCallback(debounce(250, () => {
+  const onResize = useMemo(() => debounce(250, () => {
     if (!rendition) return;
 
     const viewerLayout_ = viewerLayout || {
@@ -149,6 +150,7 @@ const ReactViewer = ({
 		if (!iframeWin) return;
     
 		const selection_ = iframeWin.getSelection();
+    if (!selection_) return;
 		
 		const selectionText = selection_.toString();
 		if (selectionText === "") return;
@@ -166,6 +168,13 @@ const ReactViewer = ({
   
 
 
+  /** Ref checker */
+  useEffect(() => {
+    if (!ref) {
+      throw new Error("[React-Epub-Viewer] Put a ref argument that has a ViewerRef type.");
+    }
+  }, [ref]);
+
 	/** Epub parsing */
   // TODO Fix the infinite re-rendering issue, when inlcude `onBookInfoChange` to dependencies array.
   /* eslint-disable */

src/types/index.d.ts

@@ -7,6 +7,40 @@ import Page from 'types/page'
 import ViewerLayout from 'types/viewerLayout'
 
 
+/**
+ * DOM Element wrapping the Epub viewer
+ * - Provides special methods.
+ */
+export interface ViewerRef extends HTMLDivElement {
+  /** Move the viewer to the previous page */
+  prevPage: () => void;
+  /** Move the viewer to the next page */
+  nextPage: () => void;
+  /** Get CFI in current page */
+  getCurrentCfi: () => string;
+  /**
+   * Highlighting specific CFIRange
+   * @param cfiRange CFIRange
+   * @param callback Callback after click highlight
+   * @param color Highlight color
+   */
+  onHighlight: (
+    cfiRange: string, 
+    callback: (e: any) => void,
+    color?: string
+  ) => void;
+  /**
+   * Remove specific highlight
+   * @param cfiRange CFIRange
+   */
+  offHighlight: (cfiRange: string) => void;
+  /**
+   * Move the viewer to the cfi or href
+   * @param location CFI or Href
+   */
+  setLocation: (location: string) => void;
+}
+
 /** 
  * Epub Viewer Props
  * @type
@@ -36,7 +70,7 @@ export interface EpubViewerProps {
   loadingView?: React.ReactNode;
 }
 
-declare class EpubViewer extends React.Component<EpubViewerProps> {}
+declare class EpubViewer extends React.Component<EpubViewerProps, ViewerRef> {}
 
 
 /** 
@@ -64,6 +98,6 @@ export interface ReactViewerProps {
   loadingView?: React.ReactNode;
 }
 
-declare class ReactEpubViewer extends React.Component<ReactViewerProps> {}
+declare class ReactEpubViewer extends React.Component<ReactViewerProps, ViewerRef> {}
 
 export { EpubViewer, ReactEpubViewer };