balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

index.js (3687B)

      1 const { useState, useEffect, Fragment} = wp.element;
      2 const {compose} = wp.compose;
      3 const {withDispatch, withSelect} = wp.data;
      4 const {__} = wp.i18n
      5 
      6 import './style.scss';
      7 
      8 import {pageSizeMap} from '../../stores/helper';
      9 
     10 function Pagination(props) {
     11     const {currentPage, pageData, columns} = props;
     12     const {setCurrentPage} = props;
     13     const [totalPages, setTotalPages] = useState(1);
     14     const [firstButtonClass, setFirstButtonClass] = useState('tablenav-pages-navspan button');
     15     const [prevButtonClass, setPrevButtonClass] = useState('tablenav-pages-navspan button');
     16     const [nextButtonClass, setNextButtonClass] = useState('tablenav-pages-navspan button');
     17     const [lastButtonClass, setLastButtonClass] = useState('tablenav-pages-navspan button');
     18 
     19     useEffect(() => {
     20         const enabledClassname = 'tablenav-pages-navspan button ';
     21         const disabledClassname = 'tablenav-pages-navspan button disabled';
     22         setFirstButtonClass((currentPage === 0) ? disabledClassname : enabledClassname);
     23         setPrevButtonClass((currentPage === 0) ? disabledClassname : enabledClassname);
     24         setNextButtonClass((currentPage === totalPages - 1) ? disabledClassname : enabledClassname);
     25         setLastButtonClass((currentPage === totalPages - 1) ? disabledClassname : enabledClassname);
     26     }, [currentPage, totalPages]);
     27 
     28     useEffect(() => {
     29         let colStr = (columns === '') ? 'medium' : columns;
     30         setTotalPages(Math.ceil(pageData.length / pageSizeMap[colStr]));
     31     }, [pageData]);
     32 
     33     const gotoPage = (pageNum, className) => {
     34         if (className.indexOf('disabled') > 0) return;
     35         document.getElementById('modalContent').scrollTop = 0;
     36         setCurrentPage(pageNum);
     37     }
     38 
     39 
     40     return (
     41         <Fragment>
     42 
     43             {
     44                 totalPages > 0 &&
     45                 <div className="tablenav-pages">
     46                     <span className="displaying-num">{pageData.length} items</span>
     47                     <span className="pagination-links">
     48                         <span className={firstButtonClass} aria-hidden="true"
     49                             onClick={() => gotoPage(0, firstButtonClass)}>«</span>
     50                         <span className={prevButtonClass} aria-hidden="true"
     51                             onClick={() => gotoPage(currentPage - 1, prevButtonClass)}>‹</span>
     52                         <span className="screen-reader-text">{__('Current Page', redux_templates.i18n)}</span>
     53                         <span id="table-paging" className="paging-input">
     54                             <span className="tablenav-paging-text">{currentPage + 1} of <span
     55                                 className="total-pages">{totalPages}</span></span>
     56                         </span>
     57                         <span className={nextButtonClass} aria-hidden="true"
     58                             onClick={() => gotoPage(currentPage + 1, nextButtonClass)}>›</span>
     59                         <span className={lastButtonClass} aria-hidden="true"
     60                             onClick={() => gotoPage(totalPages - 1, lastButtonClass)}>»</span>
     61                     </span>
     62                 </div>
     63             }
     64         </Fragment>
     65     );
     66 }
     67 
     68 
     69 export default compose([
     70     withDispatch((dispatch) => {
     71         const {
     72             setCurrentPage
     73         } = dispatch('redux-templates/sectionslist');
     74 
     75         return {
     76             setCurrentPage
     77         };
     78     }),
     79 
     80     withSelect((select) => {
     81         const {getCurrentPage, getPageData, getColumns} = select('redux-templates/sectionslist');
     82         return {
     83             currentPage: getCurrentPage(),
     84             pageData: getPageData(),
     85             columns: getColumns()
     86         };
     87     })
     88 ])(Pagination);