import React , { useEffect , useState , useCallback , useMemo , useRef , RefObject } from "react" ; import "./Pagination.scss" ; param props { page } const Paginations = ( props ) => { const [ getDefaultPage , setDefaultPage ] = useState < number > ( 5 ) ; const [ getShowOnPage , setShowOnpage ] = useState < boolean > ( false ) ; const [ getNextPage , steNextpage ] = useState < boolean > ( true ) ; const [ getTargetPage , setTargetPage ] = useState < number > ( 1 ) ; useEffect ( ( ) => { if ( getDefaultPage > 5 ) { setShowOnpage ( true ) ; } else { setShowOnpage ( false ) ; } if ( props . page > 0 && getDefaultPage >= props . page - 4 ) { steNextpage ( false ) ; } else { steNextpage ( true ) ; } if ( getTargetPage === 5 ) { setTargetPage ( - 1 ) ; } ; if ( getTargetPage !== - 1 ) { if ( getTargetPage !== 5 ) { props . changePagination ( getTargetPage ) ; } } else if ( getTargetPage === - 1 ) { props . changePagination ( getDefaultPage ) ; } } , [ props . page , getDefaultPage , getTargetPage ] ) ; const paginationBtn = useRef ( null ) ; useEffect ( ( ) => { const paginationBtnRef = paginationBtn . current ! ; paginationBtnRef . addEventListener ( "click" , addEventListrenFn ) ; return ( ) => paginationBtnRef . removeEventListener ( 'click' , addEventListrenFn ) ; } , [ paginationBtn , getDefaultPage , props . page ] ) ; const addEventListrenFn = useCallback ( ( event ) => { const targetInput = event . target as HTMLInputElement ; if ( ( + targetInput . value <= props . page - 4 ) && ( + targetInput . value >= 5 ) ) { setTargetPage ( - 1 ) ; setDefaultPage ( + targetInput . value ) ; } else if ( ( + targetInput . value < 5 ) ) { setTargetPage ( + targetInput . value ) ; setDefaultPage ( 5 ) ; } else if ( + targetInput . value < props . page - 3 ) { setDefaultPage ( props . page ) ; setTargetPage ( + targetInput . value ) ; } else if ( + targetInput . value >= props . page - 3 ) { setTargetPage ( + targetInput . value ) ; setDefaultPage ( props . page - 4 ) ; } ; } , [ props . page , getDefaultPage , getTargetPage ] ) ; param index const onPageFn = useCallback ( ( index ) => { switch ( getTargetPage ) { case 1 : if ( index === 1 ) { setTargetPage ( 2 ) ; } break ; case 2 : case 3 : case 4 : case props . page - 2 : case props . page - 1 : setTargetPage ( getTargetPage + index ) ; break ; case props . page - 3 : if ( index === 1 ) { setTargetPage ( getTargetPage + index ) ; } else if ( index === - 1 ) { setTargetPage ( - 1 ) ; } break ; case 5 : setTargetPage ( - 1 ) ; break ; case props . page : if ( index === - 1 ) { setTargetPage ( getTargetPage + index ) ; } break ; default : if ( getDefaultPage === 5 && index === - 1 ) { setTargetPage ( 4 ) ; } else if ( getDefaultPage >= 5 && getDefaultPage + 1 < props . page - 3 ) { setDefaultPage ( getDefaultPage + index ) ; } else if ( getDefaultPage === props . page - 4 && index === 1 ) { setTargetPage ( props . page - 3 ) ; } else if ( getDefaultPage === props . page - 4 && index === - 1 ) { setTargetPage ( - 1 ) ; setDefaultPage ( getDefaultPage + index ) ; } break ; } } , [ getDefaultPage , props . page , getTargetPage ] ) ; const clickFirstOrEnd = useCallback ( ( index ) => { setTargetPage ( index ) ; switch ( index ) { case 1 : setDefaultPage ( 5 ) ; break ; case props . page : setDefaultPage ( props . page - 4 ) ; default : break ; } } , [ props . page ] ) ; useMemo ( ( ) => onPageFn , [ getDefaultPage ] ) ; const onPage = ( < div className = { [ "onPage" , getTargetPage === 1 ? "firstPage" : "" ] . join ( " " ) } onClick = { ( ) => onPageFn ( - 1 ) } > 上一页 < /div>); const nextPage = ( < div className = { [ "onPage" , getTargetPage === props . page ? "lastPage" : " " ] . join ( " " ) } onClick = { ( ) => onPageFn ( 1 ) } > 下一页 < /div>); return ( < div className = "pagination" > < div className = "pageWidgetBox" > { onPage } { } < input type = "text" className = { [ "paginationBox" , getTargetPage === 1 ? "active" : " " ] . join ( ' ' ) } value = "1" readOnly = { true } onClick = { ( ) => clickFirstOrEnd ( 1 ) } /> < div className = "numBox" ref = { paginationBtn } > < span className = "onHide" style = { { display : getShowOnPage ? "inline-block" : "none" } } > ... < /span> < input type = "text" className = { [ "paginationBox" , getTargetPage === 2 ? "active" : " " ] . join ( ' ' ) } value = { `${ getDefaultPage - 3 }` } readOnly = { true } / > < input type = "text" className = { [ "paginationBox" , getTargetPage === 3 ? "active" : " " ] . join ( ' ' ) } value = { `${ getDefaultPage - 2 }` } readOnly = { true } / > < input type = "text" className = { [ "paginationBox" , getTargetPage === 4 ? "active" : " " ] . join ( ' ' ) } value = { `${ getDefaultPage - 1 }` } readOnly = { true } / > < input type = "text" className = { [ "paginationBox" , getTargetPage > - 1 ? "" : "active" ] . join ( ' ' ) } value = { `${ getDefaultPage }` } readOnly = { true } / > < input type = "text" className = { [ "paginationBox" , getTargetPage === props . page - 3 ? "active" : "" ] . join ( ' ' ) } value = { `${ getDefaultPage + 1 }` } readOnly = { true } / > < input type = "text" className = { [ "paginationBox" , getTargetPage === props . page - 2 ? "active" : "" ] . join ( ' ' ) } value = { `${ getDefaultPage + 2 }` } readOnly = { true } / > < input type = "text" className = { [ "paginationBox" , getTargetPage === props . page - 1 ? "active" : "" ] . join ( ' ' ) } value = { `${ getDefaultPage + 3 }` } readOnly = { true } / > < span className = "nextHide" style = { { display : getNextPage ? "inline-block" : "none" } } > ... < /span> < /div> < input type = "text" className = { [ "paginationBox" , getTargetPage === props . page ? "active" : " " ] . join ( ' ' ) } value = { `${ props . page }` } readOnly = { true } onClick = { ( ) => clickFirstOrEnd ( props . page ) } /> { nextPage } < /div> < /div>); } ; export default Paginations ;