chore(example): update MultiValueControl types (#4003)

TheWidlarzGroup · Jul 15, 2024 · 38bcfa2 · 38bcfa2
1 parent 39cf477
commit 38bcfa2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/examples/basic/src/MultiValueControl.tsx b/examples/basic/src/MultiValueControl.tsx
@@ -1,5 +1,4 @@
-import React, {FunctionComponent} from 'react';
-
+import React from 'react';
 import {
   StyleSheet,
   Text,
@@ -9,8 +8,6 @@ import {
 } from 'react-native';
 import {ResizeMode} from 'react-native-video';
 
-export type MultiValueControlPropType = number | string | ResizeMode;
-
 /*
  * MultiValueControl displays a list clickable text view
  */
@@ -21,12 +18,14 @@ interface MultiValueControlType<T> {
   // The selected value in values
   selected?: T;
   // callback to press onPress
-  onPress: (arg: MultiValueControlPropType) => void;
+  onPress: (arg: T) => void;
 }
 
-const MultiValueControl: FunctionComponent<
-  MultiValueControlType<MultiValueControlPropType>
-> = ({values, selected, onPress}) => {
+const MultiValueControl = <T extends number | string | ResizeMode>({
+  values,
+  selected,
+  onPress,
+}: MultiValueControlType<T>) => {
   const selectedStyle: TextStyle = StyleSheet.flatten([
     styles.option,
     {fontWeight: 'bold'},
@@ -39,7 +38,7 @@ const MultiValueControl: FunctionComponent<
 
   return (
     <View style={styles.container}>
-      {values.map((value: MultiValueControlPropType) => {
+      {values.map(value => {
         const _style = value === selected ? selectedStyle : unselectedStyle;
         return (
           <TouchableOpacity

diff --git a/examples/basic/src/components/Overlay.tsx b/examples/basic/src/components/Overlay.tsx
@@ -9,9 +9,7 @@ import {
   samplePoster,
   textTracksSelectionBy,
 } from '../constants';
-import MultiValueControl, {
-  MultiValueControlPropType,
-} from '../MultiValueControl.tsx';
+import MultiValueControl from '../MultiValueControl.tsx';
 import {
   AudioTrack,
   EnumValues,
@@ -204,22 +202,16 @@ const _Overlay = forwardRef<VideoRef, Props>((props, ref) => {
     ref.current?.seek(position);
   };
 
-  const onRateSelected = (value: MultiValueControlPropType) => {
-    if (typeof value === 'number') {
-      setRate(value);
-    }
+  const onRateSelected = (value: number) => {
+    setRate(value);
   };
 
-  const onVolumeSelected = (value: MultiValueControlPropType) => {
-    if (typeof value === 'number') {
-      setVolume(value);
-    }
+  const onVolumeSelected = (value: number) => {
+    setVolume(value);
   };
 
-  const onResizeModeSelected = (value: MultiValueControlPropType) => {
-    if (typeof value === 'string') {
-      setResizeMode(value as EnumValues<ResizeMode>);
-    }
+  const onResizeModeSelected = (value: EnumValues<ResizeMode>) => {
+    setResizeMode(value);
   };
 
   const toggleCache = () => setUseCache(!useCache);