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",

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 (
         <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>            

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 <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