93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import List from "./List";
|
||
|
|
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
||
|
|
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
||
|
|
|
||
|
|
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
|
||
|
|
}
|
||
|
|
|
||
|
|
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",
|
||
|
|
}) => {
|
||
|
|
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
|
||
|
|
|
||
|
|
const handleToggle = () => {
|
||
|
|
setIsOpen((prev) => !prev); // Toggle the state
|
||
|
|
};
|
||
|
|
|
||
|
|
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">
|
||
|
|
{listType === "default" && <List items={items} />}
|
||
|
|
{listType === "outline" && (
|
||
|
|
<>
|
||
|
|
<DropDownList
|
||
|
|
value="Buildings"
|
||
|
|
showKebabMenu={false}
|
||
|
|
showAddIcon={false}
|
||
|
|
/>
|
||
|
|
<DropDownList
|
||
|
|
value="Zones"
|
||
|
|
showKebabMenu={false}
|
||
|
|
showAddIcon={false}
|
||
|
|
items={[]}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DropDownList;
|