import React from 'react';
import * as styles from './PopOver.scss';

const PopOver = ({ next, active, first, last, previous, xPos, yPos, children }) => {
  if (!active) {
    return null;
  }
  const text = last ? 'End' : 'Next';
  return (
    <div className={styles.modal} style={{ top: yPos, left: xPos }}>
      <div className={styles.text}>
        {children}
      </div>
      <div className={styles.footer}>
        {first ?
          <div /> :
          <button onClick={previous}>Prev</button>
        }
        <button onClick={next}>{text}</button>
      </div>
    </div>
  );
};

export default PopOver;
import React from 'react';
import * as styles from './PopOver.scss';

const PopOver = ({
  order,
  text,
  xPos,
  yPos,
  totalLength,
  tutorialActive,
  currentlyDisplayedTutorial,
  viewNext,
  viewPrevious,
  closeTutorial
}) => {
  const first = order === 1;
  const last = order === totalLength;
  const active = tutorialActive && currentlyDisplayedTutorial === order;
  const buttonText = last ? 'End' : 'Next';
  const nextAction = last ? closeTutorial : viewNext;
  if (!active) {
    return null;
  }
  return (
    <div className={styles.modal} style={{ top: yPos, left: xPos }}>
      <div className={styles.text}>
        {text}
      </div>
      <div className={styles.footer}>
        {first ? (<div />) : (<button onClick={viewPrevious}>Prev</button>)}
        <button onClick={nextAction}>{buttonText}</button>
      </div>
    </div>
  );
};

export default PopOver;
Connect popover to redux store
Connect popover to redux store
