balmet.com

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

TemplateButton.js (2939B)

      1 import { Spinner, Button } from '@wordpress/components'
      2 import {
      3     useState, useEffect, useRef,
      4 } from '@wordpress/element'
      5 import { __ } from '@wordpress/i18n'
      6 import { useIsMounted } from '../hooks/helpers'
      7 
      8 export const TemplateButtonSkeleton = () => <div className="aspect-w-1 aspect-h-1">
      9     <div className="w-full h-full flex items-center justify-center bg-gray-100">
     10         <Spinner/>
     11     </div>
     12 </div>
     13 
     14 export default function TemplateButton({ template, imageLoaded, setActiveTemplate }) {
     15     const [loaded, setLoaded] = useState(false)
     16     const imageContainerRef = useRef()
     17     const isMounted = useIsMounted()
     18 
     19     useEffect(() => {
     20         if (loaded || !isMounted.current) {
     21             return
     22         }
     23         const img = new Image()
     24         img.role = 'button'
     25         img.className = 'max-w-full block m-auto object-cover'
     26         img.onload = () => {
     27             if (isMounted.current) {
     28                 setLoaded(true)
     29                 imageContainerRef.current && imageContainerRef.current.appendChild(img)
     30                 imageLoaded(template.id)
     31             }
     32         }
     33         img.src = template?.fields?.screenshot[0]?.thumbnails?.large?.url ?? template?.fields?.screenshot[0]?.url
     34     }, [template, imageLoaded, loaded, isMounted])
     35 
     36     if (!loaded) {
     37         return <TemplateButtonSkeleton/>
     38     }
     39     return <div className="flex flex-col justify-between group overflow-hidden max-w-lg">
     40         {/* Note: This doesn't have tabindex nor keyboard event on purpose. a11y tabs to the button only */}
     41         <div
     42             className="flex justify-items-center flex-grow h-80 border-gray-200 bg-white border border-b-0 group-hover:border-wp-theme-500 transition duration-150 cursor-pointer overflow-hidden"
     43             onClick={setActiveTemplate}
     44             ref={imageContainerRef}>
     45         </div>
     46         <span
     47             role="img"
     48             aria-hidden="true"
     49             className="h-px w-full bg-gray-200 border group-hover:bg-transparent border-t-0 border-b-0 border-gray-200 group-hover:border-wp-theme-500 transition duration-150"></span>
     50         <div
     51             className="bg-transparent text-left bg-white flex items-center justify-between p-4 border border-t-0 border-transparent group-hover:border-wp-theme-500 transition duration-150 cursor-pointer"
     52             role="button"
     53             onClick={setActiveTemplate}>
     54             <div>
     55                 <h4 className="m-0 font-bold">{template.fields.display_title}</h4>
     56                 <p className="m-0">{template?.fields?.tax_categories?.filter(c => c.toLowerCase() !== 'default').join(', ')}</p>
     57             </div>
     58             <Button
     59                 isSecondary
     60                 className="sm:opacity-0 group-hover:opacity-100 transition duration-150 focus:opacity-100"
     61                 onClick={(e) => {e.stopPropagation();setActiveTemplate()}}>
     62                 {__('View', 'extendify-sdk')}
     63             </Button>
     64         </div>
     65     </div>
     66 }