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

package/components/ProgressRings/AnimatedProgressRing.js

@@ -2,20 +2,30 @@
 import React from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
+import { DEFAULT_PROGRESS_COLORS } from '../../const';
 import { useColorAndPercentageInterpolation } from '../../hooks';
-import { DEFAULT_PROGRESS_COLORS, PROGRESS_RING_DEFAULT_PROPS } from './const';
+import { PROGRESS_RING_DEFAULT_PROPS } from './const';
 import ProgressRing from './ProgressRing';
 
 const AnimatedProgressRing = props => {
   const {
     progressPercentage = PROGRESS_RING_DEFAULT_PROPS.progressPercentage,
     progressColors = DEFAULT_PROGRESS_COLORS,
+    animationConfig = {
+      toValue: progressPercentage,
+      duration: 1000 * (progressPercentage / 100), // 100% will animate for 1s, 50% for 0.5s etc.
+      useNativeDriver: true,
+    },
   } = props;
 
   const {
     interpolatedColor,
     interpolatedPercentage,
-  } = useColorAndPercentageInterpolation(progressColors, progressPercentage);
+  } = useColorAndPercentageInterpolation(
+    progressColors,
+    progressPercentage,
+    animationConfig,
+  );
 
   return (
     <ProgressRing

package/components/ProgressRings/const.js

@@ -1,12 +1,3 @@
-export const DEFAULT_PROGRESS_COLORS = [
-  '#FF0000', // Red
-  '#FF4500', // Orange-Red
-  '#FFA500', // Orange
-  '#FFD700', // Yellow
-  '#ADFF2F', // Yellow-Green
-  '#90EE90', // Light Green
-];
-
 export const PROGRESS_RING_DEFAULT_PROPS = {
   progressLineWidth: 10,
   backgroundLineWidth: 10,

package/const.js

@@ -18,3 +18,12 @@ export {
   NOTCH_AREA_HEIGHT,
   STATUS_BAR_OFFSET,
 };
+
+export const DEFAULT_PROGRESS_COLORS = [
+  '#FF0000', // Red
+  '#FF4500', // Orange-Red
+  '#FFA500', // Orange
+  '#FFD700', // Yellow
+  '#ADFF2F', // Yellow-Green
+  '#90EE90', // Light Green
+];

package/hooks/useColorAndPercentageInterpolation.js

@@ -1,5 +1,8 @@
+/* eslint-disable consistent-return */
+/* eslint-disable no-bitwise */
 import { useEffect, useRef, useState } from 'react';
 import { Animated } from 'react-native';
+import { DEFAULT_PROGRESS_COLORS } from '../const';
 
 const resolveInputRange = colors => {
   if (colors.length === 1) {
@@ -29,17 +32,30 @@ const resolveInterpolationRange = colors => {
   };
 };
 
-export const useColorInterpolation = (colors, progressPerecentage) => {
+export const useColorInterpolation = (
+  colors,
+  progressPercentage,
+  animatedConfig = {
+    toValue: progressPercentage,
+    duration: 1000 * (progressPercentage / 100), // 100% will animate for 1s, 50% for 0.5s etc.
+    useNativeDriver: true,
+  },
+) => {
   const animatedPercentage = useRef(new Animated.Value(0)).current;
 
-  const [interpolatedColor, setInterpolatedColor] = useState(colors[0]);
+  const [interpolatedColor, setInterpolatedColor] = useState(
+    !animatedConfig
+      ? getInterpolatedColor(colors, progressPercentage)
+      : colors[0],
+  );
 
   useEffect(() => {
-    Animated.timing(animatedPercentage, {
-      toValue: progressPerecentage,
-      duration: 1000,
-      useNativeDriver: false, // Color interpolation requires native driver to be false
-    }).start();
+    if (!animatedConfig) {
+      setInterpolatedColor(getInterpolatedColor(colors, progressPercentage));
+      return;
+    }
+
+    Animated.timing(animatedPercentage, animatedConfig).start();
 
     // Listen to animatedPercentage value changes and update the interpolated color
     const listener = animatedPercentage.addListener(() => {
@@ -54,26 +70,38 @@ export const useColorInterpolation = (colors, progressPerecentage) => {
     return () => {
       animatedPercentage.removeListener(listener);
     };
-  }, [progressPerecentage, colors, animatedPercentage]);
+  }, [progressPercentage, colors, animatedPercentage, animatedConfig]);
 
   return interpolatedColor;
 };
 
 export const useColorAndPercentageInterpolation = (
   colors,
-  progressPerecentage,
+  progressPercentage,
+  animatedConfig = {
+    toValue: progressPercentage,
+    duration: 1000 * (progressPercentage / 100), // 100% will animate for 1s, 50% for 0.5s etc.
+    useNativeDriver: true,
+  },
 ) => {
   const animatedPercentage = useRef(new Animated.Value(0)).current;
 
-  const [interpolatedColor, setInterpolatedColor] = useState(colors[0]);
-  const [interpolatedPercentage, setInterpolatedPercentage] = useState(0);
+  const [interpolatedColor, setInterpolatedColor] = useState(
+    !animatedConfig
+      ? getInterpolatedColor(colors, progressPercentage)
+      : colors[0],
+  );
+  const [interpolatedPercentage, setInterpolatedPercentage] = useState(
+    !animatedConfig ? progressPercentage : 0,
+  );
 
   useEffect(() => {
-    Animated.timing(animatedPercentage, {
-      toValue: progressPerecentage,
-      duration: 1000,
-      useNativeDriver: false, // Color interpolation requires native driver to be false
-    }).start();
+    if (!animatedConfig) {
+      setInterpolatedPercentage(progressPercentage);
+      return;
+    }
+
+    Animated.timing(animatedPercentage, animatedConfig).start();
 
     // Listen to animatedPercentage value changes and update the interpolated color
     const listener = animatedPercentage.addListener(({ value }) => {
@@ -89,7 +117,61 @@ export const useColorAndPercentageInterpolation = (
     return () => {
       animatedPercentage.removeListener(listener);
     };
-  }, [progressPerecentage, colors, animatedPercentage]);
+  }, [progressPercentage, colors, animatedPercentage, animatedConfig]);
 
   return { interpolatedColor, interpolatedPercentage };
 };
+
+/**
+ * Convert hex color to RGB array
+ */
+const hexToRgb = hex => {
+  const bigint = parseInt(hex.replace('#', ''), 16);
+  return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
+};
+
+/**
+ * Convert RGB array to hex color
+ */
+const rgbToHex = ([r, g, b]) => {
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+    .toString(16)
+    .slice(1)
+    .toUpperCase()}`;
+};
+
+/**
+ * Linearly interpolate between two numbers
+ */
+const lerp = (a, b, t) => a + (b - a) * t;
+
+/**
+ * Get interpolated color based on percentage
+ */
+export const getInterpolatedColor = (
+  colors = DEFAULT_PROGRESS_COLORS,
+  percentage,
+) => {
+  const numColors = colors.length;
+
+  if (percentage <= 0) return colors[0];
+  if (percentage >= 100) return colors[numColors - 1];
+
+  const totalSegments = numColors - 1; // Total segments between colors
+  const segment = (percentage / 100) * totalSegments; // Determine segment index as float
+  const startIndex = Math.floor(segment); // Start color index
+  const endIndex = startIndex + 1; // End color index
+  const t = segment - startIndex; // Interpolation factor
+
+  const startColor = hexToRgb(colors[startIndex]);
+  const endColor = hexToRgb(colors[endIndex]);
+
+  // Interpolate each RGB component
+  const interpolatedColor = [
+    Math.round(lerp(startColor[0], endColor[0], t)),
+    Math.round(lerp(startColor[1], endColor[1], t)),
+    Math.round(lerp(startColor[2], endColor[2], t)),
+  ];
+
+  return rgbToHex(interpolatedColor);
+};

package/package.json

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