From d4e49c5f4596a2ca0f9be90b256573daaa101d9c Mon Sep 17 00:00:00 2001 From: NB <47492535+altmshfkgudtjr@users.noreply.github.com> Date: Thu, 15 Apr 2021 16:26:15 +0900 Subject: [PATCH] Add ViewerRef type --- package.json | 2 +- src/containers/Reader.tsx | 5 ++-- src/modules/epubViewer/EpubViewer.tsx | 14 ++++++--- src/modules/reactViewer/ReactViewer.tsx | 17 ++++++++--- src/types/index.d.ts | 38 +++++++++++++++++++++++-- 5 files changed, 63 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 04de6a6..b63c3c8 100644 --- a/package.json +++ b/package.json @@ -91,5 +91,5 @@ "last 1 safari version" ] }, - "types": "dist/types/index.d.ts" + "types": "lib/types/index.d.ts" } diff --git a/src/containers/Reader.tsx b/src/containers/Reader.tsx index a7c6ae2..a0cf92a 100644 --- a/src/containers/Reader.tsx +++ b/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(state => state.book.book); const currentLocation = useSelector(state => state.book.currentLocation); - const viewerRef = useRef(null); - const navRef = useRef(null); + const viewerRef = useRef(null); + const navRef = useRef(null); const optionRef = useRef(null); const learningRef = useRef(null); diff --git a/src/modules/epubViewer/EpubViewer.tsx b/src/modules/epubViewer/EpubViewer.tsx index 9a23958..10286cf 100644 --- a/src/modules/epubViewer/EpubViewer.tsx +++ b/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 | any) => { + // TODO Fix the ref type correctly instead 'any' type. const [isLoaded, setIsLoaded] = useState(false); const [book, setBook] = useState(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 */ @@ -276,7 +283,6 @@ const EpubViewer = ({ rendition.display(location); }, [location, rendition]); - return (<> {!isLoaded && loadingView} diff --git a/src/modules/reactViewer/ReactViewer.tsx b/src/modules/reactViewer/ReactViewer.tsx index cf37881..bd175c8 100644 --- a/src/modules/reactViewer/ReactViewer.tsx +++ b/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 | any) => { + // TODO Fix the ref type correctly instead 'any' type. const [book, setBook] = useState(null); const [rendition, setRendition] = useState(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 */ diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 41d202e..ac70d17 100644 --- a/src/types/index.d.ts +++ b/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 {} +declare class EpubViewer extends React.Component {} /** @@ -64,6 +98,6 @@ export interface ReactViewerProps { loadingView?: React.ReactNode; } -declare class ReactEpubViewer extends React.Component {} +declare class ReactEpubViewer extends React.Component {} export { EpubViewer, ReactEpubViewer }; \ No newline at end of file