feat(pencil): Add theme props for update react-native-awesome-slider

alantoa · Mar 9, 2022 · a59ef98 · a59ef98
1 parent 6fbb8b9
commit a59ef98
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 17 deletions.
diff --git a/example/package.json b/example/package.json
@@ -17,7 +17,7 @@
     "lottie-react-native": "^5.0.1",
     "react": "17.0.2",
     "react-native": "^0.67.3",
-    "react-native-awesome-slider": "^0.1.14",
+    "react-native-awesome-slider": "^1.4.0",
     "react-native-gesture-handler": "1.10.3",
     "react-native-orientation-locker": "^1.4.0",
     "react-native-reanimated": "^2.3.1",

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -5803,10 +5803,10 @@ react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-native-awesome-slider@^0.1.14:
-  version "0.1.18"
-  resolved "https://registry.yarnpkg.com/react-native-awesome-slider/-/react-native-awesome-slider-0.1.18.tgz#5c13199209256525ad7b9d5517901b581d5670c0"
-  integrity sha512-VBvYcJAu7j6DX5HvyiK8PLD4pEalX1aor/TK5EKA+GfjSWl5RSIGXYj3b+1az2aH+jf1z1+ThdGbrSTaeDCj/w==
+react-native-awesome-slider@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-awesome-slider/-/react-native-awesome-slider-1.4.0.tgz#866fb44c6b379cb1c511e258724dfeca124d4367"
+  integrity sha512-asK/bUaY0NEr0qKcG1zm4azyZcE3i/4UXmra3/CWvLJtkBgRirpNxJI3K1bi2D51o3RF5G3SrL5hap+zi/Bslg==
 
 react-native-codegen@^0.0.8:
   version "0.0.8"

diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "lottie-react-native": "^5.0.1",
     "metro-react-native-babel-preset": "^0.66.2",
     "react-native": "0.66.4",
-    "react-native-awesome-slider": "^0.1.14",
+    "react-native-awesome-slider": "^1.4.0",
     "react-native-builder-bob": "^0.18.2",
     "react-native-gesture-handler": "1.10.3",
     "react-native-orientation-locker": "*",

diff --git a/src/index.tsx b/src/index.tsx
@@ -14,7 +14,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
-import { Slider } from 'react-native-awesome-slider/src/index';
+import { Slider, SliderThemeType } from 'react-native-awesome-slider/src/index';
 import { clamp } from 'react-native-awesome-slider/src/utils';
 import type { TapGestureHandlerEventPayload } from 'react-native-gesture-handler';
 import {
@@ -78,6 +78,7 @@ export type IProps = VideoProperties & {
   onPanStartEvent?: (ctx: PanGestureHandlerEventPayload) => void;
   onPanEvent?: (ctx: PanGestureHandlerEventPayload) => void;
   onPanEndEvent?: (ctx: PanGestureHandlerEventPayload) => void;
+  theme?: SliderThemeType;
 };
 export type VideoPlayerRef = {
   setPlay: () => void;
@@ -111,6 +112,12 @@ const VideoPlayer = forwardRef<VideoPlayerRef, IProps>(
       onPanStartEvent,
       onPanEvent,
       onPanEndEvent,
+      theme = {
+        minimumTrackTintColor: palette.Main(1),
+        maximumTrackTintColor: palette.B(0.6),
+        cacheTrackTintColor: palette.G1(1),
+        bubbleBackgroundColor: palette.B(0.8),
+      },
       ...rest
     },
     ref,
@@ -916,8 +923,7 @@ const VideoPlayer = forwardRef<VideoPlayerRef, IProps>(
                               fullScreenSliderStyle,
                             ]}>
                             <Slider
-                              minimumTrackTintColor={palette.Main(1)}
-                              maximumTrackTintColor={palette.B(0.3)}
+                              theme={theme}
                               progress={progress}
                               onSlidingComplete={onSlidingComplete}
                               onSlidingStart={onSlidingStart}
@@ -995,9 +1001,7 @@ const VideoPlayer = forwardRef<VideoPlayerRef, IProps>(
         />
         <Animated.View style={[styles.slider, bottomSliderStyle]}>
           <Slider
-            minimumTrackTintColor={palette.Main(1)}
-            maximumTrackTintColor={palette.B(0.6)}
-            cacheTrackTintColor={palette.G1(1)}
+            theme={theme}
             progress={progress}
             onSlidingComplete={onSlidingComplete}
             onSlidingStart={onSlidingStart}
@@ -1007,7 +1011,6 @@ const VideoPlayer = forwardRef<VideoPlayerRef, IProps>(
             bubble={(value: number) => {
               return secondToTime(value);
             }}
-            bubbleBackgroundColor={palette.B(0.8)}
             disableTapEvent
             onTap={onTapSlider}
             thumbScaleValue={controlViewOpacity}

diff --git a/yarn.lock b/yarn.lock
@@ -7368,10 +7368,10 @@ react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-native-awesome-slider@^0.1.14:
-  version "0.1.14"
-  resolved "https://registry.npmjs.org/react-native-awesome-slider/-/react-native-awesome-slider-0.1.14.tgz#b598ba7b6f89633cba2b61f64d802dca5d17e734"
-  integrity sha512-HL+ALDKXnXCL3dZoj1yfYez7HLLOu1iUNpq3lsjJ5gjBgRK84JqXx8rsKQaRgcHLARgScPnYDpRuf2gToVDqvg==
+react-native-awesome-slider@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-awesome-slider/-/react-native-awesome-slider-1.4.0.tgz#866fb44c6b379cb1c511e258724dfeca124d4367"
+  integrity sha512-asK/bUaY0NEr0qKcG1zm4azyZcE3i/4UXmra3/CWvLJtkBgRirpNxJI3K1bi2D51o3RF5G3SrL5hap+zi/Bslg==
 
 react-native-builder-bob@^0.18.2:
   version "0.18.2"