admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Infinite scrolling in relation picker menu (#12051)

Browse Source 
https://github.com/user-attachments/assets/4be785e0-ea8a-4c8e-840e-6fa0a663d7ba

Closes #11938

---------

Co-authored-by: martmull <martmull@hotmail.fr>
This commit is contained in:
Abdul Rahman
2025-05-23 20:53:09 +05:30
committed by GitHub
parent 6ef9a3b4c9
commit af5762c8ba
37 changed files with 1867 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx
View File

@ -31,69 +31,71 @@ export const useCommandMenuSearchRecords = () => {
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const actionItems = useMemo(() => {
return (searchData?.search ?? []).map((searchRecord, index) => {
const baseAction = {
type: ActionType.Navigation,
scope: ActionScope.Global,
key: searchRecord.recordId,
label: searchRecord.label,
position: index,
Icon: () => (
<Avatar
type={
searchRecord.objectNameSingular === 'company'
? 'squared'
: 'rounded'
}
avatarUrl={searchRecord.imageUrl}
placeholderColorSeed={searchRecord.recordId}
placeholder={searchRecord.label}
/>
),
shouldBeRegistered: () => true,
description: capitalize(searchRecord.objectNameSingular),
shouldCloseCommandMenuOnClick: true,
};
return (searchData?.search.edges.map((edge) => edge.node) ?? []).map(
(searchRecord, index) => {
const baseAction = {
type: ActionType.Navigation,
scope: ActionScope.Global,
key: searchRecord.recordId,
label: searchRecord.label,
position: index,
Icon: () => (
<Avatar
type={
searchRecord.objectNameSingular === 'company'
? 'squared'
: 'rounded'
}
avatarUrl={searchRecord.imageUrl}
placeholderColorSeed={searchRecord.recordId}
placeholder={searchRecord.label}
/>
),
shouldBeRegistered: () => true,
description: capitalize(searchRecord.objectNameSingular),
shouldCloseCommandMenuOnClick: true,
};
if (
[CoreObjectNameSingular.Task, CoreObjectNameSingular.Note].includes(
searchRecord.objectNameSingular as CoreObjectNameSingular,
)
) {
return {
...baseAction,
component: (
<Action
onClick={() => {
searchRecord.objectNameSingular === 'task'
? openRecordInCommandMenu({
recordId: searchRecord.recordId,
objectNameSingular: CoreObjectNameSingular.Task,
})
: openRecordInCommandMenu({
recordId: searchRecord.recordId,
objectNameSingular: CoreObjectNameSingular.Note,
});
}}
preventCommandMenuClosing
/>
),
};
}
if (
[CoreObjectNameSingular.Task, CoreObjectNameSingular.Note].includes(
searchRecord.objectNameSingular as CoreObjectNameSingular,
)
) {
return {
...baseAction,
component: (
<Action
onClick={() => {
searchRecord.objectNameSingular === 'task'
? openRecordInCommandMenu({
recordId: searchRecord.recordId,
objectNameSingular: CoreObjectNameSingular.Task,
})
: openRecordInCommandMenu({
recordId: searchRecord.recordId,
objectNameSingular: CoreObjectNameSingular.Note,
});
<ActionLink
to={AppPath.RecordShowPage}
params={{
objectNameSingular: searchRecord.objectNameSingular,
objectRecordId: searchRecord.recordId,
}}
preventCommandMenuClosing
/>
),
};
}
return {
...baseAction,
component: (
<ActionLink
to={AppPath.RecordShowPage}
params={{
objectNameSingular: searchRecord.objectNameSingular,
objectRecordId: searchRecord.recordId,
}}
/>
),
};
});
},
);
}, [searchData, openRecordInCommandMenu]);
return {