Migrate to twenty-ui - navigation/menu-item (#8213)

This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7536](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7536). --- ### Description Migrate all menu items components to twenty ui and update imports. ```typescript MenuItem MenuItemAvata MenuItemCommand MenuItemCommandHotKeys MenuItemDraggable MenuItemMultiSelect MenuItemMultiSelectAvatar MenuItemMultiSelectTag MenuItemNavigate MenuItemSelect MenuItemSelectAvatar MenuItemSelectColor MenuItemSelectTag MenuItemSuggestion MenuItemToggle ``` \ Also migrate all other dependent components and utilities like `Checkbox` & `Toggle`\ \ Fixes twentyhq/private-issues#82 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-11-07 16:51:39 +00:00
parent f9a136ab6d
commit 6264d509bd
106 changed files with 326 additions and 256 deletions
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx
@ -0,0 +1,65 @@
+import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
+import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
+import { MenuItemAccent } from '../types/MenuItemAccent';
+
+import { IconComponent } from '@ui/display';
+import { LightIconButtonGroup } from '@ui/input';
+import { ReactNode } from 'react';
+import { MenuItemIconButton } from './MenuItem';
+
+export type MenuItemDraggableProps = {
+  LeftIcon?: IconComponent | undefined;
+  accent?: MenuItemAccent;
+  iconButtons?: MenuItemIconButton[];
+  isTooltipOpen?: boolean;
+  onClick?: () => void;
+  text: ReactNode;
+  className?: string;
+  isIconDisplayedOnHoverOnly?: boolean;
+  showGrip?: boolean;
+  isDragDisabled?: boolean;
+  isHoverDisabled?: boolean;
+};
+
+export const MenuItemDraggable = ({
+  LeftIcon,
+  accent = 'default',
+  iconButtons,
+  onClick,
+  text,
+  isDragDisabled = false,
+  className,
+  isIconDisplayedOnHoverOnly = true,
+  showGrip = false,
+}: MenuItemDraggableProps) => {
+  const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
+
+  const cursorType = showGrip
+    ? isDragDisabled
+      ? 'not-allowed'
+      : 'drag'
+    : 'default';
+
+  return (
+    <StyledHoverableMenuItemBase
+      onClick={onClick}
+      accent={accent}
+      className={className}
+      isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
+      cursor={cursorType}
+    >
+      <MenuItemLeftContent
+        LeftIcon={LeftIcon}
+        text={text}
+        isDisabled={isDragDisabled}
+        showGrip={showGrip}
+      />
+      {showIconButtons && (
+        <LightIconButtonGroup
+          className="hoverable-buttons"
+          iconButtons={iconButtons}
+        />
+      )}
+    </StyledHoverableMenuItemBase>
+  );
+};