import React , { useState , useRef , useEffect } from 'react' ; import { Divider , Input } from 'antd/es' ; import { LeftOutlined , RightOutlined } from '@ant-design/icons' ; import { AppState } from '@/store' ; import { connect , useDispatch } from 'react-redux' ; import { getTotalPage } from '@/store/annotation/reducer' ; import HiddenTips from './HiddenTips' ; import PageNumber from './PageNumber' ; import ZoomController from './ZoomController' ; import FooterTips from './FooterTips' ; import { prefix } from '@/constant' ; import { PageBackward , PageForward , PageJump } from '@/store/annotation/actionCreators' ; import { IStepInfo } from '@/types/step' ; import { useTranslation } from 'react-i18next' ; interface IPageProps { jumpSkip : Function ; imgIndex : number ; } export const PageInput = ( props ) => { const { jumpSkip , imgIndex } = props ; const [ newIndex , setIndex ] = useState ( imgIndex ) ; const inputEl = useRef ( null ) ; useEffect ( ( ) => { setIndex ( imgIndex + 1 ) ; } , [ imgIndex ] ) ; const newHandleJump = ( e ) => { const reg = /^\d*$/ ; if ( reg . test ( e . target . value ) ) { setIndex ( e . target . value ) ; } } ; const newJumpSkip = ( e ) => { if ( e . keyCode === 13 ) { jumpSkip ( e . target . value ) ; } } ; return ( < Input className = 'pageInput' ref = { inputEl } onChange = { newHandleJump } value = { newIndex } onKeyDown = { newJumpSkip } / > ) ; } ; interface IProps { totalPage : number ; imgIndex : number ; style ? : { [ key ] : any ; } ; stepList : IStepInfo [ ] ; step : number ; basicResultList : any [ ] ; basicIndex : number ; mode ? : 'light' | 'dark' ; } export const footerCls = `${ prefix }-footer` ; const FooterDivider = ( ) => ( < Divider type = 'vertical' style = { { background : 'rgba(153, 153, 153, 1)' , height : '16px' } } />); const ToolFooter = ( props ) => { const { stepList , step , basicResultList , basicIndex , mode } = props ; const dispatch = useDispatch ( ) ; const { t } = useTranslation ( ) ; const stepInfo = stepList [ step - 1 ] ?? { } ; const pageBackward = ( ) => { dispatch ( PageBackward ( ) ) ; } ; const pageForward = ( ) => { dispatch ( PageForward ( ) ) ; } ; const pageJump = ( page ) => { const imgIndex = ~ ~ page - 1 ; dispatch ( PageJump ( imgIndex ) ) ; } ; const hasSourceStep = ! ! stepInfo . dataSourceStep ; return ( < div className = { `${ footerCls }` } style = { props . style } > < FooterTips /> < div style = { { flex : 1 } } /> < HiddenTips / > < PageNumber /> { } < div className = { `${ footerCls }__pagination` } > < LeftOutlined className = { `${ footerCls }__highlight` } onClick = { pageBackward } / > < PageInput imgIndex = { props . imgIndex } jumpSkip = { pageJump } / > / < span className = { `${ footerCls }__pageAll` } > { props . totalPage } < /span> < RightOutlined className = { `${ footerCls }__highlight` } onClick = { pageForward } / > < /div> { hasSourceStep && basicResultList . length > 0 && ( < > < FooterDivider /> < span > { t ( 'curItems' , { current : basicIndex + 1 , total : basicResultList . length } ) } < /span> < />)} < FooterDivider / > < ZoomController mode = { mode } /> < /div>); } ; const mapStateToProps = ( state ) => ( { totalPage : getTotalPage ( state . annotation ) , imgIndex : state . annotation . imgIndex , stepList : state . annotation . stepList , step : state . annotation . step , basicIndex : state . annotation . basicIndex , basicResultList : state . annotation . basicResultList , } ) ; export default connect ( mapStateToProps ) ( ToolFooter ) ;