balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

ChallengeStepItem.js (1243B)

      1 /**
      2  * WordPress dependencies
      3  */
      4 import {__} from '@wordpress/i18n'
      5 import CONFIG from '../config';
      6 import './style.scss'
      7 
      8 const {compose} = wp.compose;
      9 const {withDispatch, withSelect} = wp.data;
     10 const {useState, useEffect} = wp.element;
     11 
     12 // currentStep : indicates where the step is
     13 // step: 1~8 etc
     14 export default function ChallengeStepItem(props) {
     15     const {currentStep, step, caption, finalStatus} = props;
     16     const [iconClassname, setIconClassname] = useState('fa circle');
     17     const [itemClassname, setItemClassname] = useState('challenge-item');
     18     useEffect(() => {
     19         if (currentStep < step) { // not completed step
     20             setItemClassname('challenge-item');
     21             setIconClassname('far fa-circle');
     22         }
     23         if (currentStep === step) { // current step
     24             setItemClassname('challenge-item challenge-item-current');
     25             setIconClassname('fas fa-circle');
     26         } 
     27         if (currentStep > step || finalStatus) {
     28             setItemClassname('challenge-item challenge-item-completed');
     29             setIconClassname('fas fa-check-circle');
     30         }
     31     }, [step, currentStep, finalStatus]);
     32     
     33     return <li className={itemClassname}><i className={iconClassname} />{caption}</li>;
     34 }