vutpov/images_viewer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

two view page jsx

Browse Source
This commit is contained in:
vuthpov 2020-05-11 20:42:34 +07:00
parent e2f0f5c7e6
commit 64614fdd7c
3 changed files with 122 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BookComponent.tsx
View File

@ -1,6 +1,6 @@
import React, { createContext } from 'react' import React, { createContext } from 'react'
import OnePageView from './OnePageView' import OnePageView from './OnePageView'
import TwoPagesView from './TwoPagesView' import TwoPagesView from './TwoPagesView.jsx'
import BookComponentsController from './BookComponentsController' import BookComponentsController from './BookComponentsController'
import './index.css' import './index.css'

91
src/components/TwoPagesView.jsx Normal file
View File

@ -0,0 +1,91 @@
import React, { useState, useEffect } from 'react';
import { useTransition, animated } from 'react-spring';
import {
ComponentContainer,
PageComponent,
PageContainer,
} from './OnePageView';
export default function TwoPagesView(props) {
let { src, currIndex, flagToReverse } = props;
const [pagesToshow, setPagesToShow] = useState([
{
src: '',
alt: '',
thumbnail: '',
},
{
src: '',
alt: '',
thumbnail: '',
},
]);
const transitionFirst = useTransition(pagesToshow[0], (item) => item.src, {
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)"},
});
const transitionSecond = useTransition(pagesToshow[1], (item) => 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)"},
});
useEffect(() => {
const shouldShowPage = (pageIndex) => {
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: '',
},
]);
}
}, [currIndex, src]);
return (
<ComponentContainer>
<PageContainer>
{transitionFirst.map(({ item, key, props }) => {
return (
item && (
<animated.div style={{ ...props }} key={key}>
<PageComponent width={'50%'} src={item.src} />
</animated.div>
)
);
})}
{transitionSecond.map(({ item, key, props }) => {
return (
item && (
<animated.div
style={{
...props,
transformOrigin: 'left center',
}}
key={key}
>
<PageComponent width={'50%'} src={item.src} />
</animated.div>
)
);
})}
</PageContainer>
</ComponentContainer>
);
}

127
src/components/TwoPagesView.tsx
View File

@ -1,127 +0,0 @@
import React, {useState, useEffect} from 'react'
import {Transition, animated} from 'react-spring/renderprops'
import {ComponentContainer, PageComponent} from './OnePageView'
import { IBookPage } from './BookComponent'
import styled from 'styled-components'
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%;
}
`
export default function TwoPagesView(props: any) {
let {src, currIndex, flagToReverse} = props
const [pagesToshow, setPagesToShow] = useState<IBookPage[]>([
{
src: '',
alt: '',
thumbnail: '',
},
{
src: '',
alt: '',
thumbnail: '',
}
])
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: '',
}
])
}
}, [currIndex, src])
const firstPageObj = {
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)"},
}
const secondPageObj = {
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: {},
}
return (
<ComponentContainer>
<PageContainer>
<Transition
reset
unique
items={pagesToshow[0]}
{...firstPageObj}
>
{
image=> style=>{
return(
<animated.div style={{
...style,
}}>
{React.createElement(()=>{
return <PageComponent width={"50%"} src={image? image.src: null}/>
})}
</animated.div>
)
}
}
</Transition>
<Transition
reset
unique
items={pagesToshow[1]}
{...secondPageObj}
>
{
image=> style=>{
return(
<animated.div style={{
...style,
}}>
{React.createElement(()=>{
return <PageComponent width={"50%"} src={image? image.src: null}/>
})}
</animated.div>
)
}
}
</Transition>
</PageContainer>
</ComponentContainer>
)
}
interface Book {
name: string
}