react-joyride - npm Package Compare versions

Comparing version 2.0.0-10 to 2.0.0-11

package.json

 {
   "name": "react-joyride",
-  "version": "2.0.0-10",
+  "version": "2.0.0-11",
   "description": "Create walkthroughs and guided tours for your apps",
@@ -41,3 +41,3 @@ "author": "Gil Barbara <[e-mail]>",
     "nested-property": "^0.0.7",
-    "react-floater": "^0.5.3",
+    "react-floater": "^0.5.4",
     "react-proptype-conditional-require": "^1.0.4",
@@ -56,10 +56,10 @@ "scroll": "^2.0.3",
     "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-node-env-inline": "^0.4.0",
+    "babel-plugin-transform-node-env-inline": "^0.4.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
-    "chalk": "^2.4.0",
-    "cross-env": "^5.1.4",
+    "chalk": "^2.4.1",
+    "cross-env": "^5.1.5",
     "date-fns": "^1.29.0",
@@ -70,8 +70,8 @@ "enzyme": "^3.3.0",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-babel": "^5.0.0",
-    "eslint-plugin-flowtype": "^2.46.2",
+    "eslint-plugin-babel": "^5.1.0",
+    "eslint-plugin-flowtype": "^2.46.3",
     "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
-    "flow-bin": "^0.71.0",
+    "eslint-plugin-react": "^7.8.2",
+    "flow-bin": "^0.72.0",
     "husky": "^0.14.3",
@@ -85,3 +85,3 @@ "jest": "^22.4.3",
     "rimraf": "^2.6.2",
-    "rollup": "^0.58.0",
+    "rollup": "^0.59.0",
     "rollup-plugin-babel": "^3.0.4",
@@ -88,0 +88,0 @@ "rollup-plugin-commonjs": "^9.1.3",

README.md

@@ -7,4 +7,4 @@ # React Joyride
 
-React-Joyride is React component to create a tour for your app for new users or explain functionality of new features.  
-It uses [react-floater](https://github.com/gilbarbara/react-floater) \(with popper.js for positioning and styling\) and you can use your own components if you want.
+Create a tour for your app!  
+Use it to showcase your app for new users! Or explain functionality of complex features!  
 
@@ -15,6 +15,8 @@ #### View the demo [here](https://2zpjporp4p.codesandbox.io/)
 
+>  If you are looking for the documentation for the old 1.x version, go [here](https://github.com/gilbarbara/react-joyride/tree/v1.11.4)
+
 ## Setup
 
 ```bash
-npm install --save react-joyride
+npm i react-joyride@next
 ```
@@ -24,2 +26,6 @@
 
+Just set a `steps` array to the Joyride component and you're good to go!
+
+You can use your own component for the tooltip body or beacon, if you want.
+
 ```js
@@ -62,3 +68,2 @@ import Joyride from 'react-joyride';
           run={run}
-          debug={true}
           callback={this.callback}
@@ -88,3 +93,3 @@ ...
 
+This library uses [react-floater](https://github.com/gilbarbara/react-floater) and [popper.js](https://github.com/FezVrasta/popper.js) for positioning and styling.
 
-

src/components/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import deep from 'deep-diff';
 import treeChanges from 'tree-changes';
@@ -16,3 +15,3 @@ import is from 'is-lite';
 } from '../modules/dom';
-import { canUseDOM, log } from '../modules/helpers';
+import { canUseDOM, isEqual, log } from '../modules/helpers';
 import { getMergedStep, validateSteps } from '../modules/step';
@@ -125,3 +124,2 @@
     if (!canUseDOM) return;
-
     const { action, status } = this.state;
@@ -131,5 +129,4 @@ const { steps, stepIndex } = this.props;
     const { setSteps, start, stop, update } = this.store;
-
+    const diffProps = !isEqual(this.props, nextProps);
     const { changed } = treeChanges(this.props, nextProps);
-    const diffProps = deep.diff(this.props, nextProps);
 
@@ -141,3 +138,3 @@ if (diffProps) {
           { key: 'nextProps', value: nextProps },
-          { key: 'changed', value: diffProps },
+          { key: 'props', value: this.props },
         ],
@@ -147,3 +144,3 @@ debug,
 
-      const stepsChanged = deep.diff(nextSteps, steps);
+      const stepsChanged = !isEqual(nextSteps, steps);
       const stepIndexChanged = is.number(nextStepIndex) && changed('stepIndex');
@@ -161,3 +158,2 @@ let shouldStart = false;
       }
-
       if (shouldStart) {
@@ -202,3 +198,3 @@ start();
     const { changed, changedFrom, changedTo } = treeChanges(prevState, this.state);
-    const diffState = deep.diff(prevState, this.state);
+    const diffState = !isEqual(prevState, this.state);
 
@@ -205,0 +201,0 @@ if (diffState) {

src/components/Tooltip/Container.js

@@ -56,3 +56,3 @@ import React from 'react';
         {title && (<h4 style={styles.tooltipTitle}>{title}</h4>)}
-        {content && (
+        {!!content && (
           <div style={styles.tooltipContent}>
@@ -59,0 +59,0 @@ {content}

src/modules/helpers.js

@@ -117,3 +117,5 @@ // @flow
 export function hasValidKeys(value: Object, keys: string | Array<any>): boolean {
-  if (!is.plainObject(value) || !is.array(keys)) return false;
+  if (!is.plainObject(value) || !is.array(keys)) {
+    return false;
+  }
   let validKeys = keys;
@@ -127,1 +129,40 @@
 }
+
+export function isEqual(a: any, b: any): boolean {
+  let p;
+  let t;
+
+  for (p in a) {
+    if (Object.prototype.hasOwnProperty.call(a, p)) {
+      if (typeof b[p] === 'undefined') {
+        return false;
+      }
+
+      if (b[p] && !a[p]) {
+        return false;
+      }
+
+      t = typeof a[p];
+
+      if (t === 'object' && !isEqual(a[p], b[p])) {
+        return false;
+      }
+
+      if (t === 'function' && (typeof b[p] === 'undefined' || a[p].toString() !== b[p].toString())) {
+        return false;
+      }
+
+      if (a[p] !== b[p]) {
+        return false;
+      }
+    }
+  }
+
+  for (p in b) {
+    if (typeof a[p] === 'undefined') {
+      return false;
+    }
+  }
+
+  return true;
+}

src/modules/step.js

@@ -101,7 +101,7 @@ // @flow
   const scrollParent = hasCustomScrollParent(getElement(step.target));
-  const floaterProps = deepmerge(DEFAULTS.floaterProps, mergedStep.floaterProps || {});
+  const floaterProps = deepmerge.all([props.floaterProps || {}, DEFAULTS.floaterProps, mergedStep.floaterProps || {}]);
 
   // Set react-floater props
   floaterProps.offset = mergedStep.offset;
-  floaterProps.styles = mergedStyles.floater;
+  floaterProps.styles = deepmerge(floaterProps.styles || {}, mergedStyles.floater || {});
 
@@ -108,0 +108,0 @@ if (mergedStep.floaterProps && mergedStep.floaterProps.offset) {

No alert changes

Improved metrics

Total package byte prevSize

218862

increased by2.36%

Lines of code

6350

increased by1.65%

Number of lines in readme file

91

increased by5.81%

Dependency changes

• Updatedreact-floater@^0.5.4