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

Add contextMenu actions to calendar view (#15451)

Browse Source 
<img width="432" height="307" alt="Screenshot 2025-10-29 at 19 31 38"
src="https://github.com/user-attachments/assets/61965305-3a20-46de-b47f-7ac78cb1228c"
/>
This commit is contained in:
Weiko
2025-10-30 10:59:11 +01:00
committed by GitHub
parent 3401216cc8
commit 736fac021d
1 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx
+45 -5
View File
@@ -1,3 +1,6 @@
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { RecordCalendarCardCellEditModePortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal';
import { RecordCalendarCardCellHoveredPortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal';
import { RecordCalendarCardBody } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody';
@@ -5,8 +8,12 @@ import { RecordCalendarCardHeader } from '@/object-record/record-calendar/record
import { RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardClickOutsideId';
import { RecordCalendarCardComponentInstanceContext } from '@/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext';
import { isRecordCalendarCardSelectedComponentFamilyState } from '@/object-record/record-calendar/record-calendar-card/states/isRecordCalendarCardSelectedComponentFamilyState';
import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext';
import { RecordCard } from '@/object-record/record-card/components/RecordCard';
import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import styled from '@emotion/styled';
import { AnimatedEaseInOut } from 'twenty-ui/utilities';
@@ -27,18 +34,51 @@ export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
const { currentView } = useGetCurrentViewOnly();
const isCompactModeActive = currentView?.isCompact ?? false;
const isCurrentCardSelected = useRecoilComponentFamilyValue(
isRecordCalendarCardSelectedComponentFamilyState,
recordId,
const [isCurrentCardSelected, setIsCurrentCardSelected] =
useRecoilComponentFamilyState(
isRecordCalendarCardSelectedComponentFamilyState,
recordId,
);
const recordCalendarId = useAvailableComponentInstanceIdOrThrow(
RecordCalendarComponentInstanceContext,
);
const actionMenuId = getActionMenuIdFromRecordIndexId(recordCalendarId);
const actionMenuDropdownId =
getActionMenuDropdownIdFromActionMenuId(actionMenuId);
const setActionMenuDropdownPosition = useSetRecoilComponentState(
recordIndexActionMenuDropdownPositionComponentState,
actionMenuDropdownId,
);
const { openDropdown } = useOpenDropdown();
const handleContextMenuOpen = (event: React.MouseEvent) => {
event.preventDefault();
setIsCurrentCardSelected(true);
setActionMenuDropdownPosition({
x: event.clientX,
y: event.clientY,
});
openDropdown({
dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
globalHotkeysConfig: {
enableGlobalHotkeysWithModifiers: true,
enableGlobalHotkeysConflictingWithKeyboard: false,
},
});
};
return (
<RecordCalendarCardComponentInstanceContext.Provider
value={{
instanceId: recordId,
}}
>
<StyledContainer>
<StyledContainer onContextMenu={handleContextMenuOpen}>
<StyledRecordCard
data-selected={isCurrentCardSelected}
data-click-outside-id={RECORD_CALENDAR_CARD_CLICK_OUTSIDE_ID}