@react-md/progress - npm Package Compare versions

Comparing version 2.0.0-alpha.5 to 2.0.0-alpha.6

es/CircularProgress.js

@@ -17,4 +17,6 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -24,7 +26,7 @@ };
 import cn from "classnames";
-import { bem } from "@react-md/theme";
+import { bem } from "@react-md/utils";
 import getProgress from "./getProgress";
 var block = bem("rmd-circular-progress");
 var CircularProgress = function (providedProps) {
-    var _a = providedProps, id = _a.id, className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, forwardedRef = _a.forwardedRef, min = _a.min, max = _a.max, radius = _a.radius, center = _a.center, viewBox = _a.viewBox, dashoffset = _a.dashoffset, animate = _a.animate, centered = _a.centered, maxRotation = _a.maxRotation, props = __rest(_a, ["id", "className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "forwardedRef", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation"]);
+    var _a = providedProps, className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, forwardedRef = _a.forwardedRef, min = _a.min, max = _a.max, radius = _a.radius, center = _a.center, viewBox = _a.viewBox, dashoffset = _a.dashoffset, animate = _a.animate, centered = _a.centered, maxRotation = _a.maxRotation, props = __rest(_a, ["className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "forwardedRef", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation"]);
     var progress = getProgress(min, max, value);
@@ -47,3 +49,3 @@ var svgStyle = useMemo(function () {
         return __assign({}, propCircleStyle, { strokeDashoffset: dashoffset - dashoffset * progress });
-    }, [progress, propCircleStyle]);
+    }, [progress, propCircleStyle, dashoffset]);
     var determinate = typeof progress === "number";
@@ -95,2 +97,3 @@ var indeterminate = !determinate;
             center: PropTypes.number,
+            centered: PropTypes.bool,
             maxRotation: PropTypes.number,
@@ -97,0 +100,0 @@ dashoffset: PropTypes.number,

es/getProgress.js

@@ -17,3 +17,3 @@ /**
     }
-    else if (value > max || value < min) {
+    if (value > max || value < min) {
         throw new RangeError("A progress value must be between the min and max values");
@@ -20,0 +20,0 @@ }

es/LinearProgress.js

@@ -17,4 +17,6 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -24,3 +26,3 @@ };
 import cn from "classnames";
-import { bem } from "@react-md/theme";
+import { bem } from "@react-md/utils";
 import getProgress from "./getProgress";
@@ -44,3 +46,3 @@ var block = bem("rmd-linear-progress");
         return __assign({}, propBarStyle, (_a = {}, _a[key] = progress * 100 + "%", _a));
-    }, [progress, propBarStyle, min, max, vertical]);
+    }, [progress, propBarStyle, vertical]);
     var determinate = typeof progress === "number";
@@ -47,0 +49,0 @@ var indeterminate = !determinate;

lib/CircularProgress.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -36,7 +38,7 @@ };
 var classnames_1 = __importDefault(require("classnames"));
-var theme_1 = require("@react-md/theme");
+var utils_1 = require("@react-md/utils");
 var getProgress_1 = __importDefault(require("./getProgress"));
-var block = theme_1.bem("rmd-circular-progress");
+var block = utils_1.bem("rmd-circular-progress");
 var CircularProgress = function (providedProps) {
-    var _a = providedProps, id = _a.id, className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, forwardedRef = _a.forwardedRef, min = _a.min, max = _a.max, radius = _a.radius, center = _a.center, viewBox = _a.viewBox, dashoffset = _a.dashoffset, animate = _a.animate, centered = _a.centered, maxRotation = _a.maxRotation, props = __rest(_a, ["id", "className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "forwardedRef", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation"]);
+    var _a = providedProps, className = _a.className, propSvgStyle = _a.svgStyle, svgClassName = _a.svgClassName, propCircleStyle = _a.circleStyle, circleClassName = _a.circleClassName, value = _a.value, forwardedRef = _a.forwardedRef, min = _a.min, max = _a.max, radius = _a.radius, center = _a.center, viewBox = _a.viewBox, dashoffset = _a.dashoffset, animate = _a.animate, centered = _a.centered, maxRotation = _a.maxRotation, props = __rest(_a, ["className", "svgStyle", "svgClassName", "circleStyle", "circleClassName", "value", "forwardedRef", "min", "max", "radius", "center", "viewBox", "dashoffset", "animate", "centered", "maxRotation"]);
     var progress = getProgress_1.default(min, max, value);
@@ -59,3 +61,3 @@ var svgStyle = react_1.useMemo(function () {
         return __assign({}, propCircleStyle, { strokeDashoffset: dashoffset - dashoffset * progress });
-    }, [progress, propCircleStyle]);
+    }, [progress, propCircleStyle, dashoffset]);
     var determinate = typeof progress === "number";
@@ -107,2 +109,3 @@ var indeterminate = !determinate;
             center: PropTypes.number,
+            centered: PropTypes.bool,
             maxRotation: PropTypes.number,
@@ -109,0 +112,0 @@ dashoffset: PropTypes.number,

lib/getProgress.js

@@ -19,3 +19,3 @@ "use strict";
     }
-    else if (value > max || value < min) {
+    if (value > max || value < min) {
         throw new RangeError("A progress value must be between the min and max values");
@@ -22,0 +22,0 @@ }

lib/LinearProgress.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -36,5 +38,5 @@ };
 var classnames_1 = __importDefault(require("classnames"));
-var theme_1 = require("@react-md/theme");
+var utils_1 = require("@react-md/utils");
 var getProgress_1 = __importDefault(require("./getProgress"));
-var block = theme_1.bem("rmd-linear-progress");
+var block = utils_1.bem("rmd-linear-progress");
 var LinearProgress = function (providedProps) {
@@ -56,3 +58,3 @@ var _a = providedProps, propStyle = _a.style, className = _a.className, propBarStyle = _a.barStyle, barClassName = _a.barClassName, min = _a.min, max = _a.max, value = _a.value, reverse = _a.reverse, animate = _a.animate, vertical = _a.vertical, verticalHeight = _a.verticalHeight, forwardedRef = _a.forwardedRef, props = __rest(_a, ["style", "className", "barStyle", "barClassName", "min", "max", "value", "reverse", "animate", "vertical", "verticalHeight", "forwardedRef"]);
         return __assign({}, propBarStyle, (_a = {}, _a[key] = progress * 100 + "%", _a));
-    }, [progress, propBarStyle, min, max, vertical]);
+    }, [progress, propBarStyle, vertical]);
     var determinate = typeof progress === "number";
@@ -59,0 +61,0 @@ var indeterminate = !determinate;

package.json

 {
   "name": "@react-md/progress",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "Create horizontal, vertical, and circular progress indicators",
@@ -38,5 +38,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.5",
-    "@react-md/transition": "^2.0.0-alpha.5",
-    "@react-md/utils": "^2.0.0-alpha.5",
+    "@react-md/theme": "^2.0.0-alpha.6",
+    "@react-md/transition": "^2.0.0-alpha.6",
+    "@react-md/utils": "^2.0.0-alpha.6",
     "classnames": "^2.2.6"
@@ -53,3 +53,3 @@ },
   },
-  "gitHead": "3210cd3047162980716f1eb07cb25b364a241a70"
+  "gitHead": "e3db6427d83e1a66980662f3656557cc07dfabcc"
 }

README.md

@@ -47,8 +47,4 @@ # @react-md/progress
 const App = () => {
-  const { toggled: loadingCircle, disable: stopLoadingCircle } = useToggle(
-    true
-  );
-  const { toggled: loadingLinear, disable: stopLoadingLinear } = useToggle(
-    true
-  );
+  const [loadingCircle, , stopLoadingCircle] = useToggle(true);
+  const [loadingLinear, , stopLoadingLinear] = useToggle(true);
 
@@ -55,0 +51,0 @@ useEffect(() => {

src/getProgress.ts

@@ -14,3 +14,3 @@ /**
   value?: number | undefined
-) {
+): number | undefined {
   if (min >= max) {
@@ -24,3 +24,5 @@ throw new RangeError(
     return undefined;
-  } else if (value > max || value < min) {
+  }
+
+  if (value > max || value < min) {
     throw new RangeError(
@@ -27,0 +29,0 @@ "A progress value must be between the min and max values"

src/getProgressA11y.ts

@@ -0,1 +1,6 @@
+interface ProgressA11y {
+  "aria-busy": true;
+  "aria-describedby": string;
+}
+
 /**
@@ -8,3 +13,6 @@ * An extremely simple util that can be used to get the required a11y props
  */
-export default function getProgressA11y(id: string, progressing: boolean) {
+export default function getProgressA11y(
+  id: string,
+  progressing: boolean
+): ProgressA11y | undefined {
   if (!progressing) {
@@ -11,0 +19,0 @@ return undefined;

types/CircularProgress.d.ts

@@ -1,4 +0,4 @@
-import React, { HTMLAttributes, CSSProperties } from "react";
+import React, { CSSProperties, HTMLAttributes } from "react";
 import { Omit } from "@react-md/utils";
-import { ProgressProps } from "./types.d";
+import { ProgressProps } from "./types";
 export interface CircularProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "id">, ProgressProps {
@@ -5,0 +5,0 @@ /**

types/getProgressA11y.d.ts

@@ -0,1 +1,5 @@
+interface ProgressA11y {
+    "aria-busy": true;
+    "aria-describedby": string;
+}
 /**
@@ -8,5 +12,3 @@ * An extremely simple util that can be used to get the required a11y props
  */
-export default function getProgressA11y(id: string, progressing: boolean): {
-    "aria-busy": boolean;
-    "aria-describedby": string;
-} | undefined;
+export default function getProgressA11y(id: string, progressing: boolean): ProgressA11y | undefined;
+export {};

types/LinearProgress.d.ts

@@ -1,4 +0,4 @@
-import { FC, HTMLAttributes, CSSProperties } from "react";
-import { WithForwardedRef, Omit } from "@react-md/utils";
-import { ProgressProps } from "./types.d";
+import { CSSProperties, FC, HTMLAttributes } from "react";
+import { Omit, WithForwardedRef } from "@react-md/utils";
+import { ProgressProps } from "./types";
 export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "id">, ProgressProps {
@@ -5,0 +5,0 @@ /**

types/types.d.ts

 /**
- * The base progress prosp for both the linear and circular progress
+ * The base progress props for both the linear and circular progress
  * components.
  */
 export interface ProgressProps {
-  /**
-   * The id for the progress component. This is required for accessibility
-   * since the progress will 99% of the time be describing the progress
-   * of something else within the page. The element that is loading or
-   * tracking progress should also be updated to have `aria-busy="true"`
-   * and `aria-describedby="THIS_ID"`.
-   */
-  id: string;
-
-  /**
-   * The min value for the progress component. This is used to determine
-   * the current progress percentage for screen readers and styles.
-   */
-  min?: number;
-
-  /**
-   * The max value for the progress component. This is used to determine
-   * the current progress percentage for screen readers and styles.
-   */
-  max?: number;
-
-  /**
-   * The current value for the progress component. If this prop is omitted,
-   * the progress component will be put in an "indeterminate" state which
-   * will just infinitely loop an animation until it is unmounted.
-   *
-   * This value will be passed down as a percentage based on the `min` and
-   * `max` props so that screen readers can be notified of changes.
-   */
-  value?: number;
-
-  /**
-   * Boolean if the determinate progress versions should animate when the value
-   * changes. This should really only be enabled if you aren't getting quick
-   * progress updates or the updates happen in chunks.
-   */
-  animate?: boolean;
+    /**
+     * The id for the progress component. This is required for accessibility
+     * since the progress will 99% of the time be describing the progress
+     * of something else within the page. The element that is loading or
+     * tracking progress should also be updated to have `aria-busy="true"`
+     * and `aria-describedby="THIS_ID"`.
+     */
+    id: string;
+    /**
+     * The min value for the progress component. This is used to determine
+     * the current progress percentage for screen readers and styles.
+     */
+    min?: number;
+    /**
+     * The max value for the progress component. This is used to determine
+     * the current progress percentage for screen readers and styles.
+     */
+    max?: number;
+    /**
+     * The current value for the progress component. If this prop is omitted,
+     * the progress component will be put in an "indeterminate" state which
+     * will just infinitely loop an animation until it is unmounted.
+     *
+     * This value will be passed down as a percentage based on the `min` and
+     * `max` props so that screen readers can be notified of changes.
+     */
+    value?: number;
+    /**
+     * Boolean if the determinate progress versions should animate when the value
+     * changes. This should really only be enabled if you aren't getting quick
+     * progress updates or the updates happen in chunks.
+     */
+    animate?: boolean;
 }

No alert changes

Improved metrics

Total package byte prevSize

129143

increased by0.62%

Number of package files

58

increased by1.75%

Lines of code

1537

increased by1.32%

Worsened metrics

Number of lines in readme file

91

decreased by-4.21%

Dependency changes

• Updated@react-md/theme@^2.0.0-alpha.6

• Updated@react-md/transition@^2.0.0-alpha.6

• Updated@react-md/utils@^2.0.0-alpha.6