balmet.com

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

CuratedView.js (3159B)

      1 import {
      2     useEffect, useRef, useState,
      3 } from '@wordpress/element'
      4 import { __ } from '@wordpress/i18n'
      5 import { useTaxonomyStore } from '../state/Taxonomies'
      6 import SidebarMain from './parts/sidebars/SidebarMain'
      7 import RowByTax from './parts/RowByTax'
      8 import HasSidebar from './parts/HasSidebar'
      9 import TypeSelect from '../components/TypeSelect'
     10 import TaxonomyBreadcrumbs from '../components/TaxonomyBreadcrumbs'
     11 import Toolbar from './parts/Toolbar'
     12 import { useTemplatesStore } from '../state/Templates'
     13 
     14 export default function CuratedView() {
     15     const [terms, setTerms] = useState([])
     16     const scrollableArea = useRef()
     17     const taxonomies = useTaxonomyStore(state => state.taxonomies)
     18     const searchParams = useTemplatesStore(state => state.searchParams)
     19     const termsFiltered = (t) => Object.values(t)
     20         .filter((term) => term.type.includes('pattern'))
     21         .map((term) => term.term)
     22     const mergeTerm = (tax, term) => {
     23         const params = { ...searchParams }
     24         params.taxonomies = Object.assign(
     25             {}, searchParams.taxonomies, { [tax]: term },
     26         )
     27         return params
     28     }
     29 
     30     useEffect(() => {
     31         if (Object.keys(taxonomies?.tax_pattern_types ?? {}).length) {
     32             setTerms(termsFiltered(taxonomies.tax_pattern_types))
     33         }
     34     }, [taxonomies])
     35 
     36     useEffect(() => {
     37         scrollableArea.current.scrollTop = 0
     38     }, [searchParams])
     39 
     40     return <div className="bg-white h-full flex flex-col items-center relative shadow-xl max-w-screen-4xl mx-auto">
     41         <Toolbar className="w-full h-16 border-solid border-0 border-b border-gray-300 flex-shrink-0"/>
     42         <div className="w-full flex-grow overflow-hidden">
     43             <a href="#extendify-templates" className="sr-only focus:not-sr-only focus:text-blue-500">
     44                 {__('Skip to content', 'extendify-sdk')}
     45             </a>
     46             <div className="sm:flex sm:space-x-12 relative bg-white mx-auto max-w-screen-4xl h-full">
     47                 <HasSidebar>
     48                     <SidebarMain/>
     49                     <>
     50                         <TypeSelect/>
     51                         {/* TODO: we may want to inject this as a portal so it can directly share state with SidebarMain.js */}
     52                         <TaxonomyBreadcrumbs/>
     53                         <div className="relative h-full z-30 bg-white">
     54                             <div
     55                                 ref={scrollableArea}
     56                                 className="absolute z-20 inset-0 lg:static h-screen overflow-y-auto pt-16 px-6 sm:pl-0 sm:pr-8 pb-60">
     57                                 {terms.length > 0 && terms.map((term) => {
     58                                     return <RowByTax
     59                                         key={term}
     60                                         title={term}
     61                                         tax="tax_pattern_types"
     62                                         searchParams={mergeTerm('tax_pattern_types', term)}/>
     63                                 })}
     64                             </div>
     65                         </div>
     66                     </>
     67                 </HasSidebar>
     68             </div>
     69         </div>
     70     </div>
     71 }