@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/loader/loader__core.js

@@ -0,0 +1,272 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { getPixelRatio } from '../global/dom.js';
+
+var modules_00b5ad26 = {"unit":"8px","canvas":"canvas_rui_2113","animate":"animate_rui_2113","rotation-keyframes":"rotationKeyframes_rui_2113","text":"text_rui_2113"};
+
+const INITIAL_TICKS = 100;
+
+class Particle {
+  constructor(_ref) {
+    let {
+      x,
+      y,
+      radius,
+      color
+    } = _ref;
+    this.radius = radius;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.decay = 0.01;
+    this.life = 1;
+  }
+
+  step() {
+    this.life -= this.decay;
+  }
+
+  isAlive() {
+    return this.life >= 0;
+  }
+
+  draw(ctx) {
+    const alpha = this.life >= 0 ? this.life : 0;
+    ctx.fillStyle = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${alpha})`;
+    ctx.beginPath();
+    ctx.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+}
+
+const DETERMINISTIC_VALUE = 0.5;
+
+function deterministic() {
+  return DETERMINISTIC_VALUE;
+}
+
+class LoaderCore {
+  static calculateGradient(startColor, stopColor, position) {
+    const calculateChannelValue = (a, b) => a + Math.round((b - a) * position);
+
+    return {
+      r: calculateChannelValue(startColor.r, stopColor.r),
+      g: calculateChannelValue(startColor.g, stopColor.g),
+      b: calculateChannelValue(startColor.b, stopColor.b)
+    };
+  }
+
+  constructor(containerNode, props) {
+    this.props = Object.assign({}, LoaderCore.defaultProps, props);
+    this.renderInNode(containerNode);
+    this.initializeLoader();
+    this.isRunning = !this.props.stop;
+
+    if (this.isRunning) {
+      this.startAnimation();
+    } else {
+      this.draw();
+    }
+  }
+
+  static getPixelRatio() {
+    return getPixelRatio();
+  }
+
+  setCanvasSize() {
+    const pixelRatio = LoaderCore.getPixelRatio();
+    const canvasSize = this.props.size * pixelRatio;
+    this.canvas.width = canvasSize;
+    this.canvas.height = canvasSize; //Fixate canvas physical size to avoid real size scaling
+
+    this.canvas.style.width = `${this.props.size}px`;
+    this.canvas.style.height = `${this.props.size}px`;
+    this.ctx = this.canvas.getContext('2d');
+    this.ctx.scale(pixelRatio, pixelRatio);
+  }
+
+  initializeLoader() {
+    this.setCanvasSize();
+    this.height = this.props.size;
+    this.width = this.props.size;
+    this.particles = []; //Configuration
+
+    this.baseSpeed = 1.0;
+    this.colorIndex = 0;
+    this.maxRadius = 10;
+    this.minRadius = 6;
+    this.colorChangeTick = 40; //State
+
+    this.x = 0;
+    this.y = 0;
+    this.radius = 8;
+    this.hSpeed = 1.5;
+    this.vSpeed = 0.5;
+    this.radiusSpeed = 0.05;
+    this.tick = 0;
+    this.prepareInitialState(INITIAL_TICKS);
+  }
+
+  prepareInitialState(ticks) {
+    for (let i = 0; i < ticks; i++) {
+      this.step();
+    }
+  }
+
+  handleLimits(coord, radius, speed, limit) {
+    const randomFunc = this.props.deterministic ? deterministic : Math.random;
+    const randomizedSpeedChange = randomFunc(this.baseSpeed) - this.baseSpeed / 2;
+
+    if (coord + radius * 2 + this.baseSpeed >= limit) {
+      return -(this.baseSpeed + randomizedSpeedChange);
+    } else if (coord <= this.baseSpeed) {
+      return this.baseSpeed + randomizedSpeedChange;
+    }
+
+    return speed;
+  }
+
+  calculateNextCoordinates() {
+    this.x += this.hSpeed;
+    this.y += this.vSpeed;
+    this.hSpeed = this.handleLimits(this.x, this.radius, this.hSpeed, this.width);
+    this.vSpeed = this.handleLimits(this.y, this.radius, this.vSpeed, this.height);
+  }
+
+  calculateNextRadius() {
+    this.radius += this.radiusSpeed;
+
+    if (this.radius > this.maxRadius || this.radius < this.minRadius) {
+      this.radiusSpeed = -this.radiusSpeed;
+    }
+  }
+
+  getNextColor() {
+    const colors = this.props.colors;
+    const currentColor = colors[this.colorIndex];
+    const nextColor = colors[this.colorIndex + 1] || colors[0];
+    return LoaderCore.calculateGradient(currentColor, nextColor, this.tick / this.colorChangeTick);
+  }
+
+  nextTick() {
+    this.tick++;
+
+    if (this.tick > this.colorChangeTick) {
+      this.tick = 0;
+      this.colorIndex++;
+
+      if (this.colorIndex > this.props.colors.length - 1) {
+        this.colorIndex = 0;
+      }
+    }
+  }
+
+  step() {
+    this.nextTick();
+    this.calculateNextCoordinates();
+    this.calculateNextRadius();
+    this.particles.forEach(particle => particle.step());
+    this.particles.push(new Particle({
+      x: this.x,
+      y: this.y,
+      radius: this.radius,
+      color: this.getNextColor()
+    }));
+  }
+
+  removeDeadParticles() {
+    this.particles = this.particles.filter(it => it.isAlive());
+  }
+
+  draw() {
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.removeDeadParticles();
+    this.particles.forEach(particle => particle.draw(this.ctx));
+  }
+
+  loop() {
+    this.step();
+    this.draw();
+
+    if (this.isRunning) {
+      window.requestAnimationFrame(() => this.loop());
+    }
+  }
+
+  updateMessage(text) {
+    this.textNode.textContent = text || '';
+  }
+
+  stopAnimation() {
+    this.isRunning = false;
+    this.canvas.classList.remove(modules_00b5ad26.animate);
+  }
+
+  startAnimation() {
+    this.isRunning = true;
+    this.canvas.classList.add(modules_00b5ad26.animate);
+    this.loop();
+  }
+
+  destroy() {
+    this.isRunning = false;
+  }
+
+  renderInNode(node) {
+    this.canvas = document.createElement('canvas');
+    this.canvas.dataset.test = 'ring-loader';
+    this.canvas.classList.add(modules_00b5ad26.canvas);
+    this.textNode = document.createElement('div');
+    this.textNode.dataset.test = 'ring-loader-text';
+    this.textNode.classList.add(modules_00b5ad26.text);
+    this.textNode.textContent = this.props.message ? this.props.message : '';
+    node.appendChild(this.canvas);
+    node.appendChild(this.textNode);
+    return node;
+  }
+
+}
+
+_defineProperty(LoaderCore, "defaultProps", {
+  size: 64,
+  stop: false,
+  deterministic: false,
+  colors: [{
+    r: 215,
+    g: 60,
+    b: 234
+  }, //#D73CEA
+  {
+    r: 145,
+    g: 53,
+    b: 224
+  }, //#9135E0
+  {
+    r: 88,
+    g: 72,
+    b: 224
+  }, //#5848F4
+  {
+    r: 37,
+    g: 183,
+    b: 255
+  }, //#25B7FF
+  {
+    r: 89,
+    g: 189,
+    b: 0
+  }, //#59BD00
+  {
+    r: 251,
+    g: 172,
+    b: 2
+  }, //#FBAC02
+  {
+    r: 227,
+    g: 37,
+    b: 129
+  } //#E32581
+  ]
+});
+
+export { LoaderCore as default };

package/dist/loader-inline/inject-styles.js

@@ -0,0 +1,11 @@
+import '../global/conic-gradient.js';
+import '../global/inject-styles.js';
+import '../global/memoize.js';
+import '../global/radial-gradient-mask.js';
+import '../global/theme.js';
+export { i as default } from '../_helpers/inject-styles.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/get-uid.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';

package/dist/loader-inline/loader-inline.js

@@ -0,0 +1,56 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Theme, { withTheme } from '../global/theme.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { i as injectStyles, m as modules_e49a3529 } from '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/memoize.js';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../global/get-uid.js';
+
+/**
+ * @name Loader Inline
+ */
+
+class LoaderInline extends PureComponent {
+  componentDidMount() {
+    injectStyles();
+  }
+
+  render() {
+    const {
+      className,
+      theme,
+      'data-test': dataTest,
+      children,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_e49a3529.loader, className, `${modules_e49a3529.loader}_${theme}`);
+    const loader = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      "data-test": joinDataTestAttributes('ring-loader-inline', dataTest),
+      className: classes
+    }));
+    return children ? /*#__PURE__*/React.createElement(React.Fragment, null, loader, /*#__PURE__*/React.createElement("span", {
+      className: modules_e49a3529.children
+    }, children)) : loader;
+  }
+
+}
+
+_defineProperty(LoaderInline, "propTypes", {
+  theme: PropTypes.oneOf(Object.values(Theme)),
+  className: PropTypes.string,
+  'data-test': PropTypes.string,
+  children: PropTypes.node
+});
+
+_defineProperty(LoaderInline, "Theme", Theme);
+
+var LoaderInline$1 = withTheme()(LoaderInline);
+
+export { LoaderInline$1 as default };

package/dist/loader-inline-ng/loader-inline-ng.js

@@ -0,0 +1,42 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import angular from 'angular';
+import { m as modules_e49a3529, i as injectStyles } from '../_helpers/inject-styles.js';
+import Theme from '../global/theme.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/memoize.js';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../global/get-uid.js';
+import 'react';
+
+/**
+ * @name Loader Inline Ng
+ */
+
+const angularModule = angular.module('Ring.loader-inline', []);
+
+class LoaderController {
+  constructor() {
+    _defineProperty(this, "getThemeClass", () => `${modules_e49a3529.loader}_${this.theme}`);
+  }
+
+  $onInit() {
+    injectStyles();
+    this.theme = this.theme || Theme.LIGHT;
+  }
+
+}
+
+LoaderController.$inject = [];
+angularModule.component('rgLoaderInline', {
+  bindings: {
+    theme: '@?'
+  },
+  template: `<div data-test="ring-loader-inline-ng" class="${modules_e49a3529.loader}" ng-class="$ctrl.getThemeClass()"></div>`,
+  controller: LoaderController
+});
+var loaderInlineNg = angularModule.name;
+
+export { loaderInlineNg as default };

package/dist/loader-ng/loader-ng.js

@@ -0,0 +1,43 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import angular from 'angular';
+import RingAngularComponent from '../global/ring-angular-component.js';
+import LoaderCore from '../loader/loader__core.js';
+import '../global/dom.js';
+
+/**
+ * @name Loader Ng
+ */
+
+const angularModule = angular.module('Ring.loader', []);
+
+class RgLoaderComponent extends RingAngularComponent {
+  constructor() {
+    super(...arguments);
+    const {
+      $element
+    } = this.$inject;
+    this.loader = new LoaderCore($element[0], {
+      message: this.message
+    });
+  }
+
+  $onDestroy() {
+    this.loader.destroy();
+  }
+
+  $onChanges(changes) {
+    this.loader.updateMessage(changes.message.currentValue);
+  }
+
+}
+
+_defineProperty(RgLoaderComponent, "$inject", ['$element']);
+
+_defineProperty(RgLoaderComponent, "bindings", {
+  message: '@'
+});
+
+angularModule.component('rgLoader', RgLoaderComponent);
+var loaderNg = angularModule.name;
+
+export { loaderNg as default };

package/dist/loader-screen/loader-screen.js

@@ -0,0 +1,43 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Loader from '../loader/loader.js';
+import { m as modules_122a82e9 } from '../_helpers/loader-screen.js';
+import '../global/data-tests.js';
+import '../loader/loader__core.js';
+import '../global/dom.js';
+
+/**
+ * @name Loader Screen
+ */
+
+class LoaderScreen extends PureComponent {
+  render() {
+    const {
+      message,
+      className,
+      containerClassName,
+      ...restProps
+    } = this.props;
+    const containerClasses = classNames(containerClassName, modules_122a82e9.loaderScreen);
+    const loaderClasses = classNames(className, modules_122a82e9.loader, {
+      [modules_122a82e9.loaderWithoutSpacing]: !message
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: containerClasses
+    }, /*#__PURE__*/React.createElement(Loader, _extends({}, restProps, {
+      message: message,
+      className: loaderClasses
+    })));
+  }
+
+}
+
+_defineProperty(LoaderScreen, "propTypes", {
+  className: PropTypes.string,
+  containerClassName: PropTypes.string,
+  message: PropTypes.string
+});
+
+export { LoaderScreen as default };

package/dist/loader-screen-ng/loader-screen-ng.js

@@ -0,0 +1,99 @@
+import angular from 'angular';
+import loaderNg from '../loader-ng/loader-ng.js';
+import { m as modules_122a82e9 } from '../_helpers/loader-screen.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import '../global/ring-angular-component.js';
+import '../loader/loader__core.js';
+import '../global/dom.js';
+
+/**
+ * @name Loader Screen Ng
+ */
+
+const angularModule = angular.module('Ring.loader-screen', [loaderNg]);
+angularModule.service('loaderScreen', ["$timeout", "$rootScope", function service($timeout, $rootScope) {
+  var _this = this;
+
+  // TODO in CSS Modules version put constant to global.css
+  const ordinaryLoadingTTL = 100;
+  let initialLoading = false;
+  let loadingFailed = false;
+  let showLoader;
+  let showLoaderPromise;
+
+  this.startLoading = function () {
+    let ttl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ordinaryLoadingTTL;
+
+    if (showLoaderPromise) {
+      return; // already scheduled to show
+    }
+
+    showLoaderPromise = $timeout(() => {
+      _this.setVisible(true);
+    }, ttl);
+  };
+
+  this.stopLoading = () => {
+    if (showLoaderPromise) {
+      $timeout.cancel(showLoaderPromise);
+      showLoaderPromise = null;
+    }
+
+    this.setVisible(false);
+  };
+
+  this.startInitialLoading = () => {
+    initialLoading = true;
+    this.setVisible(true);
+  };
+
+  this.stopInitialLoading = () => {
+    initialLoading = false;
+    this.setVisible(false);
+  };
+
+  $rootScope.isInitialLoading = () => initialLoading;
+
+  $rootScope.isLoaderVisible = () => showLoader;
+
+  $rootScope.isLoadingFailed = () => loadingFailed;
+
+  this.failInitialLoading = error => {
+    this.stopInitialLoading();
+    loadingFailed = true;
+    $rootScope.error = error;
+  };
+
+  this.setVisible = visible => {
+    showLoader = visible;
+  };
+  /* eslint-disable angular/on-watch */
+
+
+  $rootScope.$on('$routeChangeSuccess', () => {
+    this.stopInitialLoading();
+  });
+  $rootScope.$on('$routeChangeError', (event, current, previous, rejection) => {
+    if (!rejection || !(rejection.silent || rejection.authRedirect)) {
+      this.failInitialLoading(rejection);
+    }
+  });
+  /* eslint-enable angular/on-watch */
+}]);
+angularModule.directive('rgLoaderScreen', function rgLoaderScreenDirective() {
+  return {
+    restrict: 'A',
+    scope: {
+      message: '@rgLoaderScreen'
+    },
+    template: `
+<div class="${modules_122a82e9.loaderScreen}" ng-if="$root.isLoaderVisible()">
+  <rg-loader class="${modules_122a82e9.loader}"
+    message="{{$root.isInitialLoading() ? message : ''}}"></rg-loader>
+</div>
+    `
+  };
+});
+var loaderScreenNg = angularModule.name;
+
+export { loaderScreenNg as default };