| 1 |
import React, { useState, useEffect } from 'react' |
| 2 |
const { __ } = wp.i18n; |
| 3 |
import Masonry from 'react-masonry-component'; |
| 4 |
import icons from '../../../src/assets/icons'; |
| 5 |
import Copycontent from "./copy-content" |
| 6 |
import CreateBlockButton from './create-block-button'; |
| 7 |
import PremiumText from "./premium-text" |
| 8 |
const Headers = ({ data }) => { |
| 9 |
const [isLoading, setISLoading] = useState(false) |
| 10 |
const [visibleItems, setVisibleItems] = useState(10) |
| 11 |
const [headers, setHeaders] = useState([]); |
| 12 |
useEffect(() => { |
| 13 |
if (data) { |
| 14 |
const headers = Object.values(data) |
| 15 |
.filter(item => item.type === 'header') |
| 16 |
.sort((a, b) => { |
| 17 |
if (a.name < b.name) { |
| 18 |
return -1; |
| 19 |
} |
| 20 |
if (a.name > b.name) { |
| 21 |
return 1; |
| 22 |
} |
| 23 |
return 0; |
| 24 |
}); |
| 25 |
setISLoading(true) |
| 26 |
setHeaders(headers) |
| 27 |
|
| 28 |
} |
| 29 |
}, [data]); |
| 30 |
|
| 31 |
const masonryOptions = { |
| 32 |
transitionDuration: 0, |
| 33 |
percentPosition: true, |
| 34 |
}; |
| 35 |
|
| 36 |
useEffect(() => { |
| 37 |
const handleScroll = () => { |
| 38 |
const container = document.getElementById('bs-blockpages'); |
| 39 |
const scrollY = container.scrollTop; |
| 40 |
const containerHeight = container.clientHeight; |
| 41 |
const contentHeight = container.scrollHeight; |
| 42 |
|
| 43 |
if (scrollY + containerHeight >= contentHeight - 200) { |
| 44 |
// Adjust the value (200) as needed to trigger the load more function earlier or later |
| 45 |
loadVisibleItems(); |
| 46 |
} |
| 47 |
}; |
| 48 |
|
| 49 |
const container = document.getElementById('bs-blockpages'); |
| 50 |
container.addEventListener('scroll', handleScroll); |
| 51 |
|
| 52 |
return () => { |
| 53 |
container.removeEventListener('scroll', handleScroll); |
| 54 |
}; |
| 55 |
}, [visibleItems]); |
| 56 |
|
| 57 |
|
| 58 |
const loadVisibleItems = () => { |
| 59 |
const itemsPerPage = 10; |
| 60 |
setVisibleItems(prevVisibleItems => prevVisibleItems + itemsPerPage); |
| 61 |
}; |
| 62 |
|
| 63 |
return ( |
| 64 |
|
| 65 |
<div className='bs-layouts-wrappper' id="bs-blockpages"> |
| 66 |
{isLoading ? <Masonry |
| 67 |
elementType={'div'} |
| 68 |
className={`bs-layout-choices`} |
| 69 |
options={masonryOptions} |
| 70 |
disableImagesLoaded={false} |
| 71 |
updateOnEachImageLoad={false} |
| 72 |
> |
| 73 |
{headers && |
| 74 |
headers.slice(0, visibleItems).map((item, i) => { |
| 75 |
const nameInLowerCase = item.name.toLowerCase(); |
| 76 |
const imageName = nameInLowerCase.replace(/\s+/g, '-'); |
| 77 |
const folderName = item.imagePath |
| 78 |
return ( |
| 79 |
|
| 80 |
<div className='bs-layout-design'> |
| 81 |
<div className="bs-layout-design-inside"> |
| 82 |
<div className='bs-layout-design-item'> |
| 83 |
<a href={item.content === 'https://www.blockspare.com/' ? 'javascript:void(0);' : item.blockLink} target={item.content === 'https://www.blockspare.com/' ? '_self' : '_blank'} className="bs-layout-insert-button" > |
| 84 |
{ |
| 85 |
item.content === 'https://www.blockspare.com/' ? ( |
| 86 |
<PremiumText link={item.blockLink} /> |
| 87 |
) : ( |
| 88 |
<div className="bs-layout-image-overlay"> |
| 89 |
<span className="bs-layout-action-info"> |
| 90 |
{icons.view} |
| 91 |
{__('View', 'blockspare')} |
| 92 |
</span> |
| 93 |
</div> |
| 94 |
) |
| 95 |
} |
| 96 |
<img |
| 97 |
src={blockspare_dashboard.imagePath + folderName + "/" + imageName + ".jpg"} |
| 98 |
alt={item.name} |
| 99 |
/> |
| 100 |
</a> |
| 101 |
<div className='bs-layout-design-info'> |
| 102 |
<div className='bs-layout-design-title'>{item.name}</div> |
| 103 |
{item.content !== 'https://www.blockspare.com/' && |
| 104 |
<div className='bs-layout-actions'> |
| 105 |
<CreateBlockButton href={blockspare_dashboard.newPageUrl + "=" + item.key + "&post_title=" + item.name} /> |
| 106 |
{/* <a target='_blank' href={blockspare_dashboard.newPageUrl + "=" + item.key + "&post_title=" + item.name}>{__('Create block in new page', 'blockspare')}</a> */} |
| 107 |
<Copycontent contentdata={item.content} /> |
| 108 |
</div> |
| 109 |
} |
| 110 |
</div> |
| 111 |
</div> |
| 112 |
</div> |
| 113 |
</div> |
| 114 |
|
| 115 |
|
| 116 |
|
| 117 |
) |
| 118 |
|
| 119 |
|
| 120 |
}) |
| 121 |
} |
| 122 |
</Masonry> : <div className="bs-loader-container"> |
| 123 |
<div className="bs-loader"></div> |
| 124 |
</div>} |
| 125 |
</div> |
| 126 |
) |
| 127 |
|
| 128 |
} |
| 129 |
|
| 130 |
export default Headers |
