Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code refactored

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-09-29 14:29:59 +05:30
parent 9c0cf87dad
commit 2e3971102f
3 changed files with 80 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/components/layout/sidebarLeft/Outline.tsx
View File

@@ -23,7 +23,6 @@ const Outline: React.FC = () => {
// const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
// const [isLayersOpen, setIsLayersOpen] = useState(true);
// const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
const [isZonesOpen, setIsZonesOpen] = useState(true);
const { assetStore, zoneStore } = useSceneContext();
const { assets } = assetStore();
const { zones } = zoneStore();
@@ -100,7 +99,7 @@ const Outline: React.FC = () => {
</section> */}
<section className="outline-section overflow">
{/* <DropDownList value="Buildings" items={buildingsList} isOpen={isBuildingsOpen} onToggle={() => setIsBuildingsOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} /> */}
<DropDownList value="Zones" items={sceneAssetsDataList} isOpen={isZonesOpen} onToggle={() => setIsZonesOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} />
<DropDownList header="Zones" type="Zones" items={sceneAssetsDataList} isDefaultOpen={true} showKebabMenu={false} showAddIcon={false} />
</section>
</div>
)}

131
app/src/components/layout/sidebarLeft/SideBarLeft.tsx
View File

@@ -11,89 +11,68 @@ import Search from "../../ui/inputs/Search";
import { useIsComparing } from "../../../store/builder/store";
const SideBarLeft: React.FC = () => {
const [activeOption, setActiveOption] = useState("Widgets");
const [activeOption, setActiveOption] = useState("Widgets");
const { toggleUILeft } = useToggleStore();
const { activeModule } = useModuleStore();
const { toggleUILeft } = useToggleStore();
const { activeModule } = useModuleStore();
const { isComparing } = useIsComparing();
const { isComparing } = useIsComparing();
// Reset activeOption whenever activeModule changes
useEffect(() => {
setActiveOption("Outline");
if (activeModule === "visualization") setActiveOption("Widgets");
}, [activeModule]);
// Reset activeOption whenever activeModule changes
useEffect(() => {
setActiveOption("Outline");
if (activeModule === "visualization") setActiveOption("Widgets");
}, [activeModule]);
const handleToggleClick = (option: string) => {
setActiveOption(option); // Update the active option
};
const handleToggleClick = (option: string) => {
setActiveOption(option); // Update the active option
};
const handleSearchChange = (value: string) => {
// Log the search value for now
// console.log(value);
};
const handleSearchChange = (value: string) => {
// Log the search value for now
// console.log(value);
};
return (
<div
className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"
}`}
>
<Header />
{toggleUILeft && (
<div className={`sidebar-left-container `}>
{(() => {
if (activeModule === "visualization") {
return (
<>
<ToggleHeader
options={["Widgets", "Templates"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<Search onChange={handleSearchChange} />
<div className="sidebar-left-content-container">
{activeOption === "Widgets" ? <Widgets /> : <Templates />}
</div>
</>
);
} else if (activeModule === "market") {
return <></>;
} else if (activeModule === "builder") {
return (
<>
<ToggleHeader
options={["Outline", "Assets"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
</>
);
} else {
return (
<>
{!isComparing && (
<>
<ToggleHeader
options={["Outline"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
</>
)}
</>
);
}
})()}
return (
<div className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"}`}>
<Header />
{toggleUILeft && (
<div className={`sidebar-left-container `}>
{(() => {
if (activeModule === "visualization") {
return (
<>
<ToggleHeader options={["Widgets", "Templates"]} activeOption={activeOption} handleClick={handleToggleClick} />
<Search onChange={handleSearchChange} />
<div className="sidebar-left-content-container">{activeOption === "Widgets" ? <Widgets /> : <Templates />}</div>
</>
);
} else if (activeModule === "market") {
return <></>;
} else if (activeModule === "builder") {
return (
<>
<ToggleHeader options={["Outline", "Assets"]} activeOption={activeOption} handleClick={handleToggleClick} />
<div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
</>
);
} else {
return (
<>
{!isComparing && (
<>
<ToggleHeader options={["Outline"]} activeOption={activeOption} handleClick={handleToggleClick} />
<div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
</>
)}
</>
);
}
})()}
</div>
)}
</div>
)}
</div>
);
);
};
export default SideBarLeft;