58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
import { useRecoilState } from 'recoil';
|
|
|
|
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
|
|
import { isNonTextWritingKey } from '@/utils/hotkeys/isNonTextWritingKey';
|
|
|
|
import { useEditableCell } from './hooks/useCloseEditableCell';
|
|
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
|
|
|
|
export function EditableCellSoftFocusMode({
|
|
children,
|
|
}: React.PropsWithChildren<unknown>) {
|
|
const { closeEditableCell, openEditableCell } = useEditableCell();
|
|
const [captureHotkeyTypeInFocus] = useRecoilState(
|
|
captureHotkeyTypeInFocusState,
|
|
);
|
|
|
|
useHotkeys(
|
|
'enter',
|
|
() => {
|
|
openEditableCell();
|
|
},
|
|
{
|
|
enableOnContentEditable: true,
|
|
enableOnFormTags: true,
|
|
preventDefault: true,
|
|
},
|
|
[closeEditableCell],
|
|
);
|
|
|
|
useHotkeys(
|
|
'*',
|
|
(keyboardEvent) => {
|
|
const isWritingText =
|
|
!isNonTextWritingKey(keyboardEvent.key) &&
|
|
!keyboardEvent.ctrlKey &&
|
|
!keyboardEvent.metaKey;
|
|
|
|
if (!isWritingText) {
|
|
return;
|
|
}
|
|
|
|
if (captureHotkeyTypeInFocus) {
|
|
return;
|
|
}
|
|
openEditableCell();
|
|
},
|
|
{
|
|
enableOnContentEditable: true,
|
|
enableOnFormTags: true,
|
|
preventDefault: false,
|
|
},
|
|
);
|
|
|
|
return <EditableCellDisplayMode>{children}</EditableCellDisplayMode>;
|
|
}
|