@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/loader/loader__core.js

@@ -1,219 +0,0 @@
-import { getPixelRatio } from '../global/dom';
-import styles from './loader.css';
-const INITIAL_TICKS = 100;
-class Particle {
-    radius;
-    x;
-    y;
-    color;
-    decay;
-    life;
-    constructor({ x, y, radius, color }) {
-        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;
-}
-export default class LoaderCore {
-    static 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
-        ]
-    };
-    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)
-        };
-    }
-    props;
-    canvas;
-    textNode;
-    ctx;
-    height;
-    width;
-    particles;
-    baseSpeed;
-    colorIndex;
-    maxRadius;
-    minRadius;
-    colorChangeTick;
-    x;
-    y;
-    radius;
-    hSpeed;
-    vSpeed;
-    radiusSpeed;
-    tick;
-    isRunning;
-    constructor(containerNode, props) {
-        this.props = Object.assign({}, LoaderCore.defaultProps, props);
-        this.canvas = document.createElement('canvas');
-        this.canvas.dataset.test = 'ring-loader';
-        this.canvas.classList.add(styles.canvas);
-        this.textNode = document.createElement('div');
-        this.textNode.dataset.test = 'ring-loader-text';
-        this.textNode.classList.add(styles.text);
-        this.textNode.textContent = this.props.message ? this.props.message : '';
-        containerNode.appendChild(this.canvas);
-        containerNode.appendChild(this.textNode);
-        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);
-        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);
-        this.isRunning = !this.props.stop;
-        if (this.isRunning) {
-            this.startAnimation();
-        }
-        else {
-            this.draw();
-        }
-    }
-    static getPixelRatio() {
-        return getPixelRatio();
-    }
-    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 / 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() {
-        const ctx = this.ctx;
-        if (ctx == null) {
-            return;
-        }
-        ctx.clearRect(0, 0, this.width, this.height);
-        this.removeDeadParticles();
-        this.particles.forEach(particle => particle.draw(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(styles.animate);
-    }
-    startAnimation() {
-        this.isRunning = true;
-        this.canvas.classList.add(styles.animate);
-        this.loop();
-    }
-    destroy() {
-        this.isRunning = false;
-    }
-}

package/components/loader-inline/loader-inline.css

@@ -1,74 +0,0 @@
-@import "../global/variables.css";
-
-@value dark from "../global/variables_dark.css";
-@value unit from "../global/global.css";
-
-:root {
-  /* stylelint-disable-next-line color-no-hex */
-  --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
-}
-
-.dark,
-:global(.ring-ui-theme-dark) {
-  /* stylelint-disable-next-line color-no-hex */
-  --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-
-  100% {
-    transform: scale(calc(17 / 12));
-  }
-}
-
-.loader,
-:global(.ring-loader-inline) {
-  /* needed for better backward-compatibility */
-
-  position: relative;
-
-  display: inline-block;
-
-  overflow: hidden;
-
-  transform: rotate(0);
-  animation: spin 1s linear infinite;
-  vertical-align: -3px;
-
-  border-radius: unit;
-
-  &,
-  &::after {
-    transform-origin: 50% 50%;
-  }
-
-  &::after {
-    display: block;
-
-    width: calc(unit * 2);
-    height: calc(unit * 2);
-
-    content: "";
-    animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
-
-    background-image: conic-gradient(var(--ring-loader-inline-stops));
-    mask-image: radial-gradient(unit, transparent 71.875%, var(--ring-content-background-color) 71.875%);
-  }
-}
-
-.children {
-  margin-left: calc(unit / 2);
-}

package/components/loader-inline/loader-inline.d.ts

@@ -1,18 +0,0 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-export interface LoaderInlineProps extends HTMLAttributes<HTMLDivElement> {
-    'data-test'?: string | null | undefined;
-}
-/**
- * @name Loader Inline
- */
-declare class LoaderInline extends PureComponent<LoaderInlineProps> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    render(): React.JSX.Element;
-}
-export type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
-export default LoaderInline;

package/components/loader-inline/loader-inline.js

@@ -1,27 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import dataTests from '../global/data-tests';
-import styles from './loader-inline.css';
-/**
- * @name Loader Inline
- */
-class LoaderInline extends PureComponent {
-    static propTypes = {
-        className: PropTypes.string,
-        'data-test': PropTypes.string,
-        children: PropTypes.node
-    };
-    render() {
-        const { className, 'data-test': dataTest, children, ...restProps } = this.props;
-        const classes = classNames(styles.loader, className);
-        const loader = (<div {...restProps} data-test={dataTests('ring-loader-inline', dataTest)} className={classes}/>);
-        return children
-            ? (<>
-          {loader}
-          <span className={styles.children}>{children}</span>
-        </>)
-            : loader;
-    }
-}
-export default LoaderInline;

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

@@ -1,17 +0,0 @@
-import angular from 'angular';
-
-import styles from '../loader-inline/loader-inline.css';
-
-/**
- * @name Loader Inline Ng
- */
-
-
-const angularModule = angular.module('Ring.loader-inline', []);
-
-angularModule.
-  component('rgLoaderInline', {
-    template: `<div data-test="ring-loader-inline-ng" class="${styles.loader}"></div>`
-  });
-
-export default angularModule.name;

package/components/loader-inline-ng/loader-inline-ng.stories.js

@@ -1,28 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import LoaderInlineNg from './loader-inline-ng';
-
-export default {
-  title: 'Legacy Angular/Loader Inline Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Wraps markup for loader-inline component.'
-  }
-};
-
-export const simple = () => {
-  angular.module(APP_NAME, [LoaderInlineNg]);
-
-  return `
-      <div>
-        <span>some text on top</span>
-        <div>before <rg-loader-inline/> Some text after</div>
-        <div>some text under loader</div>
-      </div>
-    `;
-};
-
-simple.storyName = 'Loader Inline Ng';

package/components/loader-inline-ng/loader-inline-ng.test.js

@@ -1,28 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import styles from '../loader-inline/loader-inline.css';
-
-import LoaderInline from './loader-inline-ng';
-
-describe('LoaderInline', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(LoaderInline));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    $compile = _$compile_;
-    element = $compile('<rg-loader-inline></rg-loader-inline>')(scope)[0];
-    scope.$digest();
-  }));
-
-  it('should render loader markup', () => {
-    element.should.contain(`.${styles.loader}`);
-    element.should.contain('[data-test="ring-loader-inline-ng"]');
-  });
-
-});

package/components/loader-ng/loader-ng.js

@@ -1,37 +0,0 @@
-import angular from 'angular';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import LoaderCore from '../loader/loader__core';
-
-/**
- * @name Loader Ng
- */
-
-
-const angularModule = angular.module('Ring.loader', []);
-
-class RgLoaderComponent extends RingAngularComponent {
-
-  static bindings = {
-    message: '@'
-  };
-
-  constructor(...args) {
-    super(...args);
-    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);
-  }
-}
-RgLoaderComponent.$inject = ['$element'];
-
-angularModule.component('rgLoader', RgLoaderComponent);
-
-export default angularModule.name;

package/components/loader-ng/loader-ng.stories.js

@@ -1,27 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import LoaderNg from './loader-ng';
-
-export default {
-  title: 'Legacy Angular/Loader Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays the loader.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [LoaderNg]);
-
-  return `
-      <div>
-        <rg-loader/>
-      </div>
-    `;
-};
-
-basic.storyName = 'Loader Ng';

package/components/loader-ng/loader-ng.test.js

@@ -1,41 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import loaderStyles from '../loader/loader.css';
-
-import Loader from './loader-ng';
-
-describe('Loader', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(Loader));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    scope.message = 'foo';
-    $compile = _$compile_;
-    element = $compile('<rg-loader message="{{message}}"></rg-loader>')(scope)[0];
-    scope.$digest();
-  }));
-
-  it('should init', () => {
-    element.should.exist;
-  });
-
-  it('should render loader', () => {
-    element.should.contain(`.${loaderStyles.canvas}`);
-  });
-
-  it('should render text', () => {
-    element.querySelector(`.${loaderStyles.text}`).textContent.should.equal('foo');
-  });
-
-  it('should update text', () => {
-    scope.message = 'bar';
-    scope.$digest();
-    element.querySelector(`.${loaderStyles.text}`).textContent.should.equal('bar');
-  });
-});

package/components/loader-screen/loader-screen.css

@@ -1,29 +0,0 @@
-@import "../global/variables.css";
-
-.loaderScreen {
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-
-  text-align: center;
-  vertical-align: middle;
-
-  &::before {
-    display: inline-block;
-
-    height: 100%;
-
-    content: "";
-
-    vertical-align: middle;
-  }
-}
-
-.loader {
-  display: inline-block;
-}
-
-.loaderWithoutSpacing canvas {
-  margin: 0;
-}

package/components/loader-screen/loader-screen.d.ts

@@ -1,17 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { LoaderProps } from '../loader/loader';
-export interface LoaderScreenProps extends LoaderProps {
-    containerClassName?: string | null | undefined;
-}
-/**
- * @name Loader Screen
- */
-export default class LoaderScreen extends PureComponent<LoaderScreenProps> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        containerClassName: PropTypes.Requireable<string>;
-        message: PropTypes.Requireable<string>;
-    };
-    render(): React.JSX.Element;
-}

package/components/loader-screen/loader-screen.js

@@ -1,25 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import Loader from '../loader/loader';
-import styles from './loader-screen.css';
-/**
- * @name Loader Screen
- */
-export default class LoaderScreen extends PureComponent {
-    static propTypes = {
-        className: PropTypes.string,
-        containerClassName: PropTypes.string,
-        message: PropTypes.string
-    };
-    render() {
-        const { message, className, containerClassName, ...restProps } = this.props;
-        const containerClasses = classNames(containerClassName, styles.loaderScreen);
-        const loaderClasses = classNames(className, styles.loader, {
-            [styles.loaderWithoutSpacing]: !message
-        });
-        return (<div className={containerClasses}>
-        <Loader {...restProps} message={message} className={loaderClasses}/>
-      </div>);
-    }
-}

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

@@ -1,95 +0,0 @@
-import angular from 'angular';
-
-import loaderNg from '../loader-ng/loader-ng';
-import styles from '../loader-screen/loader-screen.css';
-
-/**
- * @name Loader Screen Ng
- */
-
-const angularModule = angular.module('Ring.loader-screen', [loaderNg]);
-
-angularModule.service('loaderScreen', function service($timeout, $rootScope) {
-  // 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 = (ttl = 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="${styles.loaderScreen}" ng-if="$root.isLoaderVisible()">
-  <rg-loader class="${styles.loader}"
-    message="{{$root.isInitialLoading() ? message : ''}}"></rg-loader>
-</div>
-    `
-  };
-});
-
-export default angularModule.name;