@coinbase/cds-mobile 8.59.0 → 8.60.0

package/esm/visualizations/ProgressCircle.js

@@ -1,11 +1,11 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-import { Animated } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 import { Circle, G, Svg } from 'react-native-svg';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
 import { getCircumference, getRadius } from '@coinbase/cds-common/utils/circle';
 import { getProgressCircleParams } from '@coinbase/cds-common/visualizations/getProgressCircleParams';
-import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
+import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { isTest } from '@coinbase/cds-utils';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -14,19 +14,19 @@ import { DefaultProgressCircleContent } from './DefaultProgressCircleContent';
 import { VisualizationContainer } from './VisualizationContainer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
 const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
   let {
     size,
-    progress,
+    progress = 0,
     color,
-    weight,
+    strokeWidth,
     visuallyDisabled,
     style,
     onAnimationEnd,
     onAnimationStart,
     disableAnimateOnMount
   } = _ref;
-  const strokeWidth = useProgressSize(weight);
   const theme = useTheme();
   const circleRef = useRef(null);
   const circumference = getCircumference(getRadius(size, strokeWidth));
@@ -47,8 +47,7 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     });
   }, [circumference, progress, animatedStrokeDashOffset, onAnimationStart, onAnimationEnd]);
   return /*#__PURE__*/_jsx(AnimatedCircle, _extends({
-    ref: !isTest() ? circleRef : undefined // This is required because Circle is mocked in the unit test to support testID. The mock does not support refs
-    ,
+    ref: !isTest() ? circleRef : undefined,
     strokeDasharray: circumference,
     strokeDashoffset: animatedStrokeDashOffset.current,
     strokeLinecap: progress > 0 ? 'round' : 'butt',
@@ -61,14 +60,15 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
 });
 export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, forwardedRef) => {
   let {
+    indeterminate,
     weight = 'normal',
-    progress,
+    progress = indeterminate ? 0.75 : 0,
     // Default is empty string due to iOS VoiceOver repeating percentage multiple times when
     // a11y label isn't specified
-    accessibilityLabel = '',
-    color = 'bgPrimary',
+    accessibilityLabel = indeterminate ? 'Loading' : '',
+    color = indeterminate ? 'fgMuted' : 'bgPrimary',
     disabled,
-    disableAnimateOnMount,
+    disableAnimateOnMount = indeterminate ? true : false,
     testID,
     hideContent,
     hideText,
@@ -80,12 +80,25 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     onAnimationStart
   } = _ref3;
   const theme = useTheme();
-  const strokeWidth = useProgressSize(weight);
+  const strokeWidth = getProgressSize(weight);
   const visSize = size != null ? size : '100%';
   const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const textContainerStyle = useMemo(() => [{
     padding: strokeWidth
   }, styles == null ? void 0 : styles.textContainer], [strokeWidth, styles == null ? void 0 : styles.textContainer]);
+  const animatedRotate = useRef(new Animated.Value(0));
+  useEffect(() => {
+    if (!indeterminate) return;
+    // if indeterminate, animate the rotation of the svg
+    const animation = Animated.loop(Animated.timing(animatedRotate.current, convertMotionConfig({
+      toValue: 1,
+      duration: 'slow4',
+      easing: 'linear',
+      fromValue: 0
+    })));
+    animation.start();
+    return () => animation.stop();
+  }, [indeterminate]);
   return /*#__PURE__*/_jsx(VisualizationContainer, {
     height: visSize,
     width: visSize,
@@ -95,12 +108,12 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
         height,
         circleSize
       } = _ref4;
-      return /*#__PURE__*/_jsx(Box, {
+      return /*#__PURE__*/_jsxs(Box, {
         ref: forwardedRef,
         accessible: true,
         accessibilityLabel: accessibilityLabel,
         accessibilityRole: "progressbar",
-        accessibilityValue: {
+        accessibilityValue: indeterminate ? undefined : {
           min: 0,
           max: 100,
           now: Math.round(progress * 100)
@@ -111,57 +124,64 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
         style: rootStyle,
         testID: testID,
         width: width,
-        children: /*#__PURE__*/_jsxs(Box, {
-          flexGrow: 0,
-          flexShrink: 0,
+        children: [/*#__PURE__*/_jsx(AnimatedSvg, {
           height: circleSize,
-          style: styles == null ? void 0 : styles.svgContainer,
+          style: [styles == null ? void 0 : styles.svg, styleSheet.svg, {
+            transform: [{
+              rotate: animatedRotate.current.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0deg', '360deg']
+              })
+            }]
+          }],
+          viewBox: "0 0 " + circleSize + " " + circleSize,
           width: circleSize,
-          children: [/*#__PURE__*/_jsx(Svg, {
-            height: circleSize,
-            style: styles == null ? void 0 : styles.svg,
-            viewBox: "0 0 " + circleSize + " " + circleSize,
-            width: circleSize,
-            children: /*#__PURE__*/_jsxs(G, {
-              origin: circleSize / 2 + ", " + circleSize / 2,
-              rotation: -90,
-              children: [/*#__PURE__*/_jsx(Circle, _extends({}, getProgressCircleParams({
-                size: circleSize,
-                strokeWidth,
-                stroke: theme.color.bgLine
-              }), (styles == null ? void 0 : styles.circle) || {})), /*#__PURE__*/_jsx(ProgressCircleInner, {
-                color: color,
-                disableAnimateOnMount: disableAnimateOnMount,
-                onAnimationEnd: onAnimationEnd,
-                onAnimationStart: onAnimationStart,
-                progress: progress,
-                size: circleSize,
-                style: styles == null ? void 0 : styles.progress,
-                visuallyDisabled: disabled,
-                weight: weight
-              })]
-            })
-          }, circleSize), !hideText && !hideContent && /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsxs(G, {
+            origin: circleSize / 2 + ", " + circleSize / 2,
+            rotation: -90,
+            children: [/*#__PURE__*/_jsx(Circle, _extends({}, getProgressCircleParams({
+              size: circleSize,
+              strokeWidth,
+              stroke: theme.color.bgLine
+            }), (styles == null ? void 0 : styles.circle) || {})), /*#__PURE__*/_jsx(ProgressCircleInner, {
+              color: color,
+              disableAnimateOnMount: disableAnimateOnMount,
+              indeterminate: indeterminate,
+              onAnimationEnd: onAnimationEnd,
+              onAnimationStart: onAnimationStart,
+              progress: progress,
+              size: circleSize,
+              strokeWidth: strokeWidth,
+              style: styles == null ? void 0 : styles.progress,
+              visuallyDisabled: disabled
+            })]
+          })
+        }, circleSize), !hideText && !hideContent && /*#__PURE__*/_jsx(Box, {
+          height: "100%",
+          position: "absolute",
+          style: textContainerStyle,
+          width: "100%",
+          children: /*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            borderRadius: 1000,
             height: "100%",
-            position: "absolute",
-            style: textContainerStyle,
+            justifyContent: "center",
+            overflow: "hidden",
             width: "100%",
-            children: /*#__PURE__*/_jsx(Box, {
-              alignItems: "center",
-              borderRadius: 1000,
-              height: "100%",
-              justifyContent: "center",
-              overflow: "hidden",
-              width: "100%",
-              children: contentNode != null ? contentNode : /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
-                disableAnimateOnMount: disableAnimateOnMount,
-                disabled: disabled,
-                progress: progress
-              })
+            children: contentNode != null ? contentNode : !indeterminate && /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
+              disableAnimateOnMount: disableAnimateOnMount,
+              disabled: disabled,
+              progress: progress
             })
-          })]
-        })
+          })
+        })]
       });
     }
   });
-}));
+}));
+const styleSheet = StyleSheet.create({
+  svg: {
+    flexGrow: 0,
+    flexShrink: 0
+  }
+});

package/esm/visualizations/__stories__/ProgressCircle.stories.js

@@ -111,12 +111,64 @@ const ProgressBarScreen = () => {
         }
       })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Heavy",
+      title: "Indeterminate",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
         children: _ref3 => {
           let {
             calculateProgress
           } = _ref3;
+          return /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              color: "bgPositive",
+              progress: calculateProgress(0.75),
+              size: 30
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              color: "bgSecondary",
+              progress: calculateProgress(0.75),
+              size: 30
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              disableAnimateOnMount: false,
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "thin"
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              disableAnimateOnMount: false,
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "normal"
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "semiheavy"
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "heavy"
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Heavy",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref4 => {
+          let {
+            calculateProgress
+          } = _ref4;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -134,10 +186,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "NoText",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref4 => {
+        children: _ref5 => {
           let {
             calculateProgress
-          } = _ref4;
+          } = _ref5;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -201,10 +253,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "FillParent",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref5 => {
+        children: _ref6 => {
           let {
             calculateProgress
-          } = _ref5;
+          } = _ref6;
           return /*#__PURE__*/_jsxs(HStack, {
             flexWrap: "wrap",
             gap: 2,
@@ -250,10 +302,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "CustomTextColor",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref6 => {
+        children: _ref7 => {
           let {
             calculateProgress
-          } = _ref6;
+          } = _ref7;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -429,10 +481,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Thin",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref7 => {
+        children: _ref8 => {
           let {
             calculateProgress
-          } = _ref7;
+          } = _ref8;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -450,10 +502,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Disable Mount Animation",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref8 => {
+        children: _ref9 => {
           let {
             calculateProgress
-          } = _ref8;
+          } = _ref9;
           return /*#__PURE__*/_jsx(ProgressCircle, {
             disableAnimateOnMount: true,
             progress: calculateProgress(0.8),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.59.0",
+  "version": "8.60.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -197,7 +197,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.59.0",
+    "@coinbase/cds-common": "^8.60.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.36.0",
     "@coinbase/cds-lottie-files": "^3.3.4",