Merge pull request #29 from SimformSolutionsPvtLtd/develop

Release v0.0.4

README.md

@@ -2,12 +2,11 @@
 
 # react-native-radial-slider
 
-[![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)
+[![npm version](https://img.shields.io/badge/npm%20package-0.0.4-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 that provides many variants of `Radial Slider` and `Speedo Meter` including  `default`, `radial-circle-slider`, `speedometer` and `speedometer-marker`
-
+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.
 
@@ -133,6 +132,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

example/.gitignore

@@ -35,6 +35,7 @@ local.properties
 node_modules/
 npm-debug.log
 yarn-error.log
+yarn.lock
 
 # BUCK
 buck-out/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-radial-slider",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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",

src/components/RadialSlider/ButtonContent.tsx

@@ -11,6 +11,8 @@ const ButtonContent = (props: ButtonProps) => {
       activeOpacity={0.7}
       disabled={disabled}
       onPress={onPress}
+      onLongPress={props?.onLongPress}
+      onPressOut={props?.onPressOut}
       style={style}>
       <Svg height="30" width="45">
         <G>

src/components/RadialSlider/LineContent.tsx

@@ -31,6 +31,8 @@ const LineContent = (props: LineContentProps) => {
     isMarkerVariant,
     marks,
     isRadialCircleVariant,
+    isRadialSliderVariant,
+    isSpeedoMeterVariant,
   } = useRadialSlider(props);
 
   const markerInnerValue = Math.round((max / markerValueInterval) as number);
@@ -73,9 +75,10 @@ const LineContent = (props: LineContentProps) => {
 
         const isSpeedoMarker = !isMarkerVariant ? 0 : isMarkerLine ? -10 : 0;
 
-        const isSpeedoMeterMarkerLine = isRadialCircleVariant
-          ? false
-          : isMarkerLine;
+        const isSpeedoMeterMarkerLine =
+          isRadialCircleVariant || isRadialSliderVariant || isSpeedoMeterVariant
+            ? false
+            : isMarkerLine;
 
         const radialCircleLineRotation = isRadialCircleVariant ? 86 : 90;
 

src/components/RadialSlider/MarkerValueContent.tsx

@@ -21,7 +21,7 @@ const MarkerValueContent = (props: MarkerValueContentProps) => {
 
   return (
     <>
-      {marks.map((mark, index) => {
+      {marks.map((mark: { value: number }, index: number) => {
         const markIndex = Math.floor(
           (((((!fixedMarker ? (markerValue as number) : (value as number)) -
             min) *

src/components/RadialSlider/RadialSlider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Svg, {
   Path,
   Defs,
@@ -20,6 +20,9 @@ import TailText from './TailText';
 import LineContent from './LineContent';
 
 const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
+  const [isStart, setIsStart] = useState<boolean>(false);
+  const [iconPosition, setIconPosition] = useState<string>('');
+
   const {
     step,
     radius,
@@ -45,9 +48,10 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     leftIconStyle,
     rightIconStyle,
     stroke,
+    onChange = () => {},
   } = props;
 
-  const { panResponder, value, setValue, curPoint, currentRadian } =
+  const { panResponder, value, setValue, curPoint, currentRadian, prevValue } =
     useSilderAnimation(props);
 
   const {
@@ -61,6 +65,22 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     centerValue,
   } = useRadialSlider(props);
 
+  useEffect(() => {
+    //check max value length
+    const maxLength = max?.toString()?.length;
+
+    const timerId = setTimeout(handleValue, maxLength > 2 ? 10 : 100);
+    return () => clearTimeout(timerId);
+  });
+
+  const handleValue = () => {
+    if (iconPosition === 'up' && max > value) {
+      isStart && onPressButtons('up');
+    } else if (iconPosition === 'down' && min < value) {
+      isStart && onPressButtons('down');
+    }
+  };
+
   const leftButtonStyle = StyleSheet.flatten([
     leftIconStyle,
     (disabled || min === value) && {
@@ -84,9 +104,19 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
 
   const onPressButtons = (type: string) => {
     if (type === 'up' && max > value) {
-      setValue((prevState: number) => prevState + step);
+      setValue((prevState: number) => {
+        prevValue.current = prevState + step;
+
+        return prevState + step;
+      });
+      onChange(value);
     } else if (type === 'down' && min < value) {
-      setValue((prevState: number) => prevState - step);
+      setValue((prevState: number) => {
+        prevValue.current = prevState - step;
+
+        return prevState - step;
+      });
+      onChange(value);
     }
   };
 
@@ -169,6 +199,11 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
             <View style={styles.center}>
               <ButtonContent
                 onPress={() => onPressButtons('down')}
+                onLongPress={() => {
+                  setIsStart(true);
+                  setIconPosition('down');
+                }}
+                onPressOut={() => setIsStart(false)}
                 buttonType="left-btn"
                 style={leftButtonStyle}
                 disabled={disabled || min === value}
@@ -177,6 +212,11 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
               <ButtonContent
                 disabled={disabled || max === value}
                 onPress={() => onPressButtons('up')}
+                onLongPress={() => {
+                  setIsStart(true);
+                  setIconPosition('up');
+                }}
+                onPressOut={() => setIsStart(false)}
                 style={rightButtonStyle}
                 buttonType="right-btn"
                 stroke={stroke ?? Colors.blue}

src/components/RadialSlider/hooks/useRadialSlider.ts

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import {
   createRange,
   getExtraSize,
@@ -22,11 +22,31 @@ const useRadialSlider = (props: RadialSliderHookProps) => {
 
   const centerValue = Math.round((max - min) / 2) as number;
 
+  //For default variant in radial slider
+  const isRadialSliderVariant = variant === Constants.radialSlider;
+
+  //For radial-circle-slider variant
   const isRadialCircleVariant = variant === Constants.radialCircleSlider;
 
+  //For speedometer-marker variant
+  const isMarkerVariant = variant === Constants.speedoMeterMarker;
+
+  //For speedometer variant
+  const isSpeedoMeterVariant = variant === Constants.speedometer;
+
   const radianValue = isRadialCircleVariant ? 0.057 : openingRadian;
 
-  const isMarkerVariant = variant === Constants.speedoMeterMarker;
+  useEffect(() => {
+    if (isMarkerVariant)
+      if (min < 0) {
+        throw 'Negative number is not allowed';
+      } else if (max < 0) {
+        throw 'Negative number is not allowed';
+      }
+    if (max < min) {
+      throw 'max value should be greater than min';
+    }
+  }, [isMarkerVariant, max, min]);
 
   const angle = (radianValue * 180.0) / Math.PI;
 
@@ -64,17 +84,33 @@ const useRadialSlider = (props: RadialSliderHookProps) => {
   );
 
   const marks = useMemo(() => {
-    const stepsLength = Math.round((max - min) / step);
-
-    return [...Array(stepsLength + 1)].map((_val, index) => {
-      const isEven = index % 2 === 0;
-
-      return {
-        isEven,
-        value: Math.round(index * step),
-      };
-    });
-  }, [max, min, step]);
+    if (isMarkerVariant) {
+      const stepsLength = Math.round((max - min) / step);
+
+      return [...Array(stepsLength + 1)].map((_val, index) => {
+        const isEven = index % 2 === 0;
+
+        return {
+          isEven,
+          value: Math.round(index * step),
+        };
+      });
+    } else {
+      const array: any = [];
+      for (let i = 0; i <= max; i++) {
+        array.push(i);
+      }
+
+      return array.map((index: number) => {
+        const isEven = index % 2 === 0;
+
+        return {
+          isEven,
+          value: Math.round(index * step),
+        };
+      });
+    }
+  }, [isMarkerVariant, max, min, step]);
 
   return {
     angle,
@@ -91,6 +127,8 @@ const useRadialSlider = (props: RadialSliderHookProps) => {
     marks,
     isRadialCircleVariant,
     centerValue,
+    isRadialSliderVariant,
+    isSpeedoMeterVariant,
   };
 };
 

src/components/RadialSlider/hooks/useSilderAnimation.ts

@@ -39,18 +39,17 @@ const useSilderAnimation = (props: RadialSliderAnimationHookProps) => {
   const prevValue = useRef(props.value > min ? props.value : min);
 
   const [value, setValue] = useState(
-    props.value >= min ? props.value || min : min
+    props?.value < min ? min : props?.value > max ? max : props?.value
   );
 
   useEffect(() => {
-    if (props?.value < min) {
-      setValue(min);
-    } else if (props?.value > max) {
+    if (max < props?.value) {
       setValue(max);
-    } else {
-      setValue(props.value);
+    } else if (min > props?.value) {
+      setValue(min);
     }
-  }, [max, min, props.value]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [max, min]);
 
   const handlePanResponderGrant = () => {
     moveStartValue = prevValue.current;

src/components/RadialSlider/types.ts

@@ -316,6 +316,14 @@ export interface ButtonProps {
    * Color for icon
    */
   stroke?: string;
+  /**
+   * Based on click, the value will continue to increase or decrease
+   */
+  onLongPress?: () => void;
+  /**
+   * Based on click, the value will stop to continue to increase or decrease
+   */
+  onPressOut?: () => void;
 }
 
 export type SpeedoMeterProps = RadialSliderProps & {

src/constants/index.ts

@@ -1,4 +1,5 @@
 const Constants = {
+  radialSlider: 'default',
   speedometer: 'speedometer',
   radialCircleSlider: 'radial-circle-slider',
   speedoMeterMarker: 'speedometer-marker',