controls-tabs.jsx — JetFormBuilder — Dynamic Blocks Form Builder 3.6.5.1

jetformbuilder / modules / framework / blocks-style-manager / assets / src / components / common / controls-tabs.jsx

jetformbuilder / modules / framework / blocks-style-manager / assets / src / components / common Last commit date

controls-tabs.jsx

41 lines

1	import { useState } from '@wordpress/element';
2	import ControlsTabsNavigation from './controls-tabs-navigation';
3	import ControlComponent from '../control-component';
4
5	const ControlsTabs = ( props ) => {
6
7	const [ activeTab, setActiveTab ] = useState( props.control.children[ 0 ].id );
8
9	const activeTabContent = () => {
10	const activeTabControl = props.control.children.find( ( tab ) => tab.id === activeTab );
11
12	if ( ! activeTabControl \|\| ! activeTabControl.children ) {
13	return null;
14	}
15
16	return activeTabControl.children.map( ( control ) => {
17	return (
18	<ControlComponent
19	key={ control.id }
20	control={ control }
21	props={ props }
22	/>
23	);
24	} );
25	}
26
27	return (
28	<div className="crocoblock-style-manager__controls-tabs">
29	<ControlsTabsNavigation
30	tabs={ props.control.children }
31	activeTab={ activeTab }
32	onTabChange={ setActiveTab }
33	/>
34	<div className="crocoblock-style-manager__controls-tabs-content">
35	{ activeTabContent() }
36	</div>
37	</div>
38	);
39	}
40
41	export default ControlsTabs;