Merge pull request #26 from SimformSolutionsPvtLtd/develop

Release v0.0.3

Author: mukesh-simform

.gitignore

@@ -64,3 +64,4 @@ buck-out/
 
 # Library
 lib/
+yarn.lock

README.md

@@ -2,11 +2,12 @@
 
 # react-native-radial-slider
 
-[![npm version](https://img.shields.io/badge/npm%20package-0.0.1-orange)](https://www.npmjs.org/package/react-native-radial-slider) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
+[![npm version](https://img.shields.io/badge/npm%20package-0.0.3-orange)](https://www.npmjs.org/package/react-native-radial-slider) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
 
 ---
 
-This is a pure javascript and react-native-svg based library which provides two variants `Radial Slider` and `Speedo Meter`
+This is a pure javascript and react-native-svg based library that provides many variants of `Radial Slider` and `Speedo Meter` including  `default`, `radial-circle-slider`, `speedometer` and `speedometer-marker`
+
 
 Radial Slider allows you to select any specific value from a range of values. It comes with two variants, one is default and which allows selection on a 180-degree arc and the second one is 360-degree which allows selection of values on a complete circle. It can be used to select/set goals, vision, range, etc.
 
@@ -30,12 +31,20 @@ This library is easy to use and provides you full customization, so you can cust
 
 ## Installation
 
+##### 1. Install library and react-native-svg
+
 ```bash
 $ npm install react-native-radial-slider react-native-svg
 # --- or ---
 $ yarn add react-native-radial-slider react-native-svg
 ```
 
+##### 2. Install cocoapods in the ios project
+
+```bash
+cd ios && pod install
+```
+
 ##### Know more about [react-native-svg](https://www.npmjs.com/package/react-native-svg)
 
 # RadialSlider
@@ -124,6 +133,7 @@ export default RadialVariant;
 ```
 
 # SpeedoMeter
+> The speedometer will not take user inputs, when we need to update dynamic values at that time we can use it
 
 - SpeedoMeter has two different variants, speedometer and speedometer-marker
 - SpeedoMeter can be used to display the speed of an internet, vehicle, fan etc

example/src/modules/RadialVariant/index.tsx

@@ -6,6 +6,7 @@ import VariantCard from '../../components/VariantCard';
 
 const RadialVariant = () => {
   const [speed, setSpeed] = useState(0);
+  const [circleSliderSpeed, setCircleSliderSpeed] = useState(0);
 
   return (
     <View style={styles.container}>
@@ -22,12 +23,12 @@ const RadialVariant = () => {
       <VariantCard>
         <RadialSlider
           variant={'radial-circle-slider'}
-          value={speed}
+          value={circleSliderSpeed}
           min={0}
           max={200}
           lineColor={Colors.darkGrey}
           sliderTrackColor={Colors.darkGrey}
-          onChange={setSpeed}
+          onChange={setCircleSliderSpeed}
         />
       </VariantCard>
     </View>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-radial-slider",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "React Native component to select or highlight a specific value from a range of values",
   "homepage": "https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider#readme",
   "main": "lib/index.js",
@@ -51,12 +51,13 @@
     "jest": "^27.4.7",
     "lint-staged": "^11.1.2",
     "metro-react-native-babel-preset": "^0.67.0",
+    "patch-package": "^6.4.7",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-native": "^0.67.1",
     "react-native-svg": "^12.1.0",
     "react-test-renderer": "^17.0.2",
-    "typescript": "^4.5.5",
-    "patch-package": "^6.4.7"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "*",

src/components/RadialSlider/ButtonContent.tsx

@@ -18,8 +18,8 @@ const ButtonContent = (props: ButtonProps) => {
           <Path
             d={
               buttonType === 'left-btn'
-                ? 'M12.5168 23.7373L20.067 16.1616L27.6172 23.7373'
-                : 'M12.5168 17.2727L20.067 24.8485L27.6172 17.2727'
+                ? 'M12.5168 17.2727L20.067 24.8485L27.6172 17.2727'
+                : 'M12.5168 23.7373L20.067 16.1616L27.6172 23.7373'
             }
             stroke={stroke}
             strokeWidth="2.4"

src/components/RadialSlider/RootSlider.tsx

@@ -10,8 +10,10 @@ const RootSlider = (props: RootSliderProps) => {
 
   return variant === Constants.speedoMeterMarker ||
     variant === Constants.speedometer ? (
+    // @ts-ignore
     <SpeedoMeter
-      {...(props as SpeedoMeterProps & typeof defaultSpeedoMeterProps)}
+      {...(props as SpeedoMeterProps &
+        typeof defaultSpeedoMeterProps as object)}
     />
   ) : (
     <RadialSlider {...props} />

src/components/RadialSlider/SpeedoMeter.tsx

@@ -41,6 +41,7 @@ const SpeedoMeter = (
     unitStyle,
     value = 0,
     unitValueContentStyle,
+    min,
   } = props;
 
   const {
@@ -51,10 +52,14 @@ const SpeedoMeter = (
   } = useSilderAnimation(props);
 
   useEffect(() => {
-    const updateValue = value > max ? max : value;
-    setValue(updateValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+    if (value < min) {
+      setValue(min);
+    } else if (value > max) {
+      setValue(max);
+    } else {
+      setValue(value);
+    }
+  }, [max, min, setValue, value]);
 
   const {
     svgSize,

src/components/RadialSlider/__tests__/__snapshots__/RadialSlider.test.tsx.snap

@@ -4059,7 +4059,7 @@ exports[`RadialSlider component Match Snapshot 1`] = `
                   r="20"
                 />
                 <RNSVGPath
-                  d="M12.5168 23.7373L20.067 16.1616L27.6172 23.7373"
+                  d="M12.5168 17.2727L20.067 24.8485L27.6172 17.2727"
                   propList={
                     Array [
                       "stroke",
@@ -4127,7 +4127,7 @@ exports[`RadialSlider component Match Snapshot 1`] = `
                   r="20"
                 />
                 <RNSVGPath
-                  d="M12.5168 17.2727L20.067 24.8485L27.6172 17.2727"
+                  d="M12.5168 23.7373L20.067 16.1616L27.6172 23.7373"
                   propList={
                     Array [
                       "stroke",

src/components/RadialSlider/hooks/useSilderAnimation.ts

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import {
   PanResponder,
   GestureResponderEvent,
@@ -42,6 +42,16 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
     props.value >= min ? props.value || min : min
   );
 
+  useEffect(() => {
+    if (props?.value < min) {
+      setValue(min);
+    } else if (props?.value > max) {
+      setValue(max);
+    } else {
+      setValue(props.value);
+    }
+  }, [max, min, props.value]);
+
   const handlePanResponderGrant = () => {
     moveStartValue = prevValue.current;
     moveStartRadian = getRadianByValue(