Dwinzo_dev/app/src/components/ui/list/DropDownList.tsx

182 lines
5.1 KiB
TypeScript
Raw Normal View History

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";
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);
const { zones, setZones } = useZones();
2025-03-25 06:17:41 +00:00
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
interface Asset {
id: string;
name: string;
}
const [zoneDataList, setZoneDataList] = useState<
{ id: string; name: string; assets: Asset[] }[]
>([]);
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
useEffect(() => {
// 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" },
// ])
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",
},
],
},
]);
}, [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}
items={zoneDataList}
2025-03-25 06:17:41 +00:00
/>
<DropDownList
value="Zones"
showKebabMenu={false}
showAddIcon={false}
items={zoneDataList}
2025-03-25 06:17:41 +00:00
/>
</>
)}
</div>
)}
</div>
);
};
export default DropDownList;