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