From e4a862d142891596c4d5fced73670fa075f60686 Mon Sep 17 00:00:00 2001 From: Vut Pov Date: Sat, 9 May 2020 11:45:34 +0700 Subject: [PATCH] add two pages view --- src/components/BookComponent.tsx | 18 ++++- src/components/JumpControls.tsx | 2 +- src/components/OnePageView.tsx | 27 +++---- src/components/TwoPagesView.tsx | 118 +++++++++++++++++++++++++++++++ src/components/ViewSwitcher.tsx | 4 +- 5 files changed, 144 insertions(+), 25 deletions(-) create mode 100644 src/components/TwoPagesView.tsx diff --git a/src/components/BookComponent.tsx b/src/components/BookComponent.tsx index 7240c07..2f2fe35 100644 --- a/src/components/BookComponent.tsx +++ b/src/components/BookComponent.tsx @@ -1,5 +1,6 @@ import React, {createContext} from 'react' import OnePageView from './OnePageView' +import TwoPagesView from './TwoPagesView' export const BookContext = createContext({}) @@ -36,7 +37,7 @@ export interface IBookContext { } -class BookComponent extends React.Component{ +class BookComponent extends React.Component{ constructor(props: any){ super(props) this.state = { @@ -45,10 +46,18 @@ class BookComponent extends React.Component{ flagToReverse: false, mode: "one page", setBookContextState: (newState: IBookContext)=>{ - this.setState(oldState=> ({ + this.setState((oldState: any)=> ({ ...oldState, ...newState })) + }, + changePage: (indexToGo: number, goToPrevious: boolean)=>{ + const newCurrIndex = this.state.currIndex + indexToGo + + this.setState({ + currIndex: newCurrIndex, + flagToReverse: goToPrevious + }) } } } @@ -72,11 +81,14 @@ class BookComponent extends React.Component{ } render(){ + const {mode} = this.state + return {state=>( <> - + {mode === "one page" && } + {mode === "two pages" && } )} diff --git a/src/components/JumpControls.tsx b/src/components/JumpControls.tsx index 94fb235..e30e76c 100644 --- a/src/components/JumpControls.tsx +++ b/src/components/JumpControls.tsx @@ -17,7 +17,7 @@ const JumpControls = (props: any)=>{ } } }, - [inputValue]) + [inputValue, src.length, setBookContextState]) useEffect(()=>{ setInputValue(currIndex + 1) diff --git a/src/components/OnePageView.tsx b/src/components/OnePageView.tsx index 85768d7..808a0bd 100644 --- a/src/components/OnePageView.tsx +++ b/src/components/OnePageView.tsx @@ -1,4 +1,4 @@ -import React, {useState, useCallback, useEffect} from 'react' +import React, {useState, useEffect} from 'react' import {Transition, animated} from 'react-spring/renderprops' import styled, { } from 'styled-components' import BookComponentsController from './BookComponentsController' @@ -24,10 +24,9 @@ const PageContainer = styled.div` height: 100%; } ` - -const StyledImage = styled(animated.div)<{src:string}>` - width: 100%; - height: 100%; +const StyledImage = styled(animated.div)<{src:string, width:number | string, height: number| string}>` + width: ${props=> props.width? props.width: '100%'}; + height: ${props=> props.height? props.height: '100%'}; display: flex; justify-content: center; align-items: center; @@ -36,24 +35,16 @@ const StyledImage = styled(animated.div)<{src:string}>` ` const PageComponent = (props: any)=>{ - const {src} = props - return + const {src, width, height} = props + return } function BookComponent(props: any) { - const {src, currIndex, setBookContextState, flagToReverse} = props + const {src, currIndex, flagToReverse, changePage} = 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) @@ -77,8 +68,6 @@ function BookComponent(props: any) { return( {React.createElement(()=>)} @@ -100,4 +89,4 @@ function BookComponent(props: any) { ) } -export default BookComponent \ No newline at end of file +export {ComponentContainer, PageContainer, PageComponent, BookComponent as default } \ No newline at end of file diff --git a/src/components/TwoPagesView.tsx b/src/components/TwoPagesView.tsx new file mode 100644 index 0000000..6b5cb1f --- /dev/null +++ b/src/components/TwoPagesView.tsx @@ -0,0 +1,118 @@ +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([]) + 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 ( + + + 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( + + {React.createElement(()=>{ + return + })} + + ) + } + } + + + 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( + + {React.createElement(()=>{ + return + })} + + ) + } + } + + + { + pageChangeClick(-2, true) + + }} + nextDisable={nextDisable} + onNextClick={()=>{ + pageChangeClick(2, false) + }} + {...props} + /> + + ) +} + +interface Book { + name: string +} + diff --git a/src/components/ViewSwitcher.tsx b/src/components/ViewSwitcher.tsx index 5183a29..06a6867 100644 --- a/src/components/ViewSwitcher.tsx +++ b/src/components/ViewSwitcher.tsx @@ -12,13 +12,13 @@ export default function ViewSwitcher(props: IBookContext) { setBookContextState({ mode }) - },[]) + },[setBookContextState]) return (