103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import React, {useState, useCallback, useEffect} from 'react'
|
|
import {Transition, animated} from 'react-spring/renderprops'
|
|
import styled, { } from 'styled-components'
|
|
import BookComponentsController from './BookComponentsController'
|
|
|
|
const ComponentContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflowY: hidden;
|
|
align-items: center;
|
|
`
|
|
|
|
const PageContainer = styled.div`
|
|
height: 600px;
|
|
position: relative;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
margin-bottom: 8px;
|
|
overflow-x: hidden;
|
|
& > div {
|
|
will-change: transform, opacity;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
`
|
|
|
|
const StyledImage = styled(animated.div)<{src:string}>`
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: ${props=> `url('${props.src}')`} no-repeat center;
|
|
background-size: contain;
|
|
`
|
|
|
|
const PageComponent = (props: any)=>{
|
|
const {src} = props
|
|
return <StyledImage src={src}/>
|
|
}
|
|
|
|
|
|
function BookComponent(props: any) {
|
|
const {src, currIndex, setBookContextState, flagToReverse} = props
|
|
const [prevDisable, setPrevDisable] = useState(true)
|
|
const [nextDisable, setNextDisable] = useState(false)
|
|
|
|
const changePage = useCallback((indexToGo, goToPrevious)=>{
|
|
const newCurrIndex = currIndex + indexToGo
|
|
setBookContextState({
|
|
currIndex: newCurrIndex,
|
|
flagToReverse: goToPrevious
|
|
})
|
|
|
|
}, [currIndex])
|
|
|
|
useEffect(() => {
|
|
setNextDisable(currIndex >= src.length - 1)
|
|
setPrevDisable(currIndex <= 0)
|
|
}, [currIndex, src])
|
|
|
|
return (
|
|
<ComponentContainer>
|
|
<PageContainer>
|
|
<Transition
|
|
reset
|
|
unique
|
|
items={currIndex}
|
|
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)"}}
|
|
initial={{}}
|
|
>
|
|
{
|
|
currIndex=> style=>{
|
|
return(
|
|
<animated.div style={{
|
|
...style,
|
|
overflowX: 'hidden'
|
|
|
|
}}>
|
|
{React.createElement(()=><PageComponent src={src[currIndex]? src[currIndex].src: null}/>)}
|
|
</animated.div>
|
|
)
|
|
}
|
|
}
|
|
</Transition>
|
|
</PageContainer>
|
|
|
|
<BookComponentsController
|
|
prevDisable={prevDisable}
|
|
onPrevClick={()=> changePage(-1, true)}
|
|
nextDisable={nextDisable}
|
|
onNextClick={()=>changePage(1, false)}
|
|
{...props}
|
|
/>
|
|
|
|
</ComponentContainer>
|
|
)
|
|
}
|
|
|
|
export default BookComponent |