diff --git a/package.json b/package.json
index 419a926..b6faef4 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/BookComponentsController.tsx b/src/components/BookComponentsController.tsx
index b530efb..d00aac7 100644
--- a/src/components/BookComponentsController.tsx
+++ b/src/components/BookComponentsController.tsx
@@ -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 (
+
+
+ style={{
+ marginRight: 8
+ }}
+ icon={}
+ />
+
-
-
- }>
-
-
-
+
diff --git a/src/components/JumpControls.tsx b/src/components/JumpControls.tsx
index 7f0f7d7..dc553d8 100644
--- a/src/components/JumpControls.tsx
+++ b/src/components/JumpControls.tsx
@@ -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
-
+ useEffect(() => {
+ setSliderValue(inputValue)
+ }, [inputValue])
+
+
+ const sliderRestProps = ()=>{
+ return sliderValue === inputValue? {}: {value: inputValue}
+ }
+
+ return
-
-
+
{
value={inputValue}
onChange={onChange}
/>
-
-
+
}
export default JumpControls