Merge pull request #39 from SimformSolutionsPvtLtd/fix/UNT-T17038

fix(UNT-T17038): fix design and render issues

Author: mukesh-simform

src/components/RadialSlider/ButtonContent.tsx

@@ -16,7 +16,7 @@ const ButtonContent = (props: ButtonProps) => {
       style={style}>
       <Svg height="30" width="45">
         <G>
-          <Circle cx="20" cy="20" r="20" />
+          <Circle cx="20" cy="20" r="20" fill="none" />
           <Path
             d={
               buttonType === 'left-btn'
@@ -27,6 +27,7 @@ const ButtonContent = (props: ButtonProps) => {
             strokeWidth="2.4"
             strokeLinecap="round"
             strokeLinejoin="round"
+            fill="none"
           />
         </G>
       </Svg>

src/components/RadialSlider/RadialSlider.tsx

@@ -5,7 +5,6 @@ import Svg, {
   LinearGradient,
   Stop,
   Circle,
-  Color,
   NumberProp,
 } from 'react-native-svg';
 import { View, Platform, StyleSheet } from 'react-native';
@@ -48,7 +47,6 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     leftIconStyle,
     rightIconStyle,
     stroke,
-    onChange = () => {},
   } = props;
 
   const { panResponder, value, setValue, curPoint, currentRadian, prevValue } =
@@ -109,14 +107,12 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
 
         return prevState + step;
       });
-      onChange(value);
     } else if (type === 'down' && min < value) {
       setValue((prevState: number) => {
         prevValue.current = prevState - step;
 
         return prevState - step;
       });
-      onChange(value);
     }
   };
 
@@ -147,7 +143,7 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
               (
                 item: {
                   offset: NumberProp | undefined;
-                  color: Color | undefined;
+                  color: string | undefined;
                 },
                 index: React.Key | null | undefined
               ) => (

src/components/RadialSlider/SpeedoMeter.tsx

@@ -4,7 +4,6 @@ import Svg, {
   Defs,
   LinearGradient,
   Stop,
-  Color,
   NumberProp,
   Linecap,
 } from 'react-native-svg';
@@ -96,7 +95,7 @@ const SpeedoMeter = (
               (
                 item: {
                   offset: NumberProp | undefined;
-                  color: Color | undefined;
+                  color: string | undefined;
                 },
                 index: React.Key | null | undefined
               ) => (

src/components/RadialSlider/hooks/useSilderAnimation.ts

@@ -1,7 +1,7 @@
-import { useState, useRef, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
-  PanResponder,
   GestureResponderEvent,
+  PanResponder,
   PanResponderGestureState,
 } from 'react-native';
 import {
@@ -51,6 +51,20 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [max, min]);
 
+  useEffect(() => {
+    if (min <= props?.value && max >= props?.value) {
+      setValue(props?.value);
+      prevValue.current = props?.value;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props?.value]);
+
+  useEffect(() => {
+    onChange(value);
+    prevValue.current = value;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   const handlePanResponderGrant = () => {
     moveStartValue = prevValue.current;
     moveStartRadian = getRadianByValue(
@@ -118,7 +132,7 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
     if (disabled) {
       return;
     }
-    onComplete(value);
+    onComplete(prevValue.current);
   };
 
   const panResponder = useRef(