vynte-infra/twenty
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Refactor CommandMenuSystemObjectPickerSubView to enhance drag-and-drop functionality. Introduced conditional rendering for add variant using CommandMenuAddToNavDroppable, improving user experience when adding system objects to navigation.

Browse Source
This commit is contained in:
Abdul Rahman
2026-03-02 05:41:17 +05:30
parent ab9dfccc35
commit c2cbfaa73d
1 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuSystemObjectPickerSubView.tsx
+51 -19
View File
@@ -1,10 +1,12 @@
import { useLingui } from '@lingui/react/macro';
import { CommandGroup } from '@/command-menu/components/CommandGroup';
import { CommandMenuAddToNavDroppable } from '@/command-menu/components/CommandMenuAddToNavDroppable';
import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
import { CommandMenuObjectPickerItem } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuObjectPickerItem';
import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
type CommandMenuSystemObjectPickerSubViewProps = {
@@ -45,6 +47,24 @@ export const CommandMenuSystemObjectPickerSubView = ({
? t`No results found`
: (emptyNoResultsText ?? t`No system objects available`);
const isAddVariant = objectMenuItemVariant === 'add';
const listContent = (
<CommandGroup heading={t`System objects`}>
{filteredItems.map((objectMetadataItem, index) => (
<CommandMenuObjectPickerItem
key={objectMetadataItem.id}
objectMetadataItem={objectMetadataItem}
isViewItem={isViewItem}
onSelectObjectForViewEdit={onSelectObjectForViewEdit}
onChangeObject={onChangeObject}
objectMenuItemVariant={objectMenuItemVariant}
dragIndex={isAddVariant ? index : undefined}
/>
))}
</CommandGroup>
);
return (
<CommandMenuSubViewWithSearch
backBarTitle={t`System objects`}
@@ -53,25 +73,37 @@ export const CommandMenuSystemObjectPickerSubView = ({
searchValue={searchValue}
onSearchChange={onSearchChange}
>
<CommandMenuList
commandGroups={[]}
selectableItemIds={selectableItemIds}
noResults={isEmpty}
noResultsText={noResultsText}
>
<CommandGroup heading={t`System objects`}>
{filteredItems.map((objectMetadataItem) => (
<CommandMenuObjectPickerItem
key={objectMetadataItem.id}
objectMetadataItem={objectMetadataItem}
isViewItem={isViewItem}
onSelectObjectForViewEdit={onSelectObjectForViewEdit}
onChangeObject={onChangeObject}
objectMenuItemVariant={objectMenuItemVariant}
/>
))}
</CommandGroup>
</CommandMenuList>
{isAddVariant ? (
<CommandMenuAddToNavDroppable>
{({ innerRef, droppableProps, placeholder }) => (
<CommandMenuList
commandGroups={[]}
selectableItemIds={selectableItemIds}
noResults={isEmpty}
noResultsText={noResultsText}
>
<div
ref={innerRef}
data-dnd-group={ADD_TO_NAV_SOURCE_DROPPABLE_ID}
// eslint-disable-next-line react/jsx-props-no-spreading
{...droppableProps}
>
{listContent}
{placeholder}
</div>
</CommandMenuList>
)}
</CommandMenuAddToNavDroppable>
) : (
<CommandMenuList
commandGroups={[]}
selectableItemIds={selectableItemIds}
noResults={isEmpty}
noResultsText={noResultsText}
>
{listContent}
</CommandMenuList>
)}
</CommandMenuSubViewWithSearch>
);
};