@zendeskgarden/react-loaders/dist/esm/elements/Dots.js

Components relating to loaders 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, { forwardRef, useContext, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { ThemeContext } from 'styled-components';
import { useSchedule } from '@zendeskgarden/container-schedule';
import { useDocument } from '@zendeskgarden/react-theming';
import { StyledDotsCircleOne, StyledDotsCircleTwo, StyledDotsCircleThree } from '../styled/StyledDots.js';
import { StyledLoadingPlaceholder } from '../styled/StyledLoadingPlaceholder.js';
import '../styled/StyledProgress.js';
import '../styled/StyledSkeleton.js';
import '../styled/StyledSpinnerCircle.js';
import { StyledSVG } from '../styled/StyledSVG.js';
import '../styled/StyledInline.js';

const COMPONENT_ID = 'loaders.dots';
const Dots = forwardRef((_ref, ref) => {
  let {
    size,
    color,
    duration,
    delayMS,
    ...other
  } = _ref;
  const theme = useContext(ThemeContext);
  const environment = useDocument(theme);
  const canTransformSVG = useRef(null);
  if (environment && canTransformSVG.current === null) {
    const svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg');
    canTransformSVG.current = 'transform' in svg;
  }
  const {
    delayComplete
  } = useSchedule({
    duration,
    delayMS,
    loop: true
  });
  const dotOne = useRef(null);
  const dotTwo = useRef(null);
  const dotThree = useRef(null);
  useEffect(() => {
    if (!canTransformSVG.current && delayComplete) {
      const transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')];
      dotOne.current.setAttribute('transform', transforms[0]);
      dotTwo.current.setAttribute('transform', transforms[1]);
      dotThree.current.setAttribute('transform', transforms[2]);
    }
  });
  if (!delayComplete && delayMS !== 0) {
    return React.createElement(StyledLoadingPlaceholder, {
      $fontSize: size
    }, "\xA0");
  }
  return React.createElement(StyledSVG, Object.assign({
    "data-garden-id": COMPONENT_ID,
    ref: ref,
    $fontSize: size,
    $color: color,
    $width: "80",
    $height: "72"
  }, other), React.createElement("g", {
    fill: "currentColor"
  }, React.createElement(StyledDotsCircleOne, {
    $duration: duration,
    ref: dotOne
  }), React.createElement(StyledDotsCircleTwo, {
    $duration: duration,
    ref: dotTwo
  }), React.createElement(StyledDotsCircleThree, {
    $duration: duration,
    ref: dotThree
  })));
});
Dots.displayName = 'Dots';
Dots.propTypes = {
  size: PropTypes.any,
  duration: PropTypes.number,
  color: PropTypes.string,
  delayMS: PropTypes.number
};
Dots.defaultProps = {
  size: 'inherit',
  color: 'inherit',
  duration: 1250,
  delayMS: 750
};

export { Dots };