remove duplicate image in two page mode
This commit is contained in:
parent
fb1bd05161
commit
e2f0f5c7e6
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "image-viewer",
|
||||
"version": "0.1.2",
|
||||
"version": "0.1.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
@ -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=>{
|
||||
|
@ -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>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user