99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import React, {createContext} from 'react'
|
|
import OnePageView from './OnePageView'
|
|
import TwoPagesView from './TwoPagesView'
|
|
|
|
export const BookContext = createContext({})
|
|
|
|
export interface IBookPage {
|
|
src: string
|
|
alt?: string
|
|
thumbnail?: string
|
|
}
|
|
|
|
export const bookViewModes = [
|
|
{
|
|
text: 'One Page',
|
|
value: 'one page',
|
|
icon: ''
|
|
},
|
|
{
|
|
text: 'Two Pages',
|
|
value: 'two pages',
|
|
icon: ''
|
|
}
|
|
]
|
|
|
|
export enum BookViewMode {
|
|
onePage = 'one page',
|
|
twoPages = 'two pages'
|
|
}
|
|
|
|
export interface IBookContext {
|
|
currIndex?: number,
|
|
src?: IBookPage[],
|
|
flagToReverse?: boolean,
|
|
mode?: BookViewMode,
|
|
readonly setBookContextState: (newState: any)=> undefined
|
|
}
|
|
|
|
|
|
class BookComponent extends React.Component<any, any>{
|
|
constructor(props: any){
|
|
super(props)
|
|
this.state = {
|
|
currIndex: 0,
|
|
src: [],
|
|
flagToReverse: false,
|
|
mode: "one page",
|
|
setBookContextState: (newState: IBookContext)=>{
|
|
this.setState((oldState: any)=> ({
|
|
...oldState,
|
|
...newState
|
|
}))
|
|
},
|
|
changePage: (indexToGo: number, goToPrevious: boolean)=>{
|
|
const newCurrIndex = this.state.currIndex + indexToGo
|
|
|
|
this.setState({
|
|
currIndex: newCurrIndex,
|
|
flagToReverse: goToPrevious
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
componentDidMount(){
|
|
fetch('https://picsum.photos/v2/list')
|
|
.then(response=>{
|
|
return response.json()
|
|
}).then(data=>{
|
|
data = data.map((item: any)=>{
|
|
return {
|
|
src: item.download_url,
|
|
alt: item.author
|
|
}
|
|
})
|
|
|
|
this.setState({
|
|
src: data
|
|
})
|
|
})
|
|
}
|
|
|
|
render(){
|
|
const {mode} = this.state
|
|
|
|
return <BookContext.Provider value={{...this.state}}>
|
|
<BookContext.Consumer>
|
|
{state=>(
|
|
<>
|
|
{mode === "one page" && <OnePageView {...state}/>}
|
|
{mode === "two pages" && <TwoPagesView {...state}/>}
|
|
</>
|
|
)}
|
|
</BookContext.Consumer>
|
|
</BookContext.Provider>
|
|
}
|
|
}
|
|
|
|
export default BookComponent |