119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
import React, {useState, useEffect, useCallback} from 'react'
|
|
import {Transition, animated} from 'react-spring/renderprops'
|
|
import BookComponentsController from './BookComponentsController'
|
|
import {ComponentContainer, PageComponent, PageContainer} from './OnePageView'
|
|
import { IBookContext } from './BookComponent'
|
|
|
|
export default function TwoPagesView(props: any) {
|
|
let {src, currIndex, changePage, flagToReverse} = props
|
|
const [pagesToshow, setPagesToShow] = useState<IBookContext[]>([])
|
|
const [prevDisable, setPrevDisable] = useState(true)
|
|
const [nextDisable, setNextDisable] = useState(false)
|
|
|
|
|
|
useEffect(()=>{
|
|
const shouldShowPage = (pageIndex: number)=>{
|
|
return src.length > 0 && pageIndex <= src.length - 1
|
|
}
|
|
|
|
const newCurrIndex = currIndex % 2 === 0 ? currIndex: currIndex - 1
|
|
|
|
const shouldShowFirstPage = shouldShowPage(newCurrIndex)
|
|
if(shouldShowFirstPage){
|
|
const shouldShowSecondPage = shouldShowPage(newCurrIndex + 1)
|
|
setPagesToShow([
|
|
src[newCurrIndex],
|
|
shouldShowSecondPage? src[newCurrIndex + 1]: {
|
|
src: '',
|
|
alt: '',
|
|
thumbnail: '',
|
|
}
|
|
])
|
|
}
|
|
|
|
setPrevDisable(newCurrIndex <= 1)
|
|
setNextDisable(newCurrIndex >= src.length - 2)
|
|
}, [currIndex, src])
|
|
|
|
const pageChangeClick = useCallback((indexToGo, flagToReverse)=>{
|
|
const newIndex = currIndex + indexToGo
|
|
const shouldChangePage = newIndex >= 0 && newIndex < src.length
|
|
if(shouldChangePage){
|
|
changePage(indexToGo, flagToReverse)
|
|
}
|
|
}, [src.length, currIndex, changePage])
|
|
|
|
return (
|
|
<ComponentContainer>
|
|
<PageContainer>
|
|
<Transition
|
|
reset
|
|
unique
|
|
items={pagesToshow}
|
|
keys={(item: any)=> item.src}
|
|
initial={{}}
|
|
from={{opacity: 1, transform: flagToReverse? "translate3d(-50%, 0, 0)": "translate3d(100%, 0, 0)"}}
|
|
enter={{ opacity: 1, transform: "translate3d(0%, 0, 0)" }}
|
|
leave={{ opacity: 0, transform: flagToReverse? "translate3d(100%, 0, 0)": "translate3d(-50%, 0, 0)"}}
|
|
>
|
|
{
|
|
currIndex=> style=>{
|
|
return(
|
|
<animated.div style={{
|
|
...style,
|
|
}}>
|
|
{React.createElement(()=>{
|
|
return <PageComponent width={"50%"} src={pagesToshow[0]? pagesToshow[0].src: null}/>
|
|
})}
|
|
</animated.div>
|
|
)
|
|
}
|
|
}
|
|
</Transition>
|
|
|
|
<Transition
|
|
reset
|
|
unique
|
|
items={pagesToshow}
|
|
keys={(item: any)=> item.src}
|
|
from={{opacity: 1, transform: flagToReverse? "translate3d(0%, 0, 0)": "translate3d(150%, 0, 0)"}}
|
|
enter={{ opacity: 1, transform: "translate3d(50%, 0, 0)" }}
|
|
leave={{ opacity: 0, transform: flagToReverse? "translate3d(150%, 0, 0)": "translate3d(0%, 0, 0)"}}
|
|
initial={{}}
|
|
>
|
|
{
|
|
currIndex=> style=>{
|
|
return(
|
|
<animated.div style={{
|
|
...style,
|
|
}}>
|
|
{React.createElement(()=>{
|
|
return <PageComponent width={"50%"} src={pagesToshow[1]? pagesToshow[1].src: null}/>
|
|
})}
|
|
</animated.div>
|
|
)
|
|
}
|
|
}
|
|
</Transition>
|
|
</PageContainer>
|
|
<BookComponentsController
|
|
prevDisable={prevDisable}
|
|
onPrevClick={()=> {
|
|
pageChangeClick(-2, true)
|
|
|
|
}}
|
|
nextDisable={nextDisable}
|
|
onNextClick={()=>{
|
|
pageChangeClick(2, false)
|
|
}}
|
|
{...props}
|
|
/>
|
|
</ComponentContainer>
|
|
)
|
|
}
|
|
|
|
interface Book {
|
|
name: string
|
|
}
|
|
|