@cloudflare/component-loading - npm Package Compare versions

Comparing version 1.0.11 to 1.0.13

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+<a name="1.0.13"></a>
+## [1.0.13](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-loading@1.0.11...@cloudflare/component-loading@1.0.13) (2018-06-07)
+
+
+
+
+**Note:** Version bump only for package @cloudflare/component-loading
+
 <a name="1.0.11"></a>
@@ -8,0 +16,0 @@ ## [1.0.11](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-loading@1.0.9...@cloudflare/component-loading@1.0.11) (2018-06-07)

es/index.js

@@ -1,14 +0,1 @@
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Loading = require('./Loading');
-
-Object.defineProperty(exports, 'Loading', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Loading).default;
-  }
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as Loading } from './Loading';

es/Loading.js

@@ -1,23 +0,3 @@
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _raf = require('raf');
-
-var _raf2 = _interopRequireDefault(_raf);
-
-var _styleContainer = require('@cloudflare/style-container');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -29,3 +9,9 @@
 
-var SquareCanvas = (0, _styleContainer.createComponent)(function (_ref) {
+import React from 'react';
+import PropTypes from 'prop-types';
+import raf from 'raf';
+
+import { withTheme, createComponent } from '@cloudflare/style-container';
+
+var SquareCanvas = createComponent(function (_ref) {
   var side = _ref.side;
@@ -112,3 +98,3 @@ return {
 
-        self.rafId = (0, _raf2.default)(onFrame);
+        self.rafId = raf(onFrame);
       })();
@@ -121,3 +107,3 @@ }
         // stop frame ticker
-        _raf2.default.cancel(this.rafId);
+        raf.cancel(this.rafId);
       }
@@ -134,6 +120,6 @@ }
 
-      return _react2.default.createElement(
+      return React.createElement(
         'div',
         null,
-        _react2.default.createElement(SquareCanvas, {
+        React.createElement(SquareCanvas, {
           innerRef: function innerRef(el) {
@@ -158,3 +144,3 @@ return el && typeof el.getContext === 'function' && (_this2.ctx = el.getContext('2d'));
   return Loading;
-}(_react2.default.Component);
+}(React.Component);
 
@@ -167,4 +153,4 @@ Loading.DEFAULT_HEIGHT = 15;
 Loading.propTypes = {
-  theme: _propTypes2.default.object.isRequired,
-  size: _propTypes2.default.oneOf(['1x', '1.5x', '2x', '2.5x', '3x', '3.5x', '4x'])
+  theme: PropTypes.object.isRequired,
+  size: PropTypes.oneOf(['1x', '1.5x', '2x', '2.5x', '3x', '3.5x', '4x'])
 };
@@ -174,2 +160,4 @@ Loading.defaultProps = {
 };
-exports.default = (0, _styleContainer.withTheme)(Loading);
+
+
+export default withTheme(Loading);

lib/index.js

@@ -11,3 +11,3 @@ 'use strict';
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _interopRequireDefault(_Loading).default;
@@ -14,0 +14,0 @@ }

lib/Loading.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 var _react = require('react');
@@ -26,31 +24,12 @@
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+const SquareCanvas = (0, _styleContainer.createComponent)(({ side }) => ({
+  width: `${side}px`,
+  height: `${side}px`
+}), 'canvas', ['width', 'height']);
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+class Loading extends _react2.default.Component {
+  constructor(...args) {
+    var _temp;
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var SquareCanvas = (0, _styleContainer.createComponent)(function (_ref) {
-  var side = _ref.side;
-  return {
-    width: side + 'px',
-    height: side + 'px'
-  };
-}, 'canvas', ['width', 'height']);
-
-var Loading = function (_React$Component) {
-  _inherits(Loading, _React$Component);
-
-  function Loading() {
-    var _ref2;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, Loading);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Loading.__proto__ || Object.getPrototypeOf(Loading)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {}, _temp), _possibleConstructorReturn(_this, _ret);
+    return _temp = super(...args), this.state = {}, _temp;
   } // px
@@ -62,100 +41,84 @@ // relative to diameter
 
-  _createClass(Loading, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var theme = this.props.theme;
-      var size = this.state.height;
-      var ctx = this.ctx;
+  static getDerivedStateFromProps(nextProps) {
+    return {
+      height: Math.round(Loading.DEFAULT_HEIGHT * +nextProps.size.replace('x', ''))
+    };
+  }
 
+  componentDidMount() {
+    const { theme } = this.props;
+    const { height: size } = this.state;
+    const { ctx } = this;
 
-      if (!ctx) {
-        return; // canvas not available (f.e. in tests)
-      }
+    if (!ctx) {
+      return; // canvas not available (f.e. in tests)
+    }
 
-      // Keep it crisp on retina devices
-      var scaleFactor = window.devicePixelRatio || 1;
-      ctx.scale(scaleFactor, scaleFactor);
+    // Keep it crisp on retina devices
+    const scaleFactor = window.devicePixelRatio || 1;
+    ctx.scale(scaleFactor, scaleFactor);
 
-      var radius = size / 2;
-      var arcThickness = Math.floor(size * Loading.ARC_THICKNESS);
-      var angleStep = Loading.ANGLE_STEP;
-      var arcLengthRange = [Loading.MIN_ARC_LENGTH, Loading.MAX_ARC_LENGTH].map(function (p) {
-        return p * 2 * Math.PI;
-      });
-      var arcProps = [0, // center X
-      0, // center Y
-      radius - arcThickness / 2 // radius
-      ];
+    const radius = size / 2;
+    const arcThickness = Math.floor(size * Loading.ARC_THICKNESS);
+    const angleStep = Loading.ANGLE_STEP;
+    const arcLengthRange = [Loading.MIN_ARC_LENGTH, Loading.MAX_ARC_LENGTH].map(p => p * 2 * Math.PI);
+    const arcProps = [0, // center X
+    0, // center Y
+    radius - arcThickness / 2 // radius
+    ];
 
-      ctx.translate(radius, radius); // center at (0,0)
-      ctx.strokeStyle = theme.colors.gray[5];
-      ctx.lineWidth = arcThickness;
+    ctx.translate(radius, radius); // center at (0,0)
+    ctx.strokeStyle = theme.colors.gray[5];
+    ctx.lineWidth = arcThickness;
 
-      var arcLength = 0;
-      var fwd = true;
+    let arcLength = 0;
+    let fwd = true;
 
-      var self = this;
-      (function onFrame() {
-        ctx.clearRect(-radius, -radius, size, size);
-        ctx.rotate(angleStep);
+    const self = this;
+    (function onFrame() {
+      ctx.clearRect(-radius, -radius, size, size);
+      ctx.rotate(angleStep);
 
-        var halfArcLength = Math.max(0, arcLength / 2);
+      const halfArcLength = Math.max(0, arcLength / 2);
 
-        ctx.beginPath();
-        ctx.arc.apply(ctx, arcProps.concat([-halfArcLength, halfArcLength]));
-        ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(...arcProps, -halfArcLength, halfArcLength);
+      ctx.stroke();
 
-        if (arcLength <= arcLengthRange[0]) {
-          fwd = true;
-        }
-        if (arcLength >= arcLengthRange[1]) {
-          fwd = false;
-        }
-        arcLength += (fwd ? 1 : -1) * angleStep;
-
-        self.rafId = (0, _raf2.default)(onFrame);
-      })();
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.rafId) {
-        // stop frame ticker
-        _raf2.default.cancel(this.rafId);
+      if (arcLength <= arcLengthRange[0]) {
+        fwd = true;
       }
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
+      if (arcLength >= arcLengthRange[1]) {
+        fwd = false;
+      }
+      arcLength += (fwd ? 1 : -1) * angleStep;
 
-      var height = this.state.height;
+      self.rafId = (0, _raf2.default)(onFrame);
+    })();
+  }
 
-      var scaledHeight = height * (window.devicePixelRatio || 1);
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(SquareCanvas, {
-          innerRef: function innerRef(el) {
-            return el && typeof el.getContext === 'function' && (_this2.ctx = el.getContext('2d'));
-          },
-          side: height,
-          width: scaledHeight,
-          height: scaledHeight
-        })
-      );
+  componentWillUnmount() {
+    if (this.rafId) {
+      // stop frame ticker
+      _raf2.default.cancel(this.rafId);
     }
-  }], [{
-    key: 'getDerivedStateFromProps',
-    value: function getDerivedStateFromProps(nextProps) {
-      return {
-        height: Math.round(Loading.DEFAULT_HEIGHT * +nextProps.size.replace('x', ''))
-      };
-    }
-  }]);
+  }
 
-  return Loading;
-}(_react2.default.Component);
+  render() {
+    const { height } = this.state;
+    const scaledHeight = height * (window.devicePixelRatio || 1);
 
+    return _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(SquareCanvas, {
+        innerRef: el => el && typeof el.getContext === 'function' && (this.ctx = el.getContext('2d')),
+        side: height,
+        width: scaledHeight,
+        height: scaledHeight
+      })
+    );
+  }
+}
+
 Loading.DEFAULT_HEIGHT = 15;
@@ -162,0 +125,0 @@ Loading.ARC_THICKNESS = 0.151;

package.json

 {
   "name": "@cloudflare/component-loading",
   "description": "Cloudflare Loading Component",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "lib/index.js",
@@ -15,3 +15,3 @@ "module": "es/index.js",
   "dependencies": {
-    "@cloudflare/style-container": "^1.0.8",
+    "@cloudflare/style-container": "^1.0.10",
     "prop-types": "^15.6.0",
@@ -18,0 +18,0 @@ "raf": "^3.3.2"

No alert changes

Worsened metrics

Total package byte prevSize

28109

decreased by-9.42%

Lines of code

345

decreased by-11.99%

Dependency changes

• Updated@cloudflare/style-container@^1.0.10