balmet.com

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

ImportingStep.js (2059B)

      1 import React from 'react';
      2 const {useState, useEffect, useRef} = wp.element;
      3 const {Spinner} = wp.components;
      4 import TextTransition, { presets } from 'react-text-transition';
      5 const {__} = wp.i18n
      6 
      7 const MESSAGE_DELAY_MILLISECONDS = 4000;
      8 
      9 const MESSAGES_LIST = [
     10     __('Please wait while your template is prepared.', redux_templates.i18n),
     11     __('Fetching the template.', redux_templates.i18n),
     12     __('We\'re getting closer now.', redux_templates.i18n),
     13     __('Wow, this is taking a long time.', redux_templates.i18n),
     14     __('Gah, this should be done by now!', redux_templates.i18n),
     15     __('Really, this should be done soon.', redux_templates.i18n),
     16     __('Are you sure your internet is working?!', redux_templates.i18n),
     17     __('Give up, it looks like it didn\'t work...', redux_templates.i18n),
     18 ];
     19 
     20 function useInterval(callback, delay) {
     21     const savedCallback = useRef();
     22 
     23     // Remember the latest callback.
     24     useEffect(() => {
     25         savedCallback.current = callback;
     26     }, [callback]);
     27 
     28     // Set up the interval.
     29     useEffect(() => {
     30         function tick() {
     31             savedCallback.current();
     32         }
     33 
     34         if (delay !== null) {
     35             let id = setInterval(tick, delay);
     36             return () => clearInterval(id);
     37         }
     38     }, [delay]);
     39 }
     40 
     41 export default function ImportingStep(props) {
     42     const [messageIndex, setMessageIndex] = useState(0);
     43     const [loadingMessage, setLoadingMessage] = useState(MESSAGES_LIST[0]);
     44 
     45     useInterval(() => {
     46         if (messageIndex === MESSAGES_LIST.length) return;
     47         setMessageIndex(messageIndex => messageIndex + 1);
     48         setLoadingMessage([MESSAGES_LIST[messageIndex + 1]]);
     49     }, MESSAGE_DELAY_MILLISECONDS)
     50 
     51     return (
     52         <div className="redux-templates-modal-body">
     53             <div className="redux-templates-import-wizard-spinner-wrapper">
     54                 <TextTransition
     55                     text={loadingMessage}
     56                     springConfig={presets.gentle}
     57                 />
     58                 <Spinner/>
     59             </div>
     60         </div>
     61     );
     62 };