Scroll to currently softfocus cell (#1008)

* - scroll to currently softfocus cell

* - moved useEffect to CellSoftFocus component
This commit is contained in:
brendanlaschke 2023-08-01 00:50:08 +02:00 committed by GitHub
parent f111440e00
commit 700b567320
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 2 deletions

View File

@ -1,8 +1,10 @@
import { Ref } from 'react';
import styled from '@emotion/styled';
type Props = {
softFocus?: boolean;
onClick?: () => void;
scrollRef?: Ref<HTMLDivElement>;
};
export const EditableCellDisplayModeOuterContainer = styled.div<
@ -37,6 +39,7 @@ export function EditableCellDisplayContainer({
children,
softFocus,
onClick,
scrollRef,
}: React.PropsWithChildren<Props>) {
return (
<EditableCellDisplayModeOuterContainer
@ -47,6 +50,7 @@ export function EditableCellDisplayContainer({
}
onClick={onClick}
softFocus={softFocus}
ref={scrollRef}
>
<EditableCellDisplayModeInnerContainer>
{children}

View File

@ -1,4 +1,4 @@
import { PropsWithChildren } from 'react';
import { PropsWithChildren, useEffect, useRef } from 'react';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
@ -13,6 +13,12 @@ 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();
}
@ -52,7 +58,11 @@ export function EditableCellSoftFocusMode({ children }: OwnProps) {
}
return (
<EditableCellDisplayContainer onClick={handleClick} softFocus>
<EditableCellDisplayContainer
onClick={handleClick}
softFocus
scrollRef={scrollRef}
>
{children}
</EditableCellDisplayContainer>
);