diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx index 919865d28b..5df55313da 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx +++ b/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('walk'); + const [colorValue, setColorValue] = React.useState('walk'); return ( @@ -46,7 +48,7 @@ const SegmentButtonCustomColorCheck = () => { style={styles.group} /> Via Props - value={colorValue} onValueChange={setColorValue} theme={themeMock} diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx index e05e56566c..5c72ccf839 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx +++ b/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('walk'); return ( diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx index 759ce1c925..461ca24277 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx +++ b/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('walk'); return ( diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx index ee4929f6fa..25ee791817 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx +++ b/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([]); + const [value, setValue] = React.useState([]); return ( diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx index 04f72d0c9e..39877fa19b 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx +++ b/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([]); + const [value, setValue] = React.useState([]); return ( diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx index b2b0d7d999..d8a237e493 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx +++ b/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([]); + const [value, setValue] = React.useState([]); const filteredData = React.useMemo( () => - restaurantsData.filter((item) => value.includes(item.price.toString())), + restaurantsData.filter((item) => + value.includes(item.price.toString() as PriceRange) + ), [value] ); diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx index bf6cc9890f..2456e3e11a 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx +++ b/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('walk'); return ( @@ -19,7 +21,7 @@ const SegmentedButtonOnlyIcons = () => { }, { icon: 'train', - value: 'trainsit', + value: 'train', }, { icon: 'car', diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx index 640a20371b..d6219645bb 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx +++ b/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('walk'); return ( diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx index 6e24717635..172c80a5f6 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx +++ b/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('songs'); return ( diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx index b583553e0d..ad7eaf4e11 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx +++ b/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('walk'); return ( diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx index 8257dc3f6a..afc6dc9bf6 100644 --- a/example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx +++ b/example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx @@ -3,8 +3,10 @@ import { StyleSheet } from 'react-native'; import { List, SegmentedButtons } from 'react-native-paper'; +type TransportMode = 'walk' | 'train' | 'drive'; + const SegmentedButtonWithSelectedCheck = () => { - const [value, setValue] = React.useState(''); + const [value, setValue] = React.useState('walk'); return ( @@ -22,7 +24,7 @@ const SegmentedButtonWithSelectedCheck = () => { }, { icon: 'train', - value: 'transit', + value: 'train', label: 'Transit', showSelectedCheck: true, style: styles.button, diff --git a/src/components/SegmentedButtons/SegmentedButtons.tsx b/src/components/SegmentedButtons/SegmentedButtons.tsx index e5ab79629f..3cca92351a 100644 --- a/src/components/SegmentedButtons/SegmentedButtons.tsx +++ b/src/components/SegmentedButtons/SegmentedButtons.tsx @@ -15,12 +15,12 @@ import { getDisabledSegmentedButtonStyle } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { IconSource } from '../Icon'; -type ConditionalValue = +type ConditionalValue = | { /** * Array of the currently selected segmented button values. */ - value: string[]; + value: T[]; /** * Support multiple selected options. */ @@ -28,13 +28,13 @@ type ConditionalValue = /** * Function to execute on selection change */ - onValueChange: (value: string[]) => void; + onValueChange: (value: T[]) => void; } | { /** * Value of the currently selected segmented button. */ - value: string; + value: T; /** * Support multiple selected options. */ @@ -42,10 +42,10 @@ type ConditionalValue = /** * Function to execute on selection change */ - onValueChange: (value: string) => void; + onValueChange: (value: T) => void; }; -export type Props = { +export type Props = { /** * Buttons to display as options in toggle button. * Button should contain the following properties: @@ -62,7 +62,7 @@ export type Props = { * - `testID`: testID to be used on tests */ buttons: { - value: string; + value: T; icon?: IconSource; disabled?: boolean; accessibilityLabel?: string; @@ -81,7 +81,7 @@ export type Props = { density?: 'regular' | 'small' | 'medium' | 'high'; style?: StyleProp; theme?: ThemeProp; -} & ConditionalValue; +} & ConditionalValue; /** * Segmented buttons can be used to select options, switch views or sort elements.
@@ -126,7 +126,7 @@ export type Props = { * export default MyComponent; *``` */ -const SegmentedButtons = ({ +const SegmentedButtons = ({ value, onValueChange, buttons, @@ -134,7 +134,7 @@ const SegmentedButtons = ({ density, style, theme: themeOverrides, -}: Props) => { +}: Props) => { const theme = useInternalTheme(themeOverrides); return (