@venizia/ardor-react 0.4.7-5 → 0.4.7-7
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.
|
@@ -1,17 +1,31 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface IUseElementSizeOptions {
|
|
3
|
-
ref
|
|
3
|
+
/** The element to measure. Leave it out to measure the element the returned `ref` is given to. */
|
|
4
|
+
ref?: React.RefObject<Element | null>;
|
|
4
5
|
/** @default 'content-box' */
|
|
5
6
|
box?: 'content-box' | 'border-box';
|
|
7
|
+
/** Round width and height to whole pixels, so a fractional size does not render again. @default false */
|
|
8
|
+
round?: boolean;
|
|
6
9
|
}
|
|
7
10
|
export interface IUseElementSizeReturn {
|
|
8
11
|
width: number;
|
|
9
12
|
height: number;
|
|
13
|
+
/** `false` until the first size is read, so 0 by 0 can be told from a measured empty element. */
|
|
14
|
+
measured: boolean;
|
|
15
|
+
}
|
|
16
|
+
export interface IUseElementSizeRefReturn extends IUseElementSizeReturn {
|
|
17
|
+
ref: React.RefCallback<Element>;
|
|
10
18
|
}
|
|
11
19
|
/**
|
|
12
|
-
* The size of
|
|
13
|
-
*
|
|
14
|
-
*
|
|
20
|
+
* The size of an element, kept up to date by a `ResizeObserver` with one state update per animation
|
|
21
|
+
* frame. Pass `ref` to measure `ref.current`, or leave it out and give the returned `ref` to the
|
|
22
|
+
* element: that form follows an element mounted later or replaced. With a `ref` object the element
|
|
23
|
+
* is read when the effect runs, so it follows a new `ref`, `box` or `round`, not a `ref.current`
|
|
24
|
+
* that is replaced later; pass a stable `ref`. A new element, `box` or `round` starts again from
|
|
25
|
+
* 0 by 0 with `measured` false.
|
|
15
26
|
*/
|
|
16
|
-
export declare
|
|
27
|
+
export declare function useElementSize(opts: IUseElementSizeOptions & {
|
|
28
|
+
ref: React.RefObject<Element | null>;
|
|
29
|
+
}): IUseElementSizeReturn;
|
|
30
|
+
export declare function useElementSize(opts?: Omit<IUseElementSizeOptions, 'ref'>): IUseElementSizeRefReturn;
|
|
17
31
|
//# sourceMappingURL=use-element-size.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-element-size.d.ts","sourceRoot":"","sources":["../../src/hooks/use-element-size.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-element-size.d.ts","sourceRoot":"","sources":["../../src/hooks/use-element-size.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,sBAAsB;IACrC,kGAAkG;IAClG,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACtC,6BAA6B;IAC7B,GAAG,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;IACnC,yGAAyG;IACzG,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iGAAiG;IACjG,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;CACjC;AAmBD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,sBAAsB,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;CAAE,GACtE,qBAAqB,CAAC;AACzB,wBAAgB,cAAc,CAC5B,IAAI,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,GACzC,wBAAwB,CAAC"}
|
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
const ZERO_SIZE = { width: 0, height: 0 };
|
|
2
|
+
const ZERO_SIZE = { width: 0, height: 0, measured: false };
|
|
3
3
|
const readSize = (opts) => {
|
|
4
|
-
const { entry, box } = opts;
|
|
4
|
+
const { entry, box, round } = opts;
|
|
5
5
|
const border = box === 'border-box' ? entry.borderBoxSize?.[0] : undefined;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
const width = border ? border.inlineSize : entry.contentRect.width;
|
|
7
|
+
const height = border ? border.blockSize : entry.contentRect.height;
|
|
8
|
+
return round
|
|
9
|
+
? { width: Math.round(width), height: Math.round(height), measured: true }
|
|
10
|
+
: { width, height, measured: true };
|
|
9
11
|
};
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* `ref.current` that is replaced later. A new `ref` or `box` starts again from 0 by 0. Pass a stable `ref`.
|
|
14
|
-
*/
|
|
15
|
-
export const useElementSize = (opts) => {
|
|
16
|
-
const { ref, box = 'content-box' } = opts;
|
|
12
|
+
export function useElementSize(opts = {}) {
|
|
13
|
+
const { ref, box = 'content-box', round = false } = opts;
|
|
14
|
+
const [element, setElement] = React.useState(null);
|
|
17
15
|
const [size, setSize] = React.useState(ZERO_SIZE);
|
|
18
16
|
React.useEffect(() => {
|
|
19
|
-
setSize((current) =>
|
|
20
|
-
const
|
|
21
|
-
if (!
|
|
17
|
+
setSize((current) => (current.measured ? ZERO_SIZE : current));
|
|
18
|
+
const target = ref ? ref.current : element;
|
|
19
|
+
if (!target || typeof ResizeObserver === 'undefined') {
|
|
22
20
|
return () => { };
|
|
23
21
|
}
|
|
24
22
|
let frame;
|
|
@@ -33,20 +31,22 @@ export const useElementSize = (opts) => {
|
|
|
33
31
|
if (!latest) {
|
|
34
32
|
return;
|
|
35
33
|
}
|
|
36
|
-
const next = readSize({ entry: latest, box });
|
|
34
|
+
const next = readSize({ entry: latest, box, round });
|
|
37
35
|
setSize((current) => {
|
|
38
|
-
return current.width === next.width && current.height === next.height
|
|
36
|
+
return current.measured && current.width === next.width && current.height === next.height
|
|
37
|
+
? current
|
|
38
|
+
: next;
|
|
39
39
|
});
|
|
40
40
|
});
|
|
41
41
|
});
|
|
42
|
-
observer.observe(
|
|
42
|
+
observer.observe(target, { box });
|
|
43
43
|
return () => {
|
|
44
44
|
observer.disconnect();
|
|
45
45
|
if (frame !== undefined) {
|
|
46
46
|
cancelAnimationFrame(frame);
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
-
}, [ref, box]);
|
|
50
|
-
return size;
|
|
51
|
-
}
|
|
49
|
+
}, [ref, element, box, round]);
|
|
50
|
+
return ref ? size : { ...size, ref: setElement };
|
|
51
|
+
}
|
|
52
52
|
//# sourceMappingURL=use-element-size.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-element-size.js","sourceRoot":"","sources":["../../src/hooks/use-element-size.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-element-size.js","sourceRoot":"","sources":["../../src/hooks/use-element-size.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@venizia/ardor-react",
|
|
3
|
-
"version": "0.4.7-
|
|
3
|
+
"version": "0.4.7-7",
|
|
4
4
|
"description": "ARDOR React bindings - the application context, the injectable and logger hooks that read it, typed Redux hook factories, and the framework-agnostic UI hooks (debounce, autosave, confirm, clipboard, sizer, window dimensions). No react-admin.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ardor",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"prepublishOnly": "make rebuild"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@venizia/ardor-kernel": "0.4.7-
|
|
61
|
+
"@venizia/ardor-kernel": "0.4.7-7",
|
|
62
62
|
"lodash": "^4.18.1"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
@@ -69,11 +69,11 @@
|
|
|
69
69
|
"@types/bun": "^1.4.3",
|
|
70
70
|
"@types/lodash": "^4.17.27",
|
|
71
71
|
"@types/react": "^19",
|
|
72
|
-
"@venizia/dev-configs": "^0.4.7
|
|
73
|
-
"@venizia/ignis-filter": "^0.4.6
|
|
74
|
-
"@venizia/ignis-helpers": "^0.4.7
|
|
75
|
-
"@venizia/ignis-inversion": "^0.4.6
|
|
76
|
-
"@venizia/ignis-kernel": "^0.4.7
|
|
72
|
+
"@venizia/dev-configs": "^0.4.7",
|
|
73
|
+
"@venizia/ignis-filter": "^0.4.6",
|
|
74
|
+
"@venizia/ignis-helpers": "^0.4.7",
|
|
75
|
+
"@venizia/ignis-inversion": "^0.4.6",
|
|
76
|
+
"@venizia/ignis-kernel": "^0.4.7",
|
|
77
77
|
"eslint": "^10.13.0",
|
|
78
78
|
"oxlint": "1.89.0",
|
|
79
79
|
"oxlint-tsgolint": "7.0.2004",
|
|
@@ -86,10 +86,10 @@
|
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
88
|
"@reduxjs/toolkit": ">=2.13.0",
|
|
89
|
-
"@venizia/ignis-filter": "^0.4.6
|
|
90
|
-
"@venizia/ignis-helpers": "^0.4.7
|
|
91
|
-
"@venizia/ignis-inversion": "^0.4.6
|
|
92
|
-
"@venizia/ignis-kernel": "^0.4.7
|
|
89
|
+
"@venizia/ignis-filter": "^0.4.6",
|
|
90
|
+
"@venizia/ignis-helpers": "^0.4.7",
|
|
91
|
+
"@venizia/ignis-inversion": "^0.4.6",
|
|
92
|
+
"@venizia/ignis-kernel": "^0.4.7",
|
|
93
93
|
"react": ">=19.3.1",
|
|
94
94
|
"react-redux": ">=9.3.0",
|
|
95
95
|
"reflect-metadata": ">=0.2.2"
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"react",
|
|
112
112
|
"react-redux"
|
|
113
113
|
],
|
|
114
|
-
"limit": "2.
|
|
114
|
+
"limit": "2.55 KB"
|
|
115
115
|
}
|
|
116
116
|
],
|
|
117
117
|
"engines": {
|