1 | ;
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.getResizeObserver = void 0;
|
4 | const util_1 = require("./util");
|
5 | /**
|
6 | * This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver
|
7 | * or the given containerRef are not available, a window resize event listener is used by default.
|
8 | *
|
9 | * Example 1:
|
10 | *
|
11 | * private containerRef = React.createRef<HTMLDivElement>();
|
12 | * private observer: any = () => {};
|
13 | *
|
14 | * public componentDidMount() {
|
15 | * this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
|
16 | * }
|
17 | *
|
18 | * public componentWillUnmount() {
|
19 | * this.observer();
|
20 | * }
|
21 | *
|
22 | * private handleResize = () => {
|
23 | * if (this.containerRef.current && this.containerRef.current.clientWidth) {
|
24 | * this.setState({ width: this.containerRef.current.clientWidth });
|
25 | * }
|
26 | * };
|
27 | *
|
28 | * public render() {
|
29 | * return (
|
30 | * <div ref={this.containerRef} >
|
31 | * <Chart width={this.state.width} ... />
|
32 | * </div>
|
33 | * );
|
34 | * }
|
35 | *
|
36 | * Example 2:
|
37 | *
|
38 | * private inputRef = React.createRef<HTMLInputElement>();
|
39 | * private observer: any = () => {};
|
40 | *
|
41 | * public componentDidMount() {
|
42 | * this.observer = getResizeObserver(this.inputRef.current, this.handleResize);
|
43 | * }
|
44 | *
|
45 | * public componentWillUnmount() {
|
46 | * this.observer();
|
47 | * }
|
48 | *
|
49 | * private handleResize = () => {
|
50 | * if (this.inputRef.current) {
|
51 | * trimLeft(inputRef.current, String(this.props.value));
|
52 | * }
|
53 | * };
|
54 | *
|
55 | * public render() {
|
56 | * return (
|
57 | * <input ref={this.inputRef} ... />
|
58 | * );
|
59 | * }
|
60 | *
|
61 | * @param {Element} containerRefElement The container reference to observe
|
62 | * @param {Function} handleResize The function to call for resize events
|
63 | * @return {Function} The function used to unobserve resize events
|
64 | */
|
65 | const getResizeObserver = (containerRefElement, handleResize) => {
|
66 | let unobserve;
|
67 | if (util_1.canUseDOM) {
|
68 | const { ResizeObserver } = window;
|
69 | if (containerRefElement && ResizeObserver) {
|
70 | const resizeObserver = new ResizeObserver((entries) => {
|
71 | // Wrap resize function in requestAnimationFrame to avoid "ResizeObserver loop limit exceeded" errors
|
72 | window.requestAnimationFrame(() => {
|
73 | if (Array.isArray(entries) && entries.length > 0) {
|
74 | handleResize();
|
75 | }
|
76 | });
|
77 | });
|
78 | resizeObserver.observe(containerRefElement);
|
79 | unobserve = () => resizeObserver.unobserve(containerRefElement);
|
80 | }
|
81 | else {
|
82 | window.addEventListener('resize', handleResize);
|
83 | unobserve = () => window.removeEventListener('resize', handleResize);
|
84 | }
|
85 | }
|
86 | return () => {
|
87 | if (unobserve) {
|
88 | unobserve();
|
89 | }
|
90 | };
|
91 | };
|
92 | exports.getResizeObserver = getResizeObserver;
|
93 | //# sourceMappingURL=resizeObserver.js.map |
\ | No newline at end of file |