From 257834ea71eb7ced6a64ff52e93681ca413eff2c Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Fri, 13 Dec 2024 19:07:46 +0530 Subject: [PATCH] In navigation drawer, cursor should not be drag on hover and some enhancements (#8975) as per the title- on hover, the draggable items had a grab cursor. Couldn't change it to a pointer, because then onClick would have a weird behavior of grab which causes lag onClick. --- .../CurrentWorkspaceMemberFavorites.tsx | 16 ++++++++++-- ...CurrentWorkspaceMemberFavoritesFolders.tsx | 19 ++++++++++++-- .../components/DraggableList.tsx | 5 +++- .../components/NavigationDrawerItem.tsx | 25 ++++++++----------- .../components/NavigationDrawerSubItem.tsx | 4 +-- 5 files changed, 47 insertions(+), 22 deletions(-) diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx index 28926cd77..c6676e033 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx @@ -16,6 +16,7 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer'; import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem'; import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment'; +import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd'; import { useState } from 'react'; import { createPortal } from 'react-dom'; import { useLocation } from 'react-router-dom'; @@ -42,6 +43,7 @@ export const CurrentWorkspaceMemberFavorites = ({ }: CurrentWorkspaceMemberFavoritesProps) => { const currentPath = useLocation().pathname; const currentViewPath = useLocation().pathname + useLocation().search; + const [isDragging, setIsDragging] = useState(false); const [isFavoriteFolderRenaming, setIsFavoriteFolderRenaming] = useState(false); @@ -113,6 +115,15 @@ export const CurrentWorkspaceMemberFavorites = ({ setIsDeleteModalOpen(false); }; + const handleDragStart = (_: DragStart) => { + setIsDragging(true); + }; + + const handleDragEnd = (result: DropResult, provided: ResponderProvided) => { + setIsDragging(false); + handleReorderFavorite(result, provided); + }; + const rightOptions = ( {folder.favorites.map((favorite, index) => ( @@ -180,7 +192,7 @@ export const CurrentWorkspaceMemberFavorites = ({ accent="tertiary" /> } - isDraggable + isDragging={isDragging} /> } /> diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx index 81d1e08af..11967a038 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx @@ -26,8 +26,12 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle'; import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; +import { DragStart, DropResult, ResponderProvided } from '@hello-pangea/dnd'; +import { useState } from 'react'; export const CurrentWorkspaceMemberFavoritesFolders = () => { + const [isDragging, setIsDragging] = useState(false); + const currentPath = useLocation().pathname; const currentViewPath = useLocation().pathname + useLocation().search; const theme = useTheme(); @@ -54,6 +58,16 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => { openNavigationSection(); setIsFavoriteFolderCreating((current) => !current); }; + + const handleDragStart = (_: DragStart) => { + setIsDragging(true); + }; + + const handleDragEnd = (result: DropResult, provided: ResponderProvided) => { + setIsDragging(false); + handleReorderFavorite(result, provided); + }; + const shouldDisplayFavoritesWithFeatureFlagEnabled = true; //todo: remove this logic once feature flag gating is removed @@ -103,7 +117,8 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => { {orphanFavorites.length > 0 && ( ( { accent="tertiary" /> } - isDraggable={true} + isDragging={isDragging} /> } /> diff --git a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx index d130cbde0..07a83a620 100644 --- a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableList.tsx @@ -3,12 +3,14 @@ import { DragDropContext, Droppable, OnDragEndResponder, + OnDragStartResponder, } from '@hello-pangea/dnd'; import { useState } from 'react'; import { v4 } from 'uuid'; type DraggableListProps = { draggableItems: React.ReactNode; onDragEnd: OnDragEndResponder; + onDragStart?: OnDragStartResponder; }; const StyledDragDropItemsWrapper = styled.div` @@ -18,11 +20,12 @@ const StyledDragDropItemsWrapper = styled.div` export const DraggableList = ({ draggableItems, onDragEnd, + onDragStart, }: DraggableListProps) => { const [v4Persistable] = useState(v4()); return ( - + {(provided) => ( diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index 4c6936dd0..4a6bdb7c5 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -37,17 +37,17 @@ export type NavigationDrawerItemProps = { count?: number; keyboard?: string[]; rightOptions?: ReactNode; - isDraggable?: boolean; + isDragging?: boolean; }; type StyledItemProps = Pick< NavigationDrawerItemProps, - 'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDraggable' + 'active' | 'danger' | 'indentationLevel' | 'soon' | 'to' | 'isDragging' > & { isNavigationDrawerExpanded: boolean }; const StyledItem = styled('button', { shouldForwardProp: (prop) => - !['active', 'danger', 'soon', 'isDraggable'].includes(prop) && + !['active', 'danger', 'soon', 'isDragging'].includes(prop) && isPropValid(prop), })` box-sizing: content-box; @@ -89,16 +89,11 @@ const StyledItem = styled('button', { !props.isNavigationDrawerExpanded ? `${NAV_DRAWER_WIDTHS.menu.desktop.collapsed - 24}px` : '100%'}; - ${({ isDraggable }) => - isDraggable && - ` - cursor: grab; - - &:active { - cursor: grabbing; - } - `} - + ${({ isDragging }) => + isDragging && + ` + cursor: grabbing; + `} :hover { background: ${({ theme }) => theme.background.transparent.light}; color: ${(props) => @@ -198,7 +193,7 @@ export const NavigationDrawerItem = ({ keyboard, subItemState, rightOptions, - isDraggable, + isDragging, }: NavigationDrawerItemProps) => { const theme = useTheme(); const isMobile = useIsMobile(); @@ -231,7 +226,7 @@ export const NavigationDrawerItem = ({ to={to ? to : undefined} indentationLevel={indentationLevel} isNavigationDrawerExpanded={isNavigationDrawerExpanded} - isDraggable={isDraggable} + isDragging={isDragging} > {showBreadcrumb && ( diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx index 6bc3ca67a..833afe827 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem.tsx @@ -18,7 +18,7 @@ export const NavigationDrawerSubItem = ({ keyboard, subItemState, rightOptions, - isDraggable, + isDragging, }: NavigationDrawerSubItemProps) => { return ( ); };