fix: Made ToggleButton.Group TS compatible (#3543)

callstack · Jan 9, 2023 · 9273d37 · 9273d37
1 parent 90c0433
commit 9273d37
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 15 deletions.
diff --git a/example/src/Examples/ToggleButtonExample.tsx b/example/src/Examples/ToggleButtonExample.tsx
@@ -6,11 +6,23 @@ import { ToggleButton, List } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 type StatusState = 'checked' | 'unchecked';
+type Fruits = 'watermelon' | 'strawberries';
+
+enum FontsEnum {
+  NoFormat = 'no-format',
+  Italic = 'italic',
+  Bold = 'bold',
+  Underline = 'underlined',
+  ColorText = 'format-color',
+}
 
 const ToggleButtonExample = () => {
-  const [first, setFirst] = React.useState<string>('bold');
-  const [fruit, setFruit] = React.useState<string>('watermelon');
+  const [first, setFirst] = React.useState('bold');
+  const [fruit, setFruit] = React.useState<Fruits>('watermelon');
   const [status, setStatus] = React.useState<StatusState>('checked');
+  const [font, setFont] = React.useState<FontsEnum>(FontsEnum.NoFormat);
+
+  const handleFruit = (value: Fruits) => setFruit(value);
 
   return (
     <ScreenWrapper>
@@ -26,7 +38,7 @@ const ToggleButtonExample = () => {
           />
         </View>
       </List.Section>
-      <List.Section title="Group">
+      <List.Section title="Row">
         <ToggleButton.Row
           value={first}
           onValueChange={(value: string) => setFirst(value)}
@@ -38,12 +50,21 @@ const ToggleButtonExample = () => {
           <ToggleButton icon="format-color-text" value="format-color" />
         </ToggleButton.Row>
       </List.Section>
-      <List.Section title="Custom">
+      <List.Section title="Group & enums">
+        <ToggleButton.Group value={font} onValueChange={setFont}>
+          <ToggleButton
+            disabled
+            icon="format-italic"
+            value={FontsEnum.Italic}
+          />
+          <ToggleButton icon="format-bold" value={FontsEnum.Bold} />
+          <ToggleButton icon="format-underline" value={FontsEnum.Underline} />
+          <ToggleButton icon="format-color-text" value={FontsEnum.ColorText} />
+        </ToggleButton.Group>
+      </List.Section>
+      <List.Section title="Custom & union types">
         <View style={[styles.padding, styles.row]}>
-          <ToggleButton.Group
-            value={fruit}
-            onValueChange={(value: string) => setFruit(value)}
-          >
+          <ToggleButton.Group value={fruit} onValueChange={handleFruit}>
             <ImageBackground
               style={styles.customImage}
               source={{

diff --git a/src/components/ToggleButton/ToggleButtonGroup.tsx b/src/components/ToggleButton/ToggleButtonGroup.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
 
-export type Props = {
+export type Props<Value = string> = {
   /**
    * Function to execute on selection change.
    */
-  onValueChange: (value: string) => void | null;
+  onValueChange: (value: Value) => void;
   /**
    * Value of the currently selected toggle button.
    */
-  value: string | null;
+  value: Value | null;
   /**
    * React elements containing toggle buttons.
    */
   children: React.ReactNode;
 };
 
-type ToggleButtonContextType = {
-  value: string | null;
-  onValueChange: (item: string) => void | null;
+type ToggleButtonContextType<Value> = {
+  value: Value | null;
+  onValueChange: (item: Value) => void;
 };
 
 export const ToggleButtonGroupContext =
+  //@ts-expect-error: TS can't ensure the type from Group to children
   React.createContext<ToggleButtonContextType>(null as any);
 
 /**
@@ -54,7 +55,11 @@ export const ToggleButtonGroupContext =
  * export default MyComponent;
  *```
  */
-const ToggleButtonGroup = ({ value, onValueChange, children }: Props) => (
+const ToggleButtonGroup = <Value = string,>({
+  value,
+  onValueChange,
+  children,
+}: Props<Value>) => (
   <ToggleButtonGroupContext.Provider
     value={{
       value,