From e52dacd43125561a30446ea95e6a1e3019f0a322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 21 Feb 2025 16:44:33 +0800 Subject: [PATCH 1/6] chore: init demo --- docs/demo/inline.md | 8 ++++++++ docs/examples/inline.tsx | 41 ++++++++++++++++++++++++++++++++++++++++ src/Tour.tsx | 3 ++- src/interface.ts | 1 + 4 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 docs/demo/inline.md create mode 100644 docs/examples/inline.tsx diff --git a/docs/demo/inline.md b/docs/demo/inline.md new file mode 100644 index 0000000..8c8124c --- /dev/null +++ b/docs/demo/inline.md @@ -0,0 +1,8 @@ +--- +title: inline +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/inline.tsx b/docs/examples/inline.tsx new file mode 100644 index 0000000..2ceee38 --- /dev/null +++ b/docs/examples/inline.tsx @@ -0,0 +1,41 @@ +import React, { useRef } from 'react'; +import Tour from '../../src/index'; +import './basic.less'; + +const App = () => { + const createBtnRef = useRef(null); + return ( +
+
+ + + createBtnRef.current, + mask: true, + }, + ]} + /> +
+
+ ); +}; + +export default App; diff --git a/src/Tour.tsx b/src/Tour.tsx index c54fd16..c18c264 100644 --- a/src/Tour.tsx +++ b/src/Tour.tsx @@ -38,6 +38,7 @@ const Tour: React.FC = props => { onClose, onFinish, open, + defaultOpen, mask = true, arrow = true, rootClassName, @@ -65,7 +66,7 @@ const Tour: React.FC = props => { defaultValue: defaultCurrent, }); - const [mergedOpen, setMergedOpen] = useMergedState(undefined, { + const [mergedOpen, setMergedOpen] = useMergedState(defaultOpen, { value: open, postState: origin => mergedCurrent < 0 || mergedCurrent >= steps.length diff --git a/src/interface.ts b/src/interface.ts index ce7754b..3fb8ca1 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -53,6 +53,7 @@ export interface TourProps extends Pick { style?: React.CSSProperties; steps?: TourStepInfo[]; open?: boolean; + defaultOpen?: boolean; defaultCurrent?: number; current?: number; onChange?: (current: number) => void; From 39d9e08c5bb38f04821a9e9e42de0b7e5259890d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 21 Feb 2025 17:10:05 +0800 Subject: [PATCH 2/6] chore: tmp of it --- docs/examples/inline.tsx | 5 +++++ src/Mask.tsx | 26 ++++++++++++++++++++------ src/Tour.tsx | 21 +++++++++++++++++++-- src/hooks/useTarget.ts | 2 ++ src/interface.ts | 2 +- 5 files changed, 47 insertions(+), 9 deletions(-) diff --git a/docs/examples/inline.tsx b/docs/examples/inline.tsx index 2ceee38..bdf975c 100644 --- a/docs/examples/inline.tsx +++ b/docs/examples/inline.tsx @@ -14,7 +14,9 @@ const App = () => { display: 'flex', alignItems: 'flex-start', justifyContent: 'center', + position: 'relative', }} + id="inlineHolder" > { + setOpen(false); + }} + // style={{ background: 'red' }} steps={[ { title: '创建', diff --git a/src/Mask.tsx b/src/Mask.tsx index c35de86..54a0bfb 100644 --- a/src/Mask.tsx +++ b/src/Mask.tsx @@ -56,10 +56,14 @@ const Mask = (props: MaskProps) => { ? { width: '100%', height: '100%' } : { width: '100vw', height: '100vh' }; + const inlineMode = getPopupContainer === false; + + console.log('<<>>>>', pos); + return (
{ tourClassNames?.mask, )} style={{ - position: 'fixed', + position: inlineMode ? 'absolute' : 'fixed', left: 0, right: 0, top: 0, @@ -117,32 +121,40 @@ const Mask = (props: MaskProps) => { {/* Block click region */} {pos && ( <> - - + {/* Top */} + {pos.top > 0 && ( + + )} + {/* Left */} + {pos.left > 0 && ( + + )} + {/* Bottom */} + {/* Right */} diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 2294f43..c3c0b9e 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -55,6 +55,16 @@ export default function useTarget( targetElement.getBoundingClientRect(); const nextPosInfo: PosInfo = { left, top, width, height, radius: 0 }; + // If `inlineMode` we need cut off parent offset + if (inlineMode && placeholderRef.current) { + const parentRect = + placeholderRef.current.parentElement?.getBoundingClientRect(); + console.log(parentRect); + + nextPosInfo.left -= parentRect?.left ?? 0; + nextPosInfo.top -= parentRect?.top ?? 0; + } + setPosInfo(origin => { if (JSON.stringify(origin) !== JSON.stringify(nextPosInfo)) { return nextPosInfo; From dfced545295e411d4af6d9187b2f37e76903271e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 21 Feb 2025 17:46:47 +0800 Subject: [PATCH 4/6] test: update snapshot --- src/Mask.tsx | 35 +++++------ tests/__snapshots__/index.test.tsx.snap | 84 ++++++++++++------------- 2 files changed, 57 insertions(+), 62 deletions(-) diff --git a/src/Mask.tsx b/src/Mask.tsx index 54a0bfb..b2ca95f 100644 --- a/src/Mask.tsx +++ b/src/Mask.tsx @@ -58,8 +58,6 @@ const Mask = (props: MaskProps) => { const inlineMode = getPopupContainer === false; - console.log('<<>>>>', pos); - return ( { {pos && ( <> {/* Top */} - {pos.top > 0 && ( - - )} + + {/* Left */} - {pos.left > 0 && ( - - )} + {/* Bottom */} @@ -204,7 +204,7 @@ exports[`Tour animated true 1`] = ` /> @@ -385,7 +385,7 @@ exports[`Tour renderPanel basic 1`] = ` /> @@ -496,7 +496,7 @@ exports[`Tour rootClassName 1`] = ` /> @@ -780,7 +780,7 @@ exports[`Tour run in strict mode 2`] = ` /> @@ -1194,7 +1194,7 @@ exports[`Tour should update position when window resize 1`] = ` /> @@ -1331,7 +1331,7 @@ exports[`Tour showArrow should show tooltip arrow default 1`] = ` /> @@ -1480,7 +1480,7 @@ exports[`Tour single 1`] = ` /> @@ -1635,7 +1635,7 @@ exports[`Tour use custom builtinPlacements 1`] = ` /> @@ -1790,7 +1790,7 @@ exports[`Tour use custom builtinPlacements 2`] = ` /> @@ -1956,7 +1956,7 @@ exports[`Tour use custom builtinPlacements 3`] = ` /> From 978c725d34d85b9eba7ce0d7993d43389509b8b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 21 Feb 2025 17:52:39 +0800 Subject: [PATCH 5/6] chore: clean up --- src/hooks/useTarget.ts | 1 - tests/index.test.tsx | 28 ++++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index c3c0b9e..0200159 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -59,7 +59,6 @@ export default function useTarget( if (inlineMode && placeholderRef.current) { const parentRect = placeholderRef.current.parentElement?.getBoundingClientRect(); - console.log(parentRect); nextPosInfo.left -= parentRect?.left ?? 0; nextPosInfo.top -= parentRect?.top ?? 0; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 1b18036..a213561 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -1197,4 +1197,32 @@ describe('Tour', () => { expect(footerElement.style.borderTop).toBe('1px solid black'); expect(descriptionElement.style.fontStyle).toBe('italic'); }); + + it('inline', async () => { + const Demo = () => { + const btnRef = useRef(null); + return ( +
+ + , + target: () => btnRef.current, + }, + ]} + /> +
+ ); + }; + render(); + const container = document.querySelector('.bamboo'); + const children = container.querySelector('.little'); + + // Check container has children + expect(children).toBeTruthy(); + }); }); From 660aac7ebf9aea42f4ea95a77a8b0f4b9b5a3dd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 21 Feb 2025 17:55:52 +0800 Subject: [PATCH 6/6] chore: take advice --- src/hooks/useTarget.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/hooks/useTarget.ts b/src/hooks/useTarget.ts index 0200159..73976fa 100644 --- a/src/hooks/useTarget.ts +++ b/src/hooks/useTarget.ts @@ -56,12 +56,14 @@ export default function useTarget( const nextPosInfo: PosInfo = { left, top, width, height, radius: 0 }; // If `inlineMode` we need cut off parent offset - if (inlineMode && placeholderRef.current) { + if (inlineMode) { const parentRect = - placeholderRef.current.parentElement?.getBoundingClientRect(); + placeholderRef.current?.parentElement?.getBoundingClientRect(); - nextPosInfo.left -= parentRect?.left ?? 0; - nextPosInfo.top -= parentRect?.top ?? 0; + if (parentRect) { + nextPosInfo.left -= parentRect.left; + nextPosInfo.top -= parentRect.top; + } } setPosInfo(origin => {