move state logic up to book component
This commit is contained in:
parent
b1b15ee45d
commit
fb1bd05161
@ -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<any, any>{
|
||||
constructor(props: any){
|
||||
super(props)
|
||||
@ -51,16 +64,21 @@ class BookComponent extends React.Component<any, any>{
|
||||
...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<any, any>{
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
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<any, any>{
|
||||
<>
|
||||
{mode === "one page" && <OnePageView {...state}/>}
|
||||
{mode === "two pages" && <TwoPagesView {...state}/>}
|
||||
<BookComponentsController
|
||||
onPrevClick={()=>{
|
||||
this.changePage(true)
|
||||
}}
|
||||
onNextClick={()=>{
|
||||
this.changePage(false)
|
||||
}}
|
||||
{...this.getControlsDisable()}
|
||||
{...this.state}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</BookContext.Consumer>
|
||||
|
@ -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()}
|
||||
/>
|
||||
|
||||
<InputNumber
|
||||
className={"jump-control"}
|
||||
min={1}
|
||||
max={src.length}
|
||||
style={{ margin: '0 8px' }}
|
||||
|
@ -1,7 +1,6 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import React from 'react'
|
||||
import {Transition, animated} from 'react-spring/renderprops'
|
||||
import styled, { } from 'styled-components'
|
||||
import BookComponentsController from './BookComponentsController'
|
||||
|
||||
const ComponentContainer = styled.div`
|
||||
display: flex;
|
||||
@ -41,16 +40,7 @@ const PageComponent = (props: any)=>{
|
||||
|
||||
|
||||
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 (
|
||||
<ComponentContainer>
|
||||
<PageContainer>
|
||||
@ -76,15 +66,6 @@ function BookComponent(props: any) {
|
||||
}
|
||||
</Transition>
|
||||
</PageContainer>
|
||||
|
||||
<BookComponentsController
|
||||
prevDisable={prevDisable}
|
||||
onPrevClick={()=> changePage(-1, true)}
|
||||
nextDisable={nextDisable}
|
||||
onNextClick={()=>changePage(1, false)}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
</ComponentContainer>
|
||||
)
|
||||
}
|
||||
|
@ -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<IBookContext[]>([])
|
||||
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 (
|
||||
<ComponentContainer>
|
||||
<PageContainer>
|
||||
@ -96,18 +81,6 @@ export default function TwoPagesView(props: any) {
|
||||
}
|
||||
</Transition>
|
||||
</PageContainer>
|
||||
<BookComponentsController
|
||||
prevDisable={prevDisable}
|
||||
onPrevClick={()=> {
|
||||
pageChangeClick(-2, true)
|
||||
|
||||
}}
|
||||
nextDisable={nextDisable}
|
||||
onNextClick={()=>{
|
||||
pageChangeClick(2, false)
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</ComponentContainer>
|
||||
)
|
||||
}
|
||||
|
@ -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 (
|
||||
<Select value={mode} onSelect={viewModeChange}>
|
||||
{
|
||||
bookViewModes.map((item: any)=>{
|
||||
getBookViewModes().map((item: any)=>{
|
||||
return <Option value={item.value} key={item.value}>{item.text}</Option>
|
||||
})
|
||||
}
|
||||
|
3
src/components/index.css
Normal file
3
src/components/index.css
Normal file
@ -0,0 +1,3 @@
|
||||
.jump-control .ant-input-number-handler-wrap{
|
||||
display: none;
|
||||
}
|
Loading…
Reference in New Issue
Block a user