mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-18 09:02:11 +03:00
Scroll to currently softfocus cell (#1008)
* - scroll to currently softfocus cell * - moved useEffect to CellSoftFocus component
This commit is contained in:
parent
f111440e00
commit
700b567320
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user