scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 20:27:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: RightDrawer doesn't save context values when clickedOutside (#7729)

Browse Source 
## Description

- This PR fixes #7728 

## Changes


https://github.com/user-attachments/assets/1e66cab3-9009-4c01-9ac6-22651b0ff5e7

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Harshit Singh
2024-11-06 16:16:30 +05:30
committed by GitHub
parent 7f51eb8c3c
commit 18d04de676
3 changed files with 51 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
import { useRecordFieldInput } from '@/object-record/record-field/hooks/useRecordFieldInput';
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
// TODO: this should be better implemented if we refactor field input so that it's easier to implement logic like that
// Idea : maybe we could use draftValue instead of the newValue in the events
// Idea : we can remove all our listeners in the many input types and replace them with a onClose event that gives the event type
// (tab, shift-tab, click-outside, escape, enter) and the newValue, that will reduce the boilerplate
// and also the need to have our difficult to understand persist logic
// the goal would be that we could easily call usePersistField anywhere under a FieldContext and it would work
export const RightDrawerTitleRecordInlineCell = () => {
const { closeInlineCell } = useInlineCell();
const persistField = usePersistField();
const { recordId, fieldDefinition } = useContext(FieldContext);
const { getDraftValueSelector } = useRecordFieldInput<unknown>(
`${recordId}-${fieldDefinition.metadata.fieldName}`,
);
const draftValue = useRecoilValue(getDraftValueSelector());
useListenRightDrawerClose(() => {
persistField(draftValue);
closeInlineCell();
});
return <RecordInlineCell />;
};

6
packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx
View File

@@ -3,6 +3,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
import { RightDrawerTitleRecordInlineCell } from '@/object-record/record-right-drawer/components/RightDrawerTitleRecordInlineCell';
import { useRecordShowContainerActions } from '@/object-record/record-show/hooks/useRecordShowContainerActions';
import { useRecordShowContainerData } from '@/object-record/record-show/hooks/useRecordShowContainerData';
import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
@@ -18,6 +19,7 @@ type SummaryCardProps = {
isInRightDrawer: boolean;
};
// TODO: refactor all this hierarchy of right drawer / show page record to avoid drill down
export const SummaryCard = ({
objectNameSingular,
objectRecordId,
@@ -86,7 +88,11 @@ export const SummaryCard = ({
isCentered: !isMobile,
}}
>
{isInRightDrawer ? (
<RightDrawerTitleRecordInlineCell />
) : (
<RecordInlineCell readonly={isReadOnly} />
)}
</FieldContext.Provider>
}
avatarType={recordIdentifier?.avatarType ?? 'rounded'}

21
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
View File

@@ -1,3 +1,11 @@
import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState';
import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { ClickOutsideMode } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
@@ -9,15 +17,6 @@ import {
useSetRecoilState,
} from 'recoil';
import { Key } from 'ts-key-enum';
import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState';
import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { ClickOutsideMode } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { isDefined } from '~/utils/isDefined';
import { useRightDrawer } from '../hooks/useRightDrawer';
@@ -129,9 +128,9 @@ export const RightDrawer = () => {
if (isRightDrawerOpen && !isRightDrawerMinimized) {
set(rightDrawerCloseEventState, event);
closeRightDrawer();
emitRightDrawerCloseEvent();
closeRightDrawer();
}
},
[closeRightDrawer],