balmet.com

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

ChallengeDot.js (2140B)

      1 import {compose} from '@wordpress/compose';
      2 import {withDispatch, withSelect} from '@wordpress/data';
      3 import CONFIG from '../config';
      4 const {findDOMNode, useRef, useEffect} = wp.element;
      5 function ChallengeDot(props) {
      6     const {step, challengeStep, isOpen, setChallengeTooltipRect} = props;
      7     const selectedElement = useRef(null);
      8     useEffect(() => {
      9         window.addEventListener('resize', onResize);
     10         return () => {
     11             window.removeEventListener('resize', onResize);
     12         };
     13     }, [])
     14 
     15     useEffect(() => {
     16         if (isOpen === false) return;
     17         const stepInformation = CONFIG.list[challengeStep];
     18         if (stepInformation && stepInformation.action && typeof stepInformation.action === 'function') {
     19             stepInformation.action();
     20             onResize();
     21             setTimeout(onResize, 0);
     22         } else
     23             onResize();
     24     }, [challengeStep, isOpen]);
     25 
     26     const isVisible = () => {
     27         return ((challengeStep >= 0 && challengeStep < CONFIG.totalStep) && isOpen);
     28     }
     29 
     30     const onResize = () => {
     31         const box = getElementBounding();
     32         if (box) setChallengeTooltipRect(box);
     33     };
     34 
     35     const getElementBounding = () => {
     36         if (selectedElement && selectedElement.current) {
     37             const rect = findDOMNode(selectedElement.current).getBoundingClientRect();
     38             return {left: rect.left, top: rect.top, width: rect.width, height: rect.height};
     39         }
     40         return null;
     41     }
     42     if (isVisible() && challengeStep === step)
     43         return <i className="challenge-dot tooltipstered" ref={selectedElement}>
     44             &nbsp;
     45         </i>;
     46     return null;
     47 }
     48 
     49 
     50 export default compose([
     51     withDispatch((dispatch) => {
     52         const {setChallengeTooltipRect} = dispatch('redux-templates/sectionslist');
     53         return {
     54             setChallengeTooltipRect
     55         };
     56     }),
     57     withSelect((select, props) => {
     58         const { getChallengeOpen, getChallengeStep } = select('redux-templates/sectionslist');
     59         return {
     60             isOpen: getChallengeOpen(),
     61             challengeStep: getChallengeStep()
     62         };
     63     })
     64 ])(ChallengeDot);