@shoutem/ui 8.1.0-rc.0 → 8.1.0-rc.1

package/README.md

@@ -30,7 +30,7 @@ Join [our community](https://www.facebook.com/groups/shoutem.community/) on Face
 
 ## UI Toolkit
 
-Shoutem UI is a part of the [Shoutem UI Toolkit](https://shoutem.github.io/ui/) that enables you to build professional looking React Native apps with ease.
+Shoutem UI is a part of the [Shoutem UI Toolkit](https://shoutem.github.io/docs/ui-toolkit/introduction) that enables you to build professional looking React Native apps with ease.
 
 It consists of three libraries:
 

package/components/ProgressRings/AnimatedProgressRing.js

@@ -2,22 +2,26 @@
 import React from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { useColorInterpolation } from '../../hooks';
+import { useColorAndPercentageInterpolation } from '../../hooks';
 import { DEFAULT_PROGRESS_COLORS, PROGRESS_RING_DEFAULT_PROPS } from './const';
 import ProgressRing from './ProgressRing';
 
 const AnimatedProgressRing = props => {
   const {
-    percentage = PROGRESS_RING_DEFAULT_PROPS.percentage,
+    progressPercentage = PROGRESS_RING_DEFAULT_PROPS.progressPercentage,
     progressColors = DEFAULT_PROGRESS_COLORS,
   } = props;
 
-  const interpolatedColor = useColorInterpolation(progressColors, percentage);
+  const {
+    interpolatedColor,
+    interpolatedPercentage,
+  } = useColorAndPercentageInterpolation(progressColors, progressPercentage);
 
   return (
     <ProgressRing
       {..._.omit(props, ['progressColors'])}
       color={interpolatedColor}
+      progressPercentage={interpolatedPercentage}
     />
   );
 };

package/components/ProgressRings/ProgressRing.js

@@ -8,26 +8,25 @@ import { circlePath } from './svgCalculations';
 
 const ProgressRing = ({
   index,
-  width = PROGRESS_RING_DEFAULT_PROPS.width,
-  backgroundWidth = PROGRESS_RING_DEFAULT_PROPS.backgroundWidth,
+  progressPercentage = PROGRESS_RING_DEFAULT_PROPS.progressPercentage,
+  size = PROGRESS_RING_DEFAULT_PROPS.size,
+  color = PROGRESS_RING_DEFAULT_PROPS.color,
+  progressLineWidth = PROGRESS_RING_DEFAULT_PROPS.progressLineWidth,
+  backgroundLineWidth = PROGRESS_RING_DEFAULT_PROPS.backgroundLineWidth,
   progressLineCap = PROGRESS_RING_DEFAULT_PROPS.progressLineCap,
   backgroundLineCap = PROGRESS_RING_DEFAULT_PROPS.backgroundLineCap,
-  percentage = PROGRESS_RING_DEFAULT_PROPS.percentage,
-  hasBackgroundColor = PROGRESS_RING_DEFAULT_PROPS.hasBackgroundColor,
   arcSweepAngle = PROGRESS_RING_DEFAULT_PROPS.arcSweepAngle,
-  size = PROGRESS_RING_DEFAULT_PROPS.size,
-  color = PROGRESS_RING_DEFAULT_PROPS.color,
 }) => {
   const halfSize = size / 2;
 
-  const maxWidthCircle = backgroundWidth
-    ? Math.max(width, backgroundWidth)
-    : width;
+  const maxWidthCircle = backgroundLineWidth
+    ? Math.max(progressLineWidth, backgroundLineWidth)
+    : progressLineWidth;
 
   const radius = halfSize - maxWidthCircle / 2 - index * maxWidthCircle;
 
   const currentFillAngle =
-    (arcSweepAngle * Math.min(100, Math.max(0, percentage))) / 100;
+    (arcSweepAngle * Math.min(100, Math.max(0, progressPercentage))) / 100;
 
   const backgroundPath = circlePath(
     halfSize,
@@ -47,20 +46,20 @@ const ProgressRing = ({
 
   return (
     <>
-      {hasBackgroundColor && (
+      {backgroundLineWidth > 0 && (
         <Path
           d={backgroundPath}
           stroke={changeColorAlpha(color, 0.2)}
-          strokeWidth={backgroundWidth || width}
+          strokeWidth={backgroundLineWidth || progressLineWidth}
           strokeLinecap={backgroundLineCap}
           fill="transparent"
         />
       )}
-      {percentage > 0 && (
+      {progressPercentage > 0 && (
         <Path
           d={progressPath}
           stroke={color}
-          strokeWidth={width}
+          strokeWidth={progressLineWidth}
           strokeLinecap={progressLineCap}
           fill="transparent"
         />
@@ -73,13 +72,12 @@ ProgressRing.propTypes = {
   index: PropTypes.number.isRequired,
   arcSweepAngle: PropTypes.number,
   backgroundLineCap: PropTypes.string,
-  backgroundWidth: PropTypes.number,
+  backgroundLineWidth: PropTypes.number,
   color: PropTypes.string,
-  hasBackgroundColor: PropTypes.bool,
-  percentage: PropTypes.number,
   progressLineCap: PropTypes.string,
+  progressLineWidth: PropTypes.number,
+  progressPercentage: PropTypes.number,
   size: PropTypes.number,
-  width: PropTypes.number,
 };
 
 export default ProgressRing;

package/components/ProgressRings/const.js

@@ -8,13 +8,12 @@ export const DEFAULT_PROGRESS_COLORS = [
 ];
 
 export const PROGRESS_RING_DEFAULT_PROPS = {
-  width: 10,
-  backgroundWidth: 10,
+  progressLineWidth: 10,
+  backgroundLineWidth: 10,
   progressLineCap: 'round',
   backgroundLineCap: 'round',
-  percentage: 0.1, // 0.1 so that it shows tiny fill indicator, indicating 0%, better UX/UI than empty.
+  progressPercentage: 0.1, // 0.1 so that it shows tiny fill indicator, indicating 0%, better UX/UI than empty.
   arcSweepAngle: 360,
   size: 80,
-  hasBackgroundColor: true,
   color: '#000',
 };

package/hooks/index.js

@@ -1 +1,4 @@
-export { useColorInterpolation } from './useColorInterpolation';
+export {
+  useColorAndPercentageInterpolation,
+  useColorInterpolation,
+} from './useColorAndPercentageInterpolation';

package/hooks/{useColorInterpolation.js → useColorAndPercentageInterpolation.js}

@@ -29,15 +29,15 @@ const resolveInterpolationRange = colors => {
   };
 };
 
-export const useColorInterpolation = (colors, percentage) => {
-  const animatedPercentage = useRef(new Animated.Value(percentage)).current;
+export const useColorInterpolation = (colors, progressPerecentage) => {
+  const animatedPercentage = useRef(new Animated.Value(0)).current;
 
   const [interpolatedColor, setInterpolatedColor] = useState(colors[0]);
 
   useEffect(() => {
     Animated.timing(animatedPercentage, {
-      toValue: percentage,
-      duration: 100,
+      toValue: progressPerecentage,
+      duration: 1000,
       useNativeDriver: false, // Color interpolation requires native driver to be false
     }).start();
 
@@ -54,7 +54,42 @@ export const useColorInterpolation = (colors, percentage) => {
     return () => {
       animatedPercentage.removeListener(listener);
     };
-  }, [percentage, colors, animatedPercentage]);
+  }, [progressPerecentage, colors, animatedPercentage]);
 
   return interpolatedColor;
 };
+
+export const useColorAndPercentageInterpolation = (
+  colors,
+  progressPerecentage,
+) => {
+  const animatedPercentage = useRef(new Animated.Value(0)).current;
+
+  const [interpolatedColor, setInterpolatedColor] = useState(colors[0]);
+  const [interpolatedPercentage, setInterpolatedPercentage] = useState(0);
+
+  useEffect(() => {
+    Animated.timing(animatedPercentage, {
+      toValue: progressPerecentage,
+      duration: 1000,
+      useNativeDriver: false, // Color interpolation requires native driver to be false
+    }).start();
+
+    // Listen to animatedPercentage value changes and update the interpolated color
+    const listener = animatedPercentage.addListener(({ value }) => {
+      const colorInterpolation = animatedPercentage.interpolate(
+        resolveInterpolationRange(colors),
+      );
+
+      // Resolve the interpolated color to a valid color string
+      setInterpolatedColor(colorInterpolation.__getValue());
+      setInterpolatedPercentage(value);
+    });
+
+    return () => {
+      animatedPercentage.removeListener(listener);
+    };
+  }, [progressPerecentage, colors, animatedPercentage]);
+
+  return { interpolatedColor, interpolatedPercentage };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "8.1.0-rc.0",
+  "version": "8.1.0-rc.1",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",