pov #2

Manually merged
vutpov merged 4 commits from pov into master 2020-05-11 10:18:26 +07:00
3 changed files with 45 additions and 27 deletions
Showing only changes of commit b1b15ee45d - Show all commits

View File

@ -1,6 +1,6 @@
{ {
"name": "image-viewer", "name": "image-viewer",
"version": "0.1.2", "version": "0.1.3",
"private": false, "private": false,
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",

View File

@ -1,45 +1,48 @@
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import {Button, Popover} from 'antd' import {Button} from 'antd'
import ViewSwitcher from './ViewSwitcher' import ViewSwitcher from './ViewSwitcher'
import JumpControls from './JumpControls' import JumpControls from './JumpControls'
import {
CaretLeftOutlined,
CaretRightOutlined,
} from '@ant-design/icons';
const ControlsContanter = styled.div` const ControlsContanter = styled.div`
display: inline-flex; display: inline-flex;
justify-content: space-between; justify-content: space-between;
width: 500px; width: 100%;
` `
export default function BookCoponentsController(props: any) { export default function BookCoponentsController(props: any) {
const {onPrevClick, prevDisable, onNextClick, nextDisable, ...restProps} = props const {onPrevClick, prevDisable, onNextClick, nextDisable, ...restProps} = props
return ( return (
<ControlsContanter> <ControlsContanter>
<JumpControls {...restProps}/>
<Button <Button
onClick={()=>{ onClick={()=>{
onPrevClick() onPrevClick()
}} }}
disabled={prevDisable} disabled={prevDisable}
> style={{
Previous marginRight: 8
</Button> }}
icon={<CaretLeftOutlined />}
/>
<Button <Button
onClick={()=>{ onClick={()=>{
onNextClick() onNextClick()
}} }}
disabled={nextDisable} disabled={nextDisable}
style={{
marginRight: 8
}}
icon={<CaretRightOutlined />}
> >
Next
</Button> </Button>
<Popover
trigger="click"
content={<JumpControls {...restProps}/>}>
<Button>
Jump
</Button>
</Popover>
<ViewSwitcher {...restProps}/> <ViewSwitcher {...restProps}/>
</ControlsContanter> </ControlsContanter>

View File

@ -1,13 +1,18 @@
import React, {useState, useCallback, useEffect} from 'react' import React, {useState, useCallback, useEffect} from 'react'
import {Row, Col, Slider, InputNumber} from 'antd' import {Slider, InputNumber} from 'antd'
import styled from 'styled-components'
const Container = styled.div`
width: 100%;
display: inline-flex;
`
const JumpControls = (props: any)=>{ const JumpControls = (props: any)=>{
const {src, currIndex, setBookContextState} = props const {src, currIndex, setBookContextState} = props
const [inputValue, setInputValue] = useState(currIndex) const [inputValue, setInputValue] = useState(currIndex)
const [sliderValue, setSliderValue] = useState(currIndex)
const onChange = useCallback( const onChange = useCallback(
(value) => { (value) => {
console.log(value, "hello")
if(value){ if(value){
const newCurrIndex = value -1 const newCurrIndex = value -1
if(newCurrIndex < src.length && newCurrIndex >=0){ if(newCurrIndex < src.length && newCurrIndex >=0){
@ -24,16 +29,27 @@ const JumpControls = (props: any)=>{
setInputValue(currIndex + 1) setInputValue(currIndex + 1)
}, [currIndex]) }, [currIndex])
return <Row> useEffect(() => {
<Col span={12}> setSliderValue(inputValue)
}, [inputValue])
const sliderRestProps = ()=>{
return sliderValue === inputValue? {}: {value: inputValue}
}
return <Container>
<Slider <Slider
style={{
flexGrow: 1
}}
min={1} min={1}
max={src.length} max={src.length}
onAfterChange={onChange} onAfterChange={onChange}
defaultValue={typeof inputValue === 'number' ? inputValue : 0} defaultValue={typeof inputValue === 'number' ? inputValue : 1}
{...sliderRestProps()}
/> />
</Col>
<Col span={4}>
<InputNumber <InputNumber
min={1} min={1}
max={src.length} max={src.length}
@ -41,8 +57,7 @@ const JumpControls = (props: any)=>{
value={inputValue} value={inputValue}
onChange={onChange} onChange={onChange}
/> />
</Col> </Container>
</Row>
} }
export default JumpControls export default JumpControls