@roo-ui/components
Version:
82 lines (68 loc) • 7.97 kB
JavaScript
import _styled from "@emotion/styled-base";
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) } })); }
import React from 'react';
import PropTypes from 'prop-types';
import { color, size, width, themeGet } from 'styled-system';
import { keyframes } from '@emotion/core';
import Box from '../Box';
var fadeIn = keyframes(_templateObject());
var bounce = keyframes(_templateObject2());
var parseDelay = function parseDelay(delay) {
if (typeof delay === 'number') {
return "".concat(delay, "ms");
}
return delay;
};
var Bouncers =
/*#__PURE__*/
_styled(Box, {
target: "e1ydwbty0",
label: "Bouncers"
})("animation:", fadeIn, " ", themeGet('transitions.default'), " both;animation-delay:", function (props) {
return props.delay;
}, ";margin:0 auto;text-align:center;display:flex;justify-content:space-around;", width, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Mb2FkaW5nSW5kaWNhdG9yL0xvYWRpbmdJbmRpY2F0b3IuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUI0QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvTG9hZGluZ0luZGljYXRvci9Mb2FkaW5nSW5kaWNhdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBjb2xvciwgc2l6ZSwgd2lkdGgsIHRoZW1lR2V0IH0gZnJvbSAnc3R5bGVkLXN5c3RlbSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuaW1wb3J0IEJveCBmcm9tICcuLi9Cb3gnO1xuXG5jb25zdCBmYWRlSW4gPSBrZXlmcmFtZXNgXG4gIDAlIHsgb3BhY2l0eTogMCB9XG4gIDEwMCUgeyBvcGFjaXR5OiAxIH1cbmA7XG5cbmNvbnN0IGJvdW5jZSA9IGtleWZyYW1lc2BcbiAgMCUsIDgwJSwgMTAwJSB7IHRyYW5zZm9ybTogc2NhbGUoMCkgfVxuICA0MCUgeyB0cmFuc2Zvcm06IHNjYWxlKDEuMCkgfVxuYDtcblxuY29uc3QgcGFyc2VEZWxheSA9IChkZWxheSkgPT4ge1xuICBpZiAodHlwZW9mIGRlbGF5ID09PSAnbnVtYmVyJykge1xuICAgIHJldHVybiAoYCR7ZGVsYXl9bXNgKTtcbiAgfVxuICByZXR1cm4gKGRlbGF5KTtcbn07XG5cbmNvbnN0IEJvdW5jZXJzID0gc3R5bGVkKEJveClgXG4gIGFuaW1hdGlvbjogJHtmYWRlSW59ICR7dGhlbWVHZXQoJ3RyYW5zaXRpb25zLmRlZmF1bHQnKX0gYm90aDtcbiAgYW5pbWF0aW9uLWRlbGF5OiAke3Byb3BzID0+IHByb3BzLmRlbGF5fTtcbiAgbWFyZ2luOiAwIGF1dG87XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7XG5cbiAgJHt3aWR0aH1cbmA7XG5cbmNvbnN0IEJvdW5jZXIgPSBzdHlsZWQuZGl2YFxuICBhbmltYXRpb246ICR7Ym91bmNlfSAxLjRzIGluZmluaXRlIGVhc2UtaW4tb3V0IGJvdGg7XG4gIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcblxuICAmOm50aC1vZi10eXBlKDEpIHsgYW5pbWF0aW9uLWRlbGF5OiAtMC4zMnM7IH1cbiAgJjpudGgtb2YtdHlwZSgyKSB7IGFuaW1hdGlvbi1kZWxheTogLTAuMTZzOyB9XG4gICY6bnRoLW9mLXR5cGUoMykgeyBhbmltYXRpb24tZGVsYXk6IDA7IH1cblxuICAke2NvbG9yfVxuICAke3NpemV9XG5gO1xuXG5jb25zdCBMb2FkaW5nSW5kaWNhdG9yID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IGRlbGF5ID0gcGFyc2VEZWxheShwcm9wcy5kZWxheSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm91bmNlcnMgZGVsYXk9e2RlbGF5fSB3aWR0aD17cHJvcHMuc2l6ZSAqIDR9PlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgICAgPEJvdW5jZXIgYmc9e3Byb3BzLmNvbG9yfSBzaXplPXtwcm9wcy5zaXplfSAvPlxuICAgIDwvQm91bmNlcnM+XG4gICk7XG59O1xuXG5Mb2FkaW5nSW5kaWNhdG9yLnByb3BUeXBlcyA9IHtcbiAgY29sb3I6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHNpemU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbiAgZGVsYXk6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbn07XG5cbkxvYWRpbmdJbmRpY2F0b3IuZGVmYXVsdFByb3BzID0ge1xuICBjb2xvcjogJ2dyZXlzLnN0ZWVsJyxcbiAgc2l6ZTogMTgsXG4gIGRlbGF5OiAwLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgTG9hZGluZ0luZGljYXRvcjtcbiJdfQ== */");
var Bouncer = _styled("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;}", color, " ", 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.createElement(Bouncers, {
delay: delay,
width: props.size * 4
}, React.createElement(Bouncer, {
bg: props.color,
size: props.size
}), React.createElement(Bouncer, {
bg: props.color,
size: props.size
}), React.createElement(Bouncer, {
bg: props.color,
size: props.size
}));
};
LoadingIndicator.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
LoadingIndicator.defaultProps = {
color: 'greys.steel',
size: 18,
delay: 0
};
export default LoadingIndicator;