@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/loader/loader.js

@@ -1,64 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-
-import dataTests from '../global/data-tests';
-
-import LoaderCore from './loader__core';
-
-/**
- * @name Loader
- */
-/**
- * Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.
- */
-export default class Loader extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    size: PropTypes.number,
-    colors: PropTypes.array,
-    message: PropTypes.string,
-    'data-test': PropTypes.string,
-    stop: PropTypes.bool,
-    deterministic: PropTypes.bool
-  };
-
-  componentDidUpdate(prevProps) {
-    if (this.loader) {
-      if (!prevProps.stop && this.props.stop) {
-        this.loader.stopAnimation();
-      } else if (prevProps.stop && !this.props.stop) {
-        this.loader.startAnimation();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    this.loader.destroy();
-  }
-
-  initLoader = el => {
-    if (el) {
-      this.loader = new LoaderCore(el, this.props);
-    }
-  };
-
-  render() {
-    const {
-      message,
-      size,
-      colors,
-      'data-test': dataTest,
-      stop,
-      deterministic,
-      ...restProps
-    } = this.props;
-
-    return (
-      <div
-        data-test={dataTests('ring-loader', dataTest)}
-        {...restProps}
-        ref={this.initLoader}
-      />
-    );
-  }
-}

package/components/loader/loader__core.js

@@ -1,251 +0,0 @@
-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();
-  }
-}
-
-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)
-    };
-  }
-
-  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(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;
-  }
-}

package/components/loader/loader__core.test.js

@@ -1,232 +0,0 @@
-/* eslint-disable no-magic-numbers */
-
-import LoaderCore from './loader__core';
-
-describe('Loader', () => {
-  function noop() {}
-
-  let createLoader;
-  let loaderContainer;
-  let loader;
-
-  beforeEach(() => {
-    sandbox.stub(LoaderCore.prototype, 'loop').callsFake(() => {});
-
-    createLoader = props => {
-      loaderContainer = document.createElement('div');
-      loader = new LoaderCore(loaderContainer, props);
-    };
-
-    createLoader({});
-  });
-
-  afterEach(() => loader.destroy());
-
-  it('Should calculate gradient', () => {
-    const middleColor = LoaderCore.calculateGradient(
-      {r: 0, g: 0, b: 0},
-      {r: 255, g: 255, b: 255},
-      0.5
-    );
-    middleColor.should.deep.equal({r: 128, g: 128, b: 128});
-  });
-
-  it('Should do some initial steps to prepare tail for first render', () => {
-    loader.particles.length.should.be.at.least(90);
-  });
-
-  it('Should set canvas size from passed size', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(1);
-    createLoader({size: 42});
-
-    loader.canvas.height.should.equal(42);
-    loader.canvas.width.should.equal(42);
-  });
-
-  it('Should double canvas size on HDPI devices', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-
-    loader.canvas.height.should.equal(84);
-    loader.canvas.width.should.equal(84);
-  });
-
-  it('Should fixate canvas CSS size with style to avoid scaling on HDPI devices', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-
-    loader.canvas.style.height.should.equal('42px');
-    loader.canvas.style.width.should.equal('42px');
-  });
-
-  it('Should scale canvas on HDPI devices to make visible image size the same as on normal screens', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(2);
-    createLoader({size: 42});
-    sandbox.spy(loader.ctx, 'scale');
-
-    loader.setCanvasSize();
-
-    loader.ctx.scale.should.have.been.calledWith(2, 2);
-  });
-
-  it('Should scale canvas on zoomed out devices to avoid image cropping', () => {
-    sandbox.stub(LoaderCore, 'getPixelRatio').returns(0.5);
-    createLoader({size: 42});
-    sandbox.spy(loader.ctx, 'scale');
-
-    loader.setCanvasSize();
-
-    loader.ctx.scale.should.have.been.calledWith(0.5, 0.5);
-  });
-
-  it('Should start loop on constructing', () => {
-    loader.isRunning.should.be.true;
-  });
-
-  it('Should stop loop on destroy', () => {
-    loader.destroy();
-    loader.isRunning.should.be.false;
-  });
-
-  it('Should revert direction on reaching top limit', () => {
-    sandbox.stub(Math, 'random').returns(loader.baseSpeed / 2);
-
-    const oldSpeed = loader.baseSpeed;
-    const newSpeed = loader.handleLimits(95, 8, oldSpeed, 100);
-    newSpeed.should.equal(-loader.baseSpeed);
-  });
-
-  it('Should revert direction on reaching zero limit', () => {
-    sandbox.stub(Math, 'random').returns(loader.baseSpeed / 2);
-
-    const oldSpeed = -loader.baseSpeed;
-    const newSpeed = loader.handleLimits(0, 8, oldSpeed, 100);
-    newSpeed.should.equal(loader.baseSpeed);
-  });
-
-  it('Should update radius according to radius change speed', () => {
-    loader.radius = 4;
-    loader.radiusSpeed = 2;
-
-    loader.calculateNextRadius();
-
-    loader.radius.should.equal(6);
-  });
-
-  it('Should mirror radius change speed on reaching top limit', () => {
-    loader.radius = 4;
-    loader.maxRadius = 5;
-    loader.radiusSpeed = 2;
-
-    loader.calculateNextRadius();
-
-    loader.radiusSpeed.should.equal(-2);
-  });
-
-  it('Should mirror radius change speed on reaching low limit', () => {
-    loader.radius = 4;
-    loader.minRadius = 3;
-    loader.radiusSpeed = -2;
-
-    loader.calculateNextRadius();
-
-    loader.radiusSpeed.should.equal(2);
-  });
-
-  it('Should call next color calculation', () => {
-    sandbox.spy(LoaderCore, 'calculateGradient');
-    loader.colorIndex = 1;
-
-    loader.getNextColor();
-    LoaderCore.calculateGradient.should.have.been.calledWith(
-      loader.props.colors[1],
-      loader.props.colors[2],
-      sandbox.match(Number)
-    );
-  });
-
-  it('Should update tick', () => {
-    loader.tick = 1;
-    loader.nextTick();
-
-    loader.tick.should.equal(2);
-  });
-
-  it('Should reset tick and update color after reaching limit', () => {
-    loader.tick = loader.colorChangeTick;
-    loader.colorIndex = 1;
-    loader.nextTick();
-
-    loader.tick.should.equal(0);
-    loader.colorIndex.should.equal(2);
-  });
-
-  it('Should reset colorIndex to 0 if end is reached', () => {
-    loader.tick = loader.colorChangeTick;
-    loader.colorIndex = loader.props.colors.length - 1;
-    loader.nextTick();
-
-    loader.colorIndex.should.equal(0);
-  });
-
-  it('Should update tick on step', () => {
-    sandbox.spy(loader, 'nextTick');
-    loader.step();
-    loader.nextTick.should.have.been.called;
-  });
-
-  it('Should calculate new coordinates on step', () => {
-    sandbox.spy(loader, 'calculateNextCoordinates');
-    loader.step();
-    loader.calculateNextCoordinates.should.have.been.called;
-  });
-
-  it('Should calculate new radius on step', () => {
-    sandbox.spy(loader, 'calculateNextRadius');
-    loader.step();
-    loader.calculateNextRadius.should.have.been.called;
-  });
-
-  it('Should call step for each particle to allow it to update its live points', () => {
-    const stepSpy = sandbox.spy();
-    loader.particles = [{step: stepSpy, draw: noop, isAlive: () => true}];
-
-    loader.step();
-    stepSpy.should.have.been.called;
-  });
-
-  it('Should add particle on step', () => {
-    loader.particles = [];
-    loader.step();
-
-    loader.particles.length.should.equal(1);
-  });
-
-  it('Should remove dead particles', () => {
-    loader.particles = [
-      {isAlive: () => true, step: noop, draw: noop},
-      {isAlive: () => false, step: noop, draw: noop},
-      {isAlive: () => true, step: noop, draw: noop}
-    ];
-
-    loader.removeDeadParticles();
-
-    loader.particles.length.should.equal(2);
-  });
-
-  it('Should clear canvas before rendering new frame', () => {
-    sandbox.spy(loader.ctx, 'clearRect');
-
-    loader.draw();
-
-    loader.ctx.clearRect.should.have.been.called;
-  });
-
-  it('Should call draw for each particle', () => {
-    const drawSpy = sandbox.spy();
-    loader.particles = [{draw: drawSpy, isAlive: () => true, step: noop}];
-
-    loader.draw();
-    drawSpy.should.have.been.called;
-  });
-});

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

@@ -1,28 +0,0 @@
-import {conicGradientWithMask} from '../global/conic-gradient';
-import {injectRuleSet} from '../global/inject-styles';
-import memoize from '../global/memoize';
-import radialGradientMask from '../global/radial-gradient-mask';
-import Theme from '../global/theme';
-
-import styles from './loader-inline.css';
-
-const IMAGE_SIZE = 32;
-
-export default memoize(() => {
-  const mask = radialGradientMask(styles.unit, {
-    /* eslint-disable no-magic-numbers */
-    transparent: `${23 / 32 * 100}%`,
-    white: `${25 / 32 * 100}%`
-    /* eslint-enable */
-  });
-
-  injectRuleSet(
-    `.${styles.loader}_${[Theme.LIGHT]}::after, .ring-loader-inline::after`,
-    conicGradientWithMask(mask, '#ff00eb,#bd3bff,#008eff, #58ba00,#f48700,#ff00eb', IMAGE_SIZE)
-  );
-
-  injectRuleSet(
-    `.${styles.loader}_${[Theme.DARK]}::after, .ring-loader-inline_dark::after`,
-    conicGradientWithMask(mask, '#ff2eef,#d178ff,#289fff,#88d444,#ffe000,#ff2eef', IMAGE_SIZE)
-  );
-});

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

@@ -1,106 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
-import injectStyles from '@jetbrains/ring-ui/components/loader-inline/inject-styles';
-
-export default {
-  title: 'Components/Inline Loader',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes:
-      'Displays a small animated loader, shown inline with text. Use case: contextual loading animation.'
-  }
-};
-
-export const basic = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-basic.storyName = 'basic';
-
-export const withChildren = () => {
-  class Example extends React.Component {
-    render() {
-      return <LoaderInline>Loading...</LoaderInline>;
-    }
-  }
-
-  return <Example/>;
-};
-
-withChildren.storyName = 'with children';
-
-export const onBlackBackground = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div style={{backgroundColor: 'black', color: '#ccc'}}>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-onBlackBackground.storyName = 'on black background';
-
-export const onCustomBackground = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div style={{backgroundColor: '#E5F4FF'}}>
-          <span>some text on top</span>
-          <div>
-            before <LoaderInline/> Some text after
-          </div>
-          <div>some text under loader</div>
-        </div>
-      );
-    }
-  }
-
-  return <Example/>;
-};
-
-onCustomBackground.storyName = 'on custom background';
-
-export const withoutReact = () => {
-  class Example extends React.Component {
-    render() {
-      return (
-        <div>
-          <div className="ring-loader-inline"/>
-        </div>
-      );
-    }
-  }
-
-  injectStyles();
-
-  return <Example/>;
-};
-
-withoutReact.storyName = 'without React';