Convert radio form controls to TS

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `14.6.0`.
+- Converted `EuiRadio` and `EuiRadioGroup` to TypeScript ([#2438](https://github.com/elastic/eui/pull/2438))
 
 ## [`14.6.0`](https://github.com/elastic/eui/tree/v14.6.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/index.ts

@@ -0,0 +1,8 @@
+export { EuiRadio, EuiRadioProps } from './radio';
+
+export {
+  EuiRadioGroup,
+  EuiRadioGroupProps,
+  EuiRadioGroupOption,
+  EuiRadioGroupChangeCallback,
+} from './radio_group';

src/components/form/radio/radio.js → src/components/form/radio/radio.tsx

@@ -1,8 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FunctionComponent,
+  ChangeEventHandler,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
 import classNames from 'classnames';
+import { CommonProps, Omit } from '../../common';
 
-export const EuiRadio = ({
+export interface RadioProps {
+  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>;
+}
+
+export interface EuiRadioProps
+  extends CommonProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>,
+    RadioProps {}
+
+export const EuiRadio: FunctionComponent<EuiRadioProps> = ({
   className,
   id,
   name,
@@ -54,24 +78,3 @@ export const EuiRadio = ({
     </div>
   );
 };
-
-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,
-  compressed: false,
-};

src/components/form/radio/radio_group.test.js → src/components/form/radio/radio_group.test.tsx

@@ -9,7 +9,7 @@ jest.mock('../radio', () => ({ EuiRadio: 'eui_radio' }));
 describe('EuiRadioGroup', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiRadioGroup {...requiredProps} onChange={() => {}} />
+      <EuiRadioGroup {...requiredProps} options={[]} onChange={() => {}} />
     );
 
     expect(component).toMatchSnapshot();

src/components/form/radio/radio_group.tsx

@@ -0,0 +1,54 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import { CommonProps, Omit } from '../../common';
+
+import { EuiRadio, RadioProps } from './radio';
+
+export interface EuiRadioGroupOption
+  extends Omit<RadioProps, 'checked' | 'onChange'> {
+  id: string;
+}
+
+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 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>
+);