mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Introduce Dropdown component with Menu
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
parent
33564dd592
commit
c4c2eaf6d3
37
src/renderer/components/dropdown/dropdown.tsx
Normal file
37
src/renderer/components/dropdown/dropdown.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import React, { HTMLAttributes, useState } from "react";
|
||||
import { Menu } from "../menu";
|
||||
|
||||
interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
|
||||
contentForToggle: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Dropdown(props: DropdownProps) {
|
||||
const { id, contentForToggle, children, ...rest } = props;
|
||||
const [opened, setOpened] = useState(false);
|
||||
|
||||
const toggle = () => {
|
||||
setOpened(!opened);
|
||||
};
|
||||
|
||||
return (
|
||||
<div {...rest}>
|
||||
<div id={id}>
|
||||
{contentForToggle}
|
||||
</div>
|
||||
<Menu
|
||||
usePortal
|
||||
htmlFor={id}
|
||||
isOpen={opened}
|
||||
close={toggle}
|
||||
open={toggle}
|
||||
>
|
||||
{React.Children.toArray(children)}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user