70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
import { PropsWithChildren, useEffect, useRef } from 'react';
|
|
|
|
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
|
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
|
|
|
|
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
|
|
import { useEditableCell } from '../hooks/useEditableCell';
|
|
|
|
import { EditableCellDisplayContainer } from './EditableCellContainer';
|
|
|
|
type OwnProps = PropsWithChildren<unknown>;
|
|
|
|
export function EditableCellSoftFocusMode({ children }: OwnProps) {
|
|
const { openEditableCell } = useEditableCell();
|
|
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
scrollRef.current?.scrollIntoView({ block: 'nearest' });
|
|
});
|
|
|
|
function openEditMode() {
|
|
openEditableCell();
|
|
}
|
|
|
|
useScopedHotkeys(
|
|
'enter',
|
|
() => {
|
|
openEditMode();
|
|
},
|
|
TableHotkeyScope.TableSoftFocus,
|
|
[openEditMode],
|
|
);
|
|
|
|
useScopedHotkeys(
|
|
'*',
|
|
(keyboardEvent) => {
|
|
const isWritingText =
|
|
!isNonTextWritingKey(keyboardEvent.key) &&
|
|
!keyboardEvent.ctrlKey &&
|
|
!keyboardEvent.metaKey;
|
|
|
|
if (!isWritingText) {
|
|
return;
|
|
}
|
|
|
|
openEditMode();
|
|
},
|
|
TableHotkeyScope.TableSoftFocus,
|
|
[openEditMode],
|
|
{
|
|
preventDefault: false,
|
|
},
|
|
);
|
|
|
|
function handleClick() {
|
|
openEditMode();
|
|
}
|
|
|
|
return (
|
|
<EditableCellDisplayContainer
|
|
onClick={handleClick}
|
|
softFocus
|
|
scrollRef={scrollRef}
|
|
>
|
|
{children}
|
|
</EditableCellDisplayContainer>
|
|
);
|
|
}
|