@react-md/progress - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0-alpha.0

CHANGELOG.md

@@ -6,38 +6,26 @@ # Change Log
 
-# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)
+# [2.3.0-alpha.0](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.3.0-alpha.0) (2020-09-01)
 
-**Note:** Version bump only for package @react-md/progress
+### Features
 
-# Change Log
+- [@react-md/progress](../progress): added a `small` state to the
+  `CircularProgress`
+  ([6884a3a](https://github.com/mlaursen/react-md/commit/6884a3ab762216313330dfb01f386c87a5cd5b88))
 
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)
 
+**Note:** Version bump only for package [@react-md/progress](../progress)
+
 ## [2.1.2](https://github.com/mlaursen/react-md/compare/v2.1.1...v2.1.2) (2020-08-01)
 
-**Note:** Version bump only for package @react-md/progress
+**Note:** Version bump only for package [@react-md/progress](../progress)
 
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
 ## [2.1.1](https://github.com/mlaursen/react-md/compare/v2.1.0...v2.1.1) (2020-07-21)
 
-**Note:** Version bump only for package @react-md/progress
+**Note:** Version bump only for package [@react-md/progress](../progress)
 
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
 # [2.1.0](https://github.com/mlaursen/react-md/compare/v2.0.4...v2.1.0) (2020-07-12)
 
-**Note:** Version bump only for package @react-md/progress
+**Note:** Version bump only for package [@react-md/progress](../progress)
 
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
 ## [2.0.2](https://github.com/mlaursen/react-md/compare/v2.0.1...v2.0.2) (2020-06-30)
@@ -49,5 +37,5 @@
   ([50c9021](https://github.com/mlaursen/react-md/commit/50c9021cedc0d642758b9fd541bb6c93d2fe1786))
-- Added sideEffects field to package.json
+- Added `sideEffects` field to `package.json`
   ([31820b9](https://github.com/mlaursen/react-md/commit/31820b9b43705e5849664500a17b6849eb6dc2a9))
-- sideEffects formatting
+- `sideEffects` formatting
   ([78a7b6b](https://github.com/mlaursen/react-md/commit/78a7b6b0e40c7daefb749835670705f21bd21720))
@@ -54,0 +42,0 @@

dist/scssVariables.d.ts

@@ -122,2 +122,3 @@ declare const _default: {
     "rmd-circular-progress-size": string;
+    "rmd-circular-progress-small-size": string;
     "rmd-circular-progress-stroke-width": number;
@@ -124,0 +125,0 @@ "rmd-circular-progress-dasharray": number;

dist/scssVariables.js

@@ -53,2 +53,3 @@ "use strict";
     "rmd-circular-progress-size": "3rem",
+    "rmd-circular-progress-small-size": "1.5rem",
     "rmd-circular-progress-stroke-width": 6,
@@ -55,0 +56,0 @@ "rmd-circular-progress-dasharray": 187,

es/CircularProgress.js

@@ -25,8 +25,10 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
-import { bem } from "@react-md/utils";
-import getProgress from "./getProgress";
+import { bem, getPercentage } from "@react-md/utils";
 var block = bem("rmd-circular-progress");
 var CircularProgress = forwardRef(function CircularProgress(_a, ref) {
-    var className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 30 : _d, _e = _a.center, center = _e === void 0 ? 33 : _e, _f = _a.viewBox, viewBox = _f === void 0 ? "0 0 66 66" : _f, _g = _a.dashoffset, dashoffset = _g === void 0 ? 187 : _g, _h = _a.animate, animate = _h === void 0 ? true : _h, _j = _a.centered, centered = _j === void 0 ? true : _j, _k = _a.maxRotation, maxRotation = _k === void 0 ? 360 * 1.75 : _k, props = __rest(_a, ["className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation"]);
-    var progress = getProgress(min, max, value);
+    var className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 30 : _d, _e = _a.center, center = _e === void 0 ? 33 : _e, _f = _a.viewBox, viewBox = _f === void 0 ? "0 0 66 66" : _f, _g = _a.dashoffset, dashoffset = _g === void 0 ? 187 : _g, _h = _a.animate, animate = _h === void 0 ? true : _h, _j = _a.centered, centered = _j === void 0 ? true : _j, _k = _a.maxRotation, maxRotation = _k === void 0 ? 360 * 1.75 : _k, _l = _a.small, small = _l === void 0 ? false : _l, props = __rest(_a, ["className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation", "small"]);
+    var progress;
+    if (typeof value === "number") {
+        progress = getPercentage(min, max, value);
+    }
     var svgStyle = useMemo(function () {
@@ -51,3 +53,3 @@ if (typeof progress !== "number") {
     var indeterminate = !determinate;
-    return (React.createElement("span", __assign({}, props, { ref: ref, role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, className: cn(block({ centered: centered }), className) }),
+    return (React.createElement("span", __assign({}, props, { ref: ref, role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, className: cn(block({ centered: centered, small: small }), className) }),
         React.createElement("svg", { style: svgStyle, className: cn(block("svg", {
@@ -83,2 +85,3 @@ animate: animate && determinate,
             dashoffset: PropTypes.number,
+            small: PropTypes.bool,
             viewBox: PropTypes.string,
@@ -85,0 +88,0 @@ };

es/LinearProgress.js

@@ -25,4 +25,3 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
-import { bem } from "@react-md/utils";
-import getProgress from "./getProgress";
+import { bem, getPercentage } from "@react-md/utils";
 var block = bem("rmd-linear-progress");
@@ -37,3 +36,6 @@ var LinearProgress = forwardRef(function LinearProgress(_a, ref) {
     }, [propStyle, vertical, verticalHeight]);
-    var progress = getProgress(min, max, value);
+    var progress;
+    if (typeof value === "number") {
+        progress = getPercentage(min, max, value);
+    }
     var barStyle = useMemo(function () {
@@ -40,0 +42,0 @@ var _a;

lib/CircularProgress.d.ts

@@ -60,4 +60,10 @@ import React, { CSSProperties, HTMLAttributes } from "react";
     centered?: boolean;
+    /**
+     * Boolean if the smaller size should be used instead.
+     *
+     * @since 2.3.0
+     */
+    small?: boolean;
 }
 declare const CircularProgress: React.ForwardRefExoticComponent<CircularProgressProps & React.RefAttributes<HTMLSpanElement>>;
 export default CircularProgress;

lib/CircularProgress.js

@@ -50,7 +50,9 @@ "use strict";
 var utils_1 = require("@react-md/utils");
-var getProgress_1 = __importDefault(require("./getProgress"));
 var block = utils_1.bem("rmd-circular-progress");
 var CircularProgress = react_1.forwardRef(function CircularProgress(_a, ref) {
-    var className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 30 : _d, _e = _a.center, center = _e === void 0 ? 33 : _e, _f = _a.viewBox, viewBox = _f === void 0 ? "0 0 66 66" : _f, _g = _a.dashoffset, dashoffset = _g === void 0 ? 187 : _g, _h = _a.animate, animate = _h === void 0 ? true : _h, _j = _a.centered, centered = _j === void 0 ? true : _j, _k = _a.maxRotation, maxRotation = _k === void 0 ? 360 * 1.75 : _k, props = __rest(_a, ["className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation"]);
-    var progress = getProgress_1.default(min, max, value);
+    var className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.radius, radius = _d === void 0 ? 30 : _d, _e = _a.center, center = _e === void 0 ? 33 : _e, _f = _a.viewBox, viewBox = _f === void 0 ? "0 0 66 66" : _f, _g = _a.dashoffset, dashoffset = _g === void 0 ? 187 : _g, _h = _a.animate, animate = _h === void 0 ? true : _h, _j = _a.centered, centered = _j === void 0 ? true : _j, _k = _a.maxRotation, maxRotation = _k === void 0 ? 360 * 1.75 : _k, _l = _a.small, small = _l === void 0 ? false : _l, props = __rest(_a, ["className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation", "small"]);
+    var progress;
+    if (typeof value === "number") {
+        progress = utils_1.getPercentage(min, max, value);
+    }
     var svgStyle = react_1.useMemo(function () {
@@ -75,3 +77,3 @@ if (typeof progress !== "number") {
     var indeterminate = !determinate;
-    return (react_1.default.createElement("span", __assign({}, props, { ref: ref, role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, className: classnames_1.default(block({ centered: centered }), className) }),
+    return (react_1.default.createElement("span", __assign({}, props, { ref: ref, role: "progressbar", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, className: classnames_1.default(block({ centered: centered, small: small }), className) }),
         react_1.default.createElement("svg", { style: svgStyle, className: classnames_1.default(block("svg", {
@@ -107,2 +109,3 @@ animate: animate && determinate,
             dashoffset: PropTypes.number,
+            small: PropTypes.bool,
             viewBox: PropTypes.string,
@@ -109,0 +112,0 @@ };

lib/LinearProgress.js

@@ -50,3 +50,2 @@ "use strict";
 var utils_1 = require("@react-md/utils");
-var getProgress_1 = __importDefault(require("./getProgress"));
 var block = utils_1.bem("rmd-linear-progress");
@@ -61,3 +60,6 @@ var LinearProgress = react_1.forwardRef(function LinearProgress(_a, ref) {
     }, [propStyle, vertical, verticalHeight]);
-    var progress = getProgress_1.default(min, max, value);
+    var progress;
+    if (typeof value === "number") {
+        progress = utils_1.getPercentage(min, max, value);
+    }
     var barStyle = react_1.useMemo(function () {
@@ -64,0 +66,0 @@ var _a;

package.json

 {
   "name": "@react-md/progress",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.0",
   "description": "Create horizontal, vertical, and circular progress indicators",
@@ -42,5 +42,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.1.2",
-    "@react-md/transition": "^2.1.2",
-    "@react-md/utils": "^2.1.0",
+    "@react-md/theme": "^2.3.0-alpha.0",
+    "@react-md/transition": "^2.3.0-alpha.0",
+    "@react-md/utils": "^2.3.0-alpha.0",
     "classnames": "^2.2.6"
@@ -61,3 +61,3 @@ },
   },
-  "gitHead": "0a4024848493b6ef1ed37c591ac68781360b8f45"
+  "gitHead": "1026b00201cb5ab60735372acd9b8abd26cc3c05"
 }

README.md

@@ -9,3 +9,3 @@ # @react-md/progress
 ```sh
-$ npm install --save @react-md/progress
+npm install --save @react-md/progress
 ```
@@ -17,5 +17,5 @@
 ```sh
-$ npm install --save @react-md/theme \
-    @react-md/transition \
-    @react-md/utils
+npm install --save @react-md/theme \
+  @react-md/transition \
+  @react-md/utils
 ```
@@ -22,0 +22,0 @@

src/scssVariables.ts

@@ -51,2 +51,3 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-circular-progress-size": "3rem",
+  "rmd-circular-progress-small-size": "1.5rem",
   "rmd-circular-progress-stroke-width": 6,
@@ -53,0 +54,0 @@ "rmd-circular-progress-dasharray": 187,

types/CircularProgress.d.ts

@@ -60,4 +60,10 @@ import React, { CSSProperties, HTMLAttributes } from "react";
     centered?: boolean;
+    /**
+     * Boolean if the smaller size should be used instead.
+     *
+     * @since 2.3.0
+     */
+    small?: boolean;
 }
 declare const CircularProgress: React.ForwardRefExoticComponent<CircularProgressProps & React.RefAttributes<HTMLSpanElement>>;
 export default CircularProgress;

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

147970

decreased by-2.16%

Number of package files

60

decreased by-11.76%

Lines of code

1584

decreased by-5.66%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@react-md/theme@^2.3.0-alpha.0

• Updated@react-md/transition@^2.3.0-alpha.0

• Updated@react-md/utils@^2.3.0-alpha.0