Add ViewerRef type

main
NB 3 years ago
parent 6116d405af
commit d4e49c5f45
  1. 2
      package.json
  2. 5
      src/containers/Reader.tsx
  3. 14
      src/modules/epubViewer/EpubViewer.tsx
  4. 17
      src/modules/reactViewer/ReactViewer.tsx
  5. 38
      src/types/index.d.ts

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

@ -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);

@ -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} />

@ -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 */

@ -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 };
Loading…
Cancel
Save