How to use the react-joyride.ACTIONS.CLOSE 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 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);
      }
github ging / ediphy / _editor / components / joyride / EdiphyTour.jsx View on Github external
callback(tour) {
        const { action, index, type } = tour;
        if (this.refs.joyride) {
            if (index || index === 0) {
                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) });

            }
        }

    }