Hej, mam nastepujacy kod ktorego celem jest zmiana rozmiaru div
a:
export const EditorResizer = ({
targetId,
ref,
editor,
}: {
targetId: string;
editor: Editor;
ref: any;
}) => {
let resizerRef = useRef<HTMLDivElement>(null);
let currentPosition: number;
let mouseDown: boolean;
let lastClientY: number;
function touchMouseStart(e: any) {
e.preventDefault();
mouseDown = true;
if (e.touches) currentPosition = e.touches[0].clientY;
else currentPosition = e.clientY;
// lastClientY = document.getElementById(targetId)!.offsetHeight;
lastClientY = ref.current.offsetHeight;
}
function touchMouseEnd(e: any) {
e.preventDefault();
mouseDown = false;
// lastClientY = document.getElementById(targetId)!.offsetHeight;
lastClientY = ref.current.offsetHeight;
editor?.commands.focus();
}
function touchMouseMove(e: any) {
e.preventDefault();
if (!mouseDown) return;
if (e.touches) var position = e.touches[0].clientY;
else var position = e.clientY;
var diff = position - currentPosition;
// document.getElementById(targetId)!.style.height = lastClientY + diff + 'px';
ref.current.style.height = lastClientY + diff + 'px';
}
return (
<div
ref={resizerRef}
style={{
backgroundSize: '45px',
}}
className={`mr-0 h-[30px] w-full cursor-s-resize rounded-b-[6px] border-t-[1px] bg-muted bg-[url("/grabber-vertical.svg")] bg-center bg-no-repeat dark:bg-[#0a04040a] dark:bg-[url("/grabber-vertical-dark.svg")]`}
onPointerDown={(e: any) =>
resizerRef.current?.setPointerCapture(e.pointerId)
}
onPointerUp={(e: any) =>
resizerRef.current?.releasePointerCapture(e.pointerId)
}
onMouseDown={touchMouseStart}
onMouseUp={touchMouseEnd}
onTouchStart={touchMouseStart}
onTouchEnd={touchMouseEnd}
onTouchCancel={touchMouseEnd}
onClick={(e) => e.preventDefault()}
onTouchMove={touchMouseMove}
onMouseMove={touchMouseMove}
></div>
);
};
Wolam go tak:
return (
<div
className={cn(
'relative z-10 flex w-full flex-col rounded-[6px] border-[1px] border-border bg-background',
editorVariants({ className, variant })
)}
>
<MenuBar editor={editor!} />
<EditorContent
id='editor-content'
ref={editorContentRef}
editor={editor}
className='prose w-full flex-grow-[1] overflow-auto p-[12px] pt-[6px]'
onClick={() => editor?.commands.focus()}
style={{ height: height + 'px' }}
/>
{resizable && <EditorResizer ref={editorContentRef} editor={editor!} targetId='editor-content' />}
</div>
);
Wszytko dziala kiedy uzywam document.getElementById()
(zakomentowane linie), ale niestety nie dziala gdy uzywam ref
a ktory jest zawsze null
wewnatrz touchMouseStart()
. Co powinienem poprawic zeby nie byl null i zmiana rozmiaru dzialala?