From 38bcfa2f6af54db05ef0249bb8326a9d8936b362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kamil=20Moska=C5=82a?=
 <91079590+moskalakamil@users.noreply.github.com>
Date: Mon, 15 Jul 2024 10:13:21 +0200
Subject: [PATCH] chore(example): update `MultiValueControl` types (#4003)

---
 examples/basic/src/MultiValueControl.tsx  | 17 ++++++++---------
 examples/basic/src/components/Overlay.tsx | 22 +++++++---------------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/examples/basic/src/MultiValueControl.tsx b/examples/basic/src/MultiValueControl.tsx
index bf58f3a9..d9298ec3 100644
--- 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
index b4a196da..7d56cad4 100644
--- 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);