react-joyride - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

lib/scripts/Mixin.js

@@ -32,2 +32,3 @@ var React   = require('react/addons'),
     },
+    skipped: false,
     steps: [],
@@ -151,7 +152,15 @@
         if (type === 'skip') {
+            joyride.skipped = true;
             newIndex = joyride.steps.length + 1;
         }
 
-        joyride.toggleTooltip(joyride.options.type === 'guided' && ['close',
-                                                                    'skip'].indexOf(type) === -1 && Boolean(joyride.steps[newIndex]), newIndex);
+        if (typeof joyride.options.stepCallback === 'function') {
+            joyride.options.stepCallback(joyride.steps[state._joyrideCurrentIndex]);
+        }
+
+        joyride.toggleTooltip(
+            joyride.options.type === 'guided'
+            && ['close', 'skip'].indexOf(type) === -1
+            && Boolean(joyride.steps[newIndex])
+            , newIndex);
     },
@@ -276,2 +285,39 @@
         });
+    },
+
+    /**
+     * Parse the incoming steps
+     * @param {Array|Object} steps
+     * @returns {Array}
+     */
+    parseSteps: function (steps) {
+        var tmpSteps = [],
+            newSteps = [],
+            el;
+
+        if (Array.isArray(steps)) {
+            steps.forEach(function (s) {
+                if (s instanceof Object) {
+                    tmpSteps.push(s);
+                }
+            });
+        }
+        else {
+            tmpSteps = [steps];
+        }
+
+        tmpSteps.forEach(function (s) {
+            if (s.selector.dataset && s.selector.dataset.reactid) {
+                var reactSelector = '[data-reactid="' + s.selector.dataset.reactid + '"]';
+                s.selector = reactSelector;
+            }
+            el = document.querySelector(s.selector);
+            s.position = s.position || 'top';
+
+            if (el && el.offsetParent) {
+                newSteps.push(s);
+            }
+        });
+
+        return newSteps;
     }
@@ -333,3 +379,3 @@ };
                 newY: state._joyrideYPos !== prevState._joyrideYPos,
-                toggleTooltip:  state._joyrideShowTooltip !== prevState._joyrideShowTooltip
+                toggleTooltip: state._joyrideShowTooltip !== prevState._joyrideShowTooltip
             };
@@ -342,3 +388,3 @@
             if (typeof joyride.options.completeCallback === 'function') {
-                joyride.options.completeCallback(joyride.steps);
+                joyride.options.completeCallback(joyride.steps, joyride.skipped);
             }
@@ -368,36 +414,34 @@ this._joyrideUnrenderLayer();
     joyrideAddSteps: function (steps, start) {
-        var tmpSteps = [],
-            el;
 
         start = start || this.state._joyridePlay;
 
-        if (Array.isArray(steps)) {
-            steps.forEach(function (s) {
-                if (s instanceof Object) {
-                    tmpSteps.push(s);
-                }
-            });
+        joyride.steps = joyride.steps.concat(joyride.parseSteps(steps));
+
+        this.setState({
+            _joyridePlay: start
+        });
+    },
+
+    /**
+     * Replace Steps
+     * @param {array|object} steps - Steps to replace
+     * @param {boolean} [restart] - Starts the new tour right away
+     */
+    joyrideReplaceSteps: function (steps, restart) {
+        steps = steps || [];
+        restart = restart || true;
+
+        joyride.steps = joyride.parseSteps(steps);
+        joyride.skipped = false;
+        this._target.innerHTML = '';
+
+        // Force a new render if necessary
+        if (restart && this.state._joyridePlay === restart && this.state._joyrideCurrentIndex === 0) {
+            this._joyrideRenderLayer();
         }
-        else {
-            tmpSteps = [steps];
-        }
 
-        tmpSteps.forEach(function (s) {
-            if (s.selector.dataset && s.selector.dataset.reactid) {
-                var reactSelector = '[data-reactid="' + s.selector.dataset.reactid + '"]';
-                s.selector = reactSelector;
-            }
-            el = document.querySelector(s.selector);
-            s.position = s.position || 'top';
-
-            if (el && el.offsetParent) {
-                joyride.steps.push(s);
-            }
+        this.setState({
+            _joyrideCurrentIndex: 0,
+            _joyridePlay: restart
         });
-
-        this.setState(
-            React.addons.update(this.state, {
-                _joyridePlay: { $set: start }
-            })
-        );
     },
@@ -404,0 +448,0 @@

package.json

 {
   "name": "react-joyride",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Create walkthroughs and guided tours for your apps",
@@ -5,0 +5,0 @@ "author": "Gil Barbara <[e-mail]>",

README.md

@@ -5,2 +5,3 @@ React Joyride
 <a href="https://www.npmjs.com/package/react-joyride" target="_blank">![](https://badge.fury.io/js/react-joyride.svg)</a> <a href="https://travis-ci.org/gilbarbara/react-joyride" target="_blank">![](https://travis-ci.org/gilbarbara/react-joyride.svg)</a>
+<a href="https://codeclimate.com/github/gilbarbara/react-joyride">![](https://codeclimate.com/github/gilbarbara/react-joyride/badges/gpa.svg)</a>
 
@@ -90,5 +91,5 @@ <a href="http://gilbarbara.github.io/react-joyride/" target="_blank">![](http://gilbarbara.github.io/react-joyride/media/example.png)</a>
 
-**completeCallback** {function}: It will be called after an user has completed all the steps in your tour and passes all steps. Defaults to `undefined`
+**completeCallback** {function}: It will be called after an user has completed all the steps or skipped the tour completely and passes the steps `{array}` and if the tour was skipped `{boolean}`. Defaults to `undefined`
 
-**stepCallback** {function}: It will be called after each step and passes the completed step. Defaults to `undefined`
+**stepCallback** {function}: It will be called after each step and passes the completed step `{object}`. Defaults to `undefined`
 
@@ -124,3 +125,3 @@ Example:
 
-- `steps` {object|array} - Tour's steps
+- `steps` {object|array} - Steps to add to the tour
 - `start` {boolean} - Starts the tour right away (optional)
@@ -140,2 +141,21 @@
 
+### this.joyrideReplaceSteps(steps, [start])
+
+Add steps to your tour. You can call this method multiple times even after the tour has started.
+
+- `steps` {object|array} - Steps to replace
+- `restart` {boolean} - Starts the new tour right away. Defaults to `true`
+
+```javascript
+this.joyrideReplaceSteps([
+	{
+		title: "", //optional
+		text: "...",
+		selector: "...",
+		position: "..."
+	},
+	...
+], true);
+```
+
 ### this.joyrideStart(autorun)
@@ -142,0 +162,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

52840

increased by3.69%

Lines of code

899

increased by4.17%

Number of lines in readme file

240

increased by9.09%

No dependency changes