react-joyride - npm Package Compare versions

Comparing version 2.0.0-9 to 2.0.0-10

es/constants.js

@@ -21,5 +21,5 @@ var ACTIONS = {
   TOOLTIP: 'tooltip',
+  TOOLTIP_CLOSE: 'close',
   STEP_AFTER: 'step:after',
   TOUR_END: 'tour:end',
-  // these usually don't happen in a normal tour
   TOUR_STATUS: 'tour:status',
@@ -26,0 +26,0 @@ TARGET_NOT_FOUND: 'error:target_not_found',

lib/constants.js

@@ -25,5 +25,5 @@ 'use strict';
   TOOLTIP: 'tooltip',
+  TOOLTIP_CLOSE: 'close',
   STEP_AFTER: 'step:after',
   TOUR_END: 'tour:end',
-  // these usually don't happen in a normal tour
   TOUR_STATUS: 'tour:status',
@@ -30,0 +30,0 @@ TARGET_NOT_FOUND: 'error:target_not_found',

package.json

 {
   "name": "react-joyride",
-  "version": "2.0.0-9",
+  "version": "2.0.0-10",
   "description": "Create walkthroughs and guided tours for your apps",
@@ -36,3 +36,3 @@ "author": "Gil Barbara <[e-mail]>",
   "dependencies": {
-    "deep-diff": "^0.3.8",
+    "deep-diff": "^1.0.0",
     "deepmerge": "^2.1.0",
@@ -47,7 +47,6 @@ "exenv": "^1.2.2",
     "scrollparent": "^2.0.1",
-    "tree-changes": "^0.3.0"
+    "tree-changes": "^0.3.2"
   },
   "devDependencies": {
-    "autoprefixer": "^8.3.0",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
@@ -76,3 +75,3 @@ "babel-jest": "^22.4.3",
     "eslint-plugin-react": "^7.7.0",
-    "flow-bin": "^0.70.0",
+    "flow-bin": "^0.71.0",
     "husky": "^0.14.3",
@@ -87,4 +86,4 @@ "jest": "^22.4.3",
     "rollup": "^0.58.0",
-    "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0"
@@ -91,0 +90,0 @@ },

README.md

@@ -72,9 +72,15 @@ # React Joyride
 
-* [Props](/docs/Props.md)
-* [Step](/docs/Step.md)
-* [Styling](/docs/Styling.md)
-* [Callback](/docs/Callback.md)
-* [Constants](/docs/Constants.md)
+[Props](docs/props.md)
 
+[Step](docs/step.md)
 
+[Styling](docs/styling.md)
 
+[Callback](docs/callback.md)
+
+[Constants](docs/constants.md)
+
+[Migration from 1.x](docs/migration.md)
+
+
+

src/components/index.js

@@ -7,3 +7,3 @@ import React from 'react';
 
-import State from '../modules/state';
+import Store from '../modules/store';
 import {
@@ -31,3 +31,3 @@ getElement,
 
-    this.store = new State({
+    this.store = new Store({
       ...props,
@@ -81,3 +81,3 @@ controlled: props.run && is.number(props.stepIndex),
     hideBackButton: false,
-    run: false,
+    run: true,
     scrollOffset: 20,
@@ -160,2 +160,6 @@ scrollToFirstStep: false,
 
+      if (shouldStart) {
+        start();
+      }
+
       if (stepsChanged) {
@@ -172,4 +176,8 @@ if (validateSteps(nextSteps, debug)) {
       if (stepIndexChanged) {
-        const nextAction = stepIndex < nextStepIndex ? ACTIONS.NEXT : ACTIONS.PREV;
+        let nextAction = stepIndex < nextStepIndex ? ACTIONS.NEXT : ACTIONS.PREV;
 
+        if (action === ACTIONS.STOP) {
+          nextAction = ACTIONS.START;
+        }
+
         if (![STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
@@ -183,6 +191,2 @@ update({
       }
-
-      if (shouldStart) {
-        start();
-      }
     }
@@ -194,26 +198,8 @@ }
 
-    const { action, index } = this.state;
-    const { steps, stepIndex } = this.props;
+    const { index, lifecycle, status } = this.state;
+    const { steps } = this.props;
     const step = getMergedStep(steps[index], this.props);
     const { changed, changedFrom, changedTo } = treeChanges(prevState, this.state);
     const diffState = deep.diff(prevState, this.state);
-    const isControlled = is.number(stepIndex);
-    const isAfterAction = changed('action') && [
-      ACTIONS.NEXT,
-      ACTIONS.PREV,
-      ACTIONS.SKIP,
-      ACTIONS.CLOSE,
-    ].includes(action);
-    const hasChangedIndex = changed('index') && changedFrom('lifecycle', LIFECYCLE.TOOLTIP, LIFECYCLE.INIT);
 
-
-    if ((isControlled && isAfterAction) || hasChangedIndex) {
-      this.callback({
-        ...prevState,
-        lifecycle: LIFECYCLE.COMPLETE,
-        step,
-        type: EVENTS.STEP_AFTER,
-      });
-    }
-
     if (diffState) {
@@ -247,46 +233,10 @@ log({
 
-      // There's a step to use, but there's no target in the DOM
       if (step) {
-        const hasRenderedTarget = Boolean(getElement(step.target));
+        this.scrollToStep(prevState);
 
-        if (hasRenderedTarget) {
-          if (changedFrom('status', STATUS.READY, STATUS.RUNNING) || changed('index')) {
-            this.callback({
-              ...this.state,
-              step,
-              type: EVENTS.STEP_BEFORE,
-            });
-          }
+        if (step.placement === 'center' && status === STATUS.RUNNING && lifecycle === LIFECYCLE.INIT) {
+          this.store.update({ lifecycle: LIFECYCLE.READY });
         }
-        else {
-          console.warn('Target not mounted', step); //eslint-disable-line no-console
-          this.callback({
-            ...this.state,
-            type: EVENTS.TARGET_NOT_FOUND,
-            step,
-          });
-
-          if (!isControlled) {
-            this.store.update({ index: index + ([ACTIONS.PREV].includes(action) ? -1 : 1) });
-          }
-        }
       }
 
-      /* istanbul ignore else */
-      if (changedTo('lifecycle', LIFECYCLE.BEACON)) {
-        this.callback({
-          ...this.state,
-          step,
-          type: EVENTS.BEACON,
-        });
-      }
-
-      if (changedTo('lifecycle', LIFECYCLE.TOOLTIP)) {
-        this.callback({
-          ...this.state,
-          step,
-          type: EVENTS.TOOLTIP,
-        });
-      }
-
       if (changedTo('lifecycle', LIFECYCLE.INIT)) {
@@ -297,4 +247,2 @@ delete this.beaconPopper;
     }
-
-    this.scrollToStep(prevState);
   }
@@ -311,17 +259,2 @@
 
-  /**
-   * Trigger the callback.
-   *
-   * @private
-   * @param {Object} data
-   */
-  callback(data) {
-    const { callback } = this.props;
-
-    /* istanbul ignore else */
-    if (is.function(callback)) {
-      callback(data);
-    }
-  }
-
   scrollToStep(prevState) {
@@ -382,2 +315,17 @@ const { index, lifecycle, status } = this.state;
   /**
+   * Trigger the callback.
+   *
+   * @private
+   * @param {Object} data
+   */
+  callback = (data) => {
+    const { callback } = this.props;
+
+    /* istanbul ignore else */
+    if (is.function(callback)) {
+      callback(data);
+    }
+  };
+
+  /**
    * Keydown event listener
@@ -417,11 +365,2 @@ *
     }
-
-    if (this.beaconPopper && this.tooltipPopper) {
-      const { action } = this.state;
-
-      this.store.update({
-        action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : action,
-        lifecycle: LIFECYCLE.READY,
-      });
-    }
   };
@@ -441,2 +380,3 @@
           {...this.state}
+          callback={this.callback}
           continuous={continuous}
@@ -443,0 +383,0 @@ debug={debug}

src/components/Overlay.js

@@ -36,2 +36,3 @@ import React from 'react';
     onClickOverlay: PropTypes.func.isRequired,
+    placement: PropTypes.string.isRequired,
     spotlightClicks: PropTypes.bool.isRequired,
@@ -56,3 +57,3 @@ spotlightPadding: PropTypes.number,
   componentWillReceiveProps(nextProps) {
-    const { spotlightClicks, disableScrolling, lifecycle } = nextProps;
+    const { disableScrolling, lifecycle, spotlightClicks } = nextProps;
     const { changed, changedTo } = treeChanges(this.props, nextProps);
@@ -85,6 +86,7 @@
     const { disableScrolling } = this.props;
-    clearTimeout(this.scrollTimeout);
+
     document.removeEventListener('mousemove', this.handleMouseMove);
 
     if (!disableScrolling) {
+      clearTimeout(this.scrollTimeout);
       this.scrollParent.removeEventListener('scroll', this.handleScroll);
@@ -146,11 +148,8 @@ }
     const {
-      spotlightClicks,
       disableOverlay,
-      spotlightPadding,
       lifecycle,
       onClickOverlay,
-      target,
+      placement,
       styles,
     } = this.props;
-    const output = {};
 
@@ -174,11 +173,5 @@ if (disableOverlay || lifecycle !== LIFECYCLE.TOOLTIP) {
       >
-        {showSpotlight && (
-          <Spotlight
-            spotlightClicks={spotlightClicks}
-            spotlightPadding={spotlightPadding}
-            target={target}
-            styles={this.stylesSpotlight}
-          />
+        {placement !== 'center' && showSpotlight && (
+          <Spotlight styles={this.stylesSpotlight} />
         )}
-        {output.spotlight}
       </div>
@@ -185,0 +178,0 @@ );

src/components/Step.js

@@ -20,2 +20,4 @@ import React from 'react';
 import JoyridePortal from './Portal';
+import EVENTS from '../constants/events';
+import STATUS from '../constants/status';
 
@@ -25,2 +27,3 @@ export default class JoyrideStep extends React.Component {
     action: PropTypes.string.isRequired,
+    callback: PropTypes.func.isRequired,
     continuous: PropTypes.bool.isRequired,
@@ -89,3 +92,3 @@ controlled: PropTypes.bool.isRequired,
     const { action, continuous, debug, index, lifecycle, step, update } = this.props;
-    const { changed, changedFrom, changedTo } = treeChanges(this.props, nextProps);
+    const { changed, changedFrom } = treeChanges(this.props, nextProps);
     const skipBeacon = continuous && action !== ACTIONS.CLOSE && (index > 0 || action === ACTIONS.PREV);
@@ -106,18 +109,83 @@
     }
-
-    if (changedTo(LIFECYCLE.INIT)) {
-      delete this.beaconPopper;
-      delete this.tooltipPopper;
-    }
   }
 
   componentDidUpdate(prevProps) {
-    const { changedTo, changedFrom } = treeChanges(prevProps, this.props);
+    const { action, callback, controlled, index, lifecycle, size, status, step, update } = this.props;
+    const { changed, changedTo, changedFrom } = treeChanges(prevProps, this.props);
+    const state = { action, controlled, index, lifecycle, size, status };
 
+    const isAfterAction = [
+      ACTIONS.NEXT,
+      ACTIONS.PREV,
+      ACTIONS.SKIP,
+      ACTIONS.CLOSE,
+    ].includes(action) && changed('action');
+
+    const hasChangedIndex = changed('index') && changedFrom('lifecycle', LIFECYCLE.TOOLTIP, LIFECYCLE.INIT);
+
+    if (!changed('status') && (hasChangedIndex || (controlled && isAfterAction))) {
+      callback({
+        ...state,
+        index: prevProps.index,
+        lifecycle: LIFECYCLE.COMPLETE,
+        step,
+        type: EVENTS.STEP_AFTER,
+      });
+    }
+
+    // There's a step to use, but there's no target in the DOM
+    if (step) {
+      const hasRenderedTarget = !!getElement(step.target);
+
+      if (hasRenderedTarget) {
+        if (changedFrom('status', STATUS.READY, STATUS.RUNNING) || changed('index')) {
+          callback({
+            ...state,
+            step,
+            type: EVENTS.STEP_BEFORE,
+          });
+        }
+      }
+
+      if (!hasRenderedTarget) {
+        console.warn('Target not mounted', step); //eslint-disable-line no-console
+        callback({
+          ...state,
+          type: EVENTS.TARGET_NOT_FOUND,
+          step,
+        });
+
+        if (!controlled) {
+          update({ index: index + ([ACTIONS.PREV].includes(action) ? -1 : 1) });
+        }
+      }
+    }
+
+    /* istanbul ignore else */
+    if (changedTo('lifecycle', LIFECYCLE.BEACON)) {
+      callback({
+        ...state,
+        step,
+        type: EVENTS.BEACON,
+      });
+    }
+
     if (changedTo('lifecycle', LIFECYCLE.TOOLTIP)) {
+      callback({
+        ...state,
+        step,
+        type: EVENTS.TOOLTIP,
+      });
+
       setScope(this.tooltip);
     }
-    else if (changedFrom('lifecycle', LIFECYCLE.TOOLTIP, LIFECYCLE.INIT)) {
+
+    if (changedFrom('lifecycle', LIFECYCLE.TOOLTIP, LIFECYCLE.INIT)) {
       removeScope();
     }
+
+    if (changedTo('lifecycle', LIFECYCLE.INIT)) {
+      delete this.beaconPopper;
+      delete this.tooltipPopper;
+    }
   }
@@ -141,6 +209,6 @@
   handleClickOverlay = () => {
-    const { step } = this.props;
+    const { helpers, step } = this.props;
 
     if (!step.disableOverlayClose) {
-      this.props.helpers.close();
+      helpers.close();
     }
@@ -153,4 +221,4 @@ };
 
-  getPopper = (popper, type) => {
-    const { getPopper } = this.props;
+  setPopper = (popper, type) => {
+    const { action, getPopper, update } = this.props;
 
@@ -165,2 +233,9 @@ if (type === 'wrapper') {
     getPopper(popper, type);
+
+    if (this.beaconPopper && this.tooltipPopper) {
+      update({
+        action: action === ACTIONS.CLOSE ? ACTIONS.CLOSE : action,
+        lifecycle: LIFECYCLE.READY,
+      });
+    }
   };
@@ -214,3 +289,3 @@
           debug={debug}
-          getPopper={this.getPopper}
+          getPopper={this.setPopper}
           id={`react-joyride:${index}`}
@@ -223,3 +298,7 @@ isPositioned={step.isFixed || isFixed(target)}
         >
-          <Beacon beaconComponent={step.beaconComponent} onClickOrHover={this.handleClickHoverBeacon} styles={step.styles} />
+          <Beacon
+            beaconComponent={step.beaconComponent}
+            onClickOrHover={this.handleClickHoverBeacon}
+            styles={step.styles}
+          />
         </Floater>
@@ -226,0 +305,0 @@ </div>

src/constants/events.js

@@ -6,5 +6,5 @@ export default {
   TOOLTIP: 'tooltip',
+  TOOLTIP_CLOSE: 'close',
   STEP_AFTER: 'step:after',
   TOUR_END: 'tour:end',
-  // these usually don't happen in a normal tour
   TOUR_STATUS: 'tour:status',
@@ -11,0 +11,0 @@ TARGET_NOT_FOUND: 'error:target_not_found',

src/modules/dom.js

@@ -137,7 +137,7 @@ // @flow
 export function getElement(element: string | HTMLElement): ?HTMLElement {
-  if (typeof element === 'string') {
-    return document.querySelector(element);
+  if (typeof element !== 'string') {
+    return element;
   }
 
-  return element;
+  return element ? document.querySelector(element) : null;
 }
@@ -144,0 +144,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213824

increased by0.81%

Dev dependency count

37

decreased by-2.63%

Lines of code

6247

increased by0.74%

Number of lines in readme file

86

increased by7.5%

Dependency changes

• - Removeddeep-diff@0.3.8(transitive)

• Updateddeep-diff@^1.0.0

• Updatedtree-changes@^0.3.2