react-joyride - npm Package Compare versions

Comparing version 2.0.0-11 to 2.0.0-12

package.json

 {
   "name": "react-joyride",
-  "version": "2.0.0-11",
+  "version": "2.0.0-12",
   "description": "Create walkthroughs and guided tours for your apps",
@@ -36,8 +36,8 @@ "author": "Gil Barbara <[e-mail]>",
   "dependencies": {
-    "deep-diff": "^1.0.0",
-    "deepmerge": "^2.1.0",
+    "deep-diff": "^1.0.1",
+    "deepmerge": "^2.1.1",
     "exenv": "^1.2.2",
     "is-lite": "^0.2.0",
     "nested-property": "^0.0.7",
-    "react-floater": "^0.5.4",
+    "react-floater": "^0.5.5",
     "react-proptype-conditional-require": "^1.0.4",
@@ -51,4 +51,4 @@ "scroll": "^2.0.3",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.3",
-    "babel-jest": "^22.4.3",
+    "babel-eslint": "^8.2.6",
+    "babel-jest": "^23.4.0",
     "babel-plugin-array-includes": "^2.0.3",
@@ -64,24 +64,27 @@ "babel-plugin-external-helpers": "^6.22.0",
     "chalk": "^2.4.1",
-    "cross-env": "^5.1.5",
+    "cross-env": "^5.2.0",
     "date-fns": "^1.29.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
+    "eslint": "^5.1.0",
+    "eslint-config-airbnb": "^17.0.0",
     "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.8.2",
-    "flow-bin": "^0.72.0",
+    "eslint-plugin-flowtype": "^2.50.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.10.0",
+    "flow-bin": "^0.76.0",
     "husky": "^0.14.3",
-    "jest": "^22.4.3",
-    "jest-environment-jsdom-global": "^1.0.3",
-    "jest-enzyme": "^6.0.0",
-    "prop-types": "^15.6.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "jest": "^23.4.1",
+    "jest-chain": "^1.0.3",
+    "jest-environment-jsdom-global": "^1.1.0",
+    "jest-enzyme": "^6.0.2",
+    "jest-extended": "^0.7.2",
+    "jest-watch-typeahead": "^0.2.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
     "rimraf": "^2.6.2",
-    "rollup": "^0.59.0",
-    "rollup-plugin-babel": "^3.0.4",
+    "rollup": "^0.62.0",
+    "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
@@ -88,0 +91,0 @@ "rollup-plugin-node-resolve": "^3.3.0"

README.md

@@ -53,3 +53,3 @@ # React Joyride
 
-  callback = (tour) => {
+  callback = (data) => {
     const { action, index, type } = data;
@@ -56,0 +56,0 @@ };

src/components/Beacon.js

@@ -52,2 +52,3 @@ import React from 'react';
     ]),
+    locale: PropTypes.object.isRequired,
     onClickOrHover: PropTypes.func.isRequired,
@@ -61,3 +62,3 @@ styles: PropTypes.object.isRequired,
     if (style) {
-      style.remove();
+      style.parentNode.removeChild(style);
     }
@@ -67,8 +68,8 @@ }
   render() {
-    const { beaconComponent, onClickOrHover, styles } = this.props;
+    const { beaconComponent, locale, onClickOrHover, styles } = this.props;
     const props = {
-      'aria-label': 'Open',
+      'aria-label': locale.open,
       onClick: onClickOrHover,
       onMouseEnter: onClickOrHover,
-      title: 'Open',
+      title: locale.open,
     };
@@ -91,2 +92,3 @@ let component;
           style={styles.beacon}
+          type="button"
           {...props}
@@ -93,0 +95,0 @@ >

src/components/index.js

@@ -189,6 +189,6 @@ import React from 'react';
     const { index, lifecycle, status } = this.state;
-    const { steps } = this.props;
-    const step = getMergedStep(steps[index], this.props);
+    const { debug, steps } = this.props;
     const { changed, changedFrom, changedTo } = treeChanges(prevState, this.state);
     const diffState = !isEqual(prevState, this.state);
+    let step = getMergedStep(steps[index], this.props);
 
@@ -203,3 +203,3 @@ if (diffState) {
         ],
-        debug: this.props.debug,
+        debug,
       });
@@ -212,2 +212,4 @@
           type = EVENTS.TOUR_END;
+          // Return the last step when the tour is finished
+          step = getMergedStep(steps[prevState.index], this.props);
         }
@@ -214,0 +216,0 @@ else if (changedFrom('status', STATUS.READY, STATUS.RUNNING)) {

src/components/Overlay.js

@@ -14,3 +14,3 @@ import React from 'react';
 } from '../modules/dom';
-import { isLegacy } from '../modules/helpers';
+import { getBrowser, isLegacy } from '../modules/helpers';
 
@@ -54,2 +54,4 @@ import LIFECYCLE from '../constants/lifecycle';
     }
+
+    window.addEventListener('resize', this.handleResize);
   }
@@ -66,3 +68,5 @@
         setTimeout(() => {
-          if (!this.state.isScrolling) {
+          const { isScrolling } = this.state;
+
+          if (!isScrolling) {
             this.setState({ showSpotlight: true });
@@ -77,6 +81,6 @@ this.scrollParent.removeEventListener('scroll', this.handleScroll);
       if (spotlightClicks && lifecycle === LIFECYCLE.TOOLTIP) {
-        document.addEventListener('mousemove', this.handleMouseMove, false);
+        window.addEventListener('mousemove', this.handleMouseMove, false);
       }
       else if (lifecycle !== LIFECYCLE.TOOLTIP) {
-        document.removeEventListener('mousemove', this.handleMouseMove);
+        window.removeEventListener('mousemove', this.handleMouseMove);
       }
@@ -89,3 +93,4 @@ }
 
-    document.removeEventListener('mousemove', this.handleMouseMove);
+    window.removeEventListener('mousemove', this.handleMouseMove);
+    window.removeEventListener('resize', this.handleResize);
 
@@ -114,5 +119,8 @@ if (!disableScrolling) {
   handleScroll = () => {
-    if (!this.state.isScrolling) {
+    const { isScrolling } = this.state;
+
+    if (!isScrolling) {
       this.setState({ isScrolling: true, showSpotlight: false });
     }
+
     clearTimeout(this.scrollTimeout);
@@ -127,2 +135,11 @@
 
+  handleResize = () => {
+    clearTimeout(this.resizeTimeout);
+
+    this.resizeTimeout = setTimeout(() => {
+      clearTimeout(this.resizeTimeout);
+      this.forceUpdate();
+    }, 100);
+  };
+
   get stylesSpotlight() {
@@ -150,3 +167,3 @@ const { showSpotlight } = this.state;
   render() {
-    const { showSpotlight } = this.state;
+    const { mouseOverSpotlight, showSpotlight } = this.state;
     const {
@@ -167,6 +184,22 @@ disableOverlay,
       height: getDocumentHeight(),
-      pointerEvents: this.state.mouseOverSpotlight ? 'none' : 'auto',
+      pointerEvents: mouseOverSpotlight ? 'none' : 'auto',
       ...(isLegacy() ? styles.overlayLegacy : styles.overlay),
     };
 
+    let spotlight = placement !== 'center' && showSpotlight && (
+      <Spotlight styles={this.stylesSpotlight} />
+    );
+
+    // Hack for Safari bug with mix-blend-mode with z-index
+    if (getBrowser() === 'safari') {
+      const { mixBlendMode, zIndex, ...safarOverlay } = stylesOverlay;
+
+      spotlight = (
+        <div style={{ ...safarOverlay }}>
+          {spotlight}
+        </div>
+      );
+      delete stylesOverlay.backgroundColor;
+    }
+
     return (
@@ -178,5 +211,3 @@ <div
       >
-        {placement !== 'center' && showSpotlight && (
-          <Spotlight styles={this.stylesSpotlight} />
-        )}
+        {spotlight}
       </div>
@@ -183,0 +214,0 @@ );

src/components/Step.js

@@ -62,2 +62,3 @@ import React from 'react';
       spotlightPadding: PropTypes.number,
+      styles: PropTypes.object,
       target: PropTypes.oneOfType([
@@ -67,3 +68,2 @@ PropTypes.object,
       ]).isRequired,
-      styles: PropTypes.object,
       title: PropTypes.node,
@@ -129,3 +129,3 @@ tooltipComponent: isRequiredIf(PropTypes.oneOfType([
         lifecycle: LIFECYCLE.COMPLETE,
-        step,
+        step: prevProps.step,
         type: EVENTS.STEP_AFTER,
@@ -295,2 +295,3 @@ });
             beaconComponent={step.beaconComponent}
+            locale={step.locale}
             onClickOrHover={this.handleClickHoverBeacon}
@@ -297,0 +298,0 @@ styles={step.styles}

src/components/Tooltip/CloseBtn.js

@@ -8,3 +8,7 @@ import React from 'react';
   return (
-    <button style={style} {...props}>
+    <button
+      style={style}
+      type="button"
+      {...props}
+    >
       <svg
@@ -11,0 +15,0 @@ width={`${width}px`}

src/components/Tooltip/Container.js

@@ -38,7 +38,23 @@ import React from 'react';
   if (showSkipButton && !isLastStep) {
-    output.skip = (<button style={styles.buttonSkip} {...skipProps}>{skip}</button>);
+    output.skip = (
+      <button
+        style={styles.buttonSkip}
+        type="button"
+        {...skipProps}
+      >
+        {skip}
+      </button>
+    );
   }
 
   if (!hideBackButton && index > 0) {
-    output.back = (<button style={styles.buttonBack} {...backProps}>{back}</button>);
+    output.back = (
+      <button
+        style={styles.buttonBack}
+        type="button"
+        {...backProps}
+      >
+        {back}
+      </button>
+    );
   }
@@ -66,3 +82,9 @@
         {output.back}
-        <button style={styles.buttonNext} {...primaryProps}>{output.primary}</button>
+        <button
+          style={styles.buttonNext}
+          type="button"
+          {...primaryProps}
+        >
+          {output.primary}
+        </button>
       </div>
@@ -69,0 +91,0 @@ </div>

src/components/Tooltip/index.js

@@ -19,4 +19,5 @@ import React from 'react';
     e.preventDefault();
+    const { helpers } = this.props;
 
-    this.props.helpers.prev();
+    helpers.prev();
   };
@@ -26,4 +27,5 @@
     e.preventDefault();
+    const { helpers } = this.props;
 
-    this.props.helpers.close();
+    helpers.close();
   };
@@ -33,10 +35,10 @@
     e.preventDefault();
-    const { continuous } = this.props;
+    const { continuous, helpers } = this.props;
 
     if (!continuous) {
-      this.props.helpers.close();
+      helpers.close();
       return;
     }
 
-    this.props.helpers.next();
+    helpers.next();
   };
@@ -46,4 +48,5 @@
     e.preventDefault();
+    const { helpers } = this.props;
 
-    this.props.helpers.skip();
+    helpers.skip();
   };
@@ -50,0 +53,0 @@

src/config/defaults.js

@@ -18,2 +18,3 @@ export default {
     next: 'Next',
+    open: 'Open',
     skip: 'Skip',
@@ -20,0 +21,0 @@ },

src/modules/helpers.js

@@ -43,2 +43,10 @@ // @flow
 
+  if (document.documentMode) {
+    return 'ie';
+  }
+
+  if (/Edge/.test(navigator.userAgent)) {
+    return 'edge';
+  }
+
   // Opera 8.0+
@@ -48,2 +56,3 @@ if (Boolean(window.opera) || navigator.userAgent.indexOf(' OPR/') >= 0) {
   }
+
   // Firefox 1.0+
@@ -53,4 +62,5 @@ if (typeof window.InstallTrigger !== 'undefined') {
   }
+
   // Chrome 1+
-  if (!!window.chrome && !!window.chrome.webstore) {
+  if (window.chrome) {
     return 'chrome';
@@ -63,6 +73,2 @@ }
 
-  if (document.documentMode) {
-    return 'ie';
-  }
-
   return navigator.userAgent;
@@ -77,3 +83,3 @@ }
 export function isLegacy(): boolean {
-  return !['chrome', 'safari', 'firefox', 'opera'].includes(getBrowser());
+  return !['chrome', 'safari', 'firefox', 'opera', 'edge'].includes(getBrowser());
 }
@@ -80,0 +86,0 @@

src/modules/scope.js

@@ -26,5 +26,4 @@ const validTabNodes = /input|select|textarea|button|object/;
   const nodeName = element.nodeName.toLowerCase();
-  const res =
-    (validTabNodes.test(nodeName) && !element.disabled) ||
-    (nodeName === 'a' ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
+  const res = (validTabNodes.test(nodeName) && !element.disabled)
+    || (nodeName === 'a' ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
   return res && isVisible(element);
@@ -31,0 +30,0 @@ }

src/modules/step.js

@@ -89,3 +89,3 @@ // @flow
     .reduce((acc, i) => {
-      acc[i] = props[i];
+      acc[i] = props[i]; //eslint-disable-line react/destructuring-assignment
 
@@ -106,4 +106,6 @@ return acc;
   floaterProps.offset = mergedStep.offset;
-  floaterProps.styles = deepmerge(floaterProps.styles || {}, mergedStyles.floater || {});
+  floaterProps.styles = deepmerge(floaterProps.styles || {}, mergedStyles.floaterStyles || {});
 
+  delete mergedStyles.floaterStyles;
+
   if (mergedStep.floaterProps && mergedStep.floaterProps.offset) {
@@ -127,3 +129,3 @@ floaterProps.offset = mergedStep.floaterProps.offset;
     ...mergedStep,
-    locale: deepmerge(DEFAULTS.locale, props.locale || {}),
+    locale: deepmerge.all([DEFAULTS.locale, props.locale || {}, mergedStep.locale || {}]),
     floaterProps,
@@ -130,0 +132,0 @@ styles: mergedStyles,

src/styles.js

@@ -7,7 +7,7 @@ import deepmerge from 'deepmerge';
   backgroundColor: '#fff',
+  beaconSize: 36,
+  overlayColor: 'rgba(0, 0, 0, 0.5)',
   primaryColor: '#f04',
+  spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
   textColor: '#333',
-  overlayColor: 'rgba(0, 0, 0, 0.5)',
-  spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
-  beaconSize: 36,
   zIndex: 100,
@@ -21,3 +21,3 @@ };
   color: '#555',
-  outline: 'none',
+  cursor: 'pointer',
   lineHeight: 1,
@@ -44,2 +44,11 @@ padding: 8,
 
+  if (options.width) {
+    if (window.innerWidth < options.width) {
+      width = window.innerWidth - 30;
+    }
+    else {
+      width = options.width; //eslint-disable-line prefer-destructuring
+    }
+  }
+
   const overlay = {
@@ -98,2 +107,3 @@ bottom: 0,
       fontSize: 16,
+      maxWidth: '100%',
       padding: 15,
@@ -163,3 +173,3 @@ position: 'relative',
     },
-    floater: {
+    floaterStyles: {
       arrow: {
@@ -172,2 +182,3 @@ color: options.arrowColor,
     },
+    options,
   };
@@ -174,0 +185,0 @@

No alert changes

Improved metrics

Total package byte prevSize

224991

increased by2.8%

Lines of code

6550

increased by3.15%

Worsened metrics

Dev dependency count

40

increased by8.11%

Dependency changes

• Updateddeep-diff@^1.0.1

• Updateddeepmerge@^2.1.1

• Updatedreact-floater@^0.5.5