@mantine/hooks 6.0.17 → 6.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/use-resize-observer/use-resize-observer.js +3 -1
- package/cjs/use-resize-observer/use-resize-observer.js.map +1 -1
- package/esm/use-resize-observer/use-resize-observer.js +4 -2
- package/esm/use-resize-observer/use-resize-observer.js.map +1 -1
- package/lib/use-resize-observer/use-resize-observer.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var useIsomorphicEffect = require('../use-isomorphic-effect/use-isomorphic-effect.js');
|
|
6
7
|
|
|
7
8
|
const defaultState = {
|
|
8
9
|
x: 0,
|
|
@@ -29,9 +30,10 @@ function useResizeObserver() {
|
|
|
29
30
|
});
|
|
30
31
|
}
|
|
31
32
|
}) : null, []);
|
|
32
|
-
|
|
33
|
+
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
33
34
|
if (ref.current) {
|
|
34
35
|
observer.observe(ref.current);
|
|
36
|
+
setRect(ref.current.getBoundingClientRect());
|
|
35
37
|
}
|
|
36
38
|
return () => {
|
|
37
39
|
observer.disconnect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useMemo, useRef, useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n typeof window !== 'undefined'\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useIsomorphicEffect(() => {\n if (ref.current) {\n observer.observe(ref.current);\n setRect(ref.current.getBoundingClientRect());\n }\n\n return () => {\n observer.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":["useRef","useState","useMemo","useIsomorphicEffect"],"mappings":";;;;;;;AAEA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACK,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAGA,YAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGC,cAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAGC,aAAO,CAAC,MAAM,OAAO,MAAM,KAAK,WAAW,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AACjG,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC7B,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC5C,MAAM,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACpD,QAAQ,IAAI,GAAG,CAAC,OAAO,EAAE;AACzB,UAAU,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;AACjB,EAAEC,uCAAmB,CAAC,MAAM;AAC5B,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,MAAM,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACnD,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AAC5B,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,CAAC;AACvD,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAChC;;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { useRef, useState, useMemo
|
|
1
|
+
import { useRef, useState, useMemo } from 'react';
|
|
2
|
+
import { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect.js';
|
|
2
3
|
|
|
3
4
|
const defaultState = {
|
|
4
5
|
x: 0,
|
|
@@ -25,9 +26,10 @@ function useResizeObserver() {
|
|
|
25
26
|
});
|
|
26
27
|
}
|
|
27
28
|
}) : null, []);
|
|
28
|
-
|
|
29
|
+
useIsomorphicEffect(() => {
|
|
29
30
|
if (ref.current) {
|
|
30
31
|
observer.observe(ref.current);
|
|
32
|
+
setRect(ref.current.getBoundingClientRect());
|
|
31
33
|
}
|
|
32
34
|
return () => {
|
|
33
35
|
observer.disconnect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useMemo, useRef, useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\ntype ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;\n\nconst defaultState: ObserverRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n};\n\nexport function useResizeObserver<T extends HTMLElement = any>() {\n const frameID = useRef(0);\n const ref = useRef<T>(null);\n\n const [rect, setRect] = useState<ObserverRect>(defaultState);\n\n const observer = useMemo(\n () =>\n typeof window !== 'undefined'\n ? new ResizeObserver((entries: any) => {\n const entry = entries[0];\n if (entry) {\n cancelAnimationFrame(frameID.current);\n\n frameID.current = requestAnimationFrame(() => {\n if (ref.current) {\n setRect(entry.contentRect);\n }\n });\n }\n })\n : null,\n []\n );\n\n useIsomorphicEffect(() => {\n if (ref.current) {\n observer.observe(ref.current);\n setRect(ref.current.getBoundingClientRect());\n }\n\n return () => {\n observer.disconnect();\n\n if (frameID.current) {\n cancelAnimationFrame(frameID.current);\n }\n };\n }, [ref.current]);\n\n return [ref, rect] as const;\n}\nexport function useElementSize<T extends HTMLElement = any>() {\n const [ref, { width, height }] = useResizeObserver<T>();\n return { ref, width, height };\n}\n"],"names":[],"mappings":";;;AAEA,MAAM,YAAY,GAAG;AACrB,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,CAAC,EAAE,CAAC;AACN,EAAE,KAAK,EAAE,CAAC;AACV,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,GAAG,EAAE,CAAC;AACR,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,EAAE,CAAC;AACX,EAAE,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AACK,SAAS,iBAAiB,GAAG;AACpC,EAAE,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5B,EAAE,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,EAAE,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,OAAO,MAAM,KAAK,WAAW,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAK;AACjG,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;AAC7B,IAAI,IAAI,KAAK,EAAE;AACf,MAAM,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC5C,MAAM,OAAO,CAAC,OAAO,GAAG,qBAAqB,CAAC,MAAM;AACpD,QAAQ,IAAI,GAAG,CAAC,OAAO,EAAE;AACzB,UAAU,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;AACjB,EAAE,mBAAmB,CAAC,MAAM;AAC5B,IAAI,IAAI,GAAG,CAAC,OAAO,EAAE;AACrB,MAAM,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,MAAM,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACnD,KAAK;AACL,IAAI,OAAO,MAAM;AACjB,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AAC5B,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;AAC3B,QAAQ,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC9C,OAAO;AACP,KAAK,CAAC;AACN,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACpB,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AACrB,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,CAAC;AACvD,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAChC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"names":[],"mappings":";AAGA,KAAK,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;AAapD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,kEAyC5D;AACD,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG;;;;EAGzD"}
|