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

package/components/ProgressRings/AnimatedProgressRing.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { useColorInterpolation } 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,
+    progressColors = DEFAULT_PROGRESS_COLORS,
+  } = props;
+
+  const interpolatedColor = useColorInterpolation(progressColors, percentage);
+
+  return (
+    <ProgressRing
+      {..._.omit(props, ['progressColors'])}
+      color={interpolatedColor}
+    />
+  );
+};
+
+AnimatedProgressRing.propTypes = {
+  ..._.omit(ProgressRing.propTypes, ['color']),
+  progressColors: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default AnimatedProgressRing;

package/components/ProgressRings/ProgressRing.js

@@ -0,0 +1,85 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import { Path } from 'react-native-svg';
+import PropTypes from 'prop-types';
+import { changeColorAlpha } from '@shoutem/theme';
+import { PROGRESS_RING_DEFAULT_PROPS } from './const';
+import { circlePath } from './svgCalculations';
+
+const ProgressRing = ({
+  index,
+  width = PROGRESS_RING_DEFAULT_PROPS.width,
+  backgroundWidth = PROGRESS_RING_DEFAULT_PROPS.backgroundWidth,
+  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 radius = halfSize - maxWidthCircle / 2 - index * maxWidthCircle;
+
+  const currentFillAngle =
+    (arcSweepAngle * Math.min(100, Math.max(0, percentage))) / 100;
+
+  const backgroundPath = circlePath(
+    halfSize,
+    halfSize,
+    radius,
+    currentFillAngle,
+    arcSweepAngle,
+  );
+
+  const progressPath = circlePath(
+    halfSize,
+    halfSize,
+    radius,
+    0,
+    currentFillAngle,
+  );
+
+  return (
+    <>
+      {hasBackgroundColor && (
+        <Path
+          d={backgroundPath}
+          stroke={changeColorAlpha(color, 0.2)}
+          strokeWidth={backgroundWidth || width}
+          strokeLinecap={backgroundLineCap}
+          fill="transparent"
+        />
+      )}
+      {percentage > 0 && (
+        <Path
+          d={progressPath}
+          stroke={color}
+          strokeWidth={width}
+          strokeLinecap={progressLineCap}
+          fill="transparent"
+        />
+      )}
+    </>
+  );
+};
+
+ProgressRing.propTypes = {
+  index: PropTypes.number.isRequired,
+  arcSweepAngle: PropTypes.number,
+  backgroundLineCap: PropTypes.string,
+  backgroundWidth: PropTypes.number,
+  color: PropTypes.string,
+  hasBackgroundColor: PropTypes.bool,
+  percentage: PropTypes.number,
+  progressLineCap: PropTypes.string,
+  size: PropTypes.number,
+  width: PropTypes.number,
+};
+
+export default ProgressRing;

package/components/ProgressRings/ProgressRings.js

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { G, Svg } from 'react-native-svg';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import AnimatedProgressRing from './AnimatedProgressRing';
+import ProgressRing from './ProgressRing';
+
+/**
+ * Component rendering given number of rings, which are filled depending on given
+ * percentage values.
+ * It is possible to either specify definite color for each ring by passing ring.color prop,
+ * or give and array of ring.progressColors and component will then interpolate between given
+ * colors, based on given percentage value.
+ */
+const ProgressRings = ({ rings, size, rotation, children, style }) => {
+  const renderRings = useMemo(
+    () =>
+      rings.map((ring, index) => {
+        const ResolvedRingComponent = ring.progressColors
+          ? AnimatedProgressRing
+          : ProgressRing;
+
+        return (
+          <ResolvedRingComponent
+            key={ring.id}
+            index={index}
+            size={size}
+            {...ring}
+          />
+        );
+      }),
+    [rings, size],
+  );
+
+  return (
+    <View style={style.container}>
+      <Svg width={size} height={size}>
+        <G rotation={rotation} originX={size / 2} originY={size / 2}>
+          {renderRings}
+        </G>
+      </Svg>
+      {children && <View style={style.childrenContainer}>{children}</View>}
+    </View>
+  );
+};
+
+ProgressRings.propTypes = {
+  rings: PropTypes.arrayOf(
+    // Omitting color to stop errors, but implementation has to define either color or progressColors,
+    // depending on which component they're using - ProgressRing or AnimatedProgressRing, respectively.
+    PropTypes.shape({ ..._.omit(ProgressRing.propTypes, ['index', 'color']) }),
+  ).isRequired,
+  children: PropTypes.func,
+  rotation: PropTypes.number,
+  size: PropTypes.number,
+  style: PropTypes.object,
+};
+
+ProgressRings.defaultProps = {
+  children: undefined,
+  size: 80,
+  rotation: 0,
+  style: {},
+};
+
+export default connectStyle('shoutem.ui.ProgressRings')(ProgressRings);

package/components/ProgressRings/const.js

@@ -0,0 +1,20 @@
+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 = {
+  width: 10,
+  backgroundWidth: 10,
+  progressLineCap: 'round',
+  backgroundLineCap: 'round',
+  percentage: 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/components/ProgressRings/index.js

@@ -0,0 +1,4 @@
+export { default as AnimatedProgressRing } from './AnimatedProgressRing';
+export * from './const';
+export { default as ProgressRing } from './ProgressRing';
+export { default as ProgressRings } from './ProgressRings';

package/components/ProgressRings/svgCalculations.js

@@ -0,0 +1,26 @@
+const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians),
+  };
+};
+
+export const circlePath = (x, y, radius, startAngle, endAngle) => {
+  const start = polarToCartesian(x, y, radius, endAngle * 0.9999999);
+  const end = polarToCartesian(x, y, radius, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+  return [
+    'M',
+    start.x,
+    start.y,
+    'A',
+    radius,
+    radius,
+    0,
+    largeArcFlag,
+    0,
+    end.x,
+    end.y,
+  ].join(' ');
+};

package/hooks/index.js

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

package/hooks/useColorInterpolation.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+
+const resolveInputRange = colors => {
+  if (colors.length === 1) {
+    // If only one color is given, color will always be the same, no matter of percentage.
+    return [0, 100];
+  }
+
+  const numSteps = colors.length - 1;
+  const stepSize = 100 / numSteps;
+
+  return colors.map((_, index) => Math.round(index * stepSize));
+};
+
+const resolveOutputRange = colors => {
+  if (colors.length === 1) {
+    // If only one color is given, color will always be the same, no matter of percentage.
+    return [colors[0], colors[0]];
+  }
+
+  return colors;
+};
+
+const resolveInterpolationRange = colors => {
+  return {
+    inputRange: resolveInputRange(colors),
+    outputRange: resolveOutputRange(colors),
+  };
+};
+
+export const useColorInterpolation = (colors, percentage) => {
+  const animatedPercentage = useRef(new Animated.Value(percentage)).current;
+
+  const [interpolatedColor, setInterpolatedColor] = useState(colors[0]);
+
+  useEffect(() => {
+    Animated.timing(animatedPercentage, {
+      toValue: percentage,
+      duration: 100,
+      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(() => {
+      const colorInterpolation = animatedPercentage.interpolate(
+        resolveInterpolationRange(colors),
+      );
+
+      // Resolve the interpolated color to a valid color string
+      setInterpolatedColor(colorInterpolation.__getValue());
+    });
+
+    return () => {
+      animatedPercentage.removeListener(listener);
+    };
+  }, [percentage, colors, animatedPercentage]);
+
+  return interpolatedColor;
+};

package/index.js

@@ -53,6 +53,7 @@ export { LoadingIndicator } from './components/LoadingIndicator';
 export { NumberInput } from './components/NumberInput';
 export { Overlay } from './components/Overlay';
 export { PageIndicators } from './components/PageIndicators';
+export * from './components/ProgressRings';
 export { Row } from './components/Row';
 export { Screen } from './components/Screen';
 export { ScrollView } from './components/ScrollView';
@@ -71,6 +72,7 @@ export { TouchableOpacity } from './components/TouchableOpacity';
 export { Video } from './components/Video';
 export { View } from './components/View';
 export { YearRangePicker } from './components/YearRangePicker';
+export * from './hooks';
 
 // Helpers
 export { calculateKeyboardOffset, Device, Keyboard } from './helpers';

package/package.json

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

package/theme.js

@@ -2918,5 +2918,12 @@ export default () => {
         maxHeight: responsiveHeight(20),
       },
     },
+
+    'shoutem.ui.ProgressRings': {
+      container: { justifyContent: 'center', alignItems: 'center' },
+      childrenContainer: {
+        position: 'absolute',
+      },
+    },
   };
 };