OwlCyberSecurity - MANAGER

Edit File: setting-tabs-control.js

import { useState, useEffect } from '@wordpress/element';

export const SettingTabsControl = (props) =>{
	
	const [activeTab, setActiveTab] = useState('settings');
	
	const tabChanged = (tab) => {
		setActiveTab(tab);	
	}
	
	useEffect(() => {
		tabChanged(activeTab);
		var componentsPanel = document.querySelector('.components-panel');
		
		componentsPanel.setAttribute('pagelayer-component-tab', activeTab);
		return () => {
			componentsPanel.removeAttribute('pagelayer-component-tab');
		}
	}, [activeTab]);
	
	// Toggle panels handler
	useEffect(() => {
		// Default open tab
		var tabs = document.querySelectorAll(`.pagelayer-components-tabs`);
		
		tabs.forEach((tab) =>{
			var currentOpened = tab.querySelectorAll(`.pagelayer-panel__body.is-opened`);
			var firstChild = tab.querySelector('.pagelayer-panel__body');
			if(currentOpened.length < 1 && firstChild){
				firstChild.querySelector('.components-button').click();
			}
		});
		
		// Panels click handler
		jQuery(document).on('mouseup.components_toggle_panel', '.components-panel__body', function(){
			var pEle = jQuery(this);
			var sPanel = pEle.closest('.pl-settings');
			var selector = sPanel.length > 0 ? '.pl-settings' : ':not(.pl-settings)';