@roo-ui/components/dist/cjs/LoadingIndicator/LoadingIndicator.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledSystem = require("styled-system");

var _core = require("@emotion/core");

var _Box = _interopRequireDefault(require("../Box"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  0%, 80%, 100% { transform: scale(0) }\n  40% { transform: scale(1.0) }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  0% { opacity: 0 }\n  100% { opacity: 1 }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var fadeIn = (0, _core.keyframes)(_templateObject());
var bounce = (0, _core.keyframes)(_templateObject2());

var parseDelay = function parseDelay(delay) {
  if (typeof delay === 'number') {
    return "".concat(delay, "ms");
  }

  return delay;
};

var Bouncers = (
/*#__PURE__*/
0, _styledBase.default)(_Box.default, {
  target: "e1ydwbty0",
  label: "Bouncers"
})("animation:", fadeIn, " ", (0, _styledSystem.themeGet)('transitions.default'), " both;animation-delay:", function (props) {
  return props.delay;
}, ";margin:0 auto;text-align:center;display:flex;justify-content:space-around;", _styledSystem.width, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Mb2FkaW5nSW5kaWNhdG9yL0xvYWRpbmdJbmRpY2F0b3IuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUI0QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvTG9hZGluZ0luZGljYXRvci9Mb2FkaW5nSW5kaWNhdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBjb2xvciwgc2l6ZSwgd2lkdGgsIHRoZW1lR2V0IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuaW1wb3J0IEJveCBmcm9tICcuLi9Cb3gnO1xuXG5jb25zdCBmYWRlSW4gPSBrZXlmcmFtZXNgXG4gIDAlIHsgb3BhY2l0eTogMCB9XG4gIDEwMCUgeyBvcGFjaXR5OiAxIH1cbmA7XG5cbmNvbnN0IGJvdW5jZSA9IGtleWZyYW1lc2BcbiAgMCUsIDgwJSwgMTAwJSB7IHRyYW5zZm9ybTogc2NhbGUoMCkgfVxuICA0MCUgeyB0cmFuc2Zvcm06IHNjYWxlKDEuMCkgfVxuYDtcblxuY29uc3QgcGFyc2VEZWxheSA9IChkZWxheSkgPT4ge1xuICBpZiAodHlwZW9mIGRlbGF5ID09PSAnbnVtYmVyJykge1xuICAgIHJldHVybiAoYCR7ZGVsYXl9bXNgKTtcbiAgfVxuICByZXR1cm4gKGRlbGF5KTtcbn07XG5cbmNvbnN0IEJvdW5jZXJzID0gc3R5bGVkKEJveClgXG4gIGFuaW1hdGlvbjogJHtmYWRlSW59ICR7dGhlbWVHZXQoJ3RyYW5zaXRpb25zLmRlZmF1bHQnKX0gYm90aDtcbiAgYW5pbWF0aW9uLWRlbGF5OiAke3Byb3BzID0+IHByb3BzLmRlbGF5fTtcbiAgbWFyZ2luOiAwIGF1dG87XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG5cbiAgJHt3aWR0aH1cbmA7XG5cbmNvbnN0IEJvdW5jZXIgPSBzdHlsZWQuZGl2YFxuICBhbmltYXRpb246ICR7Ym91bmNlfSAxLjRzIGluZmluaXRlIGVhc2UtaW4tb3V0IGJvdGg7XG4gIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcblxuICAmOm50aC1vZi10eXBlKDEpIHsgYW5pbWF0aW9uLWRlbGF5OiAtMC4zMnM7IH1cbiAgJjpudGgtb2YtdHlwZSgyKSB7IGFuaW1hdGlvbi1kZWxheTogLTAuMTZzOyB9XG4gICY6bnRoLW9mLXR5cGUoMykgeyBhbmltYXRpb24tZGVsYXk6IDA7IH1cblxuICAke2NvbG9yfVxuICAke3NpemV9XG5gO1xuXG5jb25zdCBMb2FkaW5nSW5kaWNhdG9yID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IGRlbGF5ID0gcGFyc2VEZWxheShwcm9wcy5kZWxheSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm91bmNlcnMgZGVsYXk9e2RlbGF5fSB3aWR0aD17cHJvcHMuc2l6ZSAqIDR9PlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgIDwvQm91bmNlcnM+XG4gICk7XG59O1xuXG5Mb2FkaW5nSW5kaWNhdG9yLnByb3BUeXBlcyA9IHtcbiAgY29sb3I6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbiAgZGVsYXk6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkxvYWRpbmdJbmRpY2F0b3IuZGVmYXVsdFByb3BzID0ge1xuICBjb2xvcjogJ2dyZXlzLnN0ZWVsJyxcbiAgc2l6ZTogMTgsXG4gIGRlbGF5OiAwLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ0luZGljYXRvcjtcbiJdfQ== */");
var Bouncer = (0, _styledBase.default)("div", {
  target: "e1ydwbty1",
  label: "Bouncer"
})("animation:", bounce, " 1.4s infinite ease-in-out both;border-radius:100%;display:inline-block;&:nth-of-type(1){animation-delay:-0.32s;}&:nth-of-type(2){animation-delay:-0.16s;}&:nth-of-type(3){animation-delay:0;}", _styledSystem.color, " ", _styledSystem.size, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Mb2FkaW5nSW5kaWNhdG9yL0xvYWRpbmdJbmRpY2F0b3IuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0MwQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvTG9hZGluZ0luZGljYXRvci9Mb2FkaW5nSW5kaWNhdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBjb2xvciwgc2l6ZSwgd2lkdGgsIHRoZW1lR2V0IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuaW1wb3J0IEJveCBmcm9tICcuLi9Cb3gnO1xuXG5jb25zdCBmYWRlSW4gPSBrZXlmcmFtZXNgXG4gIDAlIHsgb3BhY2l0eTogMCB9XG4gIDEwMCUgeyBvcGFjaXR5OiAxIH1cbmA7XG5cbmNvbnN0IGJvdW5jZSA9IGtleWZyYW1lc2BcbiAgMCUsIDgwJSwgMTAwJSB7IHRyYW5zZm9ybTogc2NhbGUoMCkgfVxuICA0MCUgeyB0cmFuc2Zvcm06IHNjYWxlKDEuMCkgfVxuYDtcblxuY29uc3QgcGFyc2VEZWxheSA9IChkZWxheSkgPT4ge1xuICBpZiAodHlwZW9mIGRlbGF5ID09PSAnbnVtYmVyJykge1xuICAgIHJldHVybiAoYCR7ZGVsYXl9bXNgKTtcbiAgfVxuICByZXR1cm4gKGRlbGF5KTtcbn07XG5cbmNvbnN0IEJvdW5jZXJzID0gc3R5bGVkKEJveClgXG4gIGFuaW1hdGlvbjogJHtmYWRlSW59ICR7dGhlbWVHZXQoJ3RyYW5zaXRpb25zLmRlZmF1bHQnKX0gYm90aDtcbiAgYW5pbWF0aW9uLWRlbGF5OiAke3Byb3BzID0+IHByb3BzLmRlbGF5fTtcbiAgbWFyZ2luOiAwIGF1dG87XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG5cbiAgJHt3aWR0aH1cbmA7XG5cbmNvbnN0IEJvdW5jZXIgPSBzdHlsZWQuZGl2YFxuICBhbmltYXRpb246ICR7Ym91bmNlfSAxLjRzIGluZmluaXRlIGVhc2UtaW4tb3V0IGJvdGg7XG4gIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcblxuICAmOm50aC1vZi10eXBlKDEpIHsgYW5pbWF0aW9uLWRlbGF5OiAtMC4zMnM7IH1cbiAgJjpudGgtb2YtdHlwZSgyKSB7IGFuaW1hdGlvbi1kZWxheTogLTAuMTZzOyB9XG4gICY6bnRoLW9mLXR5cGUoMykgeyBhbmltYXRpb24tZGVsYXk6IDA7IH1cblxuICAke2NvbG9yfVxuICAke3NpemV9XG5gO1xuXG5jb25zdCBMb2FkaW5nSW5kaWNhdG9yID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IGRlbGF5ID0gcGFyc2VEZWxheShwcm9wcy5kZWxheSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm91bmNlcnMgZGVsYXk9e2RlbGF5fSB3aWR0aD17cHJvcHMuc2l6ZSAqIDR9PlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgIDwvQm91bmNlcnM+XG4gICk7XG59O1xuXG5Mb2FkaW5nSW5kaWNhdG9yLnByb3BUeXBlcyA9IHtcbiAgY29sb3I6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbiAgZGVsYXk6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkxvYWRpbmdJbmRpY2F0b3IuZGVmYXVsdFByb3BzID0ge1xuICBjb2xvcjogJ2dyZXlzLnN0ZWVsJyxcbiAgc2l6ZTogMTgsXG4gIGRlbGF5OiAwLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ0luZGljYXRvcjtcbiJdfQ== */");

var LoadingIndicator = function LoadingIndicator(props) {
  var delay = parseDelay(props.delay);
  return _react.default.createElement(Bouncers, {
    delay: delay,
    width: props.size * 4
  }, _react.default.createElement(Bouncer, {
    bg: props.color,
    size: props.size
  }), _react.default.createElement(Bouncer, {
    bg: props.color,
    size: props.size
  }), _react.default.createElement(Bouncer, {
    bg: props.color,
    size: props.size
  }));
};

LoadingIndicator.propTypes = {
  color: _propTypes.default.string,
  size: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  delay: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
LoadingIndicator.defaultProps = {
  color: 'greys.steel',
  size: 18,
  delay: 0
};
var _default = LoadingIndicator;
exports.default = _default;