step.lock

Author: sametweb

src/index.js

@@ -5,16 +5,6 @@ import { Steps, Step, Button, Navigation } from "./lib";
 import "./style.css";
 
 const Step1 = props => {
-  const { firstname, lastname } = props.mainState;
-  console.log(props.locks);
-  useEffect(() => {
-    if (props.mainState.firstname && props.mainState.lastname) {
-      props.unlockNextStep();
-    } else {
-      props.lockNextStep();
-    }
-  }, [firstname, lastname]);
-
   return (
     <div>
       First Name:{" "}
@@ -34,16 +24,6 @@ const Step1 = props => {
 };
 
 const Step2 = props => {
-  const { email, password } = props.mainState;
-  console.log(props.locks);
-  useEffect(() => {
-    if (props.mainState.email && props.mainState.password) {
-      props.unlockNextStep();
-    } else {
-      props.lockNextStep();
-    }
-  }, [email, password]);
-
   return (
     <div>
       Email:{" "}
@@ -63,16 +43,6 @@ const Step2 = props => {
 };
 
 const Step3 = props => {
-  const { address, phone } = props.mainState;
-  console.log(props.locks);
-  useEffect(() => {
-    if (props.mainState.address && props.mainState.phone) {
-      props.unlockNextStep();
-    } else {
-      props.lockNextStep();
-    }
-  }, [address, phone]);
-
   return (
     <div>
       Address:{" "}

src/lib/Navigators.js

@@ -3,15 +3,13 @@ import { StepContext } from "./Steps";
 
 export const Button = ({ next, prev, text, ...theRest }) => {
   const context = useContext(StepContext);
-  const { prevStep, nextStep, steps, locks } = context;
+  const { prevStep, nextStep, steps } = context;
 
   return (prev && steps.current === 1) ||
     (next && steps.current === steps.total) ? null : (
     <button
       onClick={next ? nextStep : prev ? prevStep : null}
-      disabled={
-        next && locks.filter(item => item.step === steps.current + 1)[0].locked
-      }
+      disabled={next && steps.current + 1 === steps.lock}
       {...theRest}
     >
       {text}
@@ -21,15 +19,15 @@ export const Button = ({ next, prev, text, ...theRest }) => {
 
 export const Navigation = ({ text, before, after }) => {
   const context = useContext(StepContext);
-  const { jumpToStep, steps, locks } = context;
+  const { jumpToStep, steps } = context;
   const stepsArray = [...Array(steps.total).keys()].map(x => x + 1);
 
   return stepsArray.map(step => {
     return (
       <button
         key={step}
         onClick={() => jumpToStep(step)}
-        disabled={locks.filter(item => item.step === step)[0].locked} //steps.current === step ||
+        disabled={step >= steps.lock} //steps.current === step ||
       >
         {text || `${before || ""}${step}${after || ""}`}
       </button>

src/lib/Steps.js

@@ -16,38 +16,13 @@ const useMainState = INITIAL_VALUE => {
 export const useStepNavigation = (totalSteps, lockMode) => {
   const [currentStep, setCurrentStep] = React.useState(1);
 
-  const stepLocks = [...Array(totalSteps).keys()].map((x, i) => ({
-    step: x + 1,
-    locked: !lockMode || i === 0 ? false : true
-  }));
-
-  const [locks, setLocks] = React.useState(stepLocks);
-
-  const unlockNextStep = () =>
-    setLocks(
-      locks.map(item =>
-        item.step <= currentStep + 1 ? { ...item, locked: false } : item
-      )
-    );
-
-  const lockNextStep = () => {
-    setLocks(
-      locks.map(item =>
-        item.step === currentStep + 1 ? { ...item, locked: true } : item
-      )
-    );
-  };
-
   const prevStep = () => setCurrentStep(currentStep > 2 ? currentStep - 1 : 1);
   const nextStep = () =>
     setCurrentStep(currentStep < totalSteps ? currentStep + 1 : totalSteps);
   const jumpToStep = step => setCurrentStep(Number(step));
 
   return [
-    { current: currentStep, total: totalSteps },
-    locks,
-    lockNextStep,
-    unlockNextStep,
+    { current: currentStep, total: totalSteps, lock: currentStep + 1 },
     prevStep,
     nextStep,
     jumpToStep
@@ -56,26 +31,26 @@ export const useStepNavigation = (totalSteps, lockMode) => {
 
 const Steps = ({ totalSteps, lockMode, children }) => {
   const [mainState, setMainState, handleChange] = useMainState({});
-  const [
-    steps,
-    locks,
-    lockNextStep,
-    unlockNextStep,
+  const [steps, prevStep, nextStep, jumpToStep] = useStepNavigation(
+    totalSteps,
+    lockMode
+  );
+  console.log({
+    mainState,
+    setMainState,
+    handleChange,
+    steps: { total: steps.total, current: steps.current, lock: steps.lock },
     prevStep,
     nextStep,
     jumpToStep
-  ] = useStepNavigation(totalSteps, lockMode);
-
+  });
   return (
     <StepContext.Provider
       value={{
         mainState,
         setMainState,
         handleChange,
-        steps: { total: steps.total, current: steps.current },
-        locks,
-        lockNextStep,
-        unlockNextStep,
+        steps: { total: steps.total, current: steps.current, lock: steps.lock },
         prevStep,
         nextStep,
         jumpToStep