Skip to content

fix: panel not follow when scroll is visible #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 3 commits into from
Mar 12, 2025
Merged

fix: panel not follow when scroll is visible #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01ca31b
fix: panel not follow when scroll is visible
yellowryan Mar 8, 2025
19cf2fc
test: add scroll test case
yellowryan Mar 11, 2025
7e99bd2
chore: update snapshot
yellowryan Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/hooks/useTarget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,12 @@ export default function useTarget(
updatePos();
// update when window resize
window.addEventListener('resize', updatePos);
// update when `document.body.style.overflow` is set to visible
// by default, it will be set to hidden
window.addEventListener('scroll', updatePos);
return () => {
window.removeEventListener('resize', updatePos);
window.removeEventListener('scroll', updatePos);
};
}, [targetElement, open, updatePos]);

Expand Down
155 changes: 155 additions & 0 deletions tests/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1280,6 +1280,161 @@ exports[`Tour should update position when window resize 1`] = `
</body>
`;

exports[`Tour should update position when window scroll 1`] = `
<body>
<div>
<div
style="width: 100%;"
>
<button
class="btn2"
>
按钮
</button>
</div>
</div>
<div>
<div
class="rc-tour-mask"
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
>
<svg
style="width: 100%; height: 100%;"
>
<defs>
<mask
id="rc-tour-mask-test-id"
>
<rect
fill="white"
height="100vh"
width="100vw"
x="0"
y="0"
/>
<rect
class=""
fill="black"
height="192"
rx="2"
width="242"
x="74"
y="794"
/>
</mask>
</defs>
<rect
fill="rgba(0,0,0,0.5)"
height="100%"
mask="url(#rc-tour-mask-test-id)"
width="100%"
x="0"
y="0"
/>
<rect
fill="transparent"
height="794"
pointer-events="auto"
width="100%"
x="0"
y="0"
/>
<rect
fill="transparent"
height="100%"
pointer-events="auto"
width="74"
x="0"
y="0"
/>
<rect
fill="transparent"
height="calc(100% - 986px)"
pointer-events="auto"
width="100%"
x="0"
y="986"
/>
<rect
fill="transparent"
height="100%"
pointer-events="auto"
width="calc(100% - 316px)"
x="316"
y="0"
/>
</svg>
</div>
</div>
<div>
<div
class="rc-tour-target-placeholder"
style="left: 74px; top: 794px; width: 242px; height: 192px; position: fixed; pointer-events: none;"
/>
</div>
<div>
<div
class="rc-tour rc-tour-placement-bottom"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
>
<div
class="rc-tour-arrow"
style="position: absolute;"
/>
<div
class="rc-tour-pannel"
>
<div
class="rc-tour-section"
>
<button
aria-label="Close"
class="rc-tour-close"
type="button"
>
<span
class="rc-tour-close-x"
>
×
</span>
</button>
<div
class="rc-tour-header"
>
<div
class="rc-tour-title"
>
创建
</div>
</div>
<div
class="rc-tour-description"
>
创建一条数据
</div>
<div
class="rc-tour-footer"
>
<div
class="rc-tour-sliders"
/>
<div
class="rc-tour-actions"
>
<button
class="rc-tour-finish-btn"
>
Finish
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;

exports[`Tour showArrow should show tooltip arrow default 1`] = `
<body>
<div>
Expand Down
66 changes: 65 additions & 1 deletion tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { TourProps } from '../src/index';
import Tour from '../src/index';
import { getPlacements, placements } from '../src/placements';
import { getPlacement } from '../src/util';
import { resizeWindow } from './utils';
import { resizeWindow, scrollWindow } from './utils';

const mockBtnRect = (
rect: {
Expand Down Expand Up @@ -1225,4 +1225,68 @@ describe('Tour', () => {
// Check container has children
expect(children).toBeTruthy();
});

it('should update position when window scroll', async () => {
mockBtnRect({
x: 80,
y: 333,
width: 230,
height: 180,
});
const Demo = () => {
const btnRef = useRef<HTMLButtonElement>(null);

return (
<div style={{ width: '100%' }}>
<button
className="btn2"
ref={btnRef}
onClick={() => {
mockBtnRect({
x: 80,
y: 800,
width: 230,
height: 180,
});
scrollWindow(0, 800);
}}
>
按钮
</button>
<Tour
open
placement={'bottom'}
steps={[
{
title: '创建',
description: '创建一条数据',
target: () => btnRef.current,
},
]}
/>
</div>
);
};
const { baseElement, unmount } = render(<Demo />);
expect(
baseElement.querySelector('.rc-tour-target-placeholder'),
).toHaveStyle('left: 74px; top: 327px; width: 242px; height: 192px;');
fireEvent.click(baseElement.querySelector('.btn2'));
await act(() => {
jest.runAllTimers();
});
expect(
baseElement.querySelector('.rc-tour-target-placeholder'),
).toHaveStyle('left: 74px; top: 794px; width: 242px; height: 192px;');

expect(baseElement).toMatchSnapshot();

unmount();
mockBtnRect({
x: 0,
y: 0,
width: 0,
height: 0,
});
});
});
8 changes: 7 additions & 1 deletion tests/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,10 @@ export const resizeWindow = (x: number, y: number) => {
// @ts-ignore
window.innerHeight = y;
window.dispatchEvent(new Event('resize'));
};
};


export const scrollWindow = (x: number, y: number) => {
window.scrollTo(x, y);
window.dispatchEvent(new Event('scroll'))
}