update component controller
This commit is contained in:
parent
716ddba5ef
commit
b1b15ee45d
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user