index.js (3206B)
1 import {Tooltip} from '@wordpress/components'; 2 3 const {__} = wp.i18n 4 const {withSelect} = wp.data; 5 const {useState, useEffect} = wp.element; 6 7 import ButtonGroup from '../button-group'; 8 import SafeImageLoad from '~redux-templates/components/safe-image-load'; 9 import BackgroundImage from '../background-image'; 10 import {requiresInstall, requiresPro} from '~redux-templates/stores/dependencyHelper'; 11 12 import './style.scss' 13 14 15 function SingleItem (props) { 16 // Decoupling props 17 const {pageData, tourActiveButtonGroup, index} = props; 18 const [data, setData] = useState(null); 19 // const {ID, image, url, pro, source, requirements} = data; 20 const [innerClassname, setInnerClassname] = useState('redux-templates-single-item-inner redux-templates-item-wrapper '); 21 22 useEffect(() => { 23 if (pageData) setData(pageData[index]); 24 }, [index, pageData]); 25 26 useEffect(() => { 27 setInnerClassname((pageData && pageData[index] && tourActiveButtonGroup && tourActiveButtonGroup.ID === pageData[index].ID) ? 28 'redux-templates-single-item-inner redux-templates-item-wrapper focused' : 'redux-templates-single-item-inner redux-templates-item-wrapper'); 29 }, [tourActiveButtonGroup, pageData, index]); 30 31 if (!data) return null; 32 return ( 33 <div className="redux-templates-single-section-item"> 34 <div className={innerClassname}> 35 <div className="redux-templates-default-template-image"> 36 {data.source !== 'wp_block_patterns' && <SafeImageLoad url={data.image}/> } 37 {data.source === 'wp_block_patterns' && <BackgroundImage data={data} />} 38 {requiresPro(data) && <span className="redux-templates-pro-badge">{__('Premium', redux_templates.i18n)}</span>} 39 {!requiresPro(data) && requiresInstall(data) && <span className="redux-templates-missing-badge"><i className="fas fa-exclamation-triangle" /></span>} 40 <div className="redux-templates-tmpl-title">{data.name}</div> 41 </div> 42 {/* redux-templates-default-template-image */} 43 <div className="redux-templates-button-overlay"> 44 {requiresPro(data) && <Tooltip text={__('Premium Requirements', redux_templates.i18n)} position="bottom" key={data.source+data.source_id}><div className="redux-templates-pro-badge">{__('Premium', redux_templates.i18n)}</div></Tooltip>} 45 {!requiresPro(data) && requiresInstall(data) && <Tooltip text={__('Not Installed', redux_templates.i18n)} position="bottom" key={data.source+data.source_id}><div className="redux-templates-missing-badge"><i className="fas fa-exclamation-triangle" /></div></Tooltip>} 46 <ButtonGroup index={index} showDependencyBlock={true} data={data} pageData={pageData} /> 47 </div> 48 49 </div> 50 {/* redux-templates-item-wrapper */} 51 </div> 52 ) 53 } 54 55 56 export default withSelect((select, props) => { 57 const {getTourActiveButtonGroup, getPageData} = select('redux-templates/sectionslist'); 58 return { 59 pageData: getPageData(), 60 tourActiveButtonGroup: getTourActiveButtonGroup() 61 }; 62 })(SingleItem);