Skip to content

Commit

Permalink
fix: solve findDOMNode throw warning in strict mode problem (#28)
Browse files Browse the repository at this point in the history 
* fix: fix findDOMNOde throw wraning in strict mode problem

* fix: fix findDOMNOde throw wraning in strict mode problem

* feat: code optimize

* feat: remove redundant code

* feat: update test case

* chore: update dumi version
  • Loading branch information
@kiner-tang
kiner-tang authored Jan 11, 2023
1 parent dfc0339 commit 2f55c23
Show file tree
Hide file tree
Showing 6 changed files with 451 additions and 14 deletions.
8 changes: 8 additions & 0 deletions docs/demo/strictMode.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: strictMode
nav:
title: Demo
path: /demo
---

<code src="../examples/strictMode.tsx"></code>
47 changes: 47 additions & 0 deletions docs/examples/strictMode.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, { StrictMode, useRef } from 'react';
import Tour from '../../src/index';
import './basic.less';

const App = () => {
const [open, setOpen] = React.useState(false);
const btn1 = useRef<HTMLButtonElement>(null);

return (
<div style={{ margin: 20 }}>
<button
onClick={() => {
setOpen(!open);
}}
>
Open: {String(open)}
</button>
<button ref={btn1}>Upload</button>

<Tour
placement={'bottom'}
open={open}
onFinish={() => setOpen(false)}
steps={[
{
title: '创建',
description: '创建一条数据',
target: undefined,
},
{
title: '更新',
description: '更新一条数据',
target: () => btn1.current,
},
]}
/>
</div>
);
};

export default () => {
return (
<StrictMode>
<App />
</StrictMode>
);
};
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@umijs/fabric": "^2.5.2",
"dumi": "^2.0.0",
"dumi": "^2.1.2",
"eslint": "^7.18.0",
"father": "^4.0.0-rc.8",
"gh-pages": "^3.1.0",
Expand Down
6 changes: 6 additions & 0 deletions src/Tour.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,11 @@ const Tour = (props: TourProps) => {

const mergedShowMask = typeof mergedMask === "boolean" ? mergedMask : !!mergedMask;
const mergedMaskStyle = typeof mergedMask === "boolean" ? undefined : mergedMask;

// when targetElement is not exist, use body as triggerDOMNode
const getTriggerDOMNode = (node) => {
return node || targetElement || document.body
};

return (
<>
Expand All @@ -181,6 +186,7 @@ const Tour = (props: TourProps) => {
forceRender={false}
destroyPopupOnHide
zIndex={1090}
getTriggerDOMNode={getTriggerDOMNode}
>
<Portal open={mergedOpen} autoLock>
<div
Expand Down
303 changes: 303 additions & 0 deletions tests/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -612,6 +612,309 @@ exports[`Tour rootClassName 1`] = `
</body>
`;

exports[`Tour run in strict mode 1`] = `
<body>
<div>
<div
style="margin: 20px;"
>
<button
class="btn1"
>
Open:
true
</button>
<button
class="btn2"
>
Upload
</button>
</div>
</div>
<div>
<div
class="rc-tour-target-placeholder"
style="left: 50%; top: 50%; width: 1px; height: 1px; position: fixed; pointer-events: none;"
/>
</div>
<div>
<div
class="rc-tour-mask"
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
>
<svg
style="width: 100%; height: 100%;"
>
<defs>
<mask
id="rc-tour-mask-test-id"
>
<rect
fill="white"
height="100%"
width="100%"
x="0"
y="0"
/>
</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"
/>
</svg>
</div>
</div>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
>
<div>
<div
class="rc-tour"
style="z-index: 1090; opacity: 0;"
>
<div
class="rc-tour-content"
>
<div
class="rc-tour-inner"
>
<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"
>
<span
class="active"
/>
<span
class=""
/>
</div>
<div
class="rc-tour-buttons"
>
<button
class="rc-tour-next-btn"
>
Next
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;

exports[`Tour run in strict mode 2`] = `
<body>
<div>
<div
style="margin: 20px;"
>
<button
class="btn1"
>
Open:
true
</button>
<button
class="btn2"
>
Upload
</button>
</div>
</div>
<div>
<div
class="rc-tour-target-placeholder"
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
/>
</div>
<div>
<div
class="rc-tour-mask"
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
>
<svg
style="width: 100%; height: 100%;"
>
<defs>
<mask
id="rc-tour-mask-test-id"
>
<rect
fill="white"
height="100%"
width="100%"
x="0"
y="0"
/>
<rect
class=""
fill="black"
height="12"
rx="2"
width="12"
x="-6"
y="-6"
/>
</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="-6"
pointer-events="auto"
width="100%"
x="0"
y="0"
/>
<rect
fill="transparent"
height="100%"
pointer-events="auto"
width="-6"
x="0"
y="0"
/>
<rect
fill="transparent"
height="calc(100vh - 6px)"
pointer-events="auto"
width="100%"
x="0"
y="6"
/>
<rect
fill="transparent"
height="100%"
pointer-events="auto"
width="calc(100vw - 6px)"
x="6"
y="0"
/>
</svg>
</div>
</div>
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
>
<div>
<div
class="rc-tour"
style="z-index: 1090; opacity: 0;"
>
<div
class="rc-tour-content"
>
<div
class="rc-tour-arrow"
/>
<div
class="rc-tour-inner"
>
<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"
>
<span
class=""
/>
<span
class="active"
/>
</div>
<div
class="rc-tour-buttons"
>
<button
class="rc-tour-prev-btn"
>
Prev
</button>
<button
class="rc-tour-finish-btn"
>
Finish
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;

exports[`Tour should keep current when controlled 1`] = `
<body>
<div>
Expand Down
Loading

1 comment on commit 2f55c23

@vercel
Copy link

@vercel vercel bot commented on 2f55c23 Jan 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

tour – ./

tour-git-master-react-component.vercel.app
tour-react-component.vercel.app
tour-dun.vercel.app

Please sign in to comment.