halogen Halogen Loaders are not working with React 16.0.0

Halogen Loaders are not working with React 16.0.0

Open hannigand opened this issue 6 years ago • 7 comments

Since the release of React 16.0.0, Both PropTypes and createClass have been moved into separate packages.

prop-types
create-react-class

I get the following stack trace when using the PulseLoader:

I have modified PulseLoader.js with the proposed changes and my file now looks like this:

'use strict';

var React = require('react');
var assign = require('domkit/appendVendorPrefix');
var insertKeyframesRule = require('domkit/insertKeyframesRule');
var PropTypes = require('prop-types');
var createReactClass = require('create-react-class');

/**
 * @type {Object}
 */
var keyframes = {
  '0%': {
    transform: 'scale(1)',
    opacity: 1
  },
  '45%': {
    transform: 'scale(0.1)',
    opacity: 0.7
  },
  '80%': {
    transform: 'scale(1)',
    opacity: 1
  }
};

/**
 * @type {String}
 */
var animationName = insertKeyframesRule(keyframes);

var Loader = createReactClass({
  displayName: 'Loader',

  /**
     * @type {Object}
     */
  propTypes: {
    loading: PropTypes.bool,
    color: PropTypes.string,
    size: PropTypes.string,
    margin: PropTypes.string
  },

  /**
     * @return {Object}
     */
  getDefaultProps: function getDefaultProps () {
    return {
      loading: true,
      color: '#ffffff',
      size: '15px',
      margin: '2px'
    };
  },

  /**
     * @return {Object}
     */
  getBallStyle: function getBallStyle () {
    return {
      backgroundColor: this.props.color,
      width: this.props.size,
      height: this.props.size,
      margin: this.props.margin,
      borderRadius: '100%',
      verticalAlign: this.props.verticalAlign
    };
  },

  /**
     * @param  {Number} i
     * @return {Object}
     */
  getAnimationStyle: function getAnimationStyle (i) {
    var animation = [
      animationName,
      '0.75s',
      i * 0.12 + 's',
      'infinite',
      'cubic-bezier(.2,.68,.18,1.08)'
    ].join(' ');
    var animationFillMode = 'both';

    return {
      animation: animation,
      animationFillMode: animationFillMode
    };
  },

  /**
     * @param  {Number} i
     * @return {Object}
     */
  getStyle: function getStyle (i) {
    return assign(this.getBallStyle(i), this.getAnimationStyle(i), {
      display: 'inline-block'
    });
  },

  /**
     * @param  {Boolean} loading
     * @return {ReactComponent || null}
     */
  renderLoader: function renderLoader (loading) {
    if (loading) {
      return React.createElement(
        'div',
        { id: this.props.id, className: this.props.className },
        React.createElement('div', { style: this.getStyle(1) }),
        React.createElement('div', { style: this.getStyle(2) }),
        React.createElement('div', { style: this.getStyle(3) })
      );
    }

    return null;
  },

  render: function render () {
    return this.renderLoader(this.props.loading);
  }
});

module.exports = Loader;

With these changes, the loader does successfully appear on the page.