Merge pull request #20 from SimformSolutionsPvtLtd/feature/UNT-T8729

Check feasibility and manage to export a single RadialSlider component

Author: mukesh-simform

README.md

@@ -21,13 +21,13 @@ const RadialVariant = () => {
       </VariantCard>
       <VariantCard>
         <RadialSlider
+          variant={'radial-circle-slider'}
           value={speed}
           min={0}
           max={200}
           lineColor={Colors.darkGrey}
           sliderTrackColor={Colors.darkGrey}
           onChange={setSpeed}
-          variant="radial-circle-slider"
         />
       </VariantCard>
     </View>

example/src/modules/RadialVariant/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
-import { SpeedoMeter } from 'react-native-radial-slider';
+import { RadialSlider } from 'react-native-radial-slider';
 import VariantCard from '../../components/VariantCard';
 import { Colors } from '../../theme';
 
@@ -57,7 +57,8 @@ const SpeedoMeterVariant = () => {
         />
       </View>
       <VariantCard>
-        <SpeedoMeter
+        <RadialSlider
+          variant={'speedometer'}
           value={speed}
           min={0}
           max={200}
@@ -67,13 +68,13 @@ const SpeedoMeterVariant = () => {
         />
       </VariantCard>
       <VariantCard>
-        <SpeedoMeter
+        <RadialSlider
+          variant={'speedometer-marker'}
           value={speed}
           min={0}
           max={200}
           onChange={setSpeed}
           lineColor={Colors.darkGrey}
-          variant="speedometer-marker"
         />
       </VariantCard>
     </View>

example/src/modules/SpeedoMeterVariant/index.tsx

@@ -1,9 +1,9 @@
 import { View, Text } from 'react-native';
 import React from 'react';
 import { styles } from './styles';
-import type { SpeedoMeterProps } from './types';
+import type { CenterContentProps } from './types';
 
-const CenterContent = (props: SpeedoMeterProps) => {
+const CenterContent = (props: CenterContentProps) => {
   const {
     title,
     subTitle,
@@ -17,26 +17,28 @@ const CenterContent = (props: SpeedoMeterProps) => {
     isHideValue,
     value,
     centerContentStyle,
-    hideStyle,
+    unitValueContenStyle,
   } = props;
 
   return (
     <View style={[styles.hideCenterContent, centerContentStyle]}>
       {!isHideTitle && (
-        <Text style={[titleStyle, styles.helperText]}>{title}</Text>
+        <Text style={[styles.helperText, styles.subTitleWidth, titleStyle]}>
+          {title}
+        </Text>
       )}
       {!isHideValue && (
-        <View style={[styles.hideValue, hideStyle]}>
-          <Text style={[styles.valueText, valueStyle, styles.large_header]}>
+        <View style={[styles.hideValue, unitValueContenStyle]}>
+          <Text style={[styles.valueText, styles.large_header, valueStyle]}>
             {value}
           </Text>
-          <Text style={[styles.valueUnit, unitStyle, styles.helperText]}>
+          <Text style={[styles.valueUnit, styles.helperText, unitStyle]}>
             {unit}
           </Text>
         </View>
       )}
       {!isHideSubtitle && (
-        <Text style={[subTitleStyle, styles.helperText, styles.subTitleWidth]}>
+        <Text style={[styles.helperText, styles.subTitleWidth, subTitleStyle]}>
           {subTitle}
         </Text>
       )}

src/components/RadialSlider/CenterContent.tsx

@@ -17,7 +17,6 @@ const LineContent = (props: RadialSliderProps & typeof defaultProps) => {
     min,
     max,
     markerValue,
-    dynamicMarker,
     isHideMarkerLine,
     fixedMarker,
     value,
@@ -61,13 +60,7 @@ const LineContent = (props: RadialSliderProps & typeof defaultProps) => {
         };
 
         const markIndex = Math.floor(
-          (((((!dynamicMarker
-            ? fixedMarker
-              ? (value as number)
-              : (markerValue as number)
-            : value) -
-            min) *
-            100) /
+          (((((!fixedMarker ? (markerValue as number) : value) - min) * 100) /
             (max - min)) *
             lineCount) /
             100

src/components/RadialSlider/LineContent.tsx

@@ -13,7 +13,6 @@ const MarkerValueContent = (
     min,
     max,
     markerValue,
-    dynamicMarker,
     fixedMarker,
     markerValueInterval,
     value,
@@ -27,13 +26,7 @@ const MarkerValueContent = (
     <>
       {marks.map((mark, index) => {
         const markIndex = Math.floor(
-          (((((!dynamicMarker
-            ? fixedMarker
-              ? (value as number)
-              : (markerValue as number)
-            : value) -
-            min) *
-            100) /
+          (((((!fixedMarker ? (markerValue as number) : value) - min) * 100) /
             (max - min)) *
             lineCount) /
             100

src/components/RadialSlider/MarkerValueContent.tsx

@@ -31,6 +31,10 @@ const NeedleContent = (
 
         const needleRotation = activeIndex < 50 ? 122 : 119;
 
+        const circleSize = Math.round(radius / markerCircleSize) * 2;
+
+        const dynamicNeedleHeight = (needleHeight / radius) * 100 + 5;
+
         return (
           <G
             key={_value}
@@ -40,13 +44,15 @@ const NeedleContent = (
             x={markerPositionX}
             y={markerPositionY}>
             <Circle
-              r={markerCircleSize}
+              r={circleSize}
               cx={radius}
               cy={radius}
               fill={markerCircleColor}
             />
             <Polygon
-              points={`97, 118 103, 118 100, ${needleHeight}`}
+              points={`97, 118 103, 118 100, ${dynamicNeedleHeight}`}
+              x={radius - 100}
+              y={radius - 100}
               fill={needleBackgroundColor}
               strokeWidth={needleBorderWidth}
               stroke={needleColor}

src/components/RadialSlider/NeedleContent.tsx

@@ -15,7 +15,6 @@ import { Colors } from '../../theme';
 import { useSilderAnimation, useRadialSlider } from './hooks';
 import { defaultProps } from './SliderDefaultProps';
 import ButtonContent from './ButtonContent';
-import StautsContent from './StautsContent';
 import CenterContent from './CenterContent';
 import TailText from './TailText';
 import LineContent from './LineContent';
@@ -39,7 +38,6 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
     min,
     max,
     isHideSlider,
-    isHideStatus,
     isHideCenterContent,
     isHideTailText,
     isHideButtons,
@@ -162,8 +160,6 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
         )}
       </Svg>
       <View style={[styles.content, contentStyle]} pointerEvents="box-none">
-        {/* Status Content */}
-        {!isHideStatus && <StautsContent {...props} />}
         {/* Center Content */}
         {!isHideCenterContent && <CenterContent {...props} value={value} />}
         {/* Button Content */}

src/components/RadialSlider/RadialSlider.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Constants from '../../constants';
+import RadialSlider from './RadialSlider';
+import SpeedoMeter from './SpeedoMeter';
+import type { RootSliderProps } from './types';
+
+const RootSlider = (props: RootSliderProps) => {
+  const { variant } = props;
+
+  return variant === Constants.speedoMeterMarker ||
+    variant === Constants.speedometer ? (
+    <SpeedoMeter {...props} />
+  ) : (
+    <RadialSlider {...props} />
+  );
+};
+
+export default RootSlider;

src/components/RadialSlider/RootSlider.tsx

@@ -5,7 +5,6 @@ export const defaultProps = {
   min: 0,
   max: 100,
   step: 1,
-  statusTitle: '',
   value: 0,
   title: '',
   subTitle: 'Goal',
@@ -23,26 +22,11 @@ export const defaultProps = {
     { stop: '0%', color: Colors.pink },
     { stop: '100%', color: Colors.red },
   ],
-  onChange: (_v: number) => null as any,
-  onComplete: (_v: number) => null as any,
-  style: {},
-  statusContainerStyle: {},
-  statusTitleStyle: {},
-  statusValueStyle: {},
-  centerContentStyle: {},
-  contentStyle: {},
-  titleStyle: {},
-  subTitleStyle: {},
-  valueStyle: {},
-  unitStyle: {},
-  buttonContainerStyle: {},
-  leftIconStyle: {},
-  rightIconStyle: {},
+  onChange: (_v: number) => {},
+  onComplete: (_v: number) => {},
   openingRadian: Math.PI / 3,
-  dynamicMarker: false,
   disabled: false,
   isHideSlider: false,
-  isHideStatus: false,
   isHideTitle: false,
   isHideSubtitle: false,
   isHideValue: false,