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

Compare commits

base: vutpov:pov
Branches Tags
vutpov:master
vutpov:pov
..
compare: vutpov:master
Branches Tags
vutpov:pov
vutpov:master

2 Commits
pov ... master

Author SHA1 Message Date
vutpov
ef4f0c8bf8 Merge pull request 'pov' (#2) from pov into master 2020-05-11 10:18:25 +07:00
vutpov
0204a379f7 Merge pull request 'add view switcher' (#1) from pov into master 2020-05-08 17:02:50 +07:00
4 changed files with 124 additions and 124 deletions
Show Stats Expand all files Collapse all files

2
package-lock.json generated
View File

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

64
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 TwoPagesView from './TwoPagesView.jsx'
import TwoPagesView from './TwoPagesView'
import BookComponentsController from './BookComponentsController'
import './index.css'
@ -12,7 +12,7 @@ export interface IBookPage {
thumbnail?: string
}
export const getBookViewModes = (currIndex = 0, srcLength = 0) => [
export const getBookViewModes = (currIndex = 0, srcLength = 0)=>[
{
text: 'One Page',
value: 'one page',
@ -41,51 +41,51 @@ export interface IBookContext {
src?: IBookPage[],
flagToReverse?: boolean,
mode?: BookViewMode,
readonly setBookContextState: (newState: any) => undefined
readonly setBookContextState: (newState: any)=> undefined
}
const getPagesCountToTurn = (mode: string) => {
let pagesToTurn = getBookViewModes().find(item => item.value === mode)?.pagesToTurn
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) {
constructor(props: any){
super(props)
this.state = {
currIndex: 0,
src: [],
flagToReverse: false,
mode: "one page",
setBookContextState: (newState: IBookContext) => {
this.setState((oldState: any) => ({
setBookContextState: (newState: IBookContext)=>{
this.setState((oldState: any)=> ({
...oldState,
...newState
}))
},
changePage: this.changePage,
pagesToTurn: 1,
}
}
}
changePage = (goToPrevious: boolean, indexToGo?: number) => {
const { mode, currIndex } = this.state
changePage = (goToPrevious: boolean, indexToGo?: number)=>{
const {mode, currIndex} = this.state
const pagesCountToTurn = indexToGo || getPagesCountToTurn(mode)
const prefixPageCount = goToPrevious ? -1 : 1
const prefixPageCount = goToPrevious? -1 : 1
this.setState({
currIndex: (pagesCountToTurn * prefixPageCount) + currIndex,
flagToReverse: goToPrevious
})
}
componentDidMount() {
fetch('https://picsum.photos/v2/list?limit=30')
.then(response => {
componentDidMount(){
fetch('https://picsum.photos/v2/list')
.then(response=>{
return response.json()
}).then(data => {
data = data.map((item: any) => {
}).then(data=>{
data = data.map((item: any)=>{
return {
src: item.download_url,
alt: item.author
@ -98,9 +98,9 @@ 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) || {
getControlsDisable = ()=>{
const {mode, currIndex, src} = this.state
const {nextDisable, prevDisable} = getBookViewModes(currIndex, src.length).find(item=> item.value === mode) || {
nextDisable: true,
prevDisable: true
}
@ -110,21 +110,21 @@ class BookComponent extends React.Component<any, any>{
prevDisable
}
}
render(){
const {mode} = this.state
render() {
const { mode } = this.state
return <BookContext.Provider value={{ ...this.state }}>
return <BookContext.Provider value={{...this.state}}>
<BookContext.Consumer>
{state => (
{state=>(
<>
{mode === "one page" && <OnePageView {...state} />}
{mode === "two pages" && <TwoPagesView {...state} />}
{mode === "one page" && <OnePageView {...state}/>}
{mode === "two pages" && <TwoPagesView {...state}/>}
<BookComponentsController
onPrevClick={() => {
onPrevClick={()=>{
this.changePage(true)
}}
onNextClick={() => {
onNextClick={()=>{
this.changePage(false)
}}
{...this.getControlsDisable()}

91
src/components/TwoPagesView.jsx
View File

@ -1,91 +0,0 @@
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>
);
}

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

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