import { createElement, useContext, useEffect, createPortal, } from '@wordpress/element' import classnames from 'classnames' import bezierEasing from 'bezier-easing' import OptionsPanel from '../../options/OptionsPanel' import Switch from './ct-switch' import { PanelContext } from '../components/PanelLevel' import { Transition, animated } from 'react-spring' import { transformValueForRtl } from '../helpers/transform-value-for-rtl' export const PanelMetaWrapper = ({ id, option, getActualOption, value }) => { const { panelsState, panelsHelpers, panelsDispatch, containerRef } = useContext(PanelContext) const selfPanelId = id useEffect(() => { if (panelsState.previousPanel) { return } if (!panelsHelpers.isTransitioningFor(id)) { return } if (panelsHelpers.isOpenFor(id)) { if ( !panelsHelpers .getWrapperParent() .querySelector('.ct-tmp-panel-wrapper') ) { const wrapper = document.createElement('div') wrapper.classList.add('ct-tmp-panel-wrapper') panelsHelpers.getWrapperParent().appendChild(wrapper) } if (panelsHelpers.getParentOptionsWrapper()) { panelsHelpers .getParentOptionsWrapper() .classList.add('ct-panel-open') } const h3 = containerRef.current.closest('ul') && containerRef.current .closest('ul') .querySelector( '.customize-section-description-container h3' ) panelsDispatch({ type: 'PANEL_RECEIVE_TITLE', payload: { titlePrefix: h3 ? `${h3.querySelector('span').innerText} ▸ ${ h3.innerText.split('\n')[ h3.innerText.split('\n').length - 1 ] }` : '', }, }) } else { if ( !containerRef.current.closest('.accordion-section-content') || !containerRef.current .closest('.accordion-section-content') .classList.contains('ct-panel-open') ) { // return } if (panelsHelpers.getParentOptionsWrapper()) { panelsHelpers .getParentOptionsWrapper() .classList.remove('ct-panel-open') } /* setTimeout(() => (containerRef.current.querySelector('button') ? containerRef.current.querySelector('button') : containerRef.current ).focus() ) */ } }, [panelsState.previousPanel, id, panelsHelpers.isOpenFor(id)]) useEffect(() => { return () => { ;[...document.querySelectorAll('.ct-panel-open:not(.open)')].map( (el) => el.classList.remove('ct-panel-open') ) } }, []) const isEnabled = value === 'yes' || value === true return getActualOption({ open: () => panelsHelpers.open(id), wrapperAttr: { className: `${ option.switch ? isEnabled ? 'ct-click-allowed' : '' : 'ct-click-allowed' } ct-panel`, onClick: ({ target }) => { if (option.switch && !isEnabled) { return } if (option.panelSecondLevel) { panelsHelpers.openSecondLevel({ secondLevelTitleLabel: option.label, secondLevelOptions: option['inner-options'], }) return } if (target.closest('.ct-tmp-panel-wrapper')) { return } panelsHelpers.open(selfPanelId) }, }, }) } const PanelContainer = ({ option, id, onChange, getValues, onChangeFor }) => { let maybeLabel = Object.keys(option).indexOf('label') === -1 ? (id || '') .replace(/./, (s) => s.toUpperCase()) .replace(/\_|\-/g, ' ') : option.label const { panelsState: { titlePrefix, previousPanel }, panelsState, panelsHelpers, containerRef, panelSecondLevelSprings, } = useContext(PanelContext) return containerRef.current && panelsHelpers.getWrapperParent().querySelector('.ct-tmp-panel-wrapper') ? createPortal( ({ // delay: type === 'enter' ? 180 * 10 : 0, // duration: 2000, duration: 180, easing: bezierEasing(0.645, 0.045, 0.355, 1), })} onRest={(isOpen) => { panelsHelpers.stopTransitioning() if (isOpen) { ;[ ...panelsHelpers .getWrapperParent() .querySelectorAll('.ct-tmp-panel-wrapper'), ].map((el) => { setTimeout(() => { if (!el.firstElementChild) { return } el.firstElementChild.removeAttribute( 'style' ) }, 200) }) return } if (!previousPanel) { ;[ ...panelsHelpers .getWrapperParent() .querySelectorAll('.ct-tmp-panel-wrapper'), ].map((el) => el.parentNode.removeChild(el)) } }}> {(props, isOpen) => { if (!isOpen) { return null } return (
onChangeFor(key, val) } options={option['inner-options']} value={getValues()} />
{(panelsState.currentLevel === 2 || panelsState.secondLevelTitleLabel) && (
{panelsState.secondLevelOptions && ( onChangeFor(key, val) } options={ panelsState.secondLevelOptions } value={getValues()} /> )}
)} ) }} , panelsHelpers .getWrapperParent() .querySelector('.ct-tmp-panel-wrapper') ) : null } const Panel = ({ id, getValues, values, onChangeFor, option, value, view = 'normal', onChange, }) => { const { panelsState: { isOpen, isTransitioning }, panelsHelpers, } = useContext(PanelContext) if (view === 'simple') { return panelsHelpers.isTransitioningFor(id) || panelsHelpers.isOpenFor(id) ? ( (getValues ? getValues() : values)} onChangeFor={onChangeFor} option={option} /> ) : null } const isEnabled = value === 'yes' || value === true return (
{option.disabled_notice && !isEnabled && ( {option.disabled_notice} )}
{option.switch && ( e.stopPropagation()} option={{ behavior: option.switchBehavior || 'words', }} /> )}
{(panelsHelpers.isTransitioningFor(id) || panelsHelpers.isOpenFor(id)) && ( (getValues ? getValues() : values)} onChangeFor={onChangeFor} option={option} /> )}
) } Panel.renderingConfig = { design: 'inline', } Panel.MetaWrapper = PanelMetaWrapper export default Panel