update component controller

This commit is contained in:
Vut Pov 2020-05-09 12:32:54 +07:00
parent 716ddba5ef
commit b1b15ee45d
3 changed files with 45 additions and 27 deletions

View File

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

View File

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

View File

@ -1,13 +1,18 @@
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 {src, currIndex, setBookContextState} = props
const [inputValue, setInputValue] = useState(currIndex)
const [sliderValue, setSliderValue] = useState(currIndex)
const onChange = useCallback(
(value) => {
console.log(value, "hello")
if(value){
const newCurrIndex = value -1
if(newCurrIndex < src.length && newCurrIndex >=0){
@ -24,16 +29,27 @@ const JumpControls = (props: any)=>{
setInputValue(currIndex + 1)
}, [currIndex])
return <Row>
<Col span={12}>
useEffect(() => {
setSliderValue(inputValue)
}, [inputValue])
const sliderRestProps = ()=>{
return sliderValue === inputValue? {}: {value: inputValue}
}
return <Container>
<Slider
style={{
flexGrow: 1
}}
min={1}
max={src.length}
onAfterChange={onChange}
defaultValue={typeof inputValue === 'number' ? inputValue : 0}
defaultValue={typeof inputValue === 'number' ? inputValue : 1}
{...sliderRestProps()}
/>
</Col>
<Col span={4}>
<InputNumber
min={1}
max={src.length}
@ -41,8 +57,7 @@ const JumpControls = (props: any)=>{
value={inputValue}
onChange={onChange}
/>
</Col>
</Row>
</Container>
}
export default JumpControls