2025-03-26 06:58:22 +00:00
|
|
|
import React, { useEffect, useState } from "react";
|
2025-03-25 06:17:41 +00:00
|
|
|
import List from "./List";
|
|
|
|
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
|
|
|
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
2025-03-26 13:00:33 +00:00
|
|
|
import { useZones } from "../../../store/store";
|
|
|
|
import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
|
|
interface DropDownListProps {
|
|
|
|
value?: string; // Value to display in the DropDownList
|
|
|
|
items?: { id: string; name: string }[]; // Items to display in the dropdown list
|
|
|
|
showFocusIcon?: boolean; // Determines if the FocusIcon should be displayed
|
|
|
|
showAddIcon?: boolean; // Determines if the AddIcon should be displayed
|
|
|
|
showKebabMenu?: boolean; // Determines if the KebabMenuList should be displayed
|
|
|
|
kebabMenuItems?: { id: string; name: string }[]; // Items for the KebabMenuList
|
|
|
|
defaultOpen?: boolean; // Determines if the dropdown list should be open by default
|
|
|
|
listType?: string; // Type of list to display
|
2025-03-27 03:36:26 +00:00
|
|
|
remove?: boolean;
|
2025-03-25 06:17:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const DropDownList: React.FC<DropDownListProps> = ({
|
|
|
|
value = "Dropdown",
|
|
|
|
items = [],
|
|
|
|
showFocusIcon = false,
|
|
|
|
showAddIcon = true,
|
|
|
|
showKebabMenu = true,
|
|
|
|
kebabMenuItems = [
|
|
|
|
{ id: "Buildings", name: "Buildings" },
|
|
|
|
{ id: "Paths", name: "Paths" },
|
|
|
|
{ id: "Zones", name: "Zones" },
|
|
|
|
],
|
|
|
|
defaultOpen = false,
|
|
|
|
listType = "default",
|
2025-03-27 03:36:26 +00:00
|
|
|
remove,
|
2025-03-25 06:17:41 +00:00
|
|
|
}) => {
|
|
|
|
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
|
2025-04-03 12:32:28 +00:00
|
|
|
const { zones, setZones } = useZones();
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
|
|
const handleToggle = () => {
|
|
|
|
setIsOpen((prev) => !prev); // Toggle the state
|
|
|
|
};
|
2025-04-03 12:32:28 +00:00
|
|
|
|
|
|
|
interface Asset {
|
|
|
|
id: string;
|
|
|
|
name: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
const [zoneDataList, setZoneDataList] = useState<
|
|
|
|
{ id: string; name: string; assets: Asset[] }[]
|
|
|
|
>([]);
|
|
|
|
|
2025-03-26 13:00:33 +00:00
|
|
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
2025-03-26 06:58:22 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
2025-03-29 13:51:20 +00:00
|
|
|
// console.log(zones);
|
|
|
|
// setZoneDataList([
|
|
|
|
// { id: "2e996073-546c-470c-8323-55bd3700c6aa", name: "zone1" },
|
|
|
|
// { id: "3f473bf0-197c-471c-a71f-943fc9ca2b47", name: "zone2" },
|
|
|
|
// { id: "905e8fb6-9e18-469b-9474-e0478fb9601b", name: "zone3" },
|
|
|
|
// { id: "9d9efcbe-8e96-47eb-bfad-128a9e4c532e", name: "zone4" },
|
|
|
|
// { id: "884f3d29-eb5a-49a5-abe9-d11971c08e85", name: "zone5" },
|
|
|
|
// { id: "70fa55cd-b5c9-4f80-a8c4-6319af3bfb4e", name: "zone6" },
|
|
|
|
// ])
|
|
|
|
|
2025-04-03 12:32:28 +00:00
|
|
|
const value = (zones || []).map(
|
|
|
|
(val: { zoneId: string; zoneName: string }) => ({
|
|
|
|
id: val.zoneId,
|
|
|
|
name: val.zoneName,
|
|
|
|
})
|
|
|
|
);
|
|
|
|
setZoneDataList([
|
|
|
|
{
|
|
|
|
id: "zone1",
|
|
|
|
name: "Zone 1",
|
|
|
|
assets: [
|
|
|
|
{
|
|
|
|
id: "asset1",
|
|
|
|
name: "Asset 1",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "asset2",
|
|
|
|
name: "Asset 2",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "asset3",
|
|
|
|
name: "Asset 3",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "zone2",
|
|
|
|
name: "Zone 2",
|
|
|
|
assets: [
|
|
|
|
{
|
|
|
|
id: "asset4",
|
|
|
|
name: "Asset 4",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "asset5",
|
|
|
|
name: "Asset 5",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "asset6",
|
|
|
|
name: "Asset 6",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "zone3",
|
|
|
|
name: "Zone 3",
|
|
|
|
assets: [
|
|
|
|
{
|
|
|
|
id: "asset7",
|
|
|
|
name: "Asset 7",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: "asset8",
|
|
|
|
name: "Asset 8",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
]);
|
2025-04-04 04:38:07 +00:00
|
|
|
|
2025-03-26 13:00:33 +00:00
|
|
|
}, [zones]);
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="dropdown-list-container">
|
|
|
|
<div className="head">
|
|
|
|
<div className="value" onClick={handleToggle}>
|
|
|
|
{value}
|
|
|
|
</div>
|
|
|
|
<div className="options">
|
|
|
|
{showFocusIcon && (
|
|
|
|
<div className="focus option">
|
|
|
|
<FocusIcon />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{showAddIcon && (
|
|
|
|
<div className="add option">
|
|
|
|
<AddIcon />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{showKebabMenu && (
|
|
|
|
<div className="kebab-menu option">
|
|
|
|
<KebabMenuListMultiSelect items={kebabMenuItems} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
<div
|
|
|
|
className="collapse-icon option"
|
|
|
|
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
|
|
|
|
onClick={handleToggle}
|
|
|
|
>
|
|
|
|
<ArrowIcon />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{isOpen && (
|
|
|
|
<div className="lists-container">
|
2025-03-27 03:36:26 +00:00
|
|
|
{listType === "default" && <List items={items} remove={remove} />}
|
2025-03-25 06:17:41 +00:00
|
|
|
{listType === "outline" && (
|
|
|
|
<>
|
|
|
|
<DropDownList
|
|
|
|
value="Buildings"
|
|
|
|
showKebabMenu={false}
|
|
|
|
showAddIcon={false}
|
2025-04-03 12:32:28 +00:00
|
|
|
items={zoneDataList}
|
2025-03-25 06:17:41 +00:00
|
|
|
/>
|
|
|
|
<DropDownList
|
|
|
|
value="Zones"
|
|
|
|
showKebabMenu={false}
|
|
|
|
showAddIcon={false}
|
2025-03-26 06:58:22 +00:00
|
|
|
items={zoneDataList}
|
2025-03-25 06:17:41 +00:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default DropDownList;
|