Reset or move tour conditionally in react-joyride

Question

I want to basically check if the next can be pressed, i.e., the next condition is reached. If it isn't I want to stay in the current step. I'm using Joyride conditionally.

const handleJoyrideCallback = (data: CallBackProps): void => {
const { action, index, status, type } = data;

// console.log(stepIndex);

if (index === 0 && action === ACTIONS.NEXT) {
  const proceedButtonDisabled = document.getElementsByClassName(
    'btn-disabled'
  );

  if (proceedButtonDisabled.length) {
    console.log('No campaign selected');
    console.log(helpers.info());

    // helpers.reset(true);
    // helpers.go(0);
    helpers.prev();
    setStepIndex(stepIndex - 1);
    // return;
  }

  const proceedButton: any = document.getElementsByClassName(
    'btn button-height btn-primary'
  );

  console.log('Campaign selected with button ');

  proceedButton[0].click();
}

console.groupCollapsed(type);
console.log(data); // eslint-disable-line no-console
console.groupEnd();
};

As you can see I'm checking if a particular element (a button) is present, if it is I want to click it. That part is working just fine. But if it isn't present I want to stay in the same step until it is. I tried set step index to be the same index and using helpers. I even tried to set the run state to false and then true. Doesn't seem to work. Any solutions?

Reset or move tour conditionally in react-joyride

0 Answers0