From fb1bd05161e588b243ee55deb0d86272eb4bd163 Mon Sep 17 00:00:00 2001 From: Vut Pov Date: Mon, 11 May 2020 10:17:26 +0700 Subject: [PATCH] move state logic up to book component --- src/components/BookComponent.tsx | 63 ++++++++++++++++++++++++++------ src/components/JumpControls.tsx | 7 +++- src/components/OnePageView.tsx | 23 +----------- src/components/TwoPagesView.tsx | 31 +--------------- src/components/ViewSwitcher.tsx | 7 ++-- src/components/index.css | 3 ++ 6 files changed, 69 insertions(+), 65 deletions(-) create mode 100644 src/components/index.css diff --git a/src/components/BookComponent.tsx b/src/components/BookComponent.tsx index 2f2fe35..1e84b3c 100644 --- a/src/components/BookComponent.tsx +++ b/src/components/BookComponent.tsx @@ -1,6 +1,8 @@ import React, {createContext} from 'react' import OnePageView from './OnePageView' import TwoPagesView from './TwoPagesView' +import BookComponentsController from './BookComponentsController' +import './index.css' export const BookContext = createContext({}) @@ -10,16 +12,22 @@ export interface IBookPage { thumbnail?: string } -export const bookViewModes = [ +export const getBookViewModes = (currIndex = 0, srcLength = 0)=>[ { text: 'One Page', value: 'one page', - icon: '' + icon: '', + pagesToTurn: 1, + nextDisable: currIndex >= srcLength - 1, + prevDisable: currIndex === 0, }, { text: 'Two Pages', value: 'two pages', - icon: '' + icon: '', + pagesToTurn: 2, + nextDisable: currIndex >= srcLength - 2, + prevDisable: currIndex <= 1, } ] @@ -37,6 +45,11 @@ export interface IBookContext { } +const getPagesCountToTurn = (mode: string)=>{ + let pagesToTurn = getBookViewModes().find(item=> item.value === mode)?.pagesToTurn + return pagesToTurn || 0 +} + class BookComponent extends React.Component{ constructor(props: any){ super(props) @@ -51,16 +64,21 @@ class BookComponent extends React.Component{ ...newState })) }, - changePage: (indexToGo: number, goToPrevious: boolean)=>{ - const newCurrIndex = this.state.currIndex + indexToGo - - this.setState({ - currIndex: newCurrIndex, - flagToReverse: goToPrevious - }) - } + changePage: this.changePage, + pagesToTurn: 1, } } + + changePage = (goToPrevious: boolean, indexToGo?: number)=>{ + const {mode, currIndex} = this.state + const pagesCountToTurn = indexToGo || getPagesCountToTurn(mode) + const prefixPageCount = goToPrevious? -1 : 1 + + this.setState({ + currIndex: (pagesCountToTurn * prefixPageCount) + currIndex, + flagToReverse: goToPrevious + }) + } componentDidMount(){ fetch('https://picsum.photos/v2/list') @@ -79,6 +97,19 @@ class BookComponent extends React.Component{ }) }) } + + getControlsDisable = ()=>{ + const {mode, currIndex, src} = this.state + const {nextDisable, prevDisable} = getBookViewModes(currIndex, src.length).find(item=> item.value === mode) || { + nextDisable: true, + prevDisable: true + } + + return { + nextDisable, + prevDisable + } + } render(){ const {mode} = this.state @@ -89,6 +120,16 @@ class BookComponent extends React.Component{ <> {mode === "one page" && } {mode === "two pages" && } + { + this.changePage(true) + }} + onNextClick={()=>{ + this.changePage(false) + }} + {...this.getControlsDisable()} + {...this.state} + /> )} diff --git a/src/components/JumpControls.tsx b/src/components/JumpControls.tsx index dc553d8..f7b9cfb 100644 --- a/src/components/JumpControls.tsx +++ b/src/components/JumpControls.tsx @@ -2,19 +2,22 @@ import React, {useState, useCallback, useEffect} from 'react' import {Slider, InputNumber} from 'antd' import styled from 'styled-components' + const Container = styled.div` width: 100%; display: inline-flex; ` const JumpControls = (props: any)=>{ - const {src, currIndex, setBookContextState} = props + const {src, currIndex, setBookContextState, pagesToTurn} = props const [inputValue, setInputValue] = useState(currIndex) const [sliderValue, setSliderValue] = useState(currIndex) const onChange = useCallback( (value) => { + if(value){ const newCurrIndex = value -1 + if(newCurrIndex < src.length && newCurrIndex >=0){ setBookContextState({ currIndex: value - 1, @@ -46,11 +49,13 @@ const JumpControls = (props: any)=>{ min={1} max={src.length} onAfterChange={onChange} + step={pagesToTurn} defaultValue={typeof inputValue === 'number' ? inputValue : 1} {...sliderRestProps()} /> { function BookComponent(props: any) { - const {src, currIndex, flagToReverse, changePage} = props - const [prevDisable, setPrevDisable] = useState(true) - const [nextDisable, setNextDisable] = useState(false) - - - useEffect(() => { - setNextDisable(currIndex >= src.length - 1) - setPrevDisable(currIndex <= 0) - }, [currIndex, src]) - + const {src, currIndex, flagToReverse} = props return ( @@ -76,15 +66,6 @@ function BookComponent(props: any) { } - - changePage(-1, true)} - nextDisable={nextDisable} - onNextClick={()=>changePage(1, false)} - {...props} - /> - ) } diff --git a/src/components/TwoPagesView.tsx b/src/components/TwoPagesView.tsx index 6b5cb1f..4c856cd 100644 --- a/src/components/TwoPagesView.tsx +++ b/src/components/TwoPagesView.tsx @@ -1,15 +1,11 @@ -import React, {useState, useEffect, useCallback} from 'react' +import React, {useState, useEffect} 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 + let {src, currIndex, flagToReverse} = props const [pagesToshow, setPagesToShow] = useState([]) - const [prevDisable, setPrevDisable] = useState(true) - const [nextDisable, setNextDisable] = useState(false) - useEffect(()=>{ const shouldShowPage = (pageIndex: number)=>{ @@ -30,19 +26,8 @@ export default function TwoPagesView(props: any) { } ]) } - - 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 ( @@ -96,18 +81,6 @@ export default function TwoPagesView(props: any) { } - { - pageChangeClick(-2, true) - - }} - nextDisable={nextDisable} - onNextClick={()=>{ - pageChangeClick(2, false) - }} - {...props} - /> ) } diff --git a/src/components/ViewSwitcher.tsx b/src/components/ViewSwitcher.tsx index 06a6867..91377e1 100644 --- a/src/components/ViewSwitcher.tsx +++ b/src/components/ViewSwitcher.tsx @@ -1,6 +1,6 @@ import React, {useCallback} from 'react' import {Select} from 'antd' -import {IBookContext, bookViewModes} from './BookComponent' +import {IBookContext, getBookViewModes} from './BookComponent' const {Option} = Select @@ -10,14 +10,15 @@ export default function ViewSwitcher(props: IBookContext) { const viewModeChange = useCallback((mode) => { setBookContextState({ - mode + mode, + pagesToTurn: getBookViewModes().find(item=> item.value === mode)?.pagesToTurn || 0 }) },[setBookContextState]) return (