refactor: segmented button typing (#4686)

Author: lukewalczak

example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx

@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'train' | 'drive';
+
 const themeMock = {
   colors: {
     onSurface: '#3700B3',
@@ -12,8 +14,8 @@ const themeMock = {
 };
 
 const SegmentButtonCustomColorCheck = () => {
-  const [themeValue, setThemeValue] = React.useState('');
-  const [colorValue, setColorValue] = React.useState('');
+  const [themeValue, setThemeValue] = React.useState<TransportMode>('walk');
+  const [colorValue, setColorValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - Custom Colors`}>
@@ -46,7 +48,7 @@ const SegmentButtonCustomColorCheck = () => {
         style={styles.group}
       />
       <List.Subheader>Via Props</List.Subheader>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         value={colorValue}
         onValueChange={setColorValue}
         theme={themeMock}

example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx

@@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'train' | 'drive';
+
 const SegmentedButtonDefault = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button`}>

example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx

@@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'disabled' | 'drive';
+
 const SegmentedButtonDisabled = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - disabled`}>

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx

@@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'transit' | 'drive';
+
 const SegmentedButtonMultiselect = () => {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [value, setValue] = React.useState<TransportMode[]>([]);
 
   return (
     <List.Section title={`Segmented Button - multiselect`}>

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx

@@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type Size = 'size-s' | 'size-m' | 'size-l' | 'size-xl' | 'size-xxl';
+
 const SegmentedButtonMultiselectIcons = () => {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [value, setValue] = React.useState<Size[]>([]);
 
   return (
     <List.Section title={`Segmented Button - multiselect only icons`}>

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx

@@ -5,12 +5,16 @@ import { Card, IconButton, SegmentedButtons } from 'react-native-paper';
 
 import { restaurantsData } from '../../../utils';
 
+type PriceRange = '1' | '2' | '3' | '4';
+
 const SegmentedButtonMultiselectRealCase = () => {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [value, setValue] = React.useState<PriceRange[]>([]);
 
   const filteredData = React.useMemo(
     () =>
-      restaurantsData.filter((item) => value.includes(item.price.toString())),
+      restaurantsData.filter((item) =>
+        value.includes(item.price.toString() as PriceRange)
+      ),
     [value]
   );
 

example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx

@@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'train' | 'drive';
+
 const SegmentedButtonOnlyIcons = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - only icons`}>
@@ -19,7 +21,7 @@ const SegmentedButtonOnlyIcons = () => {
           },
           {
             icon: 'train',
-            value: 'trainsit',
+            value: 'train',
           },
           {
             icon: 'car',

example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx

@@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'transit' | 'drive';
+
 const SegmentedButtonOnlyIconsWithCheck = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - icons + show selected check`}>

example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx

@@ -5,8 +5,10 @@ import { Card, IconButton, SegmentedButtons } from 'react-native-paper';
 
 import { songsData, albumsData } from '../../../utils';
 
+type MediaType = 'songs' | 'albums';
+
 const SegmentedButtonRealCase = () => {
-  const [value, setValue] = React.useState('songs');
+  const [value, setValue] = React.useState<MediaType>('songs');
 
   return (
     <View style={styles.container}>

example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx

@@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'transit' | 'drive';
+
 const SegmentedButtonWithDensity = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - only labels + density`}>