Custom Helper

- Add prop tu pass CustomHelper Component
- debounced showStep whe resize window

Author: elrumordelaluz

package.json

@@ -73,6 +73,7 @@
   },
   "dependencies": {
     "classnames": "2.2.6",
+    "lodash.debounce": "4.0.8",
     "lodash.pick": "4.4.0",
     "prop-types": "15.6.2",
     "scroll-smooth": "1.0.1",

src/Portal.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { createPortal } from 'react-dom'
 
 class Tour extends Component {

src/Tour.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import cn from 'classnames'
 import scrollSmooth from 'scroll-smooth'
 import Scrollparent from 'scrollparent'
+import debounce from 'lodash.debounce'
 import {
   Arrow,
   Close,
@@ -101,6 +102,7 @@ class Tour extends Component {
     }
     this.helper = createRef()
     this.helperElement = null
+    this.debouncedShowStep = debounce(this.showStep, 70)
   }
 
   componentDidMount() {
@@ -162,8 +164,8 @@ class Tour extends Component {
         }
       }
     )
-    // TODO: debounce it.
-    window.addEventListener('resize', this.showStep, false)
+
+    window.addEventListener('resize', this.debouncedShowStep, false)
     window.addEventListener('keydown', this.keyDownHandler, false)
   }
 
@@ -282,7 +284,7 @@ class Tour extends Component {
         observer: null,
       }
     }, this.onBeforeClose)
-    window.removeEventListener('resize', this.showStep)
+    window.removeEventListener('resize', this.debouncedShowStep)
     window.removeEventListener('keydown', this.keyDownHandler)
   }
 
@@ -405,6 +407,7 @@ class Tour extends Component {
       prevStep,
       rounded,
       accentColor,
+      CustomHelper,
     } = this.props
 
     const {
@@ -477,82 +480,108 @@ class Tour extends Component {
             })}
             accentColor={accentColor}
           >
-            {this.props.children}
-            {steps[current] &&
-              (typeof steps[current].content === 'function'
-                ? steps[current].content({
-                    close: onRequestClose,
-                    goTo: this.gotoStep,
-                    inDOM,
-                    step: current + 1,
-                  })
-                : steps[current].content)}
-            {showNumber && (
-              <Badge data-tour-elem="badge">
-                {typeof badgeContent === 'function'
-                  ? badgeContent(current + 1, steps.length)
-                  : current + 1}
-              </Badge>
-            )}
-            {(showButtons || showNavigation) && (
-              <Controls data-tour-elem="controls">
-                {showButtons && (
-                  <Arrow
-                    onClick={
-                      typeof prevStep === 'function' ? prevStep : this.prevStep
-                    }
-                    disabled={current === 0}
-                    label={prevButton ? prevButton : null}
-                  />
+            {CustomHelper ? (
+              <CustomHelper
+                current={current}
+                totalSteps={steps.length}
+                gotoStep={this.gotoStep}
+                close={onRequestClose}
+                content={
+                  steps[current] &&
+                  (typeof steps[current].content === 'function'
+                    ? steps[current].content({
+                        close: onRequestClose,
+                        goTo: this.gotoStep,
+                        inDOM,
+                        step: current + 1,
+                      })
+                    : steps[current].content)
+                }
+              >
+                {this.props.children}
+              </CustomHelper>
+            ) : (
+              <>
+                {this.props.children}
+                {steps[current] &&
+                  (typeof steps[current].content === 'function'
+                    ? steps[current].content({
+                        close: onRequestClose,
+                        goTo: this.gotoStep,
+                        inDOM,
+                        step: current + 1,
+                      })
+                    : steps[current].content)}
+                {showNumber && (
+                  <Badge data-tour-elem="badge">
+                    {typeof badgeContent === 'function'
+                      ? badgeContent(current + 1, steps.length)
+                      : current + 1}
+                  </Badge>
                 )}
-
-                {showNavigation && (
-                  <Navigation data-tour-elem="navigation">
-                    {steps.map((s, i) => (
-                      <Dot
-                        key={`${s.selector ? s.selector : 'undef'}_${i}`}
-                        onClick={() => this.gotoStep(i)}
-                        current={current}
-                        index={i}
-                        disabled={current === i || disableDotsNavigation}
-                        showNumber={showNavigationNumber}
-                        data-tour-elem="dot"
-                        className={cn(CN.dot.base, {
-                          [CN.dot.active]: current === i,
-                        })}
+                {(showButtons || showNavigation) && (
+                  <Controls data-tour-elem="controls">
+                    {showButtons && (
+                      <Arrow
+                        onClick={
+                          typeof prevStep === 'function'
+                            ? prevStep
+                            : this.prevStep
+                        }
+                        disabled={current === 0}
+                        label={prevButton ? prevButton : null}
                       />
-                    ))}
-                  </Navigation>
+                    )}
+
+                    {showNavigation && (
+                      <Navigation data-tour-elem="navigation">
+                        {steps.map((s, i) => (
+                          <Dot
+                            key={`${s.selector ? s.selector : 'undef'}_${i}`}
+                            onClick={() => this.gotoStep(i)}
+                            current={current}
+                            index={i}
+                            disabled={current === i || disableDotsNavigation}
+                            showNumber={showNavigationNumber}
+                            data-tour-elem="dot"
+                            className={cn(CN.dot.base, {
+                              [CN.dot.active]: current === i,
+                            })}
+                          />
+                        ))}
+                      </Navigation>
+                    )}
+
+                    {showButtons && (
+                      <Arrow
+                        onClick={
+                          current === steps.length - 1
+                            ? lastStepNextButton
+                              ? onRequestClose
+                              : () => {}
+                            : typeof nextStep === 'function'
+                            ? nextStep
+                            : this.nextStep
+                        }
+                        disabled={
+                          !lastStepNextButton && current === steps.length - 1
+                        }
+                        inverted
+                        label={
+                          lastStepNextButton && current === steps.length - 1
+                            ? lastStepNextButton
+                            : nextButton
+                            ? nextButton
+                            : null
+                        }
+                      />
+                    )}
+                  </Controls>
                 )}
 
-                {showButtons && (
-                  <Arrow
-                    onClick={
-                      current === steps.length - 1
-                        ? lastStepNextButton
-                          ? onRequestClose
-                          : () => {}
-                        : typeof nextStep === 'function'
-                        ? nextStep
-                        : this.nextStep
-                    }
-                    disabled={
-                      !lastStepNextButton && current === steps.length - 1
-                    }
-                    inverted
-                    label={
-                      lastStepNextButton && current === steps.length - 1
-                        ? lastStepNextButton
-                        : nextButton
-                        ? nextButton
-                        : null
-                    }
-                  />
-                )}
-              </Controls>
+                {showCloseButton ? <Close onClick={onRequestClose} /> : null}
+              </>
             )}
-
-            {showCloseButton ? <Close onClick={onRequestClose} /> : null}
           </Guide>
         </Portal>
       )

src/demo/App.js

@@ -1,16 +1,12 @@
 import React, { Component } from 'react'
 import Demo from './Demo'
-import Tour from '../index'
+import Tour, { Arrow } from '../index'
 import Text from './Text'
 import Glitch from './Glitch'
 import Tooltip from './Tooltip'
 import { Link } from './Button'
 import PropTypes from 'prop-types'
-import {
-  disableBodyScroll,
-  enableBodyScroll,
-  clearAllBodyScrollLocks,
-} from 'body-scroll-lock'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 
 import './styles.css'
 
@@ -20,6 +16,7 @@ class App extends Component {
     this.state = {
       isTourOpen: false,
       isShowingMore: false,
+      customComps: false,
     }
   }
 
@@ -36,6 +33,11 @@ class App extends Component {
       e.preventDefault()
       this.openTour()
     }
+
+    if (this.state.isTourOpen && e.keyCode === 13) {
+      e.preventDefault()
+      this.toggleCustomComps()
+    }
   }
 
   toggleShowMore = () => {
@@ -44,6 +46,12 @@ class App extends Component {
     }))
   }
 
+  toggleCustomComps = () => {
+    this.setState(prevState => ({
+      customComps: !prevState.customComps,
+    }))
+  }
+
   closeTour = () => {
     this.setState({ isTourOpen: false })
   }
@@ -56,7 +64,7 @@ class App extends Component {
   enableBody = target => enableBodyScroll(target)
 
   render() {
-    const { isTourOpen, isShowingMore } = this.state
+    const { isTourOpen, isShowingMore, customComps } = this.state
     const accentColor = '#5cb7b7'
 
     return (
@@ -76,12 +84,65 @@ class App extends Component {
           className="helper"
           rounded={5}
           accentColor={accentColor}
+          CustomHelper={customComps ? MyCustomHelper : null}
         />
       </div>
     )
   }
 }
 
+const MyCustomHelper = ({ current, content, totalSteps, gotoStep, close }) => {
+  return (
+    <main>
+      <span
+        style={{
+          position: 'absolute',
+          right: '1em',
+          bottom: '.5em',
+          fontSize: '10px',
+        }}
+      >
+        Step: {current + 1} |{' '}
+        <span style={{ cursor: 'pointer' }} onClick={close}>
+          ❌
+        </span>
+        <hr style={{ border: 0, borderBottom: '1px solid rgba(0,0,0,.1)' }} />
+        <Arrow
+          onClick={() => gotoStep(current < totalSteps - 1 ? current + 1 : 0)}
+          inverted={current < totalSteps - 1}
+        />
+      </span>
+
+      {content}
+      <ul
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          listStyle: 'none',
+        }}
+      >
+        {Array.from(Array(totalSteps).keys()).map((li, i) => (
+          <li key={li}>
+            <button
+              onClick={() => current !== i && gotoStep(i)}
+              style={{
+                color: current === i ? 'red' : 'initial',
+                border: 0,
+                backgroundColor: '#f7f7f7',
+                padding: '.5em',
+                margin: '1px',
+              }}
+            >
+              {li + 1}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </main>
+  )
+}
+
 const tourConfig = [
   {
     selector: '[data-tut="reactour__iso"]',

src/index.js

@@ -1,2 +1,3 @@
 import Tour from './Tour'
 export default Tour
+export { Arrow, Close, Badge, Controls, Navigation, Dot } from './components'

yarn.lock

@@ -3452,7 +3452,7 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash.debounce@^4.0.8:
+lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=