react-joyride - npm Package Compare versions

Comparing version 1.10.0 to 1.10.1

package.json

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

README.md

@@ -21,23 +21,2 @@ React Joyride
 
-Include `Joyride` in the parent component.
-
-
-```javascript
-var react = require('react');
-var Joyride = require('react-joyride');
-
-var App = React.createClass({
-  render: function () {
-    return (
-      <div className="app">
-        <Joyride ref={c => (this.joyride = c)} steps={this.state.steps} debug={true} ... />
-        <YourComponents .../>
-      </div>
-    );
-  }
- ...
-});
-```
-Don't forget to pass a `ref` to the component.
-
 ### Styles
@@ -61,49 +40,34 @@
 
-Add a custom method to include steps to your component state (or store).
+Include `Joyride` in the parent component.
 
+
 ```javascript
-addSteps: function (steps) {
-  if (!steps || typeof steps !== 'object') return false;
+import Joyride from 'react-joyride';
 
-  this.setState(function(currentState) {
-    currentState.steps = currentState.steps.concat(steps);
-    return currentState;
-  });
+export class App extends React.Component {
+  render: function () {
+    return (
+      <div className="app">
+      <Joyride
+        ref="joyride"
+        steps={[arrayOfSteps]}
+        run={true} // or some other boolean for when you want to start it
+        debug={true}
+        callback={this.callback}
+        ...
+        />
+        <Joyride ref={c => (this.joyride = c)} run={true} steps={this.state.steps} debug={true} ... />
+        <YourComponents .../>
+      </div>
+    );
+  }
 }
-
-// Render a standalone tooltip
-addTooltip: function(data) {
-  this.joyride.addTooltip(data);
-}
 ```
+Don't forget to pass a `ref` to the component.
 
-When your component is mounted or his child components, just add steps.
 
-```javascript
-componentDidMount: function () {
-  this.addSteps({...}); // or this.props.addSteps({...}); in your child components
-}
-...  
-render: function () {
-  return (
-   <div>
-     <Joyride
-       ref="joyride"
-       steps={this.state.steps}
-       run={this.state.steps.length} //or some other trigger to start the Joyride
-       ...
-     />
-     <ChildComponent
-       addSteps={this.addSteps}
-       addTooltip={this.addTooltip}
-     />
-    </div>
-  );
-}
-```
+**Please refer to the source code of the demo if you need a practical [example](https://github.com/gilbarbara/react-joyride/blob/demo/app/scripts/containers/App.jsx).**
 
-Please refer to the source code of the demo if you need a practical [example](https://github.com/gilbarbara/react-joyride/tree/demo/app/scripts).
+## Props
 
-## Options
-
 You can change the initial options passing props to the component.
@@ -113,7 +77,7 @@
 
-**stepIndex** {number}: Jump to a specific step index.
+**stepIndex** {number}: The initial step index. Defaults to `0`
 
-**run** {bool}: Run/stop the tour.
+**run** {bool}: Run/stop the tour. Defaults to `false`
 
-**autoStart** {bool}: Open the tooltip automatically when started, without showing a beacon.
+**autoStart** {bool}: Open the tooltip automatically for the first step, without showing a beacon. Defaults to `false`
 
@@ -148,3 +112,3 @@ **keyboardNavigation** {bool}: Toggle keyboard navigation (esc, space bar, return). Defaults to `true`
 
-**type** {string}: The type of your presentation. It can be `continuous` (played sequencially with the Next button) or `single`. Defaults to `single`
+**type** {string}: The type of your presentation. It can be `continuous` (played sequentially with the Next button) or `single`. Defaults to `single`
 
@@ -171,30 +135,10 @@ **disableOverlay** {bool}: Don't close the tooltip on clicking the overlay. Defaults to `false`
 
-Example:
-
-```javascript
-<Joyride
-  ref="joyride"
-  steps={this.state.steps}
-  run={this.state.steps.length}
-  debug={true}
-  type="single"
-  callback={this.callback}
-  ...
-/>
-```
-
 ## API
 
-### this.joyride.addTooltip(data)
+### this.joyride.reset(restart)
 
-Add tooltips in your elements.
+Call this method to reset the tour iteration back to 0
 
-- `data` {object} - A step object (check the syntax below)
+- `restart` {boolean} - Starts the tour again
 
-### this.joyride.start(autorun)
-
-Call this method to start the tour.
-
-- `autorun` {boolean} - Starts the tour with the first tooltip opened.
-
 ### this.joyride.next()
@@ -208,12 +152,8 @@
 
-### this.joyride.stop()
+### this.joyride.addTooltip(data)
 
-Call this method to stop/pause the tour.
+Add tooltips in your elements.
 
-### this.joyride.reset(restart)
+- `data` {object} - A step object (check the syntax below)
 
-Call this method to reset the tour iteration back to 0
-
-- `restart` {boolean} - Starts the tour again
-
 ### this.joyride.getProgress()
@@ -236,28 +176,4 @@ Retrieve the current progress of your tour. The object returned looks like this:
 
-### ~~this.joyride.parseSteps(steps)~~ Deprecated
+### Please don't use the `start` and `stop` methods anymore. Instead use a combination of the props `run` and `autoStart`.
 
-Parse the incoming steps, check if it's already rendered and returns an array with valid items
-
-- `steps ` {array|object}
-
-```javascript
-var steps = this.joyride.parseSteps({
-  title: 'Title',
-  text: 'description',
-  selector: 'my-super-class',
-  position: 'top'
-});
-
-// steps
-[{
-  title: 'Title',
-  text: 'description',
-  selector: '#super-panel',
-  position: 'top'
-}]
-```
-
-### Only start the tour after all target elements (or at least the first step) are rendered in the page.
-
-
 ## Step Syntax
@@ -313,3 +229,3 @@ There are some usable options but you can pass custom parameters.
     header: {
-      textAlign: 'right''
+      textAlign: 'right'
       // or any style attribute
@@ -371,8 +287,5 @@ },
 
-## License
 
-Copyright © 2016 Gil Barbara - [MIT License](LICENSE)
-
 ---
 
 Inspired by [react-tour-guide](https://github.com/jakemmarsh/react-tour-guide) and [jquery joyride tour](http://zurb.com/playground/jquery-joyride-feature-tour-plugin)

src/scripts/Joyride.jsx

@@ -87,2 +87,3 @@ import React from 'react';
     debug: false,
+    disableOverlay: false,
     holePadding: 5,
@@ -100,5 +101,5 @@ keyboardNavigation: true,
     run: false,
-    scrollToSteps: true,
     scrollOffset: 20,
     scrollToFirstStep: false,
+    scrollToSteps: true,
     showBackButton: true,
@@ -108,2 +109,3 @@ showOverlay: true,
     showStepsProgress: false,
+    stepIndex: 0,
     steps: [],
@@ -174,2 +176,3 @@ tooltipOffset: 15,
     });
+
     const { isRunning, shouldRun, standaloneData } = this.state;
@@ -197,3 +200,3 @@ const { keyboardNavigation, run, steps, stepIndex } = this.props;
       // run prop was changed to off, so stop the joyride
-      if (run && nextProps.run === false) {
+      if (run && !nextProps.run) {
         this.stop();
@@ -365,3 +368,3 @@ didStop = true;
     // Joyride was changed to a step index which doesn't exist (hit the end)
-    if (nextProps.run && nextSteps.length && index !== nextState.index && !nextStep) {
+    if (!nextState.isRunning && nextSteps.length && index !== nextState.index && !nextStep) {
       this.triggerCallback({
@@ -426,2 +429,4 @@ action: nextState.action,
    *
+   * @private
+   *
    * @param {boolean} [autorun] - Starts with the first tooltip opened
@@ -452,2 +457,4 @@ * @param {Array} [steps] - Array of steps, defaults to this.props.steps
    * Stop the tour
+   *
+   * @private
    */
@@ -576,5 +583,7 @@ stop() {
     const el = document.querySelector(key);
+
     if (!el) {
       return;
     }
+
     el.setAttribute('data-tooltip', JSON.stringify(data));
@@ -605,8 +614,4 @@ const eventType = data.event || 'click';
   parseSteps(steps) {
-    logger({
-      type: 'joyride:parseSteps',
-      msg: 'joyride.parseSteps() is deprecated.  It is no longer necessary to parse steps before providing them to Joyride.',
-      warn: true,
-      debug: this.props.debug,
-    });
+    console.warn('joyride.parseSteps() is deprecated.  It is no longer necessary to parse steps before providing them to Joyride'); //eslint-disable-line no-console
+
     return steps;
@@ -630,2 +635,3 @@ }
       });
+
       return false;
@@ -638,2 +644,3 @@ }
       const hasField = Boolean(step[requiredField]);
+
       if (!hasField) {
@@ -647,4 +654,6 @@ logger({
       }
+
       return hasField;
     };
+
     return requiredFields.every(hasRequiredField);
@@ -685,2 +694,3 @@ }
     const el = document.querySelector(sanitizeSelector(step.selector));
+
     if (!el) {
@@ -693,4 +703,6 @@ logger({
       });
+
       return null;
     }
+
     return el;
@@ -1035,3 +1047,3 @@ }
   /**
-   * Update position for small screens.
+   * Update position for overflowing elements.
    *
@@ -1182,5 +1194,7 @@ * @private
               let next = locale.next;
+
               if (typeof locale.next === 'string') {
                 next = (<span>{locale.next}</span>);
               }
+
               buttons.primary = (<span>{next} <span>{`${(index + 1)}/${steps.length}`}</span></span>);
@@ -1187,0 +1201,0 @@ }

src/scripts/Tooltip.jsx

@@ -7,2 +7,3 @@ import React from 'react';
     super(props);
+
     this.state = {};
@@ -59,3 +60,3 @@ }
   componentDidMount() {
-    const { onRender } = this.props;
+    const { onRender, showOverlay, allowClicksThruHole } = this.props;
 
@@ -65,3 +66,3 @@ this.forceUpdate();
 
-    if (this.props.showOverlay && this.props.allowClicksThruHole) {
+    if (showOverlay && allowClicksThruHole) {
       document.addEventListener('mousemove', this.handleMouseMove, false);
@@ -415,5 +416,7 @@ }
     const inHole = inHoleWidth && inHoleHeight;
+
     if (inHole && !this.state.mouseOverHole) {
       this.setState({ mouseOverHole: true });
     }
+
     if (!inHole && this.state.mouseOverHole) {
@@ -425,3 +428,13 @@ this.setState({ mouseOverHole: false });
   render() {
-    const { buttons, disableOverlay, onClick, selector, showOverlay, step, target, type } = this.props;
+    const {
+      allowClicksThruHole,
+      buttons,
+      disableOverlay,
+      onClick,
+      selector,
+      showOverlay,
+      step,
+      target,
+      type
+    } = this.props;
 
@@ -459,4 +472,3 @@ if (!target) {
           style={styles.main}
-          dangerouslySetInnerHTML={{ __html: step.text || '' }}
-        />);
+          dangerouslySetInnerHTML={{ __html: step.text || '' }} />);
     }
@@ -508,4 +520,5 @@ else {
     if (showOverlay) {
+      // Empty onClick handler is for iOS touch devices (https://github.com/gilbarbara/react-joyride/issues/204)
       output.hole = (
-        <div className={`joyride-hole ${browser}`} style={styles.hole} />
+        <div className={`joyride-hole ${browser}`} style={styles.hole} onClick={() => {}} />
       );
@@ -512,0 +525,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

756913

increased by0.57%

Lines of code

2085

increased by1.41%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

283

decreased by-23.51%

No dependency changes