@zendeskgarden/container-schedule/dist/index.esm.js

Containers relating to schedule in the Garden Design System

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import React, { useState, useLayoutEffect } from 'react';
import PropTypes from 'prop-types';

const useSchedule = function (_temp) {
  let {
    duration = 1250,
    delayMS = 750,
    loop = true
  } = _temp === void 0 ? {} : _temp;
  const [elapsed, setElapsed] = useState(0);
  const [delayComplete, setDelayComplete] = useState(false);
  useLayoutEffect(() => {
    let raf;
    let start;
    let loopTimeout;
    let destroyed = false;
    const tick = () => {
      if (destroyed) {
        return;
      }
      raf = requestAnimationFrame(performAnimationFrame);
    };
    const performAnimationFrame = () => {
      setElapsed(Date.now() - start);
      tick();
    };
    const onStart = () => {
      if (destroyed) {
        return;
      }
      loopTimeout = setTimeout(() => {
        cancelAnimationFrame(raf);
        setElapsed(Date.now() - start);
        if (loop) onStart();
      }, duration);
      start = Date.now();
      setDelayComplete(true);
      tick();
    };
    const renderingDelayTimeout = setTimeout(onStart, delayMS);
    return () => {
      destroyed = true;
      clearTimeout(renderingDelayTimeout);
      clearTimeout(loopTimeout);
      cancelAnimationFrame(raf);
    };
  }, [duration, delayMS, loop]);
  return {
    elapsed: Math.min(1, elapsed / duration),
    delayMS,
    delayComplete
  };
};

const ScheduleContainer = _ref => {
  let {
    children,
    render = children,
    ...props
  } = _ref;
  return React.createElement(React.Fragment, null, render(useSchedule(props)));
};
ScheduleContainer.defaultProps = {
  duration: 1250,
  delayMS: 750,
  loop: true
};
ScheduleContainer.propTypes = {
  children: PropTypes.func,
  render: PropTypes.func,
  duration: PropTypes.number,
  loop: PropTypes.bool,
  delayMS: PropTypes.number
};

export { ScheduleContainer, useSchedule };