@mantine/hooks 6.0.18 → 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 +15 -18
- package/cjs/use-resize-observer/use-resize-observer.js.map +1 -1
- package/esm/use-resize-observer/use-resize-observer.js +16 -19
- package/esm/use-resize-observer/use-resize-observer.js.map +1 -1
- package/lib/use-resize-observer/use-resize-observer.d.ts +3 -2
- 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,
|
|
@@ -16,35 +17,31 @@ const defaultState = {
|
|
|
16
17
|
};
|
|
17
18
|
function useResizeObserver() {
|
|
18
19
|
const frameID = React.useRef(0);
|
|
20
|
+
const ref = React.useRef(null);
|
|
19
21
|
const [rect, setRect] = React.useState(defaultState);
|
|
20
22
|
const observer = React.useMemo(() => typeof window !== "undefined" ? new ResizeObserver((entries) => {
|
|
21
23
|
const entry = entries[0];
|
|
22
24
|
if (entry) {
|
|
23
25
|
cancelAnimationFrame(frameID.current);
|
|
24
26
|
frameID.current = requestAnimationFrame(() => {
|
|
25
|
-
|
|
27
|
+
if (ref.current) {
|
|
28
|
+
setRect(entry.contentRect);
|
|
29
|
+
}
|
|
26
30
|
});
|
|
27
31
|
}
|
|
28
32
|
}) : null, []);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
cleanup.current = void 0;
|
|
33
|
+
useIsomorphicEffect.useIsomorphicEffect(() => {
|
|
34
|
+
if (ref.current) {
|
|
35
|
+
observer.observe(ref.current);
|
|
36
|
+
setRect(ref.current.getBoundingClientRect());
|
|
34
37
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
if (
|
|
38
|
-
|
|
39
|
-
cleanup.current = () => {
|
|
40
|
-
observer.disconnect();
|
|
41
|
-
if (frameID.current) {
|
|
42
|
-
cancelAnimationFrame(frameID.current);
|
|
43
|
-
}
|
|
44
|
-
};
|
|
38
|
+
return () => {
|
|
39
|
+
observer.disconnect();
|
|
40
|
+
if (frameID.current) {
|
|
41
|
+
cancelAnimationFrame(frameID.current);
|
|
45
42
|
}
|
|
46
|
-
}
|
|
47
|
-
}, [
|
|
43
|
+
};
|
|
44
|
+
}, [ref.current]);
|
|
48
45
|
return [ref, rect];
|
|
49
46
|
}
|
|
50
47
|
function useElementSize() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useMemo, useRef, useState
|
|
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,
|
|
@@ -12,35 +13,31 @@ const defaultState = {
|
|
|
12
13
|
};
|
|
13
14
|
function useResizeObserver() {
|
|
14
15
|
const frameID = useRef(0);
|
|
16
|
+
const ref = useRef(null);
|
|
15
17
|
const [rect, setRect] = useState(defaultState);
|
|
16
18
|
const observer = useMemo(() => typeof window !== "undefined" ? new ResizeObserver((entries) => {
|
|
17
19
|
const entry = entries[0];
|
|
18
20
|
if (entry) {
|
|
19
21
|
cancelAnimationFrame(frameID.current);
|
|
20
22
|
frameID.current = requestAnimationFrame(() => {
|
|
21
|
-
|
|
23
|
+
if (ref.current) {
|
|
24
|
+
setRect(entry.contentRect);
|
|
25
|
+
}
|
|
22
26
|
});
|
|
23
27
|
}
|
|
24
28
|
}) : null, []);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
cleanup.current = void 0;
|
|
29
|
+
useIsomorphicEffect(() => {
|
|
30
|
+
if (ref.current) {
|
|
31
|
+
observer.observe(ref.current);
|
|
32
|
+
setRect(ref.current.getBoundingClientRect());
|
|
30
33
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if (
|
|
34
|
-
|
|
35
|
-
cleanup.current = () => {
|
|
36
|
-
observer.disconnect();
|
|
37
|
-
if (frameID.current) {
|
|
38
|
-
cancelAnimationFrame(frameID.current);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
34
|
+
return () => {
|
|
35
|
+
observer.disconnect();
|
|
36
|
+
if (frameID.current) {
|
|
37
|
+
cancelAnimationFrame(frameID.current);
|
|
41
38
|
}
|
|
42
|
-
}
|
|
43
|
-
}, [
|
|
39
|
+
};
|
|
40
|
+
}, [ref.current]);
|
|
44
41
|
return [ref, rect];
|
|
45
42
|
}
|
|
46
43
|
function useElementSize() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.js","sources":["../../src/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["import { useMemo, useRef, useState
|
|
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,7 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
|
|
2
|
-
export declare function useResizeObserver<T extends HTMLElement = any>(): readonly [(
|
|
3
|
+
export declare function useResizeObserver<T extends HTMLElement = any>(): readonly [import("react").MutableRefObject<T>, ObserverRect];
|
|
3
4
|
export declare function useElementSize<T extends HTMLElement = any>(): {
|
|
4
|
-
ref: (
|
|
5
|
+
ref: import("react").MutableRefObject<T>;
|
|
5
6
|
width: number;
|
|
6
7
|
height: number;
|
|
7
8
|
};
|
|
@@ -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"}
|