index.js (5144B)
1 const {useState, useEffect} = 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 ButtonGroup from '~redux-templates/components/button-group'; 9 import {requiresInstall, requiresPro} from '~redux-templates/stores/dependencyHelper' 10 11 const DURATION_UNIT= 500; 12 const PREVIEW_PANEL_HEIGHT = 515; 13 14 // Collection Detail view: preview, item list and import 15 function CollectionView(props) { 16 const {pageData, activeCollectionData} = props; 17 const {setActiveCollection} = props; 18 const [previewData, setPreviewData] = useState(null); 19 const [previewDataIndex, setPreviewDataIndex] = useState(0); 20 const [transitionDuration, setTransitionDuration] = useState('1.5s'); 21 22 const dataLength = pageData.length; 23 24 // To be called when switching over 25 useEffect(() => { 26 if (pageData && pageData[previewDataIndex]) { 27 const itemData = pageData[previewDataIndex]; 28 const backgroundImage = new Image(); 29 if (itemData.image_full) { 30 setPreviewData({...itemData, backgroundImage: itemData.image_full, previewImageClassname: 'details-preview has_full'}); 31 backgroundImage.src = itemData.image_full; 32 } else { 33 setPreviewData({...itemData, backgroundImage: itemData.image, previewImageClassname: 'details-preview has_full'}) 34 backgroundImage.src = itemData.image; 35 } 36 backgroundImage.onload = function () { 37 setTransitionDuration((backgroundImage.height - PREVIEW_PANEL_HEIGHT) / DURATION_UNIT + 's'); 38 }; 39 } 40 }, [pageData, previewDataIndex]); 41 42 if (previewData) 43 return ( 44 <div className="redux-templates-collection-details-view"> 45 <div className="redux-templates-collection-details-left"> 46 <div className="details-back" onClick={() => setActiveCollection(null)}> 47 <span className="dashicons dashicons-arrow-left-alt"/> {__('Back to Template Kits', redux_templates.i18n)} 48 </div> 49 <div className={previewData.previewImageClassname} 50 style={{backgroundImage: `url('${previewData.backgroundImage}')`, transitionDuration}}> 51 </div> 52 </div> 53 <div className="redux-templates-collection-details-right"> 54 <div className="details-title"> 55 <h3>{activeCollectionData.name}</h3> 56 <span>{dataLength} {__('pages', redux_templates.i18n)}</span> 57 </div> 58 <div className="details-list"> 59 <div className="details-inner"> 60 { 61 pageData.map((detail, index) => { 62 let className = (previewData.ID === detail.ID) ? 'detail-select detail-select-active' : 'detail-select'; 63 let divStyle = { 64 backgroundImage: 'url(' + detail.image + ')', 65 }; 66 67 return ( 68 <div className={className} onClick={() => setPreviewDataIndex(index)} key={index}> 69 <div className="detail-image" style={divStyle}> 70 {requiresPro(detail) && <span className="pro">{__('Premium', redux_templates.i18n)}</span>} 71 {!requiresPro(detail) && requiresInstall(detail) && <span className="install"><i className="fas fa-exclamation-triangle" /></span>} 72 <div className="detail-label">{detail.name}</div> 73 </div> 74 </div> 75 ); 76 }) 77 } 78 </div> 79 </div> 80 </div> 81 <div className="redux-templates-collection-details-footer"> 82 <div className="footer-grid"> 83 <ButtonGroup index={previewDataIndex} showDependencyBlock={false} data={previewData} pageData={pageData} /> 84 </div> 85 </div> 86 </div> 87 ); 88 return null; 89 } 90 91 92 export default compose([ 93 withDispatch((dispatch) => { 94 const { 95 setActiveCollection 96 } = dispatch('redux-templates/sectionslist'); 97 98 return { 99 setActiveCollection 100 }; 101 }), 102 103 withSelect((select, props) => { 104 const {getPageData, getLoading, getActiveCollectionData, getActiveItemType} = select('redux-templates/sectionslist'); 105 return { 106 pageData: getPageData(), 107 loading: getLoading(), 108 activeItemType: getActiveItemType(), 109 activeCollectionData: getActiveCollectionData() 110 }; 111 }) 112 ])(CollectionView);