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

remove duplicate image in two page mode

This commit is contained in:
Vut Pov 2020-05-11 14:21:30 +07:00
parent fb1bd05161
commit e2f0f5c7e6
3 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "image-viewer",
"version": "0.1.2",
"version": "0.1.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
src/components/BookComponent.tsx
View File

@ -81,7 +81,7 @@ class BookComponent extends React.Component<any, any>{
}
componentDidMount(){
fetch('https://picsum.photos/v2/list')
fetch('https://picsum.photos/v2/list?limit=30')
.then(response=>{
return response.json()
}).then(data=>{

76
src/components/TwoPagesView.tsx
View File

@ -1,11 +1,39 @@
import React, {useState, useEffect} from 'react'
import {Transition, animated} from 'react-spring/renderprops'
import {ComponentContainer, PageComponent, PageContainer} from './OnePageView'
import { IBookContext } from './BookComponent'
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<IBookContext[]>([])
const [pagesToshow, setPagesToShow] = useState<IBookPage[]>([
{
src: '',
alt: '',
thumbnail: '',
},
{
src: '',
alt: '',
thumbnail: '',
}
])
useEffect(()=>{
const shouldShowPage = (pageIndex: number)=>{
@ -28,27 +56,39 @@ export default function TwoPagesView(props: any) {
}
}, [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}
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)"}}
items={pagesToshow[0]}
{...firstPageObj}
>
{
currIndex=> style=>{
image=> style=>{
return(
<animated.div style={{
...style,
}}>
{React.createElement(()=>{
return <PageComponent width={"50%"} src={pagesToshow[0]? pagesToshow[0].src: null}/>
{React.createElement(()=>{
return <PageComponent width={"50%"} src={image? image.src: null}/>
})}
</animated.div>
)
@ -59,21 +99,17 @@ export default function TwoPagesView(props: any) {
<Transition
reset
unique
items={pagesToshow}
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={{}}
items={pagesToshow[1]}
{...secondPageObj}
>
{
currIndex=> style=>{
image=> style=>{
return(
<animated.div style={{
...style,
}}>
{React.createElement(()=>{
return <PageComponent width={"50%"} src={pagesToshow[1]? pagesToshow[1].src: null}/>
return <PageComponent width={"50%"} src={image? image.src: null}/>
})}
</animated.div>
)