UNPKG

@roo-ui/components

Version:

82 lines (68 loc) 7.97 kB
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;