All files Beacon.jsx

64.71% Statements 11/17
63.64% Branches 14/22
100% Functions 1/1
64.71% Lines 11/17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84      1x     1x 1x                                               8x 8x                 8x       8x 8x                   8x       8x                     8x                        
import React from 'react';
import { hexToRGB } from './utils';
 
let isTouch = false;
 
/* istanbul ignore else */
if (typeof window !== 'undefined') {
  isTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
}
 
export default class JoyrideBeacon extends React.Component {
  static propTypes = {
    eventType: React.PropTypes.string.isRequired,
    onTrigger: React.PropTypes.func.isRequired,
    step: React.PropTypes.object.isRequired,
    xPos: React.PropTypes.oneOfType([
      React.PropTypes.number,
      React.PropTypes.string
    ]).isRequired,
    yPos: React.PropTypes.oneOfType([
      React.PropTypes.number,
      React.PropTypes.string
    ]).isRequired
  };
 
  static defaultProps = {
    xPos: -1000,
    yPos: -1000
  };
 
  render() {
    const { eventType, onTrigger, step, xPos, yPos } = this.props;
    const styles = {
      beacon: {
        left: xPos,
        position: step.isFixed === true ? 'fixed' : 'absolute',
        top: yPos
      },
      inner: {},
      outer: {}
    };
    const stepStyles = step.style || {};
    let rgb;
 
    /* istanbul ignore else */
    if (stepStyles.beacon) {
      Iif (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 {
        Iif (stepStyles.beacon.inner) {
          styles.inner.backgroundColor = stepStyles.beacon.inner;
        }
 
        Iif (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 (
      <button
        className="joyride-beacon"
        style={styles.beacon}
        onClick={eventType === 'click' || isTouch ? onTrigger : null}
        onMouseEnter={eventType === 'hover' && !isTouch ? onTrigger : null}>
        <span className="joyride-beacon__inner" style={styles.inner} />
        <span className="joyride-beacon__outer" style={styles.outer} />
      </button>
    );
  }
}