@khanacademy/wonder-blocks-progress-spinner - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

components/circular-spinner.js

@@ -32,37 +32,4 @@ // @flow
 
-const StyledSVG = addStyle("svg");
 const StyledPath = addStyle("path");
 
-const svgs = {
-    light: {},
-    dark: {},
-};
-
-const _generateSVG = (size, light) => {
-    const svgCache = svgs[light];
-
-    if (svgCache[size]) {
-        return svgCache[size];
-    }
-
-    const height = heights[size];
-    const path = paths[size];
-    const color = colors[light];
-
-    const svg = (
-        <StyledSVG
-            xmlns="http://www.w3.org/2000/svg"
-            width={height}
-            height={height}
-            viewBox={`0 0 ${height} ${height}`}
-            style={styles.loadingSpinner}
-        >
-            <StyledPath style={{fill: color}} fillRule="nonzero" d={path} />
-        </StyledSVG>
-    );
-
-    svgCache[size] = svg;
-    return svg;
-};
-
 type Props = {|
@@ -96,4 +63,22 @@ /**
         const {size, light, style} = this.props;
-        const svg = _generateSVG(size, light ? "light" : "dark");
 
+        const height = heights[size];
+        const path = paths[size];
+        const color = light ? colors.light : colors.dark;
+
+        const svg = (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={height}
+                height={height}
+                viewBox={`0 0 ${height} ${height}`}
+            >
+                <StyledPath
+                    style={[styles.loadingSpinner, {fill: color}]}
+                    fillRule="nonzero"
+                    d={path}
+                />
+            </svg>
+        );
+
         return <View style={[styles.spinnerContainer, style]}>{svg}</View>;
@@ -120,2 +105,3 @@ }
     loadingSpinner: {
+        transformOrigin: "50% 50%",
         animationName: rotateKeyFrames,
@@ -122,0 +108,0 @@ animationDuration: "1.1s",

dist/es/index.js

@@ -106,36 +106,4 @@ import { createElement, Component } from 'react';
 };
-var StyledSVG = addStyle("svg");
 var StyledPath = addStyle("path");
-var svgs = {
-  light: {},
-  dark: {}
-};
 
-var _generateSVG = function _generateSVG(size, light) {
-  var svgCache = svgs[light];
-
-  if (svgCache[size]) {
-    return svgCache[size];
-  }
-
-  var height = heights[size];
-  var path = paths[size];
-  var color = colors[light];
-  var svg = createElement(StyledSVG, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: height,
-    height: height,
-    viewBox: "0 0 ".concat(height, " ").concat(height),
-    style: styles.loadingSpinner
-  }, createElement(StyledPath, {
-    style: {
-      fill: color
-    },
-    fillRule: "nonzero",
-    d: path
-  }));
-  svgCache[size] = svg;
-  return svg;
-};
-
 /**
@@ -163,5 +131,17 @@ * A circular progress spinner. Used for indicating loading progress. Should
           style = _this$props.style;
-
-      var svg = _generateSVG(size, light ? "light" : "dark");
-
+      var height = heights[size];
+      var path = paths[size];
+      var color = light ? colors.light : colors.dark;
+      var svg = createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: height,
+        height: height,
+        viewBox: "0 0 ".concat(height, " ").concat(height)
+      }, createElement(StyledPath, {
+        style: [styles.loadingSpinner, {
+          fill: color
+        }],
+        fillRule: "nonzero",
+        d: path
+      }));
       return createElement(View, {
@@ -196,2 +176,3 @@ style: [styles.spinnerContainer, style]
   loadingSpinner: {
+    transformOrigin: "50% 50%",
     animationName: rotateKeyFrames,
@@ -198,0 +179,0 @@ animationDuration: "1.1s",

dist/index.js

@@ -98,3 +98,3 @@ module.exports =
 
-module.exports = require("@khanacademy/wonder-blocks-core");
+module.exports = require("@khanacademy/wonder-blocks-color");
 
@@ -105,3 +105,3 @@ /***/ }),
 
-module.exports = require("@khanacademy/wonder-blocks-color");
+module.exports = require("@khanacademy/wonder-blocks-core");
 
@@ -128,6 +128,6 @@ /***/ }),
 // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
-var wonder_blocks_core_ = __webpack_require__(1);
+var wonder_blocks_core_ = __webpack_require__(2);
 
 // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
-var wonder_blocks_color_ = __webpack_require__(2);
+var wonder_blocks_color_ = __webpack_require__(1);
 var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
@@ -176,36 +176,4 @@
 };
-var StyledSVG = Object(wonder_blocks_core_["addStyle"])("svg");
 var StyledPath = Object(wonder_blocks_core_["addStyle"])("path");
-var svgs = {
-  light: {},
-  dark: {}
-};
 
-var circular_spinner_generateSVG = function _generateSVG(size, light) {
-  var svgCache = svgs[light];
-
-  if (svgCache[size]) {
-    return svgCache[size];
-  }
-
-  var height = heights[size];
-  var path = paths[size];
-  var color = colors[light];
-  var svg = external_react_["createElement"](StyledSVG, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: height,
-    height: height,
-    viewBox: "0 0 ".concat(height, " ").concat(height),
-    style: styles.loadingSpinner
-  }, external_react_["createElement"](StyledPath, {
-    style: {
-      fill: color
-    },
-    fillRule: "nonzero",
-    d: path
-  }));
-  svgCache[size] = svg;
-  return svg;
-};
-
 /**
@@ -233,5 +201,17 @@ * A circular progress spinner. Used for indicating loading progress. Should
           style = _this$props.style;
-
-      var svg = circular_spinner_generateSVG(size, light ? "light" : "dark");
-
+      var height = heights[size];
+      var path = paths[size];
+      var color = light ? colors.light : colors.dark;
+      var svg = external_react_["createElement"]("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: height,
+        height: height,
+        viewBox: "0 0 ".concat(height, " ").concat(height)
+      }, external_react_["createElement"](StyledPath, {
+        style: [styles.loadingSpinner, {
+          fill: color
+        }],
+        fillRule: "nonzero",
+        d: path
+      }));
       return external_react_["createElement"](wonder_blocks_core_["View"], {
@@ -268,2 +248,3 @@ style: [styles.spinnerContainer, style]
   loadingSpinner: {
+    transformOrigin: "50% 50%",
     animationName: rotateKeyFrames,
@@ -270,0 +251,0 @@ animationDuration: "1.1s",

package.json

 {
   "name": "@khanacademy/wonder-blocks-progress-spinner",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "design": "v1",
@@ -18,5 +18,5 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-color": "^1.0.13",
-    "@khanacademy/wonder-blocks-core": "^1.2.6",
-    "@khanacademy/wonder-blocks-spacing": "^2.0.11"
+    "@khanacademy/wonder-blocks-color": "^1.0.14",
+    "@khanacademy/wonder-blocks-core": "^1.2.7",
+    "@khanacademy/wonder-blocks-spacing": "^2.0.12"
   },
@@ -23,0 +23,0 @@ "peerDependencies": {

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

Worsened metrics

Total package byte prevSize

55699

decreased by-1.42%

Lines of code

595

decreased by-6%

Dependency changes

• Updated@khanacademy/wonder-blocks-color@^1.0.14

• Updated@khanacademy/wonder-blocks-core@^1.2.7

• Updated@khanacademy/wonder-blocks-spacing@^2.0.12