Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.4

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.4

post-carousel / src / components / tabControls / tabControls.js

tabControls.js in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.4, at src/components/tabControls/tabControls.js

146 lines 3.9 KB

Raw Download Zip

1	import { TabPanel } from "@wordpress/components";
2	import { GeneralIcon, StyleIcon, AdvancedIcon, SliderIcon, LayoutsIcon, CarouselIcon } from "./icon";
3	import "./editor.scss";
4	import { useState } from "@wordpress/element";
5
6	const TabControls = ({
7	attributes,
8	setAttributes,
9	GeneralTab = null,
10	StyleTab = null,
11	AdvancedTab = null,
12	VisibilityTab = null,
13	SliderTab = null,
14	displayIcon = true,
15	props = "",
16	verticalPosition = true,
17	Preset = null,
18	LayoutTab = null,
19	CarouselTab = null,
20	initialTab = "general",
21	}) => {
22	const Tabs = [];
23	const [tabName, setTabName] = useState(initialTab);
24
25	if (LayoutTab) {
26	Tabs.push({
27	name: `layout`,
28	title: <span className="sp-smart-post-tab-panel-title">{displayIcon && <GeneralIcon />} Layouts</span>,
29	className: "sp-smart-post-general-tab",
30	});
31	}
32
33	if (CarouselTab) {
34	Tabs.push({
35	name: `carousel`,
36	title: <span className="sp-smart-post-tab-panel-title">{displayIcon && <StyleIcon />} Carousel</span>,
37	className: "sp-smart-post-general-tab",
38	});
39	}
40
41	if (GeneralTab) {
42	Tabs.push({
43	name: `general`,
44	title: <span className="sp-smart-post-tab-panel-title">{displayIcon && <GeneralIcon />} General</span>,
45	className: "sp-smart-post-general-tab",
46	});
47	}
48	if (Preset) {
49	Tabs.push({
50	name: "preset",
51	title: <span className="sp-smart-post-tab-panel-title">{displayIcon && <GeneralIcon />} Preset</span>,
52	className: "sp-smart-post-preset-tab",
53	});
54	}
55	if (StyleTab) {
56	Tabs.push({
57	name: `style`,
58	title: <span className="sp-smart-post-tab-panel-title">{displayIcon && <StyleIcon />} Style</span>,
59	className: "sp-smart-post-style-tab",
60	});
61	}
62
63	if (VisibilityTab) {
64	Tabs.push({
65	name: "visibility",
66	title: <span className="sp-smart-post-tab-panel-title">Visibility</span>,
67	className: "sp-smart-post-visibility-tab",
68	});
69	}
70
71	if (AdvancedTab) {
72	Tabs.push({
73	name: "advanced",
74	title: <span className="sp-smart-post-tab-panel-title">{displayIcon && <AdvancedIcon />} Advanced</span>,
75	className: "sp-smart-post-advanced-tab",
76	});
77	}
78
79	if (SliderTab) {
80	Tabs.push({
81	name: "slider",
82	title: <span className="sp-smart-post-tab-panel-title">{displayIcon && <SliderIcon />} Slider</span>,
83	className: "sp-smart-post-advanced-tab",
84	});
85	}
86
87	return (
88	<TabPanel
89	className="sp-smart-post-tab-panel"
90	activeClass="active-tab"
91	initialTabName={tabName}
92	onSelect={(newVal) => setTabName(newVal)}
93	tabs={Tabs}
94	>
95	{(tab) => {
96	return (
97	<>
98	{tab.name === "layout" && LayoutTab && (
99	<LayoutTab
100	attributes={attributes}
101	verticalPosition={verticalPosition}
102	setAttributes={setAttributes}
103	props={props}
104	/>
105	)}
106	{tab.name === "carousel" && CarouselTab && (
107	<CarouselTab
108	attributes={attributes}
109	verticalPosition={verticalPosition}
110	setAttributes={setAttributes}
111	props={props}
112	/>
113	)}
114	{tab.name === "general" && GeneralTab && (
115	<GeneralTab
116	attributes={attributes}
117	verticalPosition={verticalPosition}
118	setAttributes={setAttributes}
119	props={props}
120	/>
121	)}
122	{tab.name === "style" && StyleTab && (
123	<StyleTab attributes={attributes} setAttributes={setAttributes} props={props} />
124	)}
125	{tab.name === "visibility" && VisibilityTab && (
126	<VisibilityTab attributes={attributes} setAttributes={setAttributes} props={props} />
127	)}
128
129	{tab.name === "preset" && Preset && (
130	<Preset attributes={attributes} setAttributes={setAttributes} props={props} />
131	)}
132	{tab.name === "advanced" && AdvancedTab && (
133	<AdvancedTab attributes={attributes} setAttributes={setAttributes} props={props} />
134	)}
135	{tab.name === "slider" && SliderTab && (
136	<SliderTab attributes={attributes} setAttributes={setAttributes} props={props} />
137	)}
138	</>
139	);
140	}}
141	</TabPanel>
142	);
143	};
144
145	export default TabControls;
146