48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import React, {useState, useCallback, useEffect} from 'react'
|
|
import {Row, Col, Slider, InputNumber} from 'antd'
|
|
|
|
const JumpControls = (props: any)=>{
|
|
const {src, currIndex, setBookContextState} = props
|
|
const [inputValue, setInputValue] = useState(currIndex)
|
|
|
|
const onChange = useCallback(
|
|
(value) => {
|
|
if(value){
|
|
const newCurrIndex = value -1
|
|
if(newCurrIndex < src.length && newCurrIndex >=0){
|
|
setBookContextState({
|
|
currIndex: value - 1,
|
|
flagToReverse: value < inputValue
|
|
})
|
|
}
|
|
}
|
|
},
|
|
[inputValue])
|
|
|
|
useEffect(()=>{
|
|
setInputValue(currIndex + 1)
|
|
}, [currIndex])
|
|
|
|
return <Row>
|
|
<Col span={12}>
|
|
<Slider
|
|
min={1}
|
|
max={src.length}
|
|
onChange={onChange}
|
|
value={typeof inputValue === 'number' ? inputValue : 0}
|
|
/>
|
|
</Col>
|
|
<Col span={4}>
|
|
<InputNumber
|
|
min={1}
|
|
max={src.length}
|
|
style={{ margin: '0 8px' }}
|
|
value={inputValue}
|
|
onChange={onChange}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
}
|
|
|
|
export default JumpControls
|