mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zooqueen
fb4e3df0e3
The product is branded Hanzo eSign (esign.hanzo.ai, repo hanzoai/esign). Rename all workspace packages @hanzo/sign-* → @hanzo/esign-* (1052 files) and align docker/Dockerfile turbo --scope/--filter to the actual remix package name @hanzo/esign (was a pre-existing mismatch with -remix that broke the build). Protected deps (@hanzo/insights, @hanzo/logo) untouched.
76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react';
|
|
|
|
import { getBoundingClientRect } from '@hanzo/esign-lib/client-only/get-bounding-client-rect';
|
|
|
|
export const useElementBounds = (elementOrSelector: HTMLElement | string, withScroll = false) => {
|
|
const [bounds, setBounds] = useState({
|
|
top: 0,
|
|
left: 0,
|
|
height: 0,
|
|
width: 0,
|
|
});
|
|
|
|
const calculateBounds = useCallback(() => {
|
|
const $el =
|
|
typeof elementOrSelector === 'string'
|
|
? document.querySelector<HTMLElement>(elementOrSelector)
|
|
: elementOrSelector;
|
|
|
|
if (!$el) {
|
|
return { top: 0, left: 0, width: 0, height: 0 };
|
|
}
|
|
|
|
if (withScroll) {
|
|
return getBoundingClientRect($el);
|
|
}
|
|
|
|
const { top, left, width, height } = $el.getBoundingClientRect();
|
|
|
|
return {
|
|
top,
|
|
left,
|
|
width,
|
|
height,
|
|
};
|
|
}, [elementOrSelector, withScroll]);
|
|
|
|
useEffect(() => {
|
|
setBounds(calculateBounds());
|
|
}, [calculateBounds]);
|
|
|
|
useEffect(() => {
|
|
const onResize = () => {
|
|
setBounds(calculateBounds());
|
|
};
|
|
|
|
window.addEventListener('resize', onResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', onResize);
|
|
};
|
|
}, [calculateBounds]);
|
|
|
|
useEffect(() => {
|
|
const $el =
|
|
typeof elementOrSelector === 'string'
|
|
? document.querySelector<HTMLElement>(elementOrSelector)
|
|
: elementOrSelector;
|
|
|
|
if (!$el) {
|
|
return;
|
|
}
|
|
|
|
const observer = new ResizeObserver(() => {
|
|
setBounds(calculateBounds());
|
|
});
|
|
|
|
observer.observe($el);
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, [elementOrSelector, calculateBounds]);
|
|
|
|
return bounds;
|
|
};
|