From 3a0062e9fdf7003372e2fe63e9163b71285fe869 Mon Sep 17 00:00:00 2001
From: Jason Unger <jason@rocketrip.com>
Date: Fri, 18 May 2018 10:26:01 -0400
Subject: [PATCH] Updates to react-radio-group types

- Allow `value` of Radio component to be any
- Add most HTMLProps to RadioGroup component
- Fix typing for `Component` prop on RadioGroup to be a string or React
component
---
 types/react-radio-group/index.d.ts            | 18 ++++---
 .../react-radio-group-tests.tsx               | 49 ++++++++++++++++---
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/types/react-radio-group/index.d.ts b/types/react-radio-group/index.d.ts
index 5c3e6092ab..561599ed0a 100644
--- a/types/react-radio-group/index.d.ts
+++ b/types/react-radio-group/index.d.ts
@@ -6,17 +6,21 @@
 
 import * as React from 'react';
 
+// Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
+export type Omit<T, K extends keyof T> = Pick<T, ({ [P in keyof T]: P } & { [P in K]: never } & { [x: string]: never, [x: number]: never })[keyof T]>;
+
 export namespace Radio {
-    type RadioProps = React.InputHTMLAttributes<HTMLInputElement>;
+    type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'name' | 'role' | 'type' | 'aria-checked'> & {
+        value: any;
+    };
 }
 export const Radio: React.ComponentClass<Radio.RadioProps>;
 
 export namespace RadioGroup {
-    interface RadioGroupProps {
-        name?: string;
-        selectedValue?: React.InputHTMLAttributes<HTMLInputElement>['value'];
-        onChange?: (value: React.InputHTMLAttributes<HTMLInputElement>['value']) => void;
-        Component?: string | React.ReactElement<React.HTMLProps<HTMLElement>>;
-    }
+    type RadioGroupProps = Omit<React.HTMLProps<any>, 'onChange'> & {
+        selectedValue?: any;
+        onChange?: (value: any) => void;
+        Component?: React.ReactType<Omit<React.HTMLProps<any>, 'onChange' | 'role'>>;
+    };
 }
 export const RadioGroup: React.ComponentClass<RadioGroup.RadioGroupProps>;
diff --git a/types/react-radio-group/react-radio-group-tests.tsx b/types/react-radio-group/react-radio-group-tests.tsx
index d34d7d05ff..d99b8aeed2 100644
--- a/types/react-radio-group/react-radio-group-tests.tsx
+++ b/types/react-radio-group/react-radio-group-tests.tsx
@@ -1,24 +1,61 @@
 import * as React from 'react';
 import { Radio, RadioGroup } from "react-radio-group";
 
-class ReactRadioGroup extends React.Component<RadioGroup.RadioGroupProps, { selectedValue: React.InputHTMLAttributes<HTMLInputElement>['value'] }> {
+const DefaultComponent: React.SFC<React.HTMLProps<HTMLDivElement>> = ({ children, ...rest }) => {
+    return (
+        <div style={{ display: 'flex' }} {...rest}>
+            {children}
+        </div>
+    );
+};
+
+interface ReactRadioGroupState {
+    selectedValueA: any;
+    selectedValueB: any;
+}
+
+class ReactRadioGroup extends React.Component<RadioGroup.RadioGroupProps, ReactRadioGroupState> {
     state = {
-        selectedValue: 2,
+        selectedValueA: 2,
+        selectedValueB: true,
     };
 
-    handleChange: RadioGroup.RadioGroupProps['onChange'] = selectedValue => {
-        console.log(selectedValue);
-        this.setState({ selectedValue });
+    handleChange = (key: keyof ReactRadioGroupState) => (value: any) => {
+        console.log(key, value);
+        this.setState(state => {
+            return {
+                ...state,
+                [key]: value,
+            };
+        });
     }
 
     render() {
         return (
             <div>
-                <RadioGroup name="radioGroup" onChange={this.handleChange} selectedValue={this.state.selectedValue}>
+                <RadioGroup
+                    name="radioGroupA"
+                    onChange={this.handleChange('selectedValueA')}
+                    selectedValue={this.state.selectedValueA}
+                    Component={DefaultComponent}
+                    className="here-is-a-classname"
+                >
                     <Radio id="Option A" value="a" />
                     <Radio id="Option B" value={2} />
                     <Radio id="Option C" value={["hello"]} disabled />
                 </RadioGroup>
+                <RadioGroup
+                    name="radioGroupB"
+                    onChange={this.handleChange('selectedValueB')}
+                    selectedValue={this.state.selectedValueB}
+                    Component="span"
+                    style={{marginBottom: '10px'}}
+                >
+                    <Radio id="Option D" value={true} />
+                    <Radio id="Option E" value={null} />
+                    <Radio id="Option F" value={undefined} />
+                    <Radio id="Option G" value={{name: 'Mark'}} disabled />
+                </RadioGroup>
             </div>
         );
     }