balmet.com

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

index.js (2682B)

      1 const { compose } = wp.compose;
      2 const { withDispatch, withSelect } = wp.data;
      3 const { useState } = wp.element
      4 import SitePreviewSidebar from './SitePreviewSidebar';
      5 import { ModalManager } from '../modal-manager'
      6 import ImportWizard from '../import-wizard';
      7 import './style.scss';
      8 import { Fragment } from 'react';
      9 import {processImportHelper} from '~redux-templates/stores/actionHelper';
     10 
     11 function PreviewTemplate(props) {
     12 
     13     const { startIndex, currentPageData } = props;
     14     const { setImportingTemplate, importingTemplate} = props;
     15     const [ currentIndex, setCurrentIndex ] = useState(startIndex);
     16     const [ previewClass, setPreviewClass ] = useState('preview-desktop')
     17     const [ expandedClass, toggleExpanded ] = useState('expanded')
     18 
     19 
     20     const onCloseCustomizer = () => {
     21         ModalManager.closeCustomizer();
     22     }
     23 
     24     const onNextBlock = () => {
     25         if (currentIndex < currentPageData.length) setCurrentIndex(currentIndex + 1);
     26     }
     27 
     28     const onPrevBlock = () => {
     29         if (currentIndex > 0) setCurrentIndex(currentIndex - 1);
     30     }
     31 
     32 
     33     const importStarterBlock = () => {
     34         setImportingTemplate(itemData);
     35     }
     36 
     37     const processImport = () => {
     38         if (importingTemplate) processImportHelper();
     39     }
     40 
     41 
     42     let wrapperClassName = ['wp-full-overlay sites-preview theme-install-overlay ', previewClass, expandedClass].join(' ');
     43     let itemData = currentPageData[currentIndex];
     44     return (
     45         <Fragment>
     46             <div className={wrapperClassName} style={{display: 'block'}}>
     47                 <SitePreviewSidebar itemData={itemData} previewClass={previewClass} expandedClass={expandedClass}
     48                     onNextBlock={onNextBlock} onPrevBlock={onPrevBlock}
     49                     onCloseCustomizer={onCloseCustomizer} onToggleExpanded={e => toggleExpanded(e)}
     50                     onImport={importStarterBlock}
     51                     onChangePreviewClass={e => setPreviewClass(e)} />
     52                 <div className='wp-full-overlay-main'>
     53                     <iframe src={itemData.url} target='Preview'></iframe>
     54                 </div>
     55             </div>
     56             { importingTemplate && <ImportWizard startImportTemplate={processImport} /> }
     57         </Fragment>
     58     );
     59 }
     60 
     61 export default compose([
     62     withDispatch((dispatch) => {
     63         const {
     64             setImportingTemplate
     65         } = dispatch('redux-templates/sectionslist');
     66 
     67         return {
     68             setImportingTemplate
     69         };
     70     }),
     71 
     72     withSelect((select, props) => {
     73         const { getImportingTemplate } = select('redux-templates/sectionslist');
     74         return {
     75             importingTemplate: getImportingTemplate()
     76         };
     77     })
     78 ])(PreviewTemplate);