Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stricter typing for onValueChange in SegmentedButtons (TypeScript support) #4528

Open
soham04 opened this issue Oct 18, 2024 · 0 comments
Open

Stricter typing for onValueChange in SegmentedButtons (TypeScript support) #4528

soham04 opened this issue Oct 18, 2024 · 0 comments
Labels
bug

Comments

@soham04
Copy link

soham04 commented Oct 18, 2024

Description:
In TypeScript projects, the onValueChange function of the SegmentedButtons component currently returns a generic string. This creates challenges when assigning the value to a variable that has a specific union type (e.g., Nutrient = 'protein' | 'fat' | 'carbs'). Developers are forced to implement additional validation and type casting, which can lead to less clean code and potential runtime errors.

Steps to reproduce:
Define a union type for valid button values.
Use the SegmentedButtons component and attempt to directly assign the onValueChange value to the typed variable.
TypeScript will raise an error due to the mismatch in types.

Example Code:

type Nutrient = 'protein' | 'fat' | 'carbs';

// State variable for the selected nutrient
const [nutrient, setNutrient] = useState<Nutrient>('protein');

<SegmentedButtons
    value={nutrient}
    onValueChange={(value) => {
        setNutrient(value); // TypeScript expects `value` to be Nutrient here
    }}
    buttons={[
        { value: 'protein', label: 'Protein' },
        { value: 'fat', label: 'Fats' },
        { value: 'carbs', label: 'Carbs' },
    ]}
/>

The Issue:
The problem arises in the onValueChange callback. Since the value parameter is inferred as a string, TypeScript cannot guarantee that it is one of the valid Nutrient values. Thus, if you try to assign value directly to nutrient, TypeScript will raise a type error:

Error
Type 'string' is not assignable to type 'Nutrient'.

Environment:

    "react-native-paper": "^5.12.5",

**Willingness to Contribute:**
I am willing to contribute to solving this issue if assigned under Hacktoberfest. I look forward to helping enhance the library for better TypeScript support.
    "typescript": "5.0.4"
@soham04 soham04 added the bug label Oct 18, 2024
jboteros added a commit to jboteros/react-native-paper that referenced this issue Oct 23, 2024
@jboteros
Stricter typing for SegmentedButtons component
5e68e06 
Related to callstack#4528

Add stricter typing for `onValueChange` in `SegmentedButtons` component to support union types in TypeScript projects.

* Modify `src/components/SegmentedButtons/SegmentedButtons.tsx` to accept a generic type parameter for the `value` and `onValueChange` props.
  * Update `ConditionalValue` type to use the generic type parameter.
  * Update `Props` type to use the generic type parameter.
* Update example files to demonstrate the usage of the stricter typing:
  * `example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx`
  * `example/src/Examples/SegmentedButtonsExample.tsx`
  * `example/src/Examples/ToggleButtonExample.tsx`

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/callstack/react-native-paper/issues/4528?shareId=XXXX-XXXX-XXXX-XXXX).
@jboteros jboteros mentioned this issue Oct 23, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@soham04