74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import List from "./List";
|
|
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
|
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
|
|
|
interface DropDownListProps {
|
|
value?: string;
|
|
items?: { id: string; name: string }[];
|
|
showFocusIcon?: boolean;
|
|
showAddIcon?: boolean;
|
|
showKebabMenu?: boolean;
|
|
kebabMenuItems?: { id: string; name: string }[];
|
|
remove?: boolean;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
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" },
|
|
],
|
|
remove,
|
|
isOpen,
|
|
onToggle,
|
|
}) => {
|
|
return (
|
|
<div className="dropdown-list-container">
|
|
<div className="head" onClick={onToggle}>
|
|
<div className="value">{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>
|
|
)}
|
|
<button
|
|
id="collapse-btn"
|
|
title="collapse-btn"
|
|
className="collapse-icon option"
|
|
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
|
|
>
|
|
<ArrowIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<div className="lists-container">
|
|
<List items={items} remove={remove} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DropDownList;
|