@cloudflare/component-loading - npm Package Compare versions

Comparing version 3.0.12 to 3.0.13

CHANGELOG.md

@@ -6,3 +6,11 @@ # Change Log
 
-      <a name="3.0.12"></a>
+    <a name="3.0.13"></a>
+## [3.0.13](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-loading@3.0.12...@cloudflare/component-loading@3.0.13) (2018-09-21)
+
+
+
+
+**Note:** Version bump only for package @cloudflare/component-loading
+
+    <a name="3.0.12"></a>
 ## [3.0.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-loading@3.0.11...@cloudflare/component-loading@3.0.12) (2018-09-10)
@@ -15,3 +23,3 @@
 
-      <a name="3.0.11"></a>
+  <a name="3.0.11"></a>
 ## [3.0.11](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-loading@3.0.10...@cloudflare/component-loading@3.0.11) (2018-08-22)
@@ -24,3 +32,3 @@
 
-    <a name="3.0.10"></a>
+<a name="3.0.10"></a>
 ## [3.0.10](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-loading@3.0.9...@cloudflare/component-loading@3.0.10) (2018-08-17)
@@ -27,0 +35,0 @@

es/Loading.js

@@ -0,1 +1,19 @@
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -7,99 +25,121 @@
 import { withTheme, createComponent } from '@cloudflare/style-container';
-const SquareCanvas = createComponent(({
-  side
-}) => ({
-  width: `${side}px`,
-  height: `${side}px`
-}), 'canvas', ['width', 'height']);
+var SquareCanvas = createComponent(function (_ref) {
+  var side = _ref.side;
+  return {
+    width: "".concat(side, "px"),
+    height: "".concat(side, "px")
+  };
+}, 'canvas', ['width', 'height']);
 
-class Loading extends React.Component {
-  constructor(...args) {
-    super(...args);
+var Loading =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(Loading, _React$Component);
 
-    _defineProperty(this, "state", {});
-  }
+  function Loading() {
+    var _getPrototypeOf2;
 
-  static getDerivedStateFromProps(nextProps) {
-    return {
-      height: Math.round(Loading.DEFAULT_HEIGHT * +nextProps.size.replace('x', ''))
-    };
+    var _this;
+
+    _classCallCheck(this, Loading);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Loading)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
+
+    return _this;
   }
 
-  componentDidMount() {
-    const {
-      theme
-    } = this.props;
-    const {
-      height: size
-    } = this.state;
-    const {
-      ctx
-    } = this;
+  _createClass(Loading, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var theme = this.props.theme;
+      var size = this.state.height;
+      var ctx = this.ctx;
 
-    if (!ctx) {
-      return; // canvas not available (f.e. in tests)
-    } // Keep it crisp on retina devices
+      if (!ctx) {
+        return; // canvas not available (f.e. in tests)
+      } // Keep it crisp on retina devices
 
 
-    const scaleFactor = window.devicePixelRatio || 1;
-    ctx.scale(scaleFactor, scaleFactor);
-    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)
+      var 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
+      ];
+      ctx.translate(radius, radius); // center at (0,0)
 
-    ctx.strokeStyle = theme.colors.gray[5];
-    ctx.lineWidth = arcThickness;
-    let arcLength = 0;
-    let fwd = true;
-    const self = this;
+      ctx.strokeStyle = theme.colors.gray[5];
+      ctx.lineWidth = arcThickness;
+      var arcLength = 0;
+      var fwd = true;
+      var self = this;
 
-    (function onFrame() {
-      ctx.clearRect(-radius, -radius, size, size);
-      ctx.rotate(angleStep);
-      const halfArcLength = Math.max(0, arcLength / 2);
-      ctx.beginPath();
-      ctx.arc(...arcProps, -halfArcLength, halfArcLength);
-      ctx.stroke();
+      (function onFrame() {
+        ctx.clearRect(-radius, -radius, size, size);
+        ctx.rotate(angleStep);
+        var halfArcLength = Math.max(0, arcLength / 2);
+        ctx.beginPath();
+        ctx.arc.apply(ctx, arcProps.concat([-halfArcLength, halfArcLength]));
+        ctx.stroke();
 
-      if (arcLength <= arcLengthRange[0]) {
-        fwd = true;
-      }
+        if (arcLength <= arcLengthRange[0]) {
+          fwd = true;
+        }
 
-      if (arcLength >= arcLengthRange[1]) {
-        fwd = false;
+        if (arcLength >= arcLengthRange[1]) {
+          fwd = false;
+        }
+
+        arcLength += (fwd ? 1 : -1) * angleStep;
+        self.rafId = raf(onFrame);
+      })();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.rafId) {
+        // stop frame ticker
+        raf.cancel(this.rafId);
       }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
 
-      arcLength += (fwd ? 1 : -1) * angleStep;
-      self.rafId = raf(onFrame);
-    })();
-  }
-
-  componentWillUnmount() {
-    if (this.rafId) {
-      // stop frame ticker
-      raf.cancel(this.rafId);
+      var height = this.state.height;
+      var scaledHeight = height * (window.devicePixelRatio || 1);
+      return React.createElement("div", null, React.createElement(SquareCanvas, {
+        innerRef: function innerRef(el) {
+          return el && typeof el.getContext === 'function' && (_this2.ctx = el.getContext('2d'));
+        },
+        side: height,
+        width: scaledHeight,
+        height: scaledHeight
+      }));
     }
-  }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps) {
+      return {
+        height: Math.round(Loading.DEFAULT_HEIGHT * +nextProps.size.replace('x', ''))
+      };
+    }
+  }]);
 
-  render() {
-    const {
-      height
-    } = this.state;
-    const scaledHeight = height * (window.devicePixelRatio || 1);
-    return React.createElement("div", null, React.createElement(SquareCanvas, {
-      innerRef: el => el && typeof el.getContext === 'function' && (this.ctx = el.getContext('2d')),
-      side: height,
-      width: scaledHeight,
-      height: scaledHeight
-    }));
-  }
+  return Loading;
+}(React.Component);
 
-}
-
 _defineProperty(Loading, "DEFAULT_HEIGHT", 15);
@@ -106,0 +146,0 @@

lib/index.js

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

lib/Loading.js

@@ -18,101 +18,141 @@ "use strict";
 
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const SquareCanvas = (0, _styleContainer.createComponent)(({
-  side
-}) => ({
-  width: `${side}px`,
-  height: `${side}px`
-}), 'canvas', ['width', 'height']);
+var SquareCanvas = (0, _styleContainer.createComponent)(function (_ref) {
+  var side = _ref.side;
+  return {
+    width: "".concat(side, "px"),
+    height: "".concat(side, "px")
+  };
+}, 'canvas', ['width', 'height']);
 
-class Loading extends _react.default.Component {
-  constructor(...args) {
-    super(...args);
+var Loading =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(Loading, _React$Component);
 
-    _defineProperty(this, "state", {});
-  }
+  function Loading() {
+    var _getPrototypeOf2;
 
-  static getDerivedStateFromProps(nextProps) {
-    return {
-      height: Math.round(Loading.DEFAULT_HEIGHT * +nextProps.size.replace('x', ''))
-    };
+    var _this;
+
+    _classCallCheck(this, Loading);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Loading)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
+
+    return _this;
   }
 
-  componentDidMount() {
-    const {
-      theme
-    } = this.props;
-    const {
-      height: size
-    } = this.state;
-    const {
-      ctx
-    } = this;
+  _createClass(Loading, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var theme = this.props.theme;
+      var size = this.state.height;
+      var ctx = this.ctx;
 
-    if (!ctx) {
-      return; // canvas not available (f.e. in tests)
-    } // Keep it crisp on retina devices
+      if (!ctx) {
+        return; // canvas not available (f.e. in tests)
+      } // Keep it crisp on retina devices
 
 
-    const scaleFactor = window.devicePixelRatio || 1;
-    ctx.scale(scaleFactor, scaleFactor);
-    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)
+      var 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
+      ];
+      ctx.translate(radius, radius); // center at (0,0)
 
-    ctx.strokeStyle = theme.colors.gray[5];
-    ctx.lineWidth = arcThickness;
-    let arcLength = 0;
-    let fwd = true;
-    const self = this;
+      ctx.strokeStyle = theme.colors.gray[5];
+      ctx.lineWidth = arcThickness;
+      var arcLength = 0;
+      var fwd = true;
+      var self = this;
 
-    (function onFrame() {
-      ctx.clearRect(-radius, -radius, size, size);
-      ctx.rotate(angleStep);
-      const halfArcLength = Math.max(0, arcLength / 2);
-      ctx.beginPath();
-      ctx.arc(...arcProps, -halfArcLength, halfArcLength);
-      ctx.stroke();
+      (function onFrame() {
+        ctx.clearRect(-radius, -radius, size, size);
+        ctx.rotate(angleStep);
+        var halfArcLength = Math.max(0, arcLength / 2);
+        ctx.beginPath();
+        ctx.arc.apply(ctx, arcProps.concat([-halfArcLength, halfArcLength]));
+        ctx.stroke();
 
-      if (arcLength <= arcLengthRange[0]) {
-        fwd = true;
-      }
+        if (arcLength <= arcLengthRange[0]) {
+          fwd = true;
+        }
 
-      if (arcLength >= arcLengthRange[1]) {
-        fwd = false;
+        if (arcLength >= arcLengthRange[1]) {
+          fwd = false;
+        }
+
+        arcLength += (fwd ? 1 : -1) * angleStep;
+        self.rafId = (0, _raf.default)(onFrame);
+      })();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.rafId) {
+        // stop frame ticker
+        _raf.default.cancel(this.rafId);
       }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
 
-      arcLength += (fwd ? 1 : -1) * angleStep;
-      self.rafId = (0, _raf.default)(onFrame);
-    })();
-  }
-
-  componentWillUnmount() {
-    if (this.rafId) {
-      // stop frame ticker
-      _raf.default.cancel(this.rafId);
+      var height = this.state.height;
+      var scaledHeight = height * (window.devicePixelRatio || 1);
+      return _react.default.createElement("div", null, _react.default.createElement(SquareCanvas, {
+        innerRef: function innerRef(el) {
+          return el && typeof el.getContext === 'function' && (_this2.ctx = el.getContext('2d'));
+        },
+        side: height,
+        width: scaledHeight,
+        height: scaledHeight
+      }));
     }
-  }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps) {
+      return {
+        height: Math.round(Loading.DEFAULT_HEIGHT * +nextProps.size.replace('x', ''))
+      };
+    }
+  }]);
 
-  render() {
-    const {
-      height
-    } = this.state;
-    const scaledHeight = height * (window.devicePixelRatio || 1);
-    return _react.default.createElement("div", null, _react.default.createElement(SquareCanvas, {
-      innerRef: el => el && typeof el.getContext === 'function' && (this.ctx = el.getContext('2d')),
-      side: height,
-      width: scaledHeight,
-      height: scaledHeight
-    }));
-  }
+  return Loading;
+}(_react.default.Component);
 
-}
-
 _defineProperty(Loading, "DEFAULT_HEIGHT", 15);
@@ -119,0 +159,0 @@

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38779

increased by20.14%

Lines of code

378

increased by18.87%

Dependency changes

• Updated@cloudflare/style-container@^4.0.13