twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-26 05:24:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix unclosable cell (#5776)

Browse Source 
In some cases we couldn't open a table cell if the soft focus was still
on another.
This commit is contained in:
Lucas Bordeau 2024-06-09 00:10:18 +02:00 committed by GitHub
parent 32804ec296
commit d4610774fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
View File

@ -6,6 +6,7 @@ import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
@ -37,6 +38,7 @@ export const RecordTableCellContainer = ({
editHotkeyScope,
}: RecordTableCellContainerProps) => {
const { setIsFocused } = useFieldFocus();
const { openTableCell } = useOpenRecordTableCellFromCell();
const { isSelected, recordId, isPendingRow } = useContext(
RecordTableRowContext,
@ -71,6 +73,12 @@ export const RecordTableCellContainer = ({
setIsHovered(false);
};
const handleContainerClick = () => {
if (!hasSoftFocus) {
openTableCell();
}
};
useEffect(() => {
const customEventListener = (event: any) => {
const newHasSoftFocus = event.detail;
@ -129,6 +137,7 @@ export const RecordTableCellContainer = ({
onMouseEnter={handleContainerMouseEnter}
onMouseLeave={handleContainerMouseLeave}
onMouseMove={handleContainerMouseEnter}
onClick={handleContainerClick}
className={clsx({
[styles.cellBaseContainer]: true,
[styles.cellBaseContainerSoftFocus]: hasSoftFocus,

17
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
View File

@ -11,11 +11,14 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie
import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useCloseCurrentTableCellInEditMode } from '@/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode';
import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { isDefined } from '~/utils/isDefined';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@ -32,7 +35,7 @@ export const RecordTableCellSoftFocusMode = ({
nonEditModeContent,
}: RecordTableCellSoftFocusModeProps) => {
const { columnIndex } = useContext(RecordTableCellContext);
const closeCurrentTableCell = useCloseCurrentTableCellInEditMode();
const { isReadOnly } = useContext(RecordTableRowContext);
const { openTableCell } = useOpenRecordTableCellFromCell();
@ -127,6 +130,18 @@ export const RecordTableCellSoftFocusMode = ({
*/
};
const { column, row } = useCurrentTableCellPosition();
useListenClickOutside({
refs: [scrollRef],
callback: () => {
closeCurrentTableCell();
document.dispatchEvent(
new CustomEvent(`soft-focus-move-${row}:${column}`, { detail: false }),
);
},
});
const isFirstColumn = columnIndex === 0;
const customButtonIcon = useGetButtonIcon();
const buttonIcon = isFirstColumn