import { useEffect, useState } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { Spinner } from '@wordpress/components'; import { STORE_NAME } from '../../../store/constants'; import { ChevronDownIcon } from '../../../components/Icons'; import { ProPill } from '../../../components/Pro'; import { SECTION_BODIES } from './sections'; /** * Height-animated region; closed content is inert (not focusable). Once * fully open it stops clipping, so dropdowns and color pickers can overflow. * * @param {Object} props * @param {boolean} props.isOpen Expanded. * @param {*} props.children Content. */ const Collapse = ( { isOpen, children } ) => { const [ isSettled, setSettled ] = useState( isOpen ); useEffect( () => { if ( ! isOpen ) { setSettled( false ); } }, [ isOpen ] ); return (

{ if ( event.target === event.currentTarget && 'grid-template-rows' === event.propertyName ) { setSettled( isOpen ); } } } >

{ children }

); }; const AccordionHeader = ( { label, isOpen, isChild = false, isPro = false, onClick, } ) => ( ); /** * Section body: its settings, once the panel's values have loaded. * * @param {Object} props * @param {string} props.sectionKey `section` or `section/sub-section`. */ const SectionBody = ( { sectionKey } ) => { const isLoaded = useSelect( ( select ) => select( STORE_NAME ).isPanelLoaded(), [] ); const Body = SECTION_BODIES[ sectionKey ]; return (

{ isLoaded && Body ? ( ) : (

) }

); }; /** * Settings section tabs as an accordion (General, Product Gallery with its * sub-sections, Lightbox, and the Shop Page Video upsell with a Pro pill). The open tab is the store's * `activeSection` / `activeSubSection`, shared with the sidebar. A layout * has no Shop Page Video section (`getPanelSections`). */ const SectionAccordion = () => { const { activeSection, activeSubSection, sections } = useSelect( ( select ) => ( { activeSection: select( STORE_NAME ).getActiveSection(), activeSubSection: select( STORE_NAME ).getActiveSubSection(), sections: select( STORE_NAME ).getPanelSections(), } ), [] ); const { setActiveSection } = useDispatch( STORE_NAME ); return (

{ sections.map( ( section ) => { const isOpen = activeSection === section.key; return (

setActiveSection( isOpen ? null : section.key ) } /> { section.children ? ( section.children.map( ( child ) => { const isChildOpen = isOpen && activeSubSection === child.key; return (

setActiveSection( section.key, isChildOpen ? null : child.key ) } />

); } ) ) : ( ) }

); } ) }

); }; export default SectionAccordion;