balmet.com

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

index.js (4795B)

      1 const { useState, useEffect } = wp.element;
      2 const { compose } = wp.compose;
      3 const { withDispatch, withSelect } = wp.data;
      4 const { Spinner } = wp.components;
      5 
      6 import SingleItem from '../../components/single-item'
      7 import MultipleItem from '../../components/multiple-item'
      8 import Pagination from '../../components/pagination'
      9 import './style.scss'
     10 
     11 import {columnMap, pageSizeMap} from '../../stores/helper';
     12 
     13 function TemplateList(props) {
     14     const { pageData, loading, activeItemType, activeCollection, columns, currentPage } = props;
     15     const { setActiveCollection} = props;
     16     const [columnizedData, setColumnizedData] = useState([]);
     17     const [shouldShowPagination, setShouldShowPagination] = useState(false);
     18     const getBackgroundImage = (url) => {
     19         if (!url) {
     20             return redux_templates.plugin + 'assets/img/redux-templates-medium.jpg';
     21         }
     22         return url;
     23     }
     24 
     25     const onSelectCollection = (collectionID) => {
     26         setActiveCollection(collectionID);
     27     }
     28 
     29     useEffect(() => {
     30         let newData = [], index = 0;
     31         let colStr = (columns === '') ? 'medium' : columns;
     32         const columnsCount = columnMap[colStr];
     33         const pageSize = pageSizeMap[colStr];
     34         for (let i = 0; i < columnsCount; i++)
     35             newData[i] = [];
     36         if (pageData) {
     37             const lowerLimit = activeItemType !== 'collection' ? (currentPage * pageSize) + 1 : 1;
     38             const upperLimit = activeItemType !== 'collection' ? (currentPage + 1) * pageSize : pageData.length;
     39             for ( index = lowerLimit; index <= upperLimit && index <= pageData.length; index++) {
     40                 newData[(index - 1) % columnsCount].push({...pageData[index - 1], index: index - 1});
     41             }
     42         }
     43         setColumnizedData(newData);
     44         setShouldShowPagination(activeItemType !== 'collection' && pageData && pageSize < pageData.length);
     45     }, [columns, pageData]);
     46 
     47 
     48     if (!loading)
     49         return (
     50             <div id="modalContainer" className="redux-templates-template-list-modal">
     51                 <div className="redux-templates-builder-template-list-container">
     52                     <div id="collections-sections-list" className={`redux-templates-builder-page-templates ${columns}`}>
     53                         { columnizedData &&
     54                             columnizedData.map((columnData, colIndex) => (
     55                                 <div className="redux-templates-pagelist-column" key={colIndex}>
     56                                     {
     57                                         columnData &&
     58                                         columnData.map((data, cellIndex) => (
     59                                             (activeItemType !== 'collection' || activeCollection !== null) ?
     60                                                 <SingleItem
     61                                                     key={cellIndex}
     62                                                     index={data.index}
     63                                                 />
     64                                                 :
     65                                                 <MultipleItem
     66                                                     key={cellIndex}
     67                                                     data={data}
     68                                                     index={data.index}
     69                                                     itemType={activeItemType}
     70                                                     spinner={false}
     71                                                     onSelectCollection={onSelectCollection}
     72                                                 />
     73                                         ))
     74                                     }
     75                                 </div>
     76                             ))
     77                         }
     78                     </div>
     79                     { shouldShowPagination && <Pagination /> }
     80                 </div>
     81             </div>
     82         );
     83     return (
     84         <div>
     85             <div style={{ height: '600px' }}>
     86                 <div className="redux-templates-modal-loader">
     87                     <Spinner />
     88                 </div>
     89             </div>
     90         </div>
     91     );
     92 }
     93 
     94 
     95 export default compose([
     96     withDispatch((dispatch) => {
     97         const {
     98             setActiveCollection
     99         } = dispatch('redux-templates/sectionslist');
    100 
    101         return {
    102             setActiveCollection
    103         };
    104     }),
    105 
    106     withSelect((select, props) => {
    107         const { getPageData, getLoading, getColumns, getActiveItemType, getActiveCollection, getCurrentPage} = select('redux-templates/sectionslist');
    108         return { pageData: getPageData(), loading: getLoading(), activeItemType: getActiveItemType(), columns: getColumns(), activeCollection: getActiveCollection(), currentPage: getCurrentPage() };
    109     })
    110 ])(TemplateList);