87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import React, {createContext} from 'react'
|
|
import OnePageView from './OnePageView'
|
|
|
|
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>{
|
|
constructor(props: any){
|
|
super(props)
|
|
this.state = {
|
|
currIndex: 0,
|
|
src: [],
|
|
flagToReverse: false,
|
|
mode: "one page",
|
|
setBookContextState: (newState: IBookContext)=>{
|
|
this.setState(oldState=> ({
|
|
...oldState,
|
|
...newState
|
|
}))
|
|
}
|
|
}
|
|
}
|
|
|
|
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(){
|
|
return <BookContext.Provider value={{...this.state}}>
|
|
<BookContext.Consumer>
|
|
{state=>(
|
|
<>
|
|
<OnePageView {...state}/>
|
|
</>
|
|
)}
|
|
</BookContext.Consumer>
|
|
</BookContext.Provider>
|
|
}
|
|
}
|
|
|
|
export default BookComponent |