@fluentui/react-message-bar 9.2.18 → 9.2.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/CHANGELOG.md +11 -2
- package/lib/components/MessageBar/useMessageBarReflow.js +62 -64
- package/lib/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js +61 -63
- package/lib-commonjs/components/MessageBar/useMessageBarReflow.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-message-bar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 19 Dec 2024 14:30:31 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.19)
|
|
8
|
+
|
|
9
|
+
Thu, 19 Dec 2024 14:30:31 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.18..@fluentui/react-message-bar_v9.2.19)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: MessageBar auto reflow should handle document reflow with `min-content` ([PR #33409](https://github.com/microsoft/fluentui/pull/33409) by lingfangao@hotmail.com)
|
|
15
|
+
|
|
7
16
|
## [9.2.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-message-bar_v9.2.18)
|
|
8
17
|
|
|
9
|
-
Mon, 16 Dec 2024 16:
|
|
18
|
+
Mon, 16 Dec 2024 16:26:49 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-message-bar_v9.2.17..@fluentui/react-message-bar_v9.2.18)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -1,83 +1,81 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
|
-
import {
|
|
3
|
+
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
4
4
|
export function useMessageBarReflow(enabled = false) {
|
|
5
5
|
const { targetDocument } = useFluent();
|
|
6
|
-
const forceUpdate = React.useReducer(()=>({}), {})[1];
|
|
7
|
-
const reflowingRef = React.useRef(false);
|
|
8
|
-
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
9
|
-
const resizeObserverRef = React.useRef(null);
|
|
10
6
|
const prevInlineSizeRef = React.useRef(-1);
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
console.error([
|
|
18
|
-
'useMessageBarReflow: Resize observer should only have one entry. ',
|
|
19
|
-
'If multiple entries are observed, the first entry will be used.',
|
|
20
|
-
'This is a bug, please report it to the Fluent UI team.'
|
|
21
|
-
].join(' '));
|
|
22
|
-
}
|
|
23
|
-
const entry = entries[0];
|
|
24
|
-
var _entry_borderBoxSize__inlineSize;
|
|
25
|
-
// `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
|
|
26
|
-
const inlineSize = (_entry_borderBoxSize__inlineSize = entry === null || entry === void 0 ? void 0 : (_entry_borderBoxSize = entry.borderBoxSize) === null || _entry_borderBoxSize === void 0 ? void 0 : (_entry_borderBoxSize_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _entry_borderBoxSize__inlineSize !== void 0 ? _entry_borderBoxSize__inlineSize : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
|
|
27
|
-
if (inlineSize === undefined || !entry) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
const { target } = entry;
|
|
31
|
-
if (!isHTMLElement(target)) {
|
|
7
|
+
const messageBarRef = React.useRef(null);
|
|
8
|
+
const [reflowing, setReflowing] = React.useState(false);
|
|
9
|
+
// This layout effect 'sanity checks' what observers have done
|
|
10
|
+
// since DOM has not been flushed when observers run
|
|
11
|
+
useIsomorphicLayoutEffect(()=>{
|
|
12
|
+
if (!messageBarRef.current) {
|
|
32
13
|
return;
|
|
33
14
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
// Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
|
|
38
|
-
if (reflowingRef.current) {
|
|
39
|
-
if (prevInlineSizeRef.current < inlineSize) {
|
|
40
|
-
nextReflowing = false;
|
|
41
|
-
}
|
|
42
|
-
} else {
|
|
43
|
-
const scrollWidth = target.scrollWidth;
|
|
44
|
-
if (inlineSize < scrollWidth) {
|
|
45
|
-
nextReflowing = true;
|
|
15
|
+
setReflowing((prevReflowing)=>{
|
|
16
|
+
if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {
|
|
17
|
+
return true;
|
|
46
18
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
|
|
50
|
-
reflowingRef.current = nextReflowing;
|
|
51
|
-
forceUpdate();
|
|
52
|
-
}
|
|
19
|
+
return prevReflowing;
|
|
20
|
+
});
|
|
53
21
|
}, [
|
|
54
|
-
|
|
22
|
+
reflowing
|
|
55
23
|
]);
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
24
|
+
const handleResize = React.useCallback(()=>{
|
|
25
|
+
if (!messageBarRef.current) {
|
|
59
26
|
return;
|
|
60
27
|
}
|
|
61
|
-
|
|
62
|
-
const
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
28
|
+
const inlineSize = messageBarRef.current.getBoundingClientRect().width;
|
|
29
|
+
const scrollWidth = messageBarRef.current.scrollWidth;
|
|
30
|
+
const expanding = prevInlineSizeRef.current < inlineSize;
|
|
31
|
+
const overflowing = inlineSize < scrollWidth;
|
|
32
|
+
setReflowing(!expanding || overflowing);
|
|
33
|
+
}, []);
|
|
34
|
+
const handleIntersection = React.useCallback((entries)=>{
|
|
35
|
+
if (entries[0].intersectionRatio < 1) {
|
|
36
|
+
setReflowing(true);
|
|
37
|
+
}
|
|
38
|
+
}, []);
|
|
39
|
+
const ref = React.useMemo(()=>{
|
|
40
|
+
let resizeObserver = null;
|
|
41
|
+
let intersectionObserer = null;
|
|
42
|
+
return (el)=>{
|
|
43
|
+
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
44
|
+
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
45
|
+
intersectionObserer === null || intersectionObserer === void 0 ? void 0 : intersectionObserer.disconnect();
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
messageBarRef.current = el;
|
|
49
|
+
const win = targetDocument.defaultView;
|
|
50
|
+
resizeObserver = new win.ResizeObserver(handleResize);
|
|
51
|
+
intersectionObserer = new win.IntersectionObserver(handleIntersection, {
|
|
52
|
+
threshold: 1
|
|
53
|
+
});
|
|
54
|
+
intersectionObserer.observe(el);
|
|
55
|
+
resizeObserver.observe(el, {
|
|
56
|
+
box: 'border-box'
|
|
57
|
+
});
|
|
58
|
+
};
|
|
68
59
|
}, [
|
|
69
|
-
targetDocument,
|
|
70
60
|
handleResize,
|
|
71
|
-
|
|
61
|
+
handleIntersection,
|
|
62
|
+
enabled,
|
|
63
|
+
targetDocument
|
|
72
64
|
]);
|
|
73
|
-
React.useEffect(()=>{
|
|
74
|
-
return ()=>{
|
|
75
|
-
var _resizeObserverRef_current;
|
|
76
|
-
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
|
|
77
|
-
};
|
|
78
|
-
}, []);
|
|
79
65
|
return {
|
|
80
66
|
ref,
|
|
81
|
-
reflowing
|
|
67
|
+
reflowing
|
|
82
68
|
};
|
|
83
69
|
}
|
|
70
|
+
const isReflowing = (el)=>{
|
|
71
|
+
return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);
|
|
72
|
+
};
|
|
73
|
+
const isFullyInViewport = (el)=>{
|
|
74
|
+
const rect = el.getBoundingClientRect();
|
|
75
|
+
const doc = el.ownerDocument;
|
|
76
|
+
const win = doc.defaultView;
|
|
77
|
+
if (!win) {
|
|
78
|
+
return true;
|
|
79
|
+
}
|
|
80
|
+
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) && rect.right <= (win.innerWidth || doc.documentElement.clientWidth);
|
|
81
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n const { targetDocument } = useFluent();\n const prevInlineSizeRef = React.useRef(-1);\n const messageBarRef = React.useRef<HTMLElement | null>(null);\n\n const [reflowing, setReflowing] = React.useState(false);\n\n // This layout effect 'sanity checks' what observers have done\n // since DOM has not been flushed when observers run\n useIsomorphicLayoutEffect(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n setReflowing(prevReflowing => {\n if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {\n return true;\n }\n\n return prevReflowing;\n });\n }, [reflowing]);\n\n const handleResize: ResizeObserverCallback = React.useCallback(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n const inlineSize = messageBarRef.current.getBoundingClientRect().width;\n const scrollWidth = messageBarRef.current.scrollWidth;\n\n const expanding = prevInlineSizeRef.current < inlineSize;\n const overflowing = inlineSize < scrollWidth;\n\n setReflowing(!expanding || overflowing);\n }, []);\n\n const handleIntersection: IntersectionObserverCallback = React.useCallback(entries => {\n if (entries[0].intersectionRatio < 1) {\n setReflowing(true);\n }\n }, []);\n\n const ref = React.useMemo(() => {\n let resizeObserver: ResizeObserver | null = null;\n let intersectionObserer: IntersectionObserver | null = null;\n\n return (el: HTMLElement | null) => {\n if (!enabled || !el || !targetDocument?.defaultView) {\n resizeObserver?.disconnect();\n intersectionObserer?.disconnect();\n return;\n }\n\n messageBarRef.current = el;\n\n const win = targetDocument.defaultView;\n resizeObserver = new win.ResizeObserver(handleResize);\n intersectionObserer = new win.IntersectionObserver(handleIntersection, { threshold: 1 });\n\n intersectionObserer.observe(el);\n resizeObserver.observe(el, { box: 'border-box' });\n };\n }, [handleResize, handleIntersection, enabled, targetDocument]);\n\n return { ref, reflowing };\n}\n\nconst isReflowing = (el: HTMLElement) => {\n return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);\n};\n\nconst isFullyInViewport = (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const doc = el.ownerDocument;\n const win = doc.defaultView;\n\n if (!win) {\n return true;\n }\n\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&\n rect.right <= (win.innerWidth || doc.documentElement.clientWidth)\n );\n};\n"],"names":["React","useFluent_unstable","useFluent","useIsomorphicLayoutEffect","useMessageBarReflow","enabled","targetDocument","prevInlineSizeRef","useRef","messageBarRef","reflowing","setReflowing","useState","current","prevReflowing","isReflowing","handleResize","useCallback","inlineSize","getBoundingClientRect","width","scrollWidth","expanding","overflowing","handleIntersection","entries","intersectionRatio","ref","useMemo","resizeObserver","intersectionObserer","el","defaultView","disconnect","win","ResizeObserver","IntersectionObserver","threshold","observe","box","offsetWidth","isFullyInViewport","rect","doc","ownerDocument","top","left","bottom","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,OAAO,SAASC,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGJ;IAC3B,MAAMK,oBAAoBP,MAAMQ,MAAM,CAAC,CAAC;IACxC,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAqB;IAEvD,MAAM,CAACE,WAAWC,aAAa,GAAGX,MAAMY,QAAQ,CAAC;IAEjD,8DAA8D;IAC9D,oDAAoD;IACpDT,0BAA0B;QACxB,IAAI,CAACM,cAAcI,OAAO,EAAE;YAC1B;QACF;QAEAF,aAAaG,CAAAA;YACX,IAAI,CAACA,iBAAiBL,cAAcI,OAAO,IAAIE,YAAYN,cAAcI,OAAO,GAAG;gBACjF,OAAO;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACJ;KAAU;IAEd,MAAMM,eAAuChB,MAAMiB,WAAW,CAAC;QAC7D,IAAI,CAACR,cAAcI,OAAO,EAAE;YAC1B;QACF;QAEA,MAAMK,aAAaT,cAAcI,OAAO,CAACM,qBAAqB,GAAGC,KAAK;QACtE,MAAMC,cAAcZ,cAAcI,OAAO,CAACQ,WAAW;QAErD,MAAMC,YAAYf,kBAAkBM,OAAO,GAAGK;QAC9C,MAAMK,cAAcL,aAAaG;QAEjCV,aAAa,CAACW,aAAaC;IAC7B,GAAG,EAAE;IAEL,MAAMC,qBAAmDxB,MAAMiB,WAAW,CAACQ,CAAAA;QACzE,IAAIA,OAAO,CAAC,EAAE,CAACC,iBAAiB,GAAG,GAAG;YACpCf,aAAa;QACf;IACF,GAAG,EAAE;IAEL,MAAMgB,MAAM3B,MAAM4B,OAAO,CAAC;QACxB,IAAIC,iBAAwC;QAC5C,IAAIC,sBAAmD;QAEvD,OAAO,CAACC;YACN,IAAI,CAAC1B,WAAW,CAAC0B,MAAM,EAACzB,2BAAAA,qCAAAA,eAAgB0B,WAAW,GAAE;gBACnDH,2BAAAA,qCAAAA,eAAgBI,UAAU;gBAC1BH,gCAAAA,0CAAAA,oBAAqBG,UAAU;gBAC/B;YACF;YAEAxB,cAAcI,OAAO,GAAGkB;YAExB,MAAMG,MAAM5B,eAAe0B,WAAW;YACtCH,iBAAiB,IAAIK,IAAIC,cAAc,CAACnB;YACxCc,sBAAsB,IAAII,IAAIE,oBAAoB,CAACZ,oBAAoB;gBAAEa,WAAW;YAAE;YAEtFP,oBAAoBQ,OAAO,CAACP;YAC5BF,eAAeS,OAAO,CAACP,IAAI;gBAAEQ,KAAK;YAAa;QACjD;IACF,GAAG;QAACvB;QAAcQ;QAAoBnB;QAASC;KAAe;IAE9D,OAAO;QAAEqB;QAAKjB;IAAU;AAC1B;AAEA,MAAMK,cAAc,CAACgB;IACnB,OAAOA,GAAGV,WAAW,GAAGU,GAAGS,WAAW,IAAI,CAACC,kBAAkBV;AAC/D;AAEA,MAAMU,oBAAoB,CAACV;IACzB,MAAMW,OAAOX,GAAGZ,qBAAqB;IACrC,MAAMwB,MAAMZ,GAAGa,aAAa;IAC5B,MAAMV,MAAMS,IAAIX,WAAW;IAE3B,IAAI,CAACE,KAAK;QACR,OAAO;IACT;IAEA,OACEQ,KAAKG,GAAG,IAAI,KACZH,KAAKI,IAAI,IAAI,KACbJ,KAAKK,MAAM,IAAKb,CAAAA,IAAIc,WAAW,IAAIL,IAAIM,eAAe,CAACC,YAAY,AAAD,KAClER,KAAKS,KAAK,IAAKjB,CAAAA,IAAIkB,UAAU,IAAIT,IAAIM,eAAe,CAACI,WAAW,AAAD;AAEnE"}
|
|
@@ -14,81 +14,79 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
15
|
function useMessageBarReflow(enabled = false) {
|
|
16
16
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
17
|
-
const forceUpdate = _react.useReducer(()=>({}), {})[1];
|
|
18
|
-
const reflowingRef = _react.useRef(false);
|
|
19
|
-
// TODO: exclude types from this lint rule: https://github.com/microsoft/fluentui/issues/31286
|
|
20
|
-
const resizeObserverRef = _react.useRef(null);
|
|
21
17
|
const prevInlineSizeRef = _react.useRef(-1);
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
console.error([
|
|
29
|
-
'useMessageBarReflow: Resize observer should only have one entry. ',
|
|
30
|
-
'If multiple entries are observed, the first entry will be used.',
|
|
31
|
-
'This is a bug, please report it to the Fluent UI team.'
|
|
32
|
-
].join(' '));
|
|
33
|
-
}
|
|
34
|
-
const entry = entries[0];
|
|
35
|
-
var _entry_borderBoxSize__inlineSize;
|
|
36
|
-
// `borderBoxSize` is not supported before Chrome 84, Firefox 92, nor Safari 15.4
|
|
37
|
-
const inlineSize = (_entry_borderBoxSize__inlineSize = entry === null || entry === void 0 ? void 0 : (_entry_borderBoxSize = entry.borderBoxSize) === null || _entry_borderBoxSize === void 0 ? void 0 : (_entry_borderBoxSize_ = _entry_borderBoxSize[0]) === null || _entry_borderBoxSize_ === void 0 ? void 0 : _entry_borderBoxSize_.inlineSize) !== null && _entry_borderBoxSize__inlineSize !== void 0 ? _entry_borderBoxSize__inlineSize : entry === null || entry === void 0 ? void 0 : entry.target.getBoundingClientRect().width;
|
|
38
|
-
if (inlineSize === undefined || !entry) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
const { target } = entry;
|
|
42
|
-
if (!(0, _reactutilities.isHTMLElement)(target)) {
|
|
18
|
+
const messageBarRef = _react.useRef(null);
|
|
19
|
+
const [reflowing, setReflowing] = _react.useState(false);
|
|
20
|
+
// This layout effect 'sanity checks' what observers have done
|
|
21
|
+
// since DOM has not been flushed when observers run
|
|
22
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
23
|
+
if (!messageBarRef.current) {
|
|
43
24
|
return;
|
|
44
25
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
// Will cause flickering when size is being adjusted gradually (i.e. drag) - but this should not be a common case
|
|
49
|
-
if (reflowingRef.current) {
|
|
50
|
-
if (prevInlineSizeRef.current < inlineSize) {
|
|
51
|
-
nextReflowing = false;
|
|
52
|
-
}
|
|
53
|
-
} else {
|
|
54
|
-
const scrollWidth = target.scrollWidth;
|
|
55
|
-
if (inlineSize < scrollWidth) {
|
|
56
|
-
nextReflowing = true;
|
|
26
|
+
setReflowing((prevReflowing)=>{
|
|
27
|
+
if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {
|
|
28
|
+
return true;
|
|
57
29
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
if (typeof nextReflowing !== 'undefined' && reflowingRef.current !== nextReflowing) {
|
|
61
|
-
reflowingRef.current = nextReflowing;
|
|
62
|
-
forceUpdate();
|
|
63
|
-
}
|
|
30
|
+
return prevReflowing;
|
|
31
|
+
});
|
|
64
32
|
}, [
|
|
65
|
-
|
|
33
|
+
reflowing
|
|
66
34
|
]);
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
35
|
+
const handleResize = _react.useCallback(()=>{
|
|
36
|
+
if (!messageBarRef.current) {
|
|
70
37
|
return;
|
|
71
38
|
}
|
|
72
|
-
|
|
73
|
-
const
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
39
|
+
const inlineSize = messageBarRef.current.getBoundingClientRect().width;
|
|
40
|
+
const scrollWidth = messageBarRef.current.scrollWidth;
|
|
41
|
+
const expanding = prevInlineSizeRef.current < inlineSize;
|
|
42
|
+
const overflowing = inlineSize < scrollWidth;
|
|
43
|
+
setReflowing(!expanding || overflowing);
|
|
44
|
+
}, []);
|
|
45
|
+
const handleIntersection = _react.useCallback((entries)=>{
|
|
46
|
+
if (entries[0].intersectionRatio < 1) {
|
|
47
|
+
setReflowing(true);
|
|
48
|
+
}
|
|
49
|
+
}, []);
|
|
50
|
+
const ref = _react.useMemo(()=>{
|
|
51
|
+
let resizeObserver = null;
|
|
52
|
+
let intersectionObserer = null;
|
|
53
|
+
return (el)=>{
|
|
54
|
+
if (!enabled || !el || !(targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView)) {
|
|
55
|
+
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
56
|
+
intersectionObserer === null || intersectionObserer === void 0 ? void 0 : intersectionObserer.disconnect();
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
messageBarRef.current = el;
|
|
60
|
+
const win = targetDocument.defaultView;
|
|
61
|
+
resizeObserver = new win.ResizeObserver(handleResize);
|
|
62
|
+
intersectionObserer = new win.IntersectionObserver(handleIntersection, {
|
|
63
|
+
threshold: 1
|
|
64
|
+
});
|
|
65
|
+
intersectionObserer.observe(el);
|
|
66
|
+
resizeObserver.observe(el, {
|
|
67
|
+
box: 'border-box'
|
|
68
|
+
});
|
|
69
|
+
};
|
|
79
70
|
}, [
|
|
80
|
-
targetDocument,
|
|
81
71
|
handleResize,
|
|
82
|
-
|
|
72
|
+
handleIntersection,
|
|
73
|
+
enabled,
|
|
74
|
+
targetDocument
|
|
83
75
|
]);
|
|
84
|
-
_react.useEffect(()=>{
|
|
85
|
-
return ()=>{
|
|
86
|
-
var _resizeObserverRef_current;
|
|
87
|
-
(_resizeObserverRef_current = resizeObserverRef.current) === null || _resizeObserverRef_current === void 0 ? void 0 : _resizeObserverRef_current.disconnect();
|
|
88
|
-
};
|
|
89
|
-
}, []);
|
|
90
76
|
return {
|
|
91
77
|
ref,
|
|
92
|
-
reflowing
|
|
78
|
+
reflowing
|
|
93
79
|
};
|
|
94
80
|
}
|
|
81
|
+
const isReflowing = (el)=>{
|
|
82
|
+
return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);
|
|
83
|
+
};
|
|
84
|
+
const isFullyInViewport = (el)=>{
|
|
85
|
+
const rect = el.getBoundingClientRect();
|
|
86
|
+
const doc = el.ownerDocument;
|
|
87
|
+
const win = doc.defaultView;
|
|
88
|
+
if (!win) {
|
|
89
|
+
return true;
|
|
90
|
+
}
|
|
91
|
+
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) && rect.right <= (win.innerWidth || doc.documentElement.clientWidth);
|
|
92
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/MessageBar/useMessageBarReflow.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\nexport function useMessageBarReflow(enabled: boolean = false) {\n const { targetDocument } = useFluent();\n const prevInlineSizeRef = React.useRef(-1);\n const messageBarRef = React.useRef<HTMLElement | null>(null);\n\n const [reflowing, setReflowing] = React.useState(false);\n\n // This layout effect 'sanity checks' what observers have done\n // since DOM has not been flushed when observers run\n useIsomorphicLayoutEffect(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n setReflowing(prevReflowing => {\n if (!prevReflowing && messageBarRef.current && isReflowing(messageBarRef.current)) {\n return true;\n }\n\n return prevReflowing;\n });\n }, [reflowing]);\n\n const handleResize: ResizeObserverCallback = React.useCallback(() => {\n if (!messageBarRef.current) {\n return;\n }\n\n const inlineSize = messageBarRef.current.getBoundingClientRect().width;\n const scrollWidth = messageBarRef.current.scrollWidth;\n\n const expanding = prevInlineSizeRef.current < inlineSize;\n const overflowing = inlineSize < scrollWidth;\n\n setReflowing(!expanding || overflowing);\n }, []);\n\n const handleIntersection: IntersectionObserverCallback = React.useCallback(entries => {\n if (entries[0].intersectionRatio < 1) {\n setReflowing(true);\n }\n }, []);\n\n const ref = React.useMemo(() => {\n let resizeObserver: ResizeObserver | null = null;\n let intersectionObserer: IntersectionObserver | null = null;\n\n return (el: HTMLElement | null) => {\n if (!enabled || !el || !targetDocument?.defaultView) {\n resizeObserver?.disconnect();\n intersectionObserer?.disconnect();\n return;\n }\n\n messageBarRef.current = el;\n\n const win = targetDocument.defaultView;\n resizeObserver = new win.ResizeObserver(handleResize);\n intersectionObserer = new win.IntersectionObserver(handleIntersection, { threshold: 1 });\n\n intersectionObserer.observe(el);\n resizeObserver.observe(el, { box: 'border-box' });\n };\n }, [handleResize, handleIntersection, enabled, targetDocument]);\n\n return { ref, reflowing };\n}\n\nconst isReflowing = (el: HTMLElement) => {\n return el.scrollWidth > el.offsetWidth || !isFullyInViewport(el);\n};\n\nconst isFullyInViewport = (el: HTMLElement) => {\n const rect = el.getBoundingClientRect();\n const doc = el.ownerDocument;\n const win = doc.defaultView;\n\n if (!win) {\n return true;\n }\n\n return (\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.bottom <= (win.innerHeight || doc.documentElement.clientHeight) &&\n rect.right <= (win.innerWidth || doc.documentElement.clientWidth)\n );\n};\n"],"names":["useMessageBarReflow","enabled","targetDocument","useFluent","prevInlineSizeRef","React","useRef","messageBarRef","reflowing","setReflowing","useState","useIsomorphicLayoutEffect","current","prevReflowing","isReflowing","handleResize","useCallback","inlineSize","getBoundingClientRect","width","scrollWidth","expanding","overflowing","handleIntersection","entries","intersectionRatio","ref","useMemo","resizeObserver","intersectionObserer","el","defaultView","disconnect","win","ResizeObserver","IntersectionObserver","threshold","observe","box","offsetWidth","isFullyInViewport","rect","doc","ownerDocument","top","left","bottom","innerHeight","documentElement","clientHeight","right","innerWidth","clientWidth"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;qCACyB;gCACN;AAEnC,SAASA,oBAAoBC,UAAmB,KAAK;IAC1D,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,oBAAoBC,OAAMC,MAAM,CAAC,CAAC;IACxC,MAAMC,gBAAgBF,OAAMC,MAAM,CAAqB;IAEvD,MAAM,CAACE,WAAWC,aAAa,GAAGJ,OAAMK,QAAQ,CAAC;IAEjD,8DAA8D;IAC9D,oDAAoD;IACpDC,IAAAA,yCAAAA,EAA0B;QACxB,IAAI,CAACJ,cAAcK,OAAO,EAAE;YAC1B;QACF;QAEAH,aAAaI,CAAAA;YACX,IAAI,CAACA,iBAAiBN,cAAcK,OAAO,IAAIE,YAAYP,cAAcK,OAAO,GAAG;gBACjF,OAAO;YACT;YAEA,OAAOC;QACT;IACF,GAAG;QAACL;KAAU;IAEd,MAAMO,eAAuCV,OAAMW,WAAW,CAAC;QAC7D,IAAI,CAACT,cAAcK,OAAO,EAAE;YAC1B;QACF;QAEA,MAAMK,aAAaV,cAAcK,OAAO,CAACM,qBAAqB,GAAGC,KAAK;QACtE,MAAMC,cAAcb,cAAcK,OAAO,CAACQ,WAAW;QAErD,MAAMC,YAAYjB,kBAAkBQ,OAAO,GAAGK;QAC9C,MAAMK,cAAcL,aAAaG;QAEjCX,aAAa,CAACY,aAAaC;IAC7B,GAAG,EAAE;IAEL,MAAMC,qBAAmDlB,OAAMW,WAAW,CAACQ,CAAAA;QACzE,IAAIA,OAAO,CAAC,EAAE,CAACC,iBAAiB,GAAG,GAAG;YACpChB,aAAa;QACf;IACF,GAAG,EAAE;IAEL,MAAMiB,MAAMrB,OAAMsB,OAAO,CAAC;QACxB,IAAIC,iBAAwC;QAC5C,IAAIC,sBAAmD;QAEvD,OAAO,CAACC;YACN,IAAI,CAAC7B,WAAW,CAAC6B,MAAM,CAAC5B,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB6B,WAAW,AAAXA,GAAa;gBACnDH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBI,UAAU;gBAC1BH,wBAAAA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAqBG,UAAU;gBAC/B;YACF;YAEAzB,cAAcK,OAAO,GAAGkB;YAExB,MAAMG,MAAM/B,eAAe6B,WAAW;YACtCH,iBAAiB,IAAIK,IAAIC,cAAc,CAACnB;YACxCc,sBAAsB,IAAII,IAAIE,oBAAoB,CAACZ,oBAAoB;gBAAEa,WAAW;YAAE;YAEtFP,oBAAoBQ,OAAO,CAACP;YAC5BF,eAAeS,OAAO,CAACP,IAAI;gBAAEQ,KAAK;YAAa;QACjD;IACF,GAAG;QAACvB;QAAcQ;QAAoBtB;QAASC;KAAe;IAE9D,OAAO;QAAEwB;QAAKlB;IAAU;AAC1B;AAEA,MAAMM,cAAc,CAACgB;IACnB,OAAOA,GAAGV,WAAW,GAAGU,GAAGS,WAAW,IAAI,CAACC,kBAAkBV;AAC/D;AAEA,MAAMU,oBAAoB,CAACV;IACzB,MAAMW,OAAOX,GAAGZ,qBAAqB;IACrC,MAAMwB,MAAMZ,GAAGa,aAAa;IAC5B,MAAMV,MAAMS,IAAIX,WAAW;IAE3B,IAAI,CAACE,KAAK;QACR,OAAO;IACT;IAEA,OACEQ,KAAKG,GAAG,IAAI,KACZH,KAAKI,IAAI,IAAI,KACbJ,KAAKK,MAAM,IAAKb,CAAAA,IAAIc,WAAW,IAAIL,IAAIM,eAAe,CAACC,YAAY,AAAZA,KACvDR,KAAKS,KAAK,IAAKjB,CAAAA,IAAIkB,UAAU,IAAIT,IAAIM,eAAe,CAACI,WAAW,AAAXA;AAEzD"}
|