revert: "Filter out missing elements (#2)"

This reverts commit 5954c78.
dominictwlee · Jun 23, 2020 · 478bd53 · 478bd53
1 parent 64c64de
commit 478bd53
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 94 deletions.
diff --git a/examples/App.tsx b/examples/App.tsx
@@ -11,7 +11,7 @@ const Card = styled.div({
   padding: '1rem',
 });
 
-const messages = ['hello1', 'world2', 'hidden', 'hello3'];
+const messages = ['hello1', 'world2', 'hello3'];
 
 const node = document.getElementById('tourguide-root');
 
@@ -37,9 +37,8 @@ function App() {
       >
         <div>
           <h2 {...getAnchorElProps(1)}>Some cool subtitle 2</h2>
-          {false && <h2 {...getAnchorElProps(2)}>Some hidden feature</h2>}
           <Card {...getAnchorElProps(0)}>Some random card with content</Card>
-          <p {...getAnchorElProps(3)}>Some cool content 3</p>
+          <p {...getAnchorElProps(2)}>Some cool content 3</p>
         </div>
         <button onClick={toggle}>show</button>
       </div>

diff --git a/src/Tourguide.tsx b/src/Tourguide.tsx
@@ -41,10 +41,10 @@ const TooltipContainer = styled.div({
 
 const Tourguide = (props: TourguideProps) => {
   const {
-    tooltip: TooltipComponent,
+    tooltip: Component,
     animated = true,
     precondition = true,
-    content: allContent,
+    content,
     node,
     leftControl,
     rightControl,
@@ -55,21 +55,8 @@ const Tourguide = (props: TourguideProps) => {
 
   const [stepIndicatorWidth, setStepIndicatorWidth] = useState(0);
   const [isAnimIdle, setIsAnimIdle] = useState(true);
-  const [content, setContent] = useState<ReactNode[]>();
-  const [Component, setComponent] = useState<
-    TourguideProps['tooltip'] | undefined
-  >(TooltipComponent);
 
-  const {
-    anchorEls,
-    curPos,
-    show,
-    close,
-    setStatus,
-    prev,
-    next,
-    allAnchorEls,
-  } = useGuide();
+  const { anchorEls, curPos, show, close, setStatus, prev, next } = useGuide();
 
   const measuredStepIndicatorRef = useCallback((node) => {
     if (node !== null) {
@@ -110,22 +97,6 @@ const Tourguide = (props: TourguideProps) => {
     }
   };
 
-  const filterOutUnused = useCallback(
-    (value?: any) => {
-      return Array.isArray(value)
-        ? value
-            .map((item, index: number) => {
-              if (!!allAnchorEls[index]) {
-                return item;
-              }
-              return undefined;
-            })
-            .filter((item) => !!item)
-        : value;
-    },
-    [allAnchorEls]
-  );
-
   useEffect(() => {
     if (show) {
       document.addEventListener('keydown', handleKeyDown);
@@ -142,16 +113,6 @@ const Tourguide = (props: TourguideProps) => {
     }
   }, [anchorEls.length, precondition, setStatus]);
 
-  useEffect(() => {
-    setComponent(
-      filterOutUnused(TooltipComponent) as TourguideProps['tooltip']
-    );
-  }, [TooltipComponent, filterOutUnused]);
-
-  useEffect(() => {
-    setContent(filterOutUnused(allContent));
-  }, [allContent, filterOutUnused]);
-
   const opacityAnim = useSpring({
     opacity: show ? 1 : 0,
     onStart: handleAnimStart,
@@ -166,20 +127,15 @@ const Tourguide = (props: TourguideProps) => {
     return ReactDOM.createPortal(
       <>
         <Spotlight
-          anchorEl={anchorEl.node}
+          anchorEl={anchorEl}
           show={show}
           pos={curPos}
           curPos={curPos}
           positionStyles={positionStyles && positionStyles.spotlight}
           styles={styles && styles.spotlight}
         />
         {Component && (
-          <Tooltip
-            anchorEl={anchorEl.node}
-            show={show}
-            pos={curPos}
-            curPos={curPos}
-          >
+          <Tooltip anchorEl={anchorEl} show={show} pos={curPos} curPos={curPos}>
             {Component}
           </Tooltip>
         )}
@@ -238,9 +194,9 @@ const Tourguide = (props: TourguideProps) => {
       <Overlay style={opacityAnim} isIdle={isAnimIdle} show={show}>
         {anchorEls.map((el) => (
           <Spotlight
-            key={`spotlight-${el.position}`}
-            anchorEl={el.node}
-            pos={el.position}
+            key={`spotlight-${el.dataset.tourguidePosition}`}
+            anchorEl={el}
+            pos={Number(el.dataset.tourguidePosition)}
             animated
             show={show}
             curPos={curPos}
@@ -255,8 +211,8 @@ const Tourguide = (props: TourguideProps) => {
             {Component && (
               <Tooltip
                 show={show}
-                anchorEl={el.node}
-                pos={Number(el.position)}
+                anchorEl={el}
+                pos={Number(el.dataset.tourguidePosition)}
                 curPos={curPos}
                 animated
                 index={index}

diff --git a/src/useTourguide.ts b/src/useTourguide.ts
@@ -1,47 +1,35 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 
 export type UseTourguideProps = ReturnType<typeof useTourguide>;
 
 type TourGuideStatus = 'idle' | 'initializing' | 'ready';
 
-type TourGuideAnchor = {
-  position: number;
-  node: HTMLElement;
-};
-
 export default function useTourguide() {
-  const [allAnchorEls, setAllAnchorEls] = useState<TourGuideAnchor[]>([]);
-  const [anchorEls, setAnchorEls] = useState<TourGuideAnchor[]>([]);
+  const [anchorEls, setAnchorEls] = useState<HTMLElement[]>([]);
   const [show, setShow] = useState(false);
   const [curPos, setCurPos] = useState(0);
   const [status, setStatus] = useState<TourGuideStatus>('idle');
 
   const handleRef = useCallback(
-    (position: number) => (node: HTMLElement | null) => {
-      if (
-        node !== null &&
-        typeof position === 'number' &&
-        !node.isEqualNode(allAnchorEls[position]?.node)
-      ) {
-        setAllAnchorEls((prevEls) => {
+    (node: HTMLElement | null) => {
+      if (node !== null && node.dataset.tourguidePosition) {
+        setAnchorEls((prevEls) => {
           const anchors = [...prevEls];
-          anchors[position] = {
-            node,
-            position,
-          };
+          anchors[Number(node.dataset.tourguidePosition)] = node;
           return anchors;
         });
         if (status === 'idle') {
           setStatus('initializing');
         }
       }
     },
-    [status, allAnchorEls]
+    [status]
   );
 
   const getAnchorElProps = useCallback(
     (position: number) => ({
-      ref: handleRef(position),
+      ref: handleRef,
+      'data-tourguide-position': position,
     }),
     [handleRef]
   );
@@ -76,20 +64,6 @@ export default function useTourguide() {
     setStatus('idle');
   }, []);
 
-  const filterMissingAnchors = () => {
-    // removes missing anchors and reassigns positions
-    const newAnchors = allAnchorEls
-      .filter((item) => !!item)
-      .map((item, index) => ({
-        node: item.node,
-        position: index,
-      }));
-
-    setAnchorEls(newAnchors);
-  };
-
-  useEffect(filterMissingAnchors, [allAnchorEls.length]);
-
   return useMemo(
     () => ({
       show,
@@ -106,7 +80,6 @@ export default function useTourguide() {
       close,
       setStatus,
       status,
-      allAnchorEls,
     }),
     [
       anchorEls,
@@ -120,7 +93,6 @@ export default function useTourguide() {
       toggle,
       close,
       status,
-      allAnchorEls,
     ]
   );
 }