npm-upgrade-browser/assets/universal/components/Spinner.js

browser UI for viewing changelogs and upgrading packages installed in your project

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

var React = _interopRequireWildcard(require("react"));

var _reactJss = _interopRequireDefault(require("react-jss"));

var _classnames = _interopRequireDefault(require("classnames"));

const transition = {
  timingFunction: 'ease-out',
  duration: '400ms'
};
const styles = {
  '@keyframes spinner-rotation': {
    from: {
      transform: 'rotate(0deg)'
    },
    to: {
      transform: 'rotate(360deg)'
    }
  },
  spinner: {
    animation: ['spinner-rotation linear infinite 1s'],
    position: 'relative',
    display: 'inline-block',
    width: '1.2em',
    height: '1.2em',
    lineHeight: '1em'
  },
  holder: {
    display: 'inline-block',
    transition: [(0, _objectSpread2.default)({
      property: 'transform'
    }, transition), (0, _objectSpread2.default)({
      property: 'opacity'
    }, transition), (0, _objectSpread2.default)({
      property: 'visibility'
    }, transition)],
    transform: 'scale(1)',
    opacity: 1,
    visibility: 'visible',
    width: '1.2em',
    height: '1.2em',
    textAlign: 'center'
  },
  out: {
    transform: 'scale(0.01)',
    opacity: 0,
    visibility: 'hidden',
    '& > $spinner': {
      animation: 'none'
    }
  },
  path: {
    fill: 'none',
    opacity: 0.5,
    strokeWidth: 10,
    stroke: 'currentColor',
    strokeLinecap: 'round'
  }
};

const Spinner = (_ref) => {
  let {
    className,
    classes,
    in: isIn
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, ["className", "classes", "in"]);
  return React.createElement("div", (0, _extends2.default)({}, props, {
    className: (0, _classnames.default)(className, classes.holder, {
      [classes.out]: isIn === false
    })
  }), React.createElement("svg", {
    className: classes.spinner,
    viewBox: "0 0 100 100",
    preserveAspectRatio: "xMidYMid meet"
  }, React.createElement("path", {
    d: "M 50,5 A 45,45 0 0,1 81.82,81.82",
    className: classes.path
  })));
};

var _default = (0, _reactJss.default)(styles)(Spinner);

exports.default = _default;