Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 04:48:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(component): helper function observeResize to observe size change via global ResizeObserver (#7241)

Browse Source 
```ts
import { observeResize } from "@affine/component";

useEffect(() => {
  const dispose = observeResize(element entry => {
    console.log(entry.contentRect);
  });

  return () => dispose();
}, []);
```
This commit is contained in:
CatsJuice
2024-06-19 09:04:56 +00:00
parent be36e033f2
commit 98e35384a6
5 changed files with 83 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.tsx
View File

@@ -1,4 +1,4 @@
import { Button, IconButton } from '@affine/component';
import { Button, IconButton, observeResize } from '@affine/component';
import {
ArrowDownSmallIcon,
ArrowUpSmallIcon,
@@ -63,13 +63,7 @@ const CanvasText = ({
return;
}
drawText(canvas, text);
const resizeObserver = new ResizeObserver(() => {
drawText(canvas, text);
});
resizeObserver.observe(canvas);
return () => {
resizeObserver.disconnect();
};
return observeResize(canvas, () => drawText(canvas, text));
}, [text]);
return <canvas className={className} ref={ref} />;