How to use the react-joyride.ACTIONS.PREV function in react-joyride

To help you get started, we’ve selected a few react-joyride examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github chaskiq / chaskiq / app / javascript / client_messenger / UserTour.js View on Github external
handleJoyrideCallback = data => {
    const { action, index, status, type } = data;

    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      // Update state to advance the tour
      this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
    }
    else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      // Need to set our running state to false, so we can restart if we click start again.
      this.setState({ run: false });
      this.registerEvent(status)
    }

    console.groupCollapsed(type);
    console.log(data); //eslint-disable-line no-console
    console.groupEnd();
  };
github ging / ediphy / _editor / components / joyride / EdiphyTour.jsx View on Github external
if (tour.step && tour.step.callback && type === 'tooltip' /* && undone*/) {
                    let doneSteps = (new Set(this.state.doneSteps)).add(index);
                    tour.step.callback();
                    this.setState({ doneSteps });
                }
            }
            if (action === ACTIONS.CLOSE) {
                this.h.toggleTour(false);
                this.setState({ doneSteps: new Set(), stepIndex: 0 });
            }
            if (type === EVENTS.TOUR_END) {
                this.h.toggleTour(false);
                this.setState({ doneSteps: new Set(), stepIndex: 0 });
            } else if ([EVENTS.STEP_AFTER, EVENTS.CLOSE, EVENTS.TARGET_NOT_FOUND].includes(type)) {
                // Since this is a controlled tour you'll need to update the state to advance the tour
                this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });

            }
        }

    }
github qlik-oss / catwalk / src / components / guide.jsx View on Github external
const handleJoyrideCallback = (data) => {
    const {
      action, index, type, status,
    } = data;
    if ([EVENTS.TOUR_START].includes(type)) {
      document.addEventListener('mouseup', onClick);
    } else if ([ACTIONS.START].includes(action) && index === 0) {
      // if the guide is restarted there will be no EVENTS.TOUR_START, the EventListener must
      // be added on ACTION.START and step 0.
      document.addEventListener('mouseup', onClick);
    } else if ([ACTIONS.CLOSE].includes(action) || [STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      if (runGuide) {
        endGuide();
      }
    } else if ([EVENTS.STEP_AFTER].includes(type)) {
      const newStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);
      if (action !== ACTIONS.PREV && !readyToProceed(newStepIndex)) {
        // we are not ready to proceed to the next step. Reset the current step.
        // The stop/start of the guide is needed to reset the Joyride events, or it will
        // be somewhere in between steps, statewise.
        setRunGuide(false);
        setStepIndex(index);
        setTimeout(() => setRunGuide(true), 100);
      } else {
        // Update state to advance the guide
        setStepIndex(newStepIndex);
      }
    } else if ([EVENTS.TARGET_NOT_FOUND].includes(type)) {
      // The target could not be found. Go to next step.
      const newStepIndex = index + 1;
      setStepIndex(newStepIndex);
    }
github datavized / twotone / src / components / Tour.js View on Github external
if (type === EVENTS.TOUR_END || action === EVENTS.TOOLTIP_CLOSE || type === EVENTS.STEP_AFTER && index >= lastStepIndex) {

			logEvent('tour', index >= lastStepIndex ? 'complete' : 'skip', index);

			// Update user preferences with completed tour flag
			this.setState({
				stepIndex: 0,
				run: false
			});
			this.props.setConfig({
				showTour: false
			});
		} else if (type === EVENTS.STEP_AFTER) {
			// Since this is a controlled tour you'll need to update the state to advance the tour
			this.setState({
				stepIndex: index + (action === ACTIONS.PREV ? -1 : 1)
			});
		}
	}
github Vizzuality / gfw / app / javascript / components / prompts / component.jsx View on Github external
if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
            // Need to set our running state to false, so we can restart if we click start again.
            handleStateChange({ open: false, stepIndex: 0, stepsKey: '' });
          } else if (data.action === 'close' || data.type === 'tour:end') {
            handleStateChange({
              stepIndex: 0,
              open: false
            });
          } else if (
            [
              EVENTS.STEP_AFTER,
              EVENTS.TARGET_NOT_FOUND,
              EVENTS.TOUR_START
            ].includes(type)
          ) {
            const newStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);
            // Update state to advance the tour
            let delay = 400;

            if (action === 'prev' && prev) {
              prev();
            }

            if (action === 'next' && next) {
              next();
            }

            if (action === 'start' && prev && index === 0) {
              prev();
            }

            if (
github qlik-oss / catwalk / src / components / guide.jsx View on Github external
const {
      action, index, type, status,
    } = data;
    if ([EVENTS.TOUR_START].includes(type)) {
      document.addEventListener('mouseup', onClick);
    } else if ([ACTIONS.START].includes(action) && index === 0) {
      // if the guide is restarted there will be no EVENTS.TOUR_START, the EventListener must
      // be added on ACTION.START and step 0.
      document.addEventListener('mouseup', onClick);
    } else if ([ACTIONS.CLOSE].includes(action) || [STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      if (runGuide) {
        endGuide();
      }
    } else if ([EVENTS.STEP_AFTER].includes(type)) {
      const newStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);
      if (action !== ACTIONS.PREV && !readyToProceed(newStepIndex)) {
        // we are not ready to proceed to the next step. Reset the current step.
        // The stop/start of the guide is needed to reset the Joyride events, or it will
        // be somewhere in between steps, statewise.
        setRunGuide(false);
        setStepIndex(index);
        setTimeout(() => setRunGuide(true), 100);
      } else {
        // Update state to advance the guide
        setStepIndex(newStepIndex);
      }
    } else if ([EVENTS.TARGET_NOT_FOUND].includes(type)) {
      // The target could not be found. Go to next step.
      const newStepIndex = index + 1;
      setStepIndex(newStepIndex);
    }
  };
github chaskiq / chaskiq / app / javascript / client_messenger / tourManager.js View on Github external
const elementRect = element.getBoundingClientRect();
      const absoluteElementTop = elementRect.top + window.pageYOffset;
      const middle = absoluteElementTop - (window.innerHeight / 2);
      window.scrollTo(0, middle);
    }

    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      
      if (action === ACTIONS.NEXT || action === ACTIONS.PREV)  {

        let t = null

        if (action === ACTIONS.NEXT){
          t = this.state.steps[index + 1]

        } else if (action === ACTIONS.PREV) {
          t = this.state.steps[index - 1]
        }

        if(!t) return
        const a = document.querySelector(t.target)
        centerDiv(a)
      }

      

      // Update state to advance the tour
      //this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
    }
    else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      // Need to set our running state to false, so we can restart if we click start again.
      this.setState({ run: false });
github burtonator / polar-bookshelf / web / js / apps / repository / RepositoryTour.tsx View on Github external
private doStep(callBackProps: CallBackProps) {

        const stepIndex = callBackProps.index + (callBackProps.action === ACTIONS.PREV ? -1 : 1);

        this.setState({...this.state, stepIndex });

    }