Trying to disable the future steps in Step

Question

Hi All i am trying to disable the future steps using the Ant Design step but could not be able disable.

Here is my code related to steps

 <Steps size="small" onChange={handleChange} current={currentStepNumber}>
    <Step title="Concept" />
    <Step title="Schematic" />
    <Step title="Design Development" />
    <Step title="Construction Documents" />
    <Step title="Construction Administration" />
    <Step title="Closed" />
  </Steps>

and then below is handle change function

const [currentStepNumber, setCurrentStepNumber] = useState(0);

const handleChange = current => {
   console.log('onChange:', current);
   setCurrentStepNumber(current);
};

this is where i am setting initial step number based on input from api

    useEffect(() => {
      if (!ProjectData) {
        return;
      }
      const { projectPhase } = ProjectData.Projects[0];
      if (projectPhase?.name) {
         const { stepNumber } = Object.values(PROJECT_PHASE).find(s => s.label === projectPhase.name);
         setCurrentStepNumber(stepNumber);
       }
    }, [ProjectData]);

I am setting the step number based on API data on an initial loading of the page.when user is on step 2 i need to enable the step 1 as well and at the same time i need to disable the step 3, 4, 5 and 6. If user is on step 3, i need to disable the step 4, 5 and 6 and need to enable the 1, 2.

Currently,I could not be able to disable the future steps and i can be able to click on the future steps as well like in below picture

Could any one please let me know, is there any way to disable the future steps and enabling only previous steps with respect to current step number?

Many thanks in advance !!!

Answer 1

If you are polling api for stepnumbers, then you dont have to use onchange event handler, updating current prop will disable the advance steps.. Just for demo, i used timer instead polling api

codesandbox https://codesandbox.io/s/antdesignsteps-stackoverflow-73osw?file=/index.js

const AntSteps = () => {
  const [currentStepNumber, setCurrentStepNumber] = useState(0);

  const [timer, setTimer] = useState(0);

  useEffect(() => {
    if (timer === 6) {
      setTimer(0);
      setCurrentStepNumber(0);
    }
    const intervalId = setInterval(() => {
      setTimer(timer + 1);
      setCurrentStepNumber(timer + 1);
    }, 5000);

    return () => clearInterval(intervalId);
  }, [timer]);

  return (
    <Steps size="small" current={currentStepNumber}>
      <Step title="Concept" />
      <Step title="Schematic" />
      <Step title="Design Development" />
      <Step title="Construction Documents" />
      <Step title="Construction Administration" />
      <Step title="Closed" />
    </Steps>
  );
};

If you are polling api for initial step number and would like to enable other steps one by one based on user click then you can use disabled prop to achieve it.

Codesandbox https://codesandbox.io/s/antdesignstepswithouttimer-stackoverflow-yg0vk?file=/index.js

const AntSteps = () => {
  const [currentStepNumber, setCurrentStepNumber] = useState(0);

 

  const handleChange = current => {
    console.log('onChange:', current);
    setCurrentStepNumber(current + 1);
 };

  return (
    <Steps size="small" onChange={handleChange} current={currentStepNumber}>
      <Step title="Concept"  />
      <Step title="Schematic"  />
      <Step title="Design Development" disabled={ currentStepNumber + 1 < 2} />
      <Step title="Construction Documents" disabled={currentStepNumber + 1 < 3} />
      <Step title="Construction Administration" disabled={currentStepNumber + 1 <4} />
      <Step title="Closed" disabled={currentStepNumber + 1 < 5}/>
    </Steps>
  );
};