Merge pull request #22 from SimformSolutionsPvtLtd/fix/UNT-T8848

Change wording and update READEME and gif
SimformSolutionsPvtLtd · Jun 23, 2022 · 6db973c · 6db973c
2 parents 97004bc + bf580a3
commit 6db973c
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 93 deletions.
diff --git a/README.md b/README.md
diff --git a/assets/RadialCircle.gif b/assets/RadialCircle.gif
diff --git a/assets/RadialSlider.gif b/assets/RadialSlider.gif
diff --git a/assets/RadialSliderExample.gif b/assets/RadialSliderExample.gif
diff --git a/src/components/RadialSlider/CenterContent.tsx b/src/components/RadialSlider/CenterContent.tsx
@@ -17,7 +17,7 @@ const CenterContent = (props: CenterContentProps) => {
     isHideValue,
     value,
     centerContentStyle,
-    unitValueContenStyle,
+    unitValueContentStyle,
   } = props;
 
   return (
@@ -28,7 +28,7 @@ const CenterContent = (props: CenterContentProps) => {
         </Text>
       )}
       {!isHideValue && (
-        <View style={[styles.hideValue, unitValueContenStyle]}>
+        <View style={[styles.hideValue, unitValueContentStyle]}>
           <Text style={[styles.valueText, styles.large_header, valueStyle]}>
             {value}
           </Text>

diff --git a/src/components/RadialSlider/RadialSlider.tsx b/src/components/RadialSlider/RadialSlider.tsx
@@ -116,12 +116,12 @@ const RadialSlider = (props: RadialSliderProps & typeof defaultProps) => {
             {linearGradient.map(
               (
                 item: {
-                  stop: NumberProp | undefined;
+                  offset: NumberProp | undefined;
                   color: Color | undefined;
                 },
                 index: React.Key | null | undefined
               ) => (
-                <Stop key={index} offset={item.stop} stopColor={item.color} />
+                <Stop key={index} offset={item.offset} stopColor={item.color} />
               )
             )}
           </LinearGradient>

diff --git a/src/components/RadialSlider/SliderDefaultProps.ts b/src/components/RadialSlider/SliderDefaultProps.ts
@@ -19,8 +19,8 @@ export const defaultProps = {
   lineColor: Colors.grey,
   lineSpace: 3,
   linearGradient: [
-    { stop: '0%', color: Colors.pink },
-    { stop: '100%', color: Colors.red },
+    { offset: '0%', color: Colors.skyBlue },
+    { offset: '100%', color: Colors.darkBlue },
   ],
   onChange: (_v: number) => {},
   onComplete: (_v: number) => {},

diff --git a/src/components/RadialSlider/SpeedoMeter.tsx b/src/components/RadialSlider/SpeedoMeter.tsx
@@ -40,7 +40,7 @@ const SpeedoMeter = (
     max,
     unitStyle,
     value = 0,
-    unitValueContenStyle,
+    unitValueContentStyle,
   } = props;
 
   const {
@@ -90,12 +90,12 @@ const SpeedoMeter = (
             {linearGradient?.map(
               (
                 item: {
-                  stop: NumberProp | undefined;
+                  offset: NumberProp | undefined;
                   color: Color | undefined;
                 },
                 index: React.Key | null | undefined
               ) => (
-                <Stop key={index} offset={item.stop} stopColor={item.color} />
+                <Stop key={index} offset={item.offset} stopColor={item.color} />
               )
             )}
           </LinearGradient>
@@ -138,9 +138,9 @@ const SpeedoMeter = (
           <CenterContent
             {...(props as object)}
             value={sliderValue}
-            unitValueContenStyle={[
+            unitValueContentStyle={[
               styles.centerText,
-              unitValueContenStyle,
+              unitValueContentStyle,
               // eslint-disable-next-line react-native/no-inline-styles
               { marginLeft: unit?.length ? unit?.length * 5 : 10 },
             ]}

diff --git a/src/components/RadialSlider/SpeedometerDefaultProps.ts b/src/components/RadialSlider/SpeedometerDefaultProps.ts
@@ -14,8 +14,8 @@ export const defaultSpeedoMeterProps = {
   lineColor: Colors.grey,
   lineSpace: 3,
   linearGradient: [
-    { stop: '0%', color: Colors.skyBlue },
-    { stop: '100%', color: Colors.darkBlue },
+    { offset: '0%', color: Colors.skyBlue },
+    { offset: '100%', color: Colors.darkBlue },
   ],
   onChange: (_v: number) => {},
   onComplete: (_v: number) => {},

diff --git a/src/components/RadialSlider/__tests__/__snapshots__/RadialSlider.test.tsx.snap b/src/components/RadialSlider/__tests__/__snapshots__/RadialSlider.test.tsx.snap
@@ -50,9 +50,9 @@ exports[`RadialSlider component Match Snapshot 1`] = `
           gradient={
             Array [
               0,
-              -21338,
+              -15756829,
               1,
-              -1423360,
+              -16042895,
             ]
           }
           gradientTransform={null}

diff --git a/src/components/RadialSlider/types.ts b/src/components/RadialSlider/types.ts
@@ -2,7 +2,7 @@ import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import type { Linecap } from 'react-native-svg';
 
 type RadialSliderExcludedProps = {
-  unitValueContenStyle?: StyleProp<ViewStyle>;
+  unitValueContentStyle?: StyleProp<ViewStyle>;
   markerCircleSize?: never;
   markerCircleColor?: never;
   markerPositionY?: never;
@@ -29,12 +29,12 @@ export type CenterContentProps = {
   isHideValue?: boolean;
   value?: number;
   centerContentStyle?: StyleProp<ViewStyle>;
-  unitValueContenStyle?: StyleProp<ViewStyle>;
+  unitValueContentStyle?: StyleProp<ViewStyle>;
 };
 
 export type LineContentProps = {
   radius?: number;
-  linearGradient?: { stop: string; color: string }[];
+  linearGradient?: { offset: string; color: string }[];
   thumbBorderWidth?: number;
   markerLineSize?: number;
   lineColor?: string;
@@ -192,7 +192,7 @@ export type RadialSliderProps = {
   /**
    * Gradient color of selected track.
    */
-  linearGradient?: { stop: string; color: string }[];
+  linearGradient?: { offset: string; color: string }[];
   /**
    * Callback function which fired on change in track.
    */
@@ -322,7 +322,7 @@ export type SpeedoMeterProps = RadialSliderProps & {
   /**
    * SpeedoMeter content styling.
    */
-  unitValueContenStyle?: StyleProp<ViewStyle>;
+  unitValueContentStyle?: StyleProp<ViewStyle>;
   /**
    * Size for marker circle.
    */