Merge pull request #18 from SimformSolutionsPvtLtd/fix/UNT-T8179

Solve RadialSlider lack issue and update README file

Author: mukesh-simform

README.md

@@ -81,6 +81,8 @@ const LineContent = (props: RadialSliderProps & typeof defaultProps) => {
           ? false
           : isMarkerLine;
 
+        const radialCircleLineRotation = isRadialCircleVariant ? 86 : 90;
+
         return (
           <G key={index.toString()}>
             {(index % lineSpace === 0 ||
@@ -97,7 +99,9 @@ const LineContent = (props: RadialSliderProps & typeof defaultProps) => {
                       : radius + lineHeight
                   }
                   x2={radius + lineHeight / 2 + isSpeedoMarker}
-                  transform={`rotate(${index + 90 + angle})`}
+                  transform={`rotate(${
+                    index + radialCircleLineRotation + angle
+                  })`}
                   strokeWidth={2}
                   stroke={
                     activeIndex > index ||

src/components/RadialSlider/LineContent.tsx

@@ -20,7 +20,8 @@ const MarkerValueContent = (
     markerValueColor,
   } = props;
 
-  const { lineHeight, lineCount, angle, marks } = useRadialSlider(props);
+  const { lineHeight, lineCount, angle, marks, centerValue } =
+    useRadialSlider(props);
 
   return (
     <>
@@ -43,7 +44,6 @@ const MarkerValueContent = (
         const markerInnerValue = Math.round(
           (max / markerValueInterval) as number
         );
-        const centerValue = Math.round((max - min) / 2) as number;
 
         // if number is below 99(two digit number) then we set -2 for x property in svg Text
         const twoDigitsPositionValue = max < 99 ? -2 : -3;

src/components/RadialSlider/MarkerValueContent.tsx

@@ -8,7 +8,7 @@ import Svg, {
   Color,
   NumberProp,
 } from 'react-native-svg';
-import { View, Platform } from 'react-native';
+import { View, Platform, StyleSheet } from 'react-native';
 import type { RadialSliderProps } from './types';
 import { styles } from './styles';
 import { Colors } from '../../theme';
@@ -44,6 +44,8 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     isHideTailText,
     isHideButtons,
     isHideLines,
+    leftIconStyle,
+    rightIconStyle,
   } = props;
 
   const { panResponder, value, setValue, curPoint, currentRadian } =
@@ -55,12 +57,25 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     startPoint,
     endPoint,
     startRadian,
-    leftButtonStyle,
-    rightButtonStyle,
     radianValue,
     isRadialCircleVariant,
+    centerValue,
   } = useRadialSlider(props);
 
+  const leftButtonStyle = StyleSheet.flatten([
+    leftIconStyle,
+    (disabled || min === value) && {
+      opacity: 0.5,
+    },
+  ]);
+
+  const rightButtonStyle = StyleSheet.flatten([
+    rightIconStyle,
+    (disabled || max === value) && {
+      opacity: 0.5,
+    },
+  ]);
+
   const onLayout = () => {
     const ref = containerRef.current as any;
     if (ref) {
@@ -76,6 +91,14 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     }
   };
 
+  const circleXPosition = isRadialCircleVariant
+    ? centerValue < value
+      ? -7
+      : 4
+    : 0;
+
+  const strokeLinecap = isRadialCircleVariant ? 'square' : 'round';
+
   return (
     <View
       onLayout={onLayout}
@@ -112,7 +135,7 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
               strokeWidth={sliderWidth}
               stroke={sliderTrackColor}
               fill="none"
-              strokeLinecap="round"
+              strokeLinecap={strokeLinecap}
               d={`M${startPoint.x},${startPoint.y} A ${radius},${radius},0,${
                 startRadian - radianValue >= Math.PI ? '1' : '0'
               },1,${endPoint.x},${endPoint.y}`}
@@ -121,13 +144,13 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
               strokeWidth={sliderWidth}
               stroke="url(#gradient)"
               fill="none"
-              strokeLinecap="round"
+              strokeLinecap={strokeLinecap}
               d={`M${startPoint.x},${startPoint.y} A ${radius},${radius},0,${
                 startRadian - currentRadian >= Math.PI ? '1' : '0'
               },1,${curPoint.x},${curPoint.y}`}
             />
             <Circle
-              cx={curPoint.x}
+              cx={curPoint.x + circleXPosition}
               cy={curPoint.y}
               r={thumbRadius}
               fill={thumbColor || thumbBorderColor}

src/components/RadialSlider/RadialSlider.tsx

@@ -36,7 +36,7 @@ export const defaultProps = {
   valueStyle: {},
   unitStyle: {},
   buttonContainerStyle: {},
-  letIconStyle: {},
+  leftIconStyle: {},
   rightIconStyle: {},
   openingRadian: Math.PI / 3,
   dynamicMarker: false,

src/components/RadialSlider/SliderDefaultProps.ts

@@ -36,7 +36,7 @@ export const defaultSpeedoMeterProps = {
   valueStyle: {},
   unitStyle: {},
   buttonContainerStyle: {},
-  letIconStyle: {},
+  leftIconStyle: {},
   rightIconStyle: {},
   openingRadian: Math.PI / 3,
   dynamicMarker: false,

src/components/RadialSlider/SpeedometerDefaultProps.ts

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
 import {
   createRange,
   getExtraSize,
@@ -17,24 +16,24 @@ const useRadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     thumbRadius,
     thumbBorderWidth,
     min,
-    letIconStyle,
-    disabled,
-    value,
-    rightIconStyle,
     max,
     variant,
     step,
   } = props;
 
+  const centerValue = Math.round((max - min) / 2) as number;
+
   const isRadialCircleVariant = variant === appConstants.radialCircleSlider;
 
-  const radianValue = isRadialCircleVariant ? 0.01 : openingRadian;
+  const radianValue = isRadialCircleVariant ? 0.057 : openingRadian;
 
   const isMarkerVariant = variant === appConstants.speedoMeterMarker;
 
   const angle = (radianValue * 180.0) / Math.PI;
 
-  const lineCount = (360 - angle * 2) as number;
+  const addRadialCircleCount = isRadialCircleVariant ? 6 : 0;
+
+  const lineCount = (360 - angle * 2 + addRadialCircleCount) as number;
 
   const lines = createRange(min, lineCount + min, 1);
 
@@ -65,20 +64,6 @@ const useRadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     thumbBorderWidth
   );
 
-  const leftButtonStyle = StyleSheet.flatten([
-    letIconStyle,
-    (disabled || min === value) && {
-      opacity: 0.5,
-    },
-  ]);
-
-  const rightButtonStyle = StyleSheet.flatten([
-    rightIconStyle,
-    (disabled || max === value) && {
-      opacity: 0.5,
-    },
-  ]);
-
   const marks = useMemo(() => {
     const stepsLength = Math.round((max - min) / step);
 
@@ -102,12 +87,11 @@ const useRadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     startPoint,
     endPoint,
     startRadian,
-    leftButtonStyle,
-    rightButtonStyle,
     radianValue,
     isMarkerVariant,
     marks,
     isRadialCircleVariant,
+    centerValue,
   };
 };
 

src/components/RadialSlider/hooks/useRadialSlider.ts

@@ -131,7 +131,7 @@ export interface RadialSliderProps {
   /**
    * Left Icon styling.
    */
-  letIconStyle?: StyleProp<ViewStyle>;
+  leftIconStyle?: StyleProp<ViewStyle>;
   /**
    * Right Icon styling.
    */