convert radio controls to TS

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)
 

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" />

src/components/form/radio/radio.js → 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,

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: [],
+};