Halogen Loaders are not working with React 16.0.0 #36
Description
Since the release of React 16.0.0, Both PropTypes and createClass have been moved into separate packages.
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.