import { useContext } from 'react';
import { arrayToClassName, pxToRem } from 'elementor-app/utils/utils.js';
import { CollapseContext } from './collapse-context';
export default function CollapseToggle( props ) {
const context = useContext( CollapseContext ),
style = { '--e-app-collapse-toggle-icon-spacing': pxToRem( props.iconSpacing ) },
classNameBase = 'e-app-collapse-toggle',
classes = [ classNameBase, { [ classNameBase + '--active' ]: props.active } ],
attrs = {
style,
className: arrayToClassName( classes ),
};
if ( props.active ) {
attrs.onClick = () => context.toggle();
}
return (
<div { ...attrs }>
{ props.children }
{ props.active && props.showIcon && <i className="eicon-caret-down e-app-collapse-toggle__icon" /> }
</div>
);
}
CollapseToggle.propTypes = {
className: PropTypes.string,
iconSpacing: PropTypes.number,
showIcon: PropTypes.bool,
active: PropTypes.bool,
children: PropTypes.any,
};
CollapseToggle.defaultProps = {
className: '',
iconSpacing: 20,
showIcon: true,
active: true,
};