Skip to content

Commit 2f55c23

Browse files
kiner-tangkiner-tang
authored
fix: solve findDOMNode throw warning in strict mode problem (#28)
* 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
1 parent dfc0339 commit 2f55c23

File tree

6 files changed

+451
-14
lines changed

6 files changed

+451
-14
lines changed

‎docs/demo/strictMode.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: strictMode
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/strictMode.tsx"></code>

‎docs/examples/strictMode.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { StrictMode, useRef } from 'react';
2+
import Tour from '../../src/index';
3+
import './basic.less';
4+
5+
const App = () => {
6+
const [open, setOpen] = React.useState(false);
7+
const btn1 = useRef<HTMLButtonElement>(null);
8+
9+
return (
10+
<div style={{ margin: 20 }}>
11+
<button
12+
onClick={() => {
13+
setOpen(!open);
14+
}}
15+
>
16+
Open: {String(open)}
17+
</button>
18+
<button ref={btn1}>Upload</button>
19+
20+
<Tour
21+
placement={'bottom'}
22+
open={open}
23+
onFinish={() => setOpen(false)}
24+
steps={[
25+
{
26+
title: '创建',
27+
description: '创建一条数据',
28+
target: undefined,
29+
},
30+
{
31+
title: '更新',
32+
description: '更新一条数据',
33+
target: () => btn1.current,
34+
},
35+
]}
36+
/>
37+
</div>
38+
);
39+
};
40+
41+
export default () => {
42+
return (
43+
<StrictMode>
44+
<App />
45+
</StrictMode>
46+
);
47+
};

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"@types/react": "^18.0.0",
5353
"@types/react-dom": "^18.0.0",
5454
"@umijs/fabric": "^2.5.2",
55-
"dumi": "^2.0.0",
55+
"dumi": "^2.1.2",
5656
"eslint": "^7.18.0",
5757
"father": "^4.0.0-rc.8",
5858
"gh-pages": "^3.1.0",

‎src/Tour.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,11 @@ const Tour = (props: TourProps) => {
165165

166166
const mergedShowMask = typeof mergedMask === "boolean" ? mergedMask : !!mergedMask;
167167
const mergedMaskStyle = typeof mergedMask === "boolean" ? undefined : mergedMask;
168+
169+
// when targetElement is not exist, use body as triggerDOMNode
170+
const getTriggerDOMNode = (node) => {
171+
return node || targetElement || document.body
172+
};
168173

169174
return (
170175
<>
@@ -181,6 +186,7 @@ const Tour = (props: TourProps) => {
181186
forceRender={false}
182187
destroyPopupOnHide
183188
zIndex={1090}
189+
getTriggerDOMNode={getTriggerDOMNode}
184190
>
185191
<Portal open={mergedOpen} autoLock>
186192
<div

‎tests/__snapshots__/index.test.tsx.snap

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,6 +612,309 @@ exports[`Tour rootClassName 1`] = `
612612
</body>
613613
`;
614614

615+
exports[`Tour run in strict mode 1`] = `
616+
<body>
617+
<div>
618+
<div
619+
style="margin: 20px;"
620+
>
621+
<button
622+
class="btn1"
623+
>
624+
Open:
625+
true
626+
</button>
627+
<button
628+
class="btn2"
629+
>
630+
Upload
631+
</button>
632+
</div>
633+
</div>
634+
<div>
635+
<div
636+
class="rc-tour-target-placeholder"
637+
style="left: 50%; top: 50%; width: 1px; height: 1px; position: fixed; pointer-events: none;"
638+
/>
639+
</div>
640+
<div>
641+
<div
642+
class="rc-tour-mask"
643+
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
644+
>
645+
<svg
646+
style="width: 100%; height: 100%;"
647+
>
648+
<defs>
649+
<mask
650+
id="rc-tour-mask-test-id"
651+
>
652+
<rect
653+
fill="white"
654+
height="100%"
655+
width="100%"
656+
x="0"
657+
y="0"
658+
/>
659+
</mask>
660+
</defs>
661+
<rect
662+
fill="rgba(0,0,0,0.5)"
663+
height="100%"
664+
mask="url(#rc-tour-mask-test-id)"
665+
width="100%"
666+
x="0"
667+
y="0"
668+
/>
669+
</svg>
670+
</div>
671+
</div>
672+
<div
673+
style="position: absolute; top: 0px; left: 0px; width: 100%;"
674+
>
675+
<div>
676+
<div
677+
class="rc-tour"
678+
style="z-index: 1090; opacity: 0;"
679+
>
680+
<div
681+
class="rc-tour-content"
682+
>
683+
<div
684+
class="rc-tour-inner"
685+
>
686+
<button
687+
aria-label="Close"
688+
class="rc-tour-close"
689+
type="button"
690+
>
691+
<span
692+
class="rc-tour-close-x"
693+
>
694+
×
695+
</span>
696+
</button>
697+
<div
698+
class="rc-tour-header"
699+
>
700+
<div
701+
class="rc-tour-title"
702+
>
703+
创建
704+
</div>
705+
</div>
706+
<div
707+
class="rc-tour-description"
708+
>
709+
创建一条数据
710+
</div>
711+
<div
712+
class="rc-tour-footer"
713+
>
714+
<div
715+
class="rc-tour-sliders"
716+
>
717+
<span
718+
class="active"
719+
/>
720+
<span
721+
class=""
722+
/>
723+
</div>
724+
<div
725+
class="rc-tour-buttons"
726+
>
727+
<button
728+
class="rc-tour-next-btn"
729+
>
730+
Next
731+
</button>
732+
</div>
733+
</div>
734+
</div>
735+
</div>
736+
</div>
737+
</div>
738+
</div>
739+
</body>
740+
`;
741+
742+
exports[`Tour run in strict mode 2`] = `
743+
<body>
744+
<div>
745+
<div
746+
style="margin: 20px;"
747+
>
748+
<button
749+
class="btn1"
750+
>
751+
Open:
752+
true
753+
</button>
754+
<button
755+
class="btn2"
756+
>
757+
Upload
758+
</button>
759+
</div>
760+
</div>
761+
<div>
762+
<div
763+
class="rc-tour-target-placeholder"
764+
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
765+
/>
766+
</div>
767+
<div>
768+
<div
769+
class="rc-tour-mask"
770+
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
771+
>
772+
<svg
773+
style="width: 100%; height: 100%;"
774+
>
775+
<defs>
776+
<mask
777+
id="rc-tour-mask-test-id"
778+
>
779+
<rect
780+
fill="white"
781+
height="100%"
782+
width="100%"
783+
x="0"
784+
y="0"
785+
/>
786+
<rect
787+
class=""
788+
fill="black"
789+
height="12"
790+
rx="2"
791+
width="12"
792+
x="-6"
793+
y="-6"
794+
/>
795+
</mask>
796+
</defs>
797+
<rect
798+
fill="rgba(0,0,0,0.5)"
799+
height="100%"
800+
mask="url(#rc-tour-mask-test-id)"
801+
width="100%"
802+
x="0"
803+
y="0"
804+
/>
805+
<rect
806+
fill="transparent"
807+
height="-6"
808+
pointer-events="auto"
809+
width="100%"
810+
x="0"
811+
y="0"
812+
/>
813+
<rect
814+
fill="transparent"
815+
height="100%"
816+
pointer-events="auto"
817+
width="-6"
818+
x="0"
819+
y="0"
820+
/>
821+
<rect
822+
fill="transparent"
823+
height="calc(100vh - 6px)"
824+
pointer-events="auto"
825+
width="100%"
826+
x="0"
827+
y="6"
828+
/>
829+
<rect
830+
fill="transparent"
831+
height="100%"
832+
pointer-events="auto"
833+
width="calc(100vw - 6px)"
834+
x="6"
835+
y="0"
836+
/>
837+
</svg>
838+
</div>
839+
</div>
840+
<div
841+
style="position: absolute; top: 0px; left: 0px; width: 100%;"
842+
>
843+
<div>
844+
<div
845+
class="rc-tour"
846+
style="z-index: 1090; opacity: 0;"
847+
>
848+
<div
849+
class="rc-tour-content"
850+
>
851+
<div
852+
class="rc-tour-arrow"
853+
/>
854+
<div
855+
class="rc-tour-inner"
856+
>
857+
<button
858+
aria-label="Close"
859+
class="rc-tour-close"
860+
type="button"
861+
>
862+
<span
863+
class="rc-tour-close-x"
864+
>
865+
×
866+
</span>
867+
</button>
868+
<div
869+
class="rc-tour-header"
870+
>
871+
<div
872+
class="rc-tour-title"
873+
>
874+
更新
875+
</div>
876+
</div>
877+
<div
878+
class="rc-tour-description"
879+
>
880+
更新一条数据
881+
</div>
882+
<div
883+
class="rc-tour-footer"
884+
>
885+
<div
886+
class="rc-tour-sliders"
887+
>
888+
<span
889+
class=""
890+
/>
891+
<span
892+
class="active"
893+
/>
894+
</div>
895+
<div
896+
class="rc-tour-buttons"
897+
>
898+
<button
899+
class="rc-tour-prev-btn"
900+
>
901+
Prev
902+
</button>
903+
<button
904+
class="rc-tour-finish-btn"
905+
>
906+
Finish
907+
</button>
908+
</div>
909+
</div>
910+
</div>
911+
</div>
912+
</div>
913+
</div>
914+
</div>
915+
</body>
916+
`;
917+
615918
exports[`Tour should keep current when controlled 1`] = `
616919
<body>
617920
<div>

0 commit comments

Comments
 (0)