Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ui): migrate ContextMenu component to Typescript #596

Merged
merged 9 commits into from
Nov 11, 2024
5 changes: 5 additions & 0 deletions .changeset/neat-peaches-roll.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@cloudoperators/juno-ui-components": minor
---

Migrate the ContextMenu component to TypeScript
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
*/

import React, { useState, useEffect } from "react"
import PropTypes from "prop-types"
import { Icon } from "../../deprecated_js/Icon/index.js"
import { Menu } from "@headlessui/react"
import { Float } from "@headlessui-float/react"
import { autoPlacement, offset, shift, size } from "@floating-ui/react-dom"
import { autoPlacement, offset, shift, size, Boundary } from "@floating-ui/react-dom"

import { Icon } from "../Icon/Icon.component"

/*
TODO:
Expand All @@ -32,26 +32,33 @@ const menuStyles = `
`

const toggleStyles = `
hover:jn-text-theme-accent
active:jn-text-theme-accent
hover:jn-text-theme-accent
active:jn-text-theme-accent
`

const toggleOpenStyle = `
jn-text-theme-accent
jn-text-theme-accent
`

/** A context menu with a toggle. */
export interface ContextMenuProps {
className?: string
children?: React.ReactNode
icon?: any
guoda-puidokaite marked this conversation as resolved.
Show resolved Hide resolved
open?: boolean
}

export const ContextMenu = ({
/** A context menu with a toggle. */
export const ContextMenu: React.FC<ContextMenuProps> = ({
/*icon,*/
/*className,*/
children = null,
open = false,
/*...props*/
}) => {
const [isOpen, setIsOpen] = useState(false)
const [isOpen, setIsOpen] = useState<boolean>(false)

const handleClick = (_event) => {
// eslint-disable-next-line no-unused-vars
const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
setIsOpen(!isOpen)
}

Expand All @@ -66,7 +73,7 @@ export const ContextMenu = ({
allowedPlacements: ["top-start", "top-end", "bottom-start", "bottom-end"],
}),
size({
boundary: "viewport",
boundary: "viewport" as unknown as Boundary,
barsukov marked this conversation as resolved.
Show resolved Hide resolved
apply({ availableWidth, availableHeight, elements }) {
Object.assign(elements.floating.style, {
maxWidth: `${availableWidth}px`,
Expand All @@ -84,10 +91,10 @@ export const ContextMenu = ({
<Menu.Button
onClick={handleClick}
className={`
juno-contextmenu-toggle
${toggleStyles}
${isOpen ? toggleOpenStyle : ""}
`}
juno-contextmenu-toggle
${toggleStyles}
${isOpen ? toggleOpenStyle : ""}
`}
>
<Icon icon="moreVert" />
</Menu.Button>
Expand All @@ -96,10 +103,3 @@ export const ContextMenu = ({
</Menu>
)
}

ContextMenu.propTypes = {
className: PropTypes.string,
children: PropTypes.node,
icon: PropTypes.any,
open: PropTypes.bool,
}

This file was deleted.

Loading
Loading