MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

fixed tab controls

Browse Source
This commit was merged in pull request #53.
This commit is contained in:
victorAnumudu
2025-07-25 20:41:25 +01:00
parent dde01ab79a
commit 14e588b0a9
2 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/product/ProductActive.jsx
+16 -8
View File
@@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { useRef, useState } from "react";
import getImage from "../../utils/getImage";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import GeneralTab from "./settingsTab/GeneralTab";
@@ -8,6 +8,7 @@ import { productRefreshSite } from "../../services/services";
export default function ProductActive({productData}){
const iframe = useRef()
const dataFields ={
site_title: { name: 'Title', controls: 'TEXT', active: true },
site_description: { name: 'Description', controls: 'TEXT', active: true },
@@ -38,6 +39,8 @@ export default function ProductActive({productData}){
color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
};
const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)
const refresh = useMutation({
mutationFn: (fields) => {
return productRefreshSite(fields)
@@ -99,12 +102,16 @@ export default function ProductActive({productData}){
<>
{Object.entries(settingsObject).map(([key, value]) => (
<li className="nav-item">
<a className={`nav-link ${value.active}`}
<a className={`nav-link ${activeTab == value.controls && 'active show'}`}
id={key} data-bs-toggle="pill"
data-bs-target={`#${value.controls}`}
// data-bs-target={`#${value.controls}`}
type="button" role="tab"
aria-controls={value.controls}
aria-selected="true">{value.title}</a>
// aria-controls={value.controls}
// aria-selected="true"
onClick={()=>setActiveTab(value.controls)}
>
{value.title}
</a>
</li>
))}
</>
@@ -112,9 +119,10 @@ export default function ProductActive({productData}){
<div className="tab-content">
<>
{Object.entries(settingsObject).map(([key, value]) => (
<div className={`tab-pane fade ${value.active}`}
id={value.controls} role="tabpanel"
aria-labelledby={key}>
<div className={`tab-pane fade ${activeTab == value.controls && 'active show'}`}
// id={value.controls} role="tabpanel"
// aria-labelledby={key}
>
<GeneralTab name={value.title} data={value.data} />
</div>
))}