react-joyride - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

lib/scripts/Beacon.js

@@ -1,2 +0,3 @@
-var React = require('react');
+var React    = require('react'),
+    hexToRGB = require('./utils.js').hexToRgb;
 
@@ -27,8 +28,41 @@ var Beacon = React.createClass({
     render: function () {
-        var styles = {
-            left: this.props.xPos,
-            position: this.props.cssPosition === 'fixed' ? 'fixed' : 'absolute',
-            top: this.props.yPos
-        };
+        var props      = this.props,
+            stepStyles = props.step.style || {},
+            rgb,
+            styles     = {
+                beacon: {
+                    left: props.xPos,
+                    position: props.cssPosition === 'fixed' ? 'fixed' : 'absolute',
+                    top: props.yPos
+                },
+                inner: {},
+                outer: {}
+            };
 
+        if (stepStyles.beacon) {
+            if (typeof stepStyles.beacon === 'string') {
+                rgb = hexToRGB(stepStyles.beacon);
+
+                styles.inner.backgroundColor = stepStyles.beacon;
+                styles.outer = {
+                    backgroundColor: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.2)',
+                    borderColor: stepStyles.beacon
+                };
+            }
+            else {
+                if (stepStyles.beacon.inner) {
+                    styles.inner.backgroundColor = stepStyles.beacon.inner;
+                }
+
+                if (stepStyles.beacon.outer) {
+                    rgb = hexToRGB(stepStyles.beacon.outer);
+
+                    styles.outer = {
+                        backgroundColor: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0.4)',
+                        borderColor: stepStyles.beacon.outer
+                    };
+                }
+            }
+        }
+
         return (
@@ -38,7 +72,13 @@ React.createElement('a', {
                     className: 'joyride-beacon',
-                    style: styles,
-                    onClick: this.props.onClick
+                    style: styles.beacon,
+                    onClick: props.onClick
                 },
-                React.createElement('span', { className: 'inner' }),
-                React.createElement('span', { className: 'outer' })
+                React.createElement('span', {
+                    className: 'inner',
+                    style: styles.inner
+                }),
+                React.createElement('span', {
+                    className: 'outer',
+                    style: styles.outer
+                })
             )
@@ -45,0 +85,0 @@ );

lib/scripts/Component.js

@@ -31,4 +31,4 @@ var React          = require('react'),
         scrollOffset: React.PropTypes.number,
+        scrollToFirstStep: React.PropTypes.bool,
         scrollToSteps: React.PropTypes.bool,
-        scrollToFirstStep: React.PropTypes.bool,
         showBackButton: React.PropTypes.bool,
@@ -162,7 +162,7 @@ showOverlay: React.PropTypes.bool,
     stop: function () {
-        this._log(['joyride:stop', 'autorun:', this.state.index]);
+        this._log(['joyride:stop']);
 
         this.setState({
-            showTooltip: autorun,
-            play: true
+            showTooltip: false,
+            play: false
         });
@@ -641,2 +641,3 @@ },
                     cssPosition: cssPosition,
+                    step: currentStep,
                     xPos: state.xPos,
@@ -643,0 +644,0 @@ yPos: state.yPos,

lib/scripts/Tooltip.js

@@ -1,2 +0,3 @@
-var React = require('react');
+var React  = require('react'),
+    assign = require('object-assign');
 
@@ -92,6 +93,7 @@ var Tooltip = React.createClass({
         var props = this.props,
+            step  = props.step,
             opts  = {
                 classes: ['joyride-tooltip'],
-                target: document.querySelector(props.step.selector).getBoundingClientRect(),
-                positionClass: props.step.position,
+                target: document.querySelector(step.selector).getBoundingClientRect(),
+                positionClass: step.position,
                 styles: {
@@ -132,34 +134,37 @@ arrow: {},
         /* Styling */
-        if (props.step.style) {
-            if (props.step.style.bgColor) {
+        if (step.style) {
+            if (step.style.backgroundColor) {
                 opts.styles.arrow.backgroundImage = 'url("' + this._generateArrow({
                         location: opts.positonBaseClass,
-                        color: props.step.style.bgColor
+                        color: step.style.backgroundColor
                     }) + '")';
-                opts.styles.tooltip.backgroundColor = props.step.style.bgColor;
+                opts.styles.tooltip.backgroundColor = step.style.backgroundColor;
             }
 
-            if (props.step.style.borderRadius) {
-                opts.styles.tooltip.borderRadius = props.step.style.borderRadius;
+            if (step.style.borderRadius) {
+                opts.styles.tooltip.borderRadius = step.style.borderRadius;
             }
 
+            if (step.style.color) {
+                opts.styles.buttons.primary.color = step.style.color;
+                opts.styles.buttons.textOnly.color = step.style.color;
+                opts.styles.header.color = step.style.color;
+                opts.styles.tooltip.color = step.style.color;
+            }
 
-            if (props.step.style.color) {
-                opts.styles.buttons.primary.backgroundColor = props.step.style.color;
-                opts.styles.header.borderColor = props.step.style.color;
+            if (step.style.mainColor) {
+                opts.styles.buttons.primary.backgroundColor = step.style.mainColor;
+                opts.styles.header.borderColor = step.style.mainColor;
             }
 
-            if (props.step.style.textColor) {
-                opts.styles.buttons.primary.color = props.step.style.textColor;
-                opts.styles.buttons.textOnly.color = props.step.style.textColor;
-                opts.styles.header.color = props.step.style.textColor;
-                opts.styles.tooltip.color = props.step.style.textColor;
+            if (step.style.textAlign) {
+                opts.styles.tooltip.textAlign = step.style.textAlign;
             }
 
-            if (props.step.style.textAlign) {
-                opts.styles.tooltip.textAlign = props.step.style.textAlign;
+            if (step.style.width) {
+                opts.styles.tooltip.width = step.style.width;
             }
 
-            if (props.step.style.width) {
-                opts.styles.tooltip.width = props.step.style.width;
+            if (step.style.button) {
+                opts.styles.primary = assign(opts.styles.buttons.primary, step.style.button);
             }
@@ -179,3 +184,3 @@ }
 
-        if (props.step.title) {
+        if (step.title) {
             opts.header = (
@@ -185,3 +190,3 @@ React.createElement('div', {
                     style: opts.styles.header
-                }, props.step.title)
+                }, step.title)
             );
@@ -193,3 +198,3 @@ }
                 style: opts.styles.tooltip,
-                'data-target': props.step.selector
+                'data-target': step.selector
             },
@@ -210,3 +215,3 @@ React.createElement('div', {
                 className: 'joyride-tooltip__main',
-                dangerouslySetInnerHTML: { __html: props.step.text || '' }
+                dangerouslySetInnerHTML: { __html: step.text || '' }
             }),
@@ -213,0 +218,0 @@ React.createElement('div', {

package.json

 {
   "name": "react-joyride",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Create walkthroughs and guided tours for your apps",
@@ -25,2 +25,3 @@ "author": "Gil Barbara <[e-mail]>",
   "dependencies": {
+    "object-assign": "^4.0.1",
     "scroll": "1.0"
@@ -27,0 +28,0 @@ },

README.md

@@ -6,4 +6,2 @@ React Joyride
 
-### Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!
-
 <a href="http://gilbarbara.github.io/react-joyride/" target="_blank">![](http://gilbarbara.github.io/react-joyride/media/example.png)</a>
@@ -231,3 +229,3 @@
 - `selector`: The target DOM selector of your feature **(required)**
-- `position`: Relative position of you beacon and tooltip. It can be one of these: `right`, `left`, `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right` and `center`. This defaults to `top`.
+- `position`: Relative position of you beacon and tooltip. It can be one of these:`top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `right` and `left`. This defaults to `top`.
 
@@ -238,3 +236,3 @@ Extra option for standalone tooltips
 
-And now you can style tooltips individually with these options: `bgColor`, `borderRadius`, `color`, `textAlign`, `textColor` and `width`
+And now you can style tooltips independently with these options: `backgroundColor`, `borderRadius`, `color`, `mainColor`, `textAlign` and `width`. Also you can style `button` and `beacon` individually.
 
@@ -251,8 +249,16 @@
     style: {
-		bgColor: 'rgba(0, 0, 0, 0.8)',
+		backgroundColor: 'rgba(0, 0, 0, 0.8)',
 		borderRadius: '0',
-		color: '#ff4456',
+		color: '#fff',
+		mainColor: '#ff4456',
 		textAlign: 'center',
-		textColor: '#fff',
-		width: '29rem'
+		width: '29rem',
+		beacon: {
+			inner: '#000',
+			outer: '#000'
+		},
+		button: {
+			display: 'none'
+			// or any style attribute
+		}
 	},
@@ -259,0 +265,0 @@ // extra params...

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

64612

increased by0.68%

Number of package files

10

increased by11.11%

Lines of code

1160

increased by3.57%

Number of lines in readme file

308

increased by1.99%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedobject-assign@^4.0.1

• + Addedobject-assign@4.1.1(transitive)