Skip to content

Commit cc50592

Browse files
MrWangJustToDoMrWangJustToDo
committed
fix syncHeight for some case
1 parent 5baa812 commit cc50592

File tree

2 files changed

+78
-62
lines changed

2 files changed

+78
-62
lines changed

‎packages/react/src/hooks/useSyncHeight.ts‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { useCallback } from "react";
1+
import { useCallback, useEffect } from "react";
22

33
import { useDiffViewContext } from "../components/DiffViewContext";
44

5-
import { useSafeLayout } from "./useSafeLayout";
6-
75
// TODO
86
export const useSyncHeight = ({
97
selector,
@@ -20,48 +18,57 @@ export const useSyncHeight = ({
2018

2119
const id = useDiffContext(useCallback((s) => s.id, []));
2220

23-
useSafeLayout(() => {
21+
useEffect(() => {
2422
if (enable) {
25-
const container = document.querySelector(`#diff-root${id}`);
23+
let clean = () => {};
24+
// fix the dom delay update
25+
const timer = setTimeout(() => {
26+
const container = document.querySelector(`#diff-root${id}`);
27+
28+
const elements = Array.from(container?.querySelectorAll(selector) || []);
2629

27-
const elements = Array.from(container?.querySelectorAll(selector) || []);
30+
const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : elements;
2831

29-
const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : elements;
32+
if (elements.length === 2 && wrappers.length === 2) {
33+
const ele1 = elements[0] as HTMLElement;
34+
const ele2 = elements[1] as HTMLElement;
3035

31-
if (elements.length === 2 && wrappers.length === 2) {
32-
const ele1 = elements[0] as HTMLElement;
33-
const ele2 = elements[1] as HTMLElement;
36+
const wrapper1 = wrappers[0] as HTMLElement;
37+
const wrapper2 = wrappers[1] as HTMLElement;
3438

35-
const wrapper1 = wrappers[0] as HTMLElement;
36-
const wrapper2 = wrappers[1] as HTMLElement;
39+
const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
3740

38-
const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
41+
const cb = () => {
42+
ele1.style.height = "auto";
43+
ele2.style.height = "auto";
44+
const rect1 = ele1.getBoundingClientRect();
45+
const rect2 = ele2.getBoundingClientRect();
46+
const maxHeight = Math.max(rect1.height, rect2.height);
47+
wrapper1.style.height = maxHeight + "px";
48+
wrapper2.style.height = maxHeight + "px";
49+
wrapper1.setAttribute("data-sync-height", String(maxHeight));
50+
wrapper2.setAttribute("data-sync-height", String(maxHeight));
51+
};
3952

40-
const cb = () => {
41-
ele1.style.height = "auto";
42-
ele2.style.height = "auto";
43-
const rect1 = ele1.getBoundingClientRect();
44-
const rect2 = ele2.getBoundingClientRect();
45-
const maxHeight = Math.max(rect1.height, rect2.height);
46-
wrapper1.style.height = maxHeight + "px";
47-
wrapper2.style.height = maxHeight + "px";
48-
wrapper1.setAttribute("data-sync-height", String(maxHeight));
49-
wrapper2.setAttribute("data-sync-height", String(maxHeight));
50-
};
53+
cb();
5154

52-
cb();
55+
const observer = new ResizeObserver(cb);
5356

54-
const observer = new ResizeObserver(cb);
57+
observer.observe(target);
5558

56-
observer.observe(target);
59+
target.setAttribute("data-observe", "height");
5760

58-
target.setAttribute("data-observe", "height");
61+
clean = () => {
62+
observer.disconnect();
63+
target?.removeAttribute("data-observe");
64+
};
65+
}
66+
});
5967

60-
return () => {
61-
observer.disconnect();
62-
target?.removeAttribute("data-observe");
63-
};
64-
}
68+
return () => {
69+
clean();
70+
clearTimeout(timer);
71+
};
6572
}
6673
}, [selector, enable, side, id, wrapper]);
6774
};

‎packages/vue/src/hooks/useSyncHeight.ts‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,46 +24,55 @@ export const useSyncHeight = ({
2424
if (!isMounted.value) return;
2525

2626
if (enable.value) {
27-
const container = document.querySelector(`#diff-root${id.value}`);
27+
let clean = () => {};
2828

29-
const elements = Array.from(container?.querySelectorAll(selector.value));
29+
const timer = setTimeout(() => {
30+
const container = document.querySelector(`#diff-root${id.value}`);
3031

31-
const wrappers = Array.from(container?.querySelectorAll(wrapper?.value) || []);
32+
const elements = Array.from(container?.querySelectorAll(selector.value));
3233

33-
if (elements.length === 2 && wrappers.length === 2) {
34-
const ele1 = elements[0] as HTMLElement;
35-
const ele2 = elements[1] as HTMLElement;
34+
const wrappers = Array.from(container?.querySelectorAll(wrapper?.value) || []);
3635

37-
const wrapper1 = wrappers[0] as HTMLElement;
38-
const wrapper2 = wrappers[1] as HTMLElement;
36+
if (elements.length === 2 && wrappers.length === 2) {
37+
const ele1 = elements[0] as HTMLElement;
38+
const ele2 = elements[1] as HTMLElement;
3939

40-
const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2;
40+
const wrapper1 = wrappers[0] as HTMLElement;
41+
const wrapper2 = wrappers[1] as HTMLElement;
4142

42-
const cb = () => {
43-
ele1.style.height = "auto";
44-
ele2.style.height = "auto";
45-
const rect1 = ele1.getBoundingClientRect();
46-
const rect2 = ele2.getBoundingClientRect();
47-
const maxHeight = Math.max(rect1.height, rect2.height);
48-
wrapper1.style.height = maxHeight + "px";
49-
wrapper2.style.height = maxHeight + "px";
50-
wrapper1.setAttribute("data-sync-height", String(maxHeight));
51-
wrapper2.setAttribute("data-sync-height", String(maxHeight));
52-
};
43+
const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2;
5344

54-
cb();
45+
const cb = () => {
46+
ele1.style.height = "auto";
47+
ele2.style.height = "auto";
48+
const rect1 = ele1.getBoundingClientRect();
49+
const rect2 = ele2.getBoundingClientRect();
50+
const maxHeight = Math.max(rect1.height, rect2.height);
51+
wrapper1.style.height = maxHeight + "px";
52+
wrapper2.style.height = maxHeight + "px";
53+
wrapper1.setAttribute("data-sync-height", String(maxHeight));
54+
wrapper2.setAttribute("data-sync-height", String(maxHeight));
55+
};
5556

56-
const observer = new ResizeObserver(cb);
57+
cb();
5758

58-
observer.observe(target);
59+
const observer = new ResizeObserver(cb);
5960

60-
target.setAttribute("data-observe", "height");
61+
observer.observe(target);
6162

62-
onCancel(() => {
63-
observer.disconnect();
64-
target?.removeAttribute("data-observe");
65-
});
66-
}
63+
target.setAttribute("data-observe", "height");
64+
65+
clean = () => {
66+
observer.disconnect();
67+
target?.removeAttribute("data-observe");
68+
};
69+
}
70+
});
71+
72+
onCancel(() => {
73+
clearTimeout(timer);
74+
clean();
75+
})
6776
}
6877
};
6978

0 commit comments

Comments
 (0)