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",
|
"name": "image-viewer",
|
||||||
"version": "0.1.2",
|
"version": "0.1.3",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -81,7 +81,7 @@ class BookComponent extends React.Component<any, any>{
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount(){
|
componentDidMount(){
|
||||||
fetch('https://picsum.photos/v2/list')
|
fetch('https://picsum.photos/v2/list?limit=30')
|
||||||
.then(response=>{
|
.then(response=>{
|
||||||
return response.json()
|
return response.json()
|
||||||
}).then(data=>{
|
}).then(data=>{
|
||||||
|
@ -1,11 +1,39 @@
|
|||||||
import React, {useState, useEffect} from 'react'
|
import React, {useState, useEffect} from 'react'
|
||||||
import {Transition, animated} from 'react-spring/renderprops'
|
import {Transition, animated} from 'react-spring/renderprops'
|
||||||
import {ComponentContainer, PageComponent, PageContainer} from './OnePageView'
|
import {ComponentContainer, PageComponent} from './OnePageView'
|
||||||
import { IBookContext } from './BookComponent'
|
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) {
|
export default function TwoPagesView(props: any) {
|
||||||
let {src, currIndex, flagToReverse} = props
|
let {src, currIndex, flagToReverse} = props
|
||||||
const [pagesToshow, setPagesToShow] = useState<IBookContext[]>([])
|
const [pagesToshow, setPagesToShow] = useState<IBookPage[]>([
|
||||||
|
{
|
||||||
|
src: '',
|
||||||
|
alt: '',
|
||||||
|
thumbnail: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: '',
|
||||||
|
alt: '',
|
||||||
|
thumbnail: '',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
const shouldShowPage = (pageIndex: number)=>{
|
const shouldShowPage = (pageIndex: number)=>{
|
||||||
@ -28,27 +56,39 @@ export default function TwoPagesView(props: any) {
|
|||||||
}
|
}
|
||||||
}, [currIndex, src])
|
}, [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 (
|
return (
|
||||||
<ComponentContainer>
|
<ComponentContainer>
|
||||||
<PageContainer>
|
<PageContainer>
|
||||||
<Transition
|
<Transition
|
||||||
reset
|
reset
|
||||||
unique
|
unique
|
||||||
items={pagesToshow}
|
items={pagesToshow[0]}
|
||||||
keys={(item: any)=> item.src}
|
{...firstPageObj}
|
||||||
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)"}}
|
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
currIndex=> style=>{
|
image=> style=>{
|
||||||
return(
|
return(
|
||||||
<animated.div style={{
|
<animated.div style={{
|
||||||
...style,
|
...style,
|
||||||
}}>
|
}}>
|
||||||
{React.createElement(()=>{
|
{React.createElement(()=>{
|
||||||
return <PageComponent width={"50%"} src={pagesToshow[0]? pagesToshow[0].src: null}/>
|
return <PageComponent width={"50%"} src={image? image.src: null}/>
|
||||||
})}
|
})}
|
||||||
</animated.div>
|
</animated.div>
|
||||||
)
|
)
|
||||||
@ -59,21 +99,17 @@ export default function TwoPagesView(props: any) {
|
|||||||
<Transition
|
<Transition
|
||||||
reset
|
reset
|
||||||
unique
|
unique
|
||||||
items={pagesToshow}
|
items={pagesToshow[1]}
|
||||||
keys={(item: any)=> item.src}
|
{...secondPageObj}
|
||||||
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={{}}
|
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
currIndex=> style=>{
|
image=> style=>{
|
||||||
return(
|
return(
|
||||||
<animated.div style={{
|
<animated.div style={{
|
||||||
...style,
|
...style,
|
||||||
}}>
|
}}>
|
||||||
{React.createElement(()=>{
|
{React.createElement(()=>{
|
||||||
return <PageComponent width={"50%"} src={pagesToshow[1]? pagesToshow[1].src: null}/>
|
return <PageComponent width={"50%"} src={image? image.src: null}/>
|
||||||
})}
|
})}
|
||||||
</animated.div>
|
</animated.div>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user