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>
)}

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

@@ -34,10 +34,7 @@ const SideBarLeft: React.FC = () => {
};
return (
<div
className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"
}`}
>
<div className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"}`}>
<Header />
{toggleUILeft && (
<div className={`sidebar-left-container `}>
@@ -45,15 +42,9 @@ const SideBarLeft: React.FC = () => {
if (activeModule === "visualization") {
return (
<>
<ToggleHeader
options={["Widgets", "Templates"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<ToggleHeader options={["Widgets", "Templates"]} activeOption={activeOption} handleClick={handleToggleClick} />
<Search onChange={handleSearchChange} />
<div className="sidebar-left-content-container">
{activeOption === "Widgets" ? <Widgets /> : <Templates />}
</div>
<div className="sidebar-left-content-container">{activeOption === "Widgets" ? <Widgets /> : <Templates />}</div>
</>
);
} else if (activeModule === "market") {
@@ -61,14 +52,8 @@ const SideBarLeft: React.FC = () => {
} else if (activeModule === "builder") {
return (
<>
<ToggleHeader
options={["Outline", "Assets"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
<ToggleHeader options={["Outline", "Assets"]} activeOption={activeOption} handleClick={handleToggleClick} />
<div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
</>
);
} else {
@@ -76,14 +61,8 @@ const SideBarLeft: React.FC = () => {
<>
{!isComparing && (
<>
<ToggleHeader
options={["Outline"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
<ToggleHeader options={["Outline"]} activeOption={activeOption} handleClick={handleToggleClick} />
<div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
</>
)}
</>

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>