From 2eec6a4c49819c1bc94f5f50d9d874451df9a793 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Tue, 15 Oct 2019 15:23:19 -0500
Subject: [PATCH] convert radio controls to TS

---
 CHANGELOG.md                                  |  2 +-
 src/components/form/index.d.ts                |  1 -
 ...radio.test.js.snap => radio.test.tsx.snap} |  0
 ...test.js.snap => radio_group.test.tsx.snap} |  0
 src/components/form/radio/index.d.ts          | 49 ---------------
 .../form/radio/{index.js => index.ts}         |  0
 .../radio/{radio.test.js => radio.test.tsx}   |  0
 .../form/radio/{radio.js => radio.tsx}        | 42 +++++++------
 src/components/form/radio/radio_group.js      | 57 -----------------
 ...dio_group.test.js => radio_group.test.tsx} |  0
 src/components/form/radio/radio_group.tsx     | 62 +++++++++++++++++++
 11 files changed, 87 insertions(+), 126 deletions(-)
 rename src/components/form/radio/__snapshots__/{radio.test.js.snap => radio.test.tsx.snap} (100%)
 rename src/components/form/radio/__snapshots__/{radio_group.test.js.snap => radio_group.test.tsx.snap} (100%)
 delete mode 100644 src/components/form/radio/index.d.ts
 rename src/components/form/radio/{index.js => index.ts} (100%)
 rename src/components/form/radio/{radio.test.js => radio.test.tsx} (100%)
 rename src/components/form/radio/{radio.js => radio.tsx} (65%)
 delete mode 100644 src/components/form/radio/radio_group.js
 rename src/components/form/radio/{radio_group.test.js => radio_group.test.tsx} (100%)
 create mode 100644 src/components/form/radio/radio_group.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8db4777f93b..a86d62fe8cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `14.5.0`.
+- Converted `EuiRadio` and `EuiRadioGroup` to TypeScript ([#2438](https://github.com/elastic/eui/pull/2438))
 
 ## [`14.5.0`](https://github.com/elastic/eui/tree/v14.5.0)
 
diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
index 366419d36f9..fc5c4e83c43 100644
--- a/src/components/form/index.d.ts
+++ b/src/components/form/index.d.ts
@@ -5,7 +5,6 @@ import { CommonProps } from '../common';
 /// <reference path="./field_search/index.d.ts" />
 /// <reference path="./field_text/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />
-/// <reference path="./radio/index.d.ts" />
 /// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./super_select/index.d.ts" />
diff --git a/src/components/form/radio/__snapshots__/radio.test.js.snap b/src/components/form/radio/__snapshots__/radio.test.tsx.snap
similarity index 100%
rename from src/components/form/radio/__snapshots__/radio.test.js.snap
rename to src/components/form/radio/__snapshots__/radio.test.tsx.snap
diff --git a/src/components/form/radio/__snapshots__/radio_group.test.js.snap b/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
similarity index 100%
rename from src/components/form/radio/__snapshots__/radio_group.test.js.snap
rename to src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
diff --git a/src/components/form/radio/index.d.ts b/src/components/form/radio/index.d.ts
deleted file mode 100644
index 432612057fe..00000000000
--- a/src/components/form/radio/index.d.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { CommonProps, Omit } from '../../common';
-
-import {
-  FunctionComponent,
-  ChangeEventHandler,
-  HTMLAttributes,
-  ReactNode,
-} from 'react';
-
-declare module '@elastic/eui' {
-  /**
-   * @see './radio_group.js'
-   */
-  export interface EuiRadioGroupOption {
-    id: string;
-    label?: ReactNode;
-  }
-
-  export type EuiRadioGroupChangeCallback = (id: string, value: string) => void;
-
-  export type EuiRadioGroupProps = CommonProps &
-    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
-      disabled?: boolean;
-      compressed?: boolean;
-      name?: string;
-      options?: EuiRadioGroupOption[];
-      idSelected?: string;
-      onChange: EuiRadioGroupChangeCallback;
-    };
-
-  export type x = EuiRadioGroupProps['onChange'];
-
-  export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps>;
-
-  export interface EuiRadioProps {
-    autoFocus?: boolean;
-    compressed?: boolean;
-    label?: ReactNode;
-    name?: string;
-    value?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    onChange: ChangeEventHandler<HTMLInputElement>; // overriding to make it required
-  }
-
-  export const EuiRadio: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiRadioProps
-  >;
-}
diff --git a/src/components/form/radio/index.js b/src/components/form/radio/index.ts
similarity index 100%
rename from src/components/form/radio/index.js
rename to src/components/form/radio/index.ts
diff --git a/src/components/form/radio/radio.test.js b/src/components/form/radio/radio.test.tsx
similarity index 100%
rename from src/components/form/radio/radio.test.js
rename to src/components/form/radio/radio.test.tsx
diff --git a/src/components/form/radio/radio.js b/src/components/form/radio/radio.tsx
similarity index 65%
rename from src/components/form/radio/radio.js
rename to src/components/form/radio/radio.tsx
index 30438a68a28..a59c20cad32 100644
--- a/src/components/form/radio/radio.js
+++ b/src/components/form/radio/radio.tsx
@@ -1,8 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FunctionComponent,
+  ChangeEventHandler,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
 import classNames from 'classnames';
+import { CommonProps } from '../../common';
 
-export const EuiRadio = ({
+export interface EuiRadioProps {
+  autoFocus?: boolean;
+  /**
+   * when `true` creates a shorter height radio row
+   */
+  compressed?: boolean;
+  label?: ReactNode;
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange: ChangeEventHandler<HTMLInputElement>; // overriding to make it required
+}
+
+export const EuiRadio: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLDivElement> & EuiRadioProps
+> = ({
   className,
   id,
   name,
@@ -55,21 +76,6 @@ export const EuiRadio = ({
   );
 };
 
-EuiRadio.propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  checked: PropTypes.bool.isRequired,
-  label: PropTypes.node,
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  /**
-   * when `true` creates a shorter height radio row
-   */
-  compressed: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-};
-
 EuiRadio.defaultProps = {
   checked: false,
   disabled: false,
diff --git a/src/components/form/radio/radio_group.js b/src/components/form/radio/radio_group.js
deleted file mode 100644
index 712b4932964..00000000000
--- a/src/components/form/radio/radio_group.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { EuiRadio } from './radio';
-
-export const EuiRadioGroup = ({
-  options,
-  idSelected,
-  onChange,
-  name,
-  className,
-  disabled,
-  compressed,
-  ...rest
-}) => (
-  <div className={className} {...rest}>
-    {options.map((option, index) => {
-      const { disabled: isOptionDisabled, ...optionRest } = option;
-      return (
-        <EuiRadio
-          className="euiRadioGroup__item"
-          key={index}
-          name={name}
-          checked={option.id === idSelected}
-          disabled={disabled || isOptionDisabled}
-          onChange={onChange.bind(null, option.id, option.value)}
-          compressed={compressed}
-          {...optionRest}
-        />
-      );
-    })}
-  </div>
-);
-
-EuiRadioGroup.propTypes = {
-  disabled: PropTypes.bool,
-  name: PropTypes.string,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      label: PropTypes.node,
-      value: PropTypes.string,
-      disabled: PropTypes.bool,
-    })
-  ).isRequired,
-  idSelected: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  /**
-   * Tightens up the spacing between radio rows and sends down the
-   * compressed prop to the radio itself
-   */
-  compressed: PropTypes.bool,
-};
-
-EuiRadioGroup.defaultProps = {
-  options: [],
-};
diff --git a/src/components/form/radio/radio_group.test.js b/src/components/form/radio/radio_group.test.tsx
similarity index 100%
rename from src/components/form/radio/radio_group.test.js
rename to src/components/form/radio/radio_group.test.tsx
diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx
new file mode 100644
index 00000000000..bd84c6aa24c
--- /dev/null
+++ b/src/components/form/radio/radio_group.tsx
@@ -0,0 +1,62 @@
+import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+import { CommonProps, Omit } from '../../common';
+
+import { EuiRadio } from './radio';
+
+export interface EuiRadioGroupOption {
+  id: string;
+  label?: ReactNode;
+  disabled?: boolean; // TODO: Added to fix TS error; disabled can be on group or item
+  value?: any; // TODO: Added to fix TS error; used in options map below
+}
+
+export type EuiRadioGroupChangeCallback = (id: string, value: string) => void;
+
+export type EuiRadioGroupProps = CommonProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    disabled?: boolean;
+    /**
+     * Tightens up the spacing between radio rows and sends down the
+     * compressed prop to the radio itself
+     */
+    compressed?: boolean;
+    name?: string;
+    options?: EuiRadioGroupOption[];
+    idSelected?: string;
+    onChange: EuiRadioGroupChangeCallback;
+  };
+
+export type x = EuiRadioGroupProps['onChange'];
+
+export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps> = ({
+  options = [],
+  idSelected,
+  onChange,
+  name,
+  className,
+  disabled,
+  compressed,
+  ...rest
+}) => (
+  <div className={className} {...rest}>
+    {options.map((option, index) => {
+      const { disabled: isOptionDisabled, ...optionRest } = option;
+      return (
+        <EuiRadio
+          className="euiRadioGroup__item"
+          key={index}
+          name={name}
+          checked={option.id === idSelected}
+          disabled={disabled || isOptionDisabled}
+          onChange={onChange.bind(null, option.id, option.value)}
+          compressed={compressed}
+          {...optionRest}
+        />
+      );
+    })}
+  </div>
+);
+
+EuiRadioGroup.defaultProps = {
+  options: [],
+};