@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/loader/loader__core.js

@@ -1,251 +1,219 @@
-import {getPixelRatio} from '../global/dom';
-
+import { getPixelRatio } from '../global/dom';
 import styles from './loader.css';
-
 const INITIAL_TICKS = 100;
-
 class Particle {
-  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();
-  }
+    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;
+    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)
+    static defaultProps = {
+        size: 64,
+        stop: false,
+        deterministic: false,
+        colors: [
+            { r: 215, g: 60, b: 234 },
+            { r: 145, g: 53, b: 224 },
+            { r: 88, g: 72, b: 224 },
+            { r: 37, g: 183, b: 255 },
+            { r: 89, g: 189, b: 0 },
+            { r: 251, g: 172, b: 2 },
+            { r: 227, g: 37, b: 129 } //#E32581
+        ]
     };
-  }
-
-  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) {
+    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;
-      }
-    }
-  }
-
-  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(styles.animate);
-  }
-
-  startAnimation() {
-    this.isRunning = true;
-    this.canvas.classList.add(styles.animate);
-    this.loop();
-  }
-
-  destroy() {
-    this.isRunning = false;
-  }
-
-  renderInNode(node) {
-    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 : '';
-
-    node.appendChild(this.canvas);
-    node.appendChild(this.textNode);
-
-    return node;
-  }
+        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,7 +1,18 @@
 @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 {
+  /* stylelint-disable-next-line color-no-hex */
+  --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0);
@@ -51,6 +62,9 @@
 
     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%);
   }
 }
 

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

@@ -0,0 +1,18 @@
+import { 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(): JSX.Element;
+}
+export declare type LoaderInlineAtrrs = JSX.LibraryManagedAttributes<typeof LoaderInline, LoaderInlineProps>;
+export default LoaderInline;

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

@@ -1,57 +1,27 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
-import Theme, {withTheme} from '../global/theme';
 import dataTests from '../global/data-tests';
-
 import styles from './loader-inline.css';
-import injectStyles from './inject-styles';
-
 /**
  * @name Loader Inline
  */
-
 class LoaderInline extends PureComponent {
-  static propTypes = {
-    theme: PropTypes.oneOf(Object.values(Theme)),
-    className: PropTypes.string,
-    'data-test': PropTypes.string,
-    children: PropTypes.node
-  };
-
-  componentDidMount() {
-    injectStyles();
-  }
-
-  static Theme = Theme;
-
-  render() {
-    const {className, theme, 'data-test': dataTest, children, ...restProps} = this.props;
-
-    const classes = classNames(
-      styles.loader,
-      className,
-      `${styles.loader}_${theme}`
-    );
-
-    const loader = (
-      <div
-        {...restProps}
-        data-test={dataTests('ring-loader-inline', dataTest)}
-        className={classes}
-      />
-    );
-
-    return children
-      ? (
-        <>
+    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;
-  }
+        </>)
+            : loader;
+    }
 }
-
-export default withTheme()(LoaderInline);
+export default LoaderInline;

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import LoaderInlineNg from '@jetbrains/ring-ui/components/loader-inline-ng/loader-inline-ng';
+import LoaderInlineNg from './loader-inline-ng';
 
 export default {
   title: 'Legacy Angular/Loader Inline Ng',

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

@@ -1,8 +1,6 @@
 import angular from 'angular';
 
 import styles from '../loader-inline/loader-inline.css';
-import injectStyles from '../loader-inline/inject-styles';
-import Theme from '../global/theme';
 
 /**
  * @name Loader Inline Ng
@@ -11,23 +9,9 @@ import Theme from '../global/theme';
 
 const angularModule = angular.module('Ring.loader-inline', []);
 
-class LoaderController {
-  $onInit() {
-    injectStyles();
-
-    this.theme = this.theme || Theme.LIGHT;
-  }
-
-  getThemeClass = () => `${styles.loader}_${this.theme}`;
-}
-
 angularModule.
   component('rgLoaderInline', {
-    bindings: {
-      theme: '@?'
-    },
-    template: `<div data-test="ring-loader-inline-ng" class="${styles.loader}" ng-class="$ctrl.getThemeClass()"></div>`,
-    controller: LoaderController
+    template: `<div data-test="ring-loader-inline-ng" class="${styles.loader}"></div>`
   });
 
 export default angularModule.name;

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

@@ -22,18 +22,7 @@ describe('LoaderInline', () => {
 
   it('should render loader markup', () => {
     element.should.contain(`.${styles.loader}`);
-    element.should.contain(`.${styles.loader}_light`);
     element.should.contain('[data-test="ring-loader-inline-ng"]');
   });
 
-  it('should render light loader theme by default', () => {
-    element.should.contain(`.${styles.loader}_light`);
-  });
-
-  it('should render dark loader theme if passed', () => {
-    element = $compile('<rg-loader-inline theme="dark"></rg-loader-inline>')(scope)[0];
-    scope.$digest();
-    element.should.contain(`.${styles.loader}_dark`);
-  });
-
 });

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import LoaderNg from '@jetbrains/ring-ui/components/loader-ng/loader-ng';
+import LoaderNg from './loader-ng';
 
 export default {
   title: 'Legacy Angular/Loader Ng',

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

@@ -0,0 +1,17 @@
+import { 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(): JSX.Element;
+}