refactor: adjust generic type and examples

lukewalczak · lukewalczak · commit bfe649be4c08 · 2025-04-22T13:56:00.000+02:00
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx
@@ -20,7 +20,7 @@ const SegmentButtonCustomColorCheck = () => {
   return (
     <List.Section title={`Segmented Button - Custom Colors`}>
       <List.Subheader>Via Theme</List.Subheader>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         value={themeValue}
         onValueChange={setThemeValue}
         theme={themeMock}
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonDefault = () => {
 
   return (
     <List.Section title={`Segmented Button`}>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         value={value}
         onValueChange={setValue}
         buttons={[
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonDisabled = () => {
 
   return (
     <List.Section title={`Segmented Button - disabled`}>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         onValueChange={setValue}
         buttons={[
           {
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonMultiselect = () => {
 
   return (
     <List.Section title={`Segmented Button - multiselect`}>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         multiSelect
         onValueChange={setValue}
         value={value}
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonMultiselectIcons = () => {
 
   return (
     <List.Section title={`Segmented Button - multiselect only icons`}>
-      <SegmentedButtons<Size>
+      <SegmentedButtons
         multiSelect
         onValueChange={setValue}
         value={value}
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx
@@ -12,14 +12,15 @@ const SegmentedButtonMultiselectRealCase = () => {
 
   const filteredData = React.useMemo(
     () =>
-      value.includes(item.price.toString() as PriceRange)
-    ),
+      restaurantsData.filter((item) =>
+        value.includes(item.price.toString() as PriceRange)
+      ),
     [value]
   );
 
   return (
     <View style={styles.container}>
-      <SegmentedButtons<PriceRange>
+      <SegmentedButtons
         value={value}
         onValueChange={setValue}
         multiSelect
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonOnlyIcons = () => {
 
   return (
     <List.Section title={`Segmented Button - only icons`}>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         onValueChange={setValue}
         style={styles.group}
         value={value}
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonOnlyIconsWithCheck = () => {
 
   return (
     <List.Section title={`Segmented Button - icons + show selected check`}>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         onValueChange={setValue}
         style={styles.group}
         value={value}
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx
@@ -12,7 +12,7 @@ const SegmentedButtonRealCase = () => {
 
   return (
     <View style={styles.container}>
-      <SegmentedButtons<MediaType>
+      <SegmentedButtons
         value={value}
         onValueChange={setValue}
         buttons={[
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonWithDensity = () => {
 
   return (
     <List.Section title={`Segmented Button - only labels + density`}>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         onValueChange={setValue}
         value={value}
         density="medium"
diff --git a/example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx b/example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx
@@ -10,7 +10,7 @@ const SegmentedButtonWithSelectedCheck = () => {
 
   return (
     <List.Section title={`Segmented Button - show selected check`}>
-      <SegmentedButtons<TransportMode>
+      <SegmentedButtons
         onValueChange={setValue}
         value={value}
         style={styles.group}
@@ -24,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
@@ -15,7 +15,7 @@ import { getDisabledSegmentedButtonStyle } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { IconSource } from '../Icon';
 
-type ConditionalValue<T> =
+type ConditionalValue<T extends string = string> =
   | {
       /**
        * Array of the currently selected segmented button values.
@@ -45,7 +45,7 @@ type ConditionalValue<T> =
       onValueChange: (value: T) => void;
     };
 
-export type Props<T> = {
+export type Props<T extends string = string> = {
   /**
    * Buttons to display as options in toggle button.
    * Button should contain the following properties:
@@ -126,7 +126,7 @@ export type Props<T> = {
  * export default MyComponent;
  *```
  */
-const SegmentedButtons = <T,>({
+const SegmentedButtons = <T extends string = string>({
   value,
   onValueChange,
   buttons,

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const SegmentedButtonDisabled = () => {`
`10`	`10`
`11`	`11`	`return (`
`12`	`12`	<List.Section title={`Segmented Button - disabled`}>
`13`		`- <SegmentedButtons<TransportMode>`
	`13`	`+ <SegmentedButtons`
`14`	`14`	`onValueChange={setValue}`
`15`	`15`	`buttons={[`
`16`	`16`	`{`