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;

40
app/src/components/ui/list/DropDownList.tsx
View File

@@ -4,61 +4,69 @@ import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
import List from "./OutlineList/ListNew";
interface DropDownListProps {
value?: string;
header?: string;
type?: "Zones" | "Assets";
items?: { id: string; name: string }[];
showFocusIcon?: boolean;
onFocusClick?: () => void;
showAddIcon?: boolean;
onAddClick?: () => void;
showKebabMenu?: boolean;
onKebabMenuSelect?: (selectedItems: string[]) => void;
kebabMenuItems?: { id: string; name: string }[];
remove?: boolean;
isOpen: boolean;
onToggle: () => void;
removeIcon?: boolean;
isDefaultOpen: boolean;
}
const DropDownList: React.FC<DropDownListProps> = ({
value = "Dropdown",
header = "Dropdown",
items = [],
type = "Assets",
showFocusIcon = false,
onFocusClick,
showAddIcon = true,
onAddClick,
showKebabMenu = true,
onKebabMenuSelect,
removeIcon = false,
kebabMenuItems = [
{ id: "Buildings", name: "Buildings" },
{ id: "Paths", name: "Paths" },
{ id: "Zones", name: "Zones" },
],
remove,
isOpen,
onToggle,
isDefaultOpen,
}) => {
const [isOpen, setIsOpen] = React.useState(isDefaultOpen);
return (
<div className="dropdown-list-container">
<div className="head" onClick={onToggle}>
<div className="value">{value}</div>
<div className="head" onClick={() => setIsOpen((prev) => !prev)}>
<div className="value">{header}</div>
<div className="options">
{showFocusIcon && (
<div className="focus option">
<div className="focus option" onClick={onFocusClick}>
<FocusIcon />
</div>
)}
{showAddIcon && (
<div className="add option">
<div className="add option" onClick={onAddClick}>
<AddIcon />
</div>
)}
{showKebabMenu && (
<div className="kebab-menu option">
<KebabMenuListMultiSelect items={kebabMenuItems} />
<KebabMenuListMultiSelect items={kebabMenuItems} onSelectionChange={onKebabMenuSelect} />
</div>
)}
<button id="collapse-btn" title="collapse-btn" className="collapse-icon option" style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}>
<button id="collapse-btn" title="collapse-btn" className="collapse-icon option" style={{ transform: isDefaultOpen ? "rotate(0deg)" : "rotate(-90deg)" }}>
<ArrowIcon />
</button>
</div>
</div>
{isOpen && (
{isDefaultOpen && isOpen && (
<div className="lists-container">
<List items={items} remove={remove} />
<List items={items} remove={removeIcon} />
</div>
)}
</div>