react-joyride - npm Package Compare versions

Comparing version 2.0.0-7 to 2.0.0-8

package.json

 {
   "name": "react-joyride",
-  "version": "2.0.0-7",
+  "version": "2.0.0-8",
   "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.0",
+    "react-floater": "^0.5.1",
     "react-proptype-conditional-require": "^1.0.4",
@@ -70,8 +70,8 @@ "scroll": "^2.0.3",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-babel": "^5.0.0",
     "eslint-plugin-flowtype": "^2.46.1",
-    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-import": "^2.10.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "flow-bin": "^0.68.0",
+    "flow-bin": "^0.69.0",
     "husky": "^0.14.3",
@@ -82,4 +82,4 @@ "jest": "^22.4.3",
     "prop-types": "^15.6.1",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
     "rimraf": "^2.6.2",
@@ -86,0 +86,0 @@ "rollup": "^0.57.1",

README.md

 # React Joyride
 
-[![NPM version](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride)  
-[![build status](https://travis-ci.org/gilbarbara/react-joyride.svg)](https://travis-ci.org/gilbarbara/react-joyride)  
-[![Maintainability](https://api.codeclimate.com/v1/badges/43ecb5536910133429bd/maintainability)](https://codeclimate.com/github/gilbarbara/react-joyride/maintainability)  
-[![Test Coverage](https://api.codeclimate.com/v1/badges/43ecb5536910133429bd/test_coverage)](https://codeclimate.com/github/gilbarbara/react-joyride/test_coverage)
+[![](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride) [![](https://travis-ci.org/gilbarbara/react-joyride.svg)](https://travis-ci.org/gilbarbara/react-joyride) [![](https://api.codeclimate.com/v1/badges/43ecb5536910133429bd/maintainability)](https://codeclimate.com/github/gilbarbara/react-joyride/maintainability) [![](https://api.codeclimate.com/v1/badges/43ecb5536910133429bd/test_coverage)](https://codeclimate.com/github/gilbarbara/react-joyride/test_coverage)
 
@@ -65,3 +62,3 @@ [![Joyride example image](http://gilbarbara.github.io/react-joyride/media/example.png)](http://gilbarbara.github.io/react-joyride/)
           ...
-          />
+        />
         ...
@@ -68,0 +65,0 @@ </div>

src/components/index.js

@@ -16,3 +16,3 @@ import React from 'react';
 } from '../modules/dom';
-import { log } from '../modules/helpers';
+import { canUseDOM, log } from '../modules/helpers';
 import { getMergedStep, validateSteps } from '../modules/step';
@@ -53,2 +53,5 @@
     disableScrolling: PropTypes.bool,
+    floaterProps: PropTypes.shape({
+      offset: PropTypes.number,
+    }),
     hideBackButton: PropTypes.bool,
@@ -70,5 +73,2 @@ locale: PropTypes.object,
     ]),
-    tooltipOptions: PropTypes.shape({
-      offset: PropTypes.number,
-    }),
   };
@@ -95,2 +95,4 @@
   componentDidMount() {
+    if (!canUseDOM) return;
+
     const {
@@ -134,2 +136,4 @@ debug,
   componentWillReceiveProps(nextProps) {
+    if (!canUseDOM) return;
+
     const { action, status } = this.state;
@@ -221,2 +225,4 @@ const { steps, stepIndex } = this.props;
   componentDidUpdate(prevProps, prevState) {
+    if (!canUseDOM) return;
+
     const { action, index } = this.state;
@@ -435,2 +441,4 @@ const { steps, stepIndex } = this.props;
   render() {
+    if (!canUseDOM) return null;
+
     const { index, status } = this.state;
@@ -437,0 +445,0 @@ const { continuous, debug, disableScrolling, steps } = this.props;

src/components/Overlay.js

@@ -27,3 +27,3 @@ import React from 'react';
       isScrolling: false,
-      showSpotlight: false,
+      showSpotlight: props.disableScrolling,
     };
@@ -56,3 +56,2 @@ }
   componentWillReceiveProps(nextProps) {
-    const { isScrolling } = this.state;
     const { spotlightClicks, disableScrolling, lifecycle } = nextProps;
@@ -66,6 +65,7 @@ const { changed, changedTo } = treeChanges(this.props, nextProps);
         setTimeout(() => {
-          if (!isScrolling) {
+          if (!this.state.isScrolling) {
             this.setState({ showSpotlight: true });
+            this.scrollParent.removeEventListener('scroll', this.handleScroll);
           }
-        }, 30);
+        }, 100);
       }
@@ -85,5 +85,9 @@ }
   componentWillUnmount() {
+    const { disableScrolling } = this.props;
     clearTimeout(this.scrollTimeout);
     document.removeEventListener('mousemove', this.handleMouseMove);
-    this.scrollParent.removeEventListener('scroll', this.handleScroll);
+
+    if (!disableScrolling) {
+      this.scrollParent.removeEventListener('scroll', this.handleScroll);
+    }
   }
@@ -110,3 +114,2 @@
     }
-
     clearTimeout(this.scrollTimeout);
@@ -126,3 +129,3 @@
     const elementRect = getClientRect(element);
-    const isFixedTarget = isFixed(target);
+    const isFixedTarget = isFixed(element);
     const top = getElementPosition(element, spotlightPadding);
@@ -129,0 +132,0 @@

src/components/Step.js

@@ -42,2 +42,5 @@ import React from 'react';
       event: PropTypes.string,
+      floaterProps: PropTypes.shape({
+        offset: PropTypes.number,
+      }),
       hideBackButton: PropTypes.bool,
@@ -66,5 +69,2 @@ isFixed: PropTypes.bool,
       ]), props => !props.content && !props.title),
-      tooltipOptions: PropTypes.shape({
-        offset: PropTypes.number,
-      }),
     }).isRequired,
@@ -193,7 +193,7 @@ update: PropTypes.func.isRequired,
           id={`react-joyride:${index}`}
-          positionFixed={step.isFixed || isFixed(target)}
+          isPositioned={step.isFixed || isFixed(target)}
           open={this.open}
           placement={step.placement}
           target={step.target}
-          {...step.tooltipOptions}
+          {...step.floaterProps}
         >
@@ -200,0 +200,0 @@ <Beacon beaconComponent={step.beaconComponent} onClickOrHover={this.handleClickHoverBeacon} styles={step.styles} />

src/components/Tooltip/index.js

@@ -64,5 +64,8 @@ import React from 'react';
     if (tooltipComponent) {
-      const richProps = {
+      const renderProps = {
         ...props,
         content,
+        continuous,
+        index,
+        isLastStep,
         locale,
@@ -73,6 +76,6 @@ title,
       if (React.isValidElement(tooltipComponent)) {
-        component = React.cloneElement(tooltipComponent, richProps);
+        component = React.cloneElement(tooltipComponent, renderProps);
       }
       else {
-        component = tooltipComponent(richProps);
+        component = tooltipComponent(renderProps);
       }
@@ -79,0 +82,0 @@ }

src/config/defaults.js

 export default {
+  floaterProps: {
+    options: {
+      preventOverflow: {
+        boundariesElement: 'scrollParent',
+      },
+    },
+    wrapperOptions: {
+      offset: -18,
+      position: true,
+    },
+  },
   locale: {
@@ -14,13 +25,2 @@ back: 'Back',
   },
-  tooltipOptions: {
-    options: {
-      preventOverflow: {
-        boundariesElement: 'scrollParent',
-      },
-    },
-    wrapperOptions: {
-      offset: -18,
-      position: true,
-    },
-  },
 };

src/config/types.js

@@ -37,2 +37,4 @@ import type { Node } from 'react';
 
+type placementBeacon = 'top' | 'bottom' | 'left' | 'right';
+
 export type StepProps = {
@@ -47,2 +49,3 @@ beaconComponent: ?Node,
   event: string,
+  floaterProps: ?Object,
   hideBackButton: ?boolean,
@@ -52,2 +55,3 @@ isFixed: ?boolean,
   placement: placement,
+  placementBeacon: placementBeacon,
   showProgress: ?boolean,
@@ -61,3 +65,2 @@ showSkipButton: ?boolean,
   tooltipComponent: ?Node,
-  tooltipOptions: ?Object,
 }
@@ -74,2 +77,3 @@
   disableScrolling: boolean,
+  floaterProps: ?Object,
   hideBackButton: boolean,
@@ -88,3 +92,2 @@ locale: ?Object,
   tooltipComponent: ?Node,
-  tooltipOptions: ?Object,
 }
@@ -91,0 +94,0 @@

src/modules/dom.js

@@ -158,52 +158,4 @@ // @flow
 
-  const top = elementRect.top + (!hasScrollParent ? scrollParent.scrollTop : 0);
-  /*
-  const { offsetParent } = element;
-  const scrollParent = getScrollParent(element);
-  const hasOffsetParent = hasCustomOffsetParent(element);
-  const hasScrollParent = hasCustomScrollParent(element);
-  const scrollToStep = getScrollTo(element, scrollOffset);
+  const top = elementRect.top + (!hasScrollParent && !isFixed(element) ? scrollParent.scrollTop : 0);
 
-  let overflowHeight = element.offsetTop + scrollToStep > scrollParent.scrollHeight;
-  let top = element.offsetTop;
-
-  console.group('getElementPosition');
-  console.log('element', elementRect.top, element.offsetTop, offset, scrollOffset);
-  console.log('scrollParent', scrollParent.offsetTop, scrollParent.offsetHeight, scrollParent.scrollHeight);
-  console.log('customOffset', hasOffsetParent, 'customScroll', hasScrollParent);
-  console.log('scrollToStep', scrollToStep, 'overflowHeight', overflowHeight);
-
-  if (hasOffsetParent && offsetParent instanceof HTMLElement) {
-    top = element.offsetTop + offsetParent.offsetTop;
-    console.log('hasOffsetParent', top);
-
-    if (isFixed(element)) {
-      top += scrollParent.scrollTop;
-      console.log('isFixed', top);
-    }
-    else if (scrollParent.scrollHeight > scrollParent.offsetHeight) {
-      if (overflowHeight) {
-        top -= scrollParent.scrollHeight - element.offsetTop;
-      }
-      else {
-        top -= scrollToStep;
-      }
-
-      console.log('top: scrollHeight > offsetHeight', top, scrollToStep);
-    }
-  }
-  else if (hasScrollParent) {
-    top = element.offsetTop - scrollToStep;
-    overflowHeight = (element.offsetTop - scrollParent.offsetTop) + scrollToStep > scrollParent.scrollHeight;
-  }
-
-  console.log('top:before', top);
-
-  top += !hasScrollParent ? -offset : 0;
-
-  console.log('top:after', top);
-
-  console.groupEnd();
-  */
-
   return Math.floor(top - offset);
@@ -210,0 +162,0 @@ }

src/modules/step.js

@@ -75,2 +75,3 @@ // @flow
     'disableScrolling',
+    'floaterProps',
     'hideBackButton',
@@ -84,3 +85,2 @@ 'locale',
     'tooltipComponent',
-    'tooltipOptions',
   ];
@@ -101,17 +101,20 @@
   const mergedStep = deepmerge.all([getTourProps(props), DEFAULTS.step, step]);
-  const tooltipOptions = deepmerge(DEFAULTS.tooltipOptions, step.tooltipOptions || {});
+  const mergedStyles = getStyles(deepmerge(props.styles || {}, step.styles || {}));
   const scrollParent = hasCustomScrollParent(getElement(step.target));
+  const floaterProps = deepmerge(DEFAULTS.floaterProps, mergedStep.floaterProps || {});
 
-  tooltipOptions.offset = mergedStep.offset || 0;
+  // Set react-floater props
+  floaterProps.offset = mergedStep.offset || 0;
+  floaterProps.styles = mergedStyles.floater;
 
   if (!mergedStep.disableScrolling) {
-    tooltipOptions.offset += props.spotlightPadding || step.spotlightPadding || 0;
+    floaterProps.offset += props.spotlightPadding || step.spotlightPadding || 0;
   }
 
   if (step.placementBeacon) {
-    tooltipOptions.wrapperOptions.placement = step.placementBeacon;
+    floaterProps.wrapperOptions.placement = step.placementBeacon;
   }
 
   if (scrollParent) {
-    tooltipOptions.options.preventOverflow.boundariesElement = 'window';
+    floaterProps.options.preventOverflow.boundariesElement = 'window';
   }
@@ -122,5 +125,5 @@
     locale: deepmerge(DEFAULTS.locale, props.locale || {}),
-    tooltipOptions,
-    styles: getStyles(deepmerge(props.styles || {}, step.styles || {})),
+    floaterProps,
+    styles: mergedStyles,
   };
 }

src/styles.js

@@ -5,3 +5,6 @@ import deepmerge from 'deepmerge';
 const defaultOptions = {
-  color: '#f04',
+  arrowColor: '#fff',
+  backgroundColor: '#fff',
+  primaryColor: '#f04',
+  textColor: '#333',
   overlayColor: 'rgba(0, 0, 0, 0.5)',
@@ -38,5 +41,4 @@ spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
 
-export default function getStyles(styles) {
-  const options = deepmerge(defaultOptions, styles.options || {});
-  delete styles.options;
+export default function getStyles(stepStyles) {
+  const options = deepmerge(defaultOptions, stepStyles.options || {});
 
@@ -64,3 +66,3 @@ const overlay = {
       animation: 'joyride-beacon-inner 1.2s infinite ease-in-out',
-      backgroundColor: options.color,
+      backgroundColor: options.primaryColor,
       borderRadius: '50%',
@@ -78,4 +80,4 @@ display: 'block',
       animation: 'joyride-beacon-outer 1.2s infinite ease-in-out',
-      backgroundColor: `rgba(${hexToRGB(options.color).join(',')}, 0.2)`,
-      border: `2px solid ${options.color}`,
+      backgroundColor: `rgba(${hexToRGB(options.primaryColor).join(',')}, 0.2)`,
+      border: `2px solid ${options.primaryColor}`,
       borderRadius: '50%',
@@ -93,6 +95,7 @@ boxSizing: 'border-box',
     tooltip: {
+      backgroundColor: options.backgroundColor,
       borderRadius: 5,
       boxSizing: 'border-box',
+      color: options.textColor,
       fontSize: 16,
-      backgroundColor: '#fff',
       padding: 15,
@@ -120,3 +123,3 @@ position: 'relative',
       ...buttonReset,
-      backgroundColor: options.color,
+      backgroundColor: options.primaryColor,
       borderRadius: 4,
@@ -127,3 +130,3 @@ color: '#fff',
       ...buttonReset,
-      color: options.color,
+      color: options.primaryColor,
       marginLeft: 'auto',
@@ -134,2 +137,3 @@ marginRight: 5,
       ...buttonReset,
+      color: options.textColor,
       height: 14,
@@ -144,2 +148,3 @@ padding: 15,
       ...buttonReset,
+      color: options.textColor,
       fontSize: 14,
@@ -163,5 +168,13 @@ },
     },
+    floater: {
+      arrow: {
+        color: options.arrowColor,
+      },
+      tooltip: {
+        zIndex: options.zIndex,
+      },
+    },
   };
 
-  return deepmerge(defaultStyles, styles || {});
+  return deepmerge(defaultStyles, stepStyles || {});
 }

No alert changes

Worsened metrics

Total package byte prevSize

204013

decreased by-1.19%

Lines of code

5947

decreased by-0.65%

Number of lines in readme file

80

decreased by-3.61%

Dependency changes

• Updatedreact-floater@^0.5.1