Skip to content

Commit

Permalink
fix: review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
niloofar-deriv committed May 9, 2024
1 parent 24cdf72 commit 7e45efe
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 47 deletions.
47 changes: 19 additions & 28 deletions playground/index.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,25 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { Button, ContextMenu } from "../src/main";
import {
LegacyFullscreen1pxIcon,
LegacyHandleMoreIcon,
} from "@deriv/quill-icons";
import { Header } from "../src/main";
import { Text } from "../src/main";

const App = () => {
const [isOpen, setIsOpen] = React.useState(false);

return (
<div>
<Button
style={{ position: "relative" }}
size="sm"
onClick={() => setIsOpen(!isOpen)}
>
Toggle Drawer
</Button>

<ContextMenu
onClickOutside={() => setIsOpen(false)}
isOpen={isOpen}
style={{ position: "absolute", top: 40, left: 0 }}
>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ContextMenu>
</div>
);
};
const App = () => (
<div style={{ margin: "50px", display: "flex" }}>
<Header.MenuItem
as="button"
leftComponent={<LegacyFullscreen1pxIcon width={16} height={16} />}
rightComponent={<LegacyHandleMoreIcon width={16} height={16} />}
>
<span style={{ padding: "8px 16px" }}>
<Text size="md">Home</Text>
</span>
</Header.MenuItem>
</div>
);

ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
Expand Down
1 change: 1 addition & 0 deletions src/components/AppLayout/Header/MenuItem/MenuItem.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
display: flex;
align-items: center;
height: 100%;
cursor: pointer;

&:hover {
background: var(--du-general-hover, #e6e9e9);
Expand Down
39 changes: 20 additions & 19 deletions src/components/AppLayout/Header/MenuItem/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {
ComponentProps,
ElementType,
PropsWithChildren,
ReactNode,
createElement,
} from "react";
import clsx from "clsx";
import "./MenuItem.scss";
Expand All @@ -16,13 +16,13 @@ import "./MenuItem.scss";
* @property {boolean} disableHover - If true, disables hover effects.
* @property {boolean} active - If true, applies an active state style.
*/
type TMenuItem = ComponentProps<"a" | "button"> & {
as: "a" | "button";
interface TMenuItem extends ComponentProps<ElementType> {
as?: "a" | "button";
leftComponent?: ReactNode;
rightComponent?: ReactNode;
disableHover?: boolean;
active?: boolean;
};
}

/**
* MenuItem component that can render as either an anchor or a button element, with optional left and right components.
Expand All @@ -41,7 +41,7 @@ type TMenuItem = ComponentProps<"a" | "button"> & {
* @returns {React.ReactElement} A React Element of type 'a' or 'button' based on the 'as' prop.
*/
export const MenuItem = ({
as,
as = "a",
leftComponent,
children,
rightComponent,
Expand All @@ -50,21 +50,22 @@ export const MenuItem = ({
className,
...props
}: PropsWithChildren<TMenuItem>) => {
const content = {
className: clsx(
"deriv-menu-item",
{ "deriv-menu-item--active": active || disableHover },
className,
),
children: [
createElement("div", { key: "leftComponent" }, leftComponent),
createElement("div", { key: "mainChildren" }, children),
createElement("div", { key: "rightComponent" }, rightComponent),
],
...props,
};
const Tag = as;

return createElement(as, { ...content });
return (
<Tag
className={clsx(
"deriv-menu-item",
{ "deriv-menu-item--active": active || disableHover },
className,
)}
{...props}
>
{leftComponent}
{children}
{rightComponent}
</Tag>
);
};

MenuItem.displayName = "MenuItem";

0 comments on commit 7e45efe

Please sign in to comment.