Fix inline cell interactions (#11686)
@bosiraphael I've slightly updated [your recent pr](https://github.com/twentyhq/twenty/pull/11654) - before <img width="490" alt="Screenshot 2025-04-22 at 17 48 26" src="https://github.com/user-attachments/assets/604d65df-5433-4524-bdc5-6f5083b3c045" /> - after <img width="488" alt="Screenshot 2025-04-22 at 17 47 41" src="https://github.com/user-attachments/assets/21273372-538e-454e-947b-09373d9e0d6d" /> closes https://github.com/twentyhq/core-team-issues/issues/831 and https://github.com/twentyhq/core-team-issues/issues/828
This commit is contained in:
@ -15,6 +15,7 @@ import {
|
|||||||
} from '@/object-record/record-field/types/FieldMetadata';
|
} from '@/object-record/record-field/types/FieldMetadata';
|
||||||
import { isFieldRelationFromManyObjects } from '@/object-record/record-field/types/guards/isFieldRelationFromManyObjects';
|
import { isFieldRelationFromManyObjects } from '@/object-record/record-field/types/guards/isFieldRelationFromManyObjects';
|
||||||
import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
|
import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
|
||||||
|
import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
|
||||||
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
||||||
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
|
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
|
||||||
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
|
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
|
||||||
@ -30,7 +31,9 @@ export const useOpenFieldInputEditMode = () => {
|
|||||||
const { openActivityTargetCellEditMode } =
|
const { openActivityTargetCellEditMode } =
|
||||||
useOpenActivityTargetCellEditMode();
|
useOpenActivityTargetCellEditMode();
|
||||||
|
|
||||||
const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
|
const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope(
|
||||||
|
INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
|
||||||
|
);
|
||||||
|
|
||||||
const openFieldInput = useRecoilCallback(
|
const openFieldInput = useRecoilCallback(
|
||||||
({ snapshot }) =>
|
({ snapshot }) =>
|
||||||
|
|||||||
@ -44,7 +44,6 @@ const StyledLabelAndIconContainer = styled.div`
|
|||||||
const StyledValueContainer = styled.div<{ readonly: boolean }>`
|
const StyledValueContainer = styled.div<{ readonly: boolean }>`
|
||||||
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
|
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -80,7 +79,6 @@ const StyledInlineCellBaseContainer = styled.div`
|
|||||||
gap: ${({ theme }) => theme.spacing(1)};
|
gap: ${({ theme }) => theme.spacing(1)};
|
||||||
user-select: none;
|
user-select: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const StyledSkeletonDiv = styled.div`
|
export const StyledSkeletonDiv = styled.div`
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/uti
|
|||||||
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
|
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
|
||||||
import { useIsRecordReadOnly } from '@/object-record/record-field/hooks/useIsRecordReadOnly';
|
import { useIsRecordReadOnly } from '@/object-record/record-field/hooks/useIsRecordReadOnly';
|
||||||
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
|
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
|
||||||
|
import { isFieldValueReadOnly } from '@/object-record/record-field/utils/isFieldValueReadOnly';
|
||||||
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
|
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
|
||||||
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
|
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
|
||||||
import { PropertyBoxSkeletonLoader } from '@/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader';
|
import { PropertyBoxSkeletonLoader } from '@/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader';
|
||||||
@ -117,7 +118,12 @@ export const FieldsCard = ({
|
|||||||
}),
|
}),
|
||||||
useUpdateRecord: useUpdateOneObjectRecordMutation,
|
useUpdateRecord: useUpdateOneObjectRecordMutation,
|
||||||
isDisplayModeFixHeight: true,
|
isDisplayModeFixHeight: true,
|
||||||
isReadOnly: isRecordReadOnly,
|
isReadOnly: isFieldValueReadOnly({
|
||||||
|
objectNameSingular,
|
||||||
|
fieldName: fieldMetadataItem.name,
|
||||||
|
fieldType: fieldMetadataItem.type,
|
||||||
|
isRecordReadOnly,
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ActivityTargetsInlineCell
|
<ActivityTargetsInlineCell
|
||||||
@ -154,7 +160,12 @@ export const FieldsCard = ({
|
|||||||
}),
|
}),
|
||||||
useUpdateRecord: useUpdateOneObjectRecordMutation,
|
useUpdateRecord: useUpdateOneObjectRecordMutation,
|
||||||
isDisplayModeFixHeight: true,
|
isDisplayModeFixHeight: true,
|
||||||
isReadOnly: isRecordReadOnly,
|
isReadOnly: isFieldValueReadOnly({
|
||||||
|
objectNameSingular,
|
||||||
|
fieldName: fieldMetadataItem.name,
|
||||||
|
fieldType: fieldMetadataItem.type,
|
||||||
|
isRecordReadOnly,
|
||||||
|
}),
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<RecordFieldComponentInstanceContext.Provider
|
<RecordFieldComponentInstanceContext.Provider
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
|
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
|
||||||
import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
|
import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
|
||||||
|
import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
|
||||||
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
|
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
|
||||||
|
import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
|
||||||
|
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
|
||||||
import { Theme, withTheme } from '@emotion/react';
|
import { Theme, withTheme } from '@emotion/react';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import { isNonEmptyString } from '@sniptt/guards';
|
import { isNonEmptyString } from '@sniptt/guards';
|
||||||
@ -42,8 +45,18 @@ export const RecordTitleFullNameFieldDisplay = () => {
|
|||||||
.join(' ')
|
.join(' ')
|
||||||
.trim();
|
.trim();
|
||||||
|
|
||||||
|
const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope(
|
||||||
|
INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<StyledDiv onClick={() => openInlineCell()}>
|
<StyledDiv
|
||||||
|
onClick={() => {
|
||||||
|
setHotkeyScopeAndMemorizePreviousScope(
|
||||||
|
TitleInputHotkeyScope.TitleFullNameInput,
|
||||||
|
);
|
||||||
|
openInlineCell();
|
||||||
|
}}
|
||||||
|
>
|
||||||
{!content ? (
|
{!content ? (
|
||||||
<StyledEmptyText>Untitled</StyledEmptyText>
|
<StyledEmptyText>Untitled</StyledEmptyText>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
export enum TitleInputHotkeyScope {
|
export enum TitleInputHotkeyScope {
|
||||||
TitleInput = 'title-input',
|
TitleInput = 'title-input',
|
||||||
|
TitleFullNameInput = 'title-full-name-input',
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user