From 39dbcf69adca4b5f6181e97d56b49e5fb04c1e86 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompsongl@users.noreply.github.com>
Date: Wed, 21 Aug 2019 14:36:19 -0500
Subject: [PATCH] Convert `EuiSwitch` to TS (#2243)

* convert euiswitch to ts

* remove test file

* euiswitchevent; store id in state

* change interface to type

* CL
---
 CHANGELOG.md                                  |  2 +
 src/components/form/index.d.ts                |  1 -
 ...itch.test.js.snap => switch.test.tsx.snap} | 10 ++-
 src/components/form/switch/index.d.ts         | 21 -----
 src/components/form/switch/index.js           |  1 -
 src/components/form/switch/index.ts           |  1 +
 src/components/form/switch/switch.js          | 86 -------------------
 .../{switch.test.js => switch.test.tsx}       | 12 ++-
 src/components/form/switch/switch.tsx         | 86 +++++++++++++++++++
 9 files changed, 107 insertions(+), 113 deletions(-)
 rename src/components/form/switch/__snapshots__/{switch.test.js.snap => switch.test.tsx.snap} (95%)
 delete mode 100644 src/components/form/switch/index.d.ts
 delete mode 100644 src/components/form/switch/index.js
 create mode 100644 src/components/form/switch/index.ts
 delete mode 100644 src/components/form/switch/switch.js
 rename src/components/form/switch/{switch.test.js => switch.test.tsx} (65%)
 create mode 100644 src/components/form/switch/switch.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31f8fa0f268..91df2d6e522 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiSwitch` to TypeScript ([#2243](https://github.com/elastic/eui/pull/2243))
+
 **Bug fixes**
 
 - Added missing `viewBox` attribute to Docker, Kubernetes, and Redis logos ([#2240](https://github.com/elastic/eui/pull/2240))
diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
index 366419d36f9..a31e554069b 100644
--- a/src/components/form/index.d.ts
+++ b/src/components/form/index.d.ts
@@ -9,7 +9,6 @@ import { CommonProps } from '../common';
 /// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./super_select/index.d.ts" />
-/// <reference path="./switch/index.d.ts" />
 /// <reference path="./text_area/index.d.ts" />
 
 import { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react';
diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
similarity index 95%
rename from src/components/form/switch/__snapshots__/switch.test.js.snap
rename to src/components/form/switch/__snapshots__/switch.test.tsx.snap
index 642f2dce792..b05767ccc4d 100644
--- a/src/components/form/switch/__snapshots__/switch.test.js.snap
+++ b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
   class="euiSwitch"
 >
   <button
+    aria-checked="false"
     class="euiSwitch__button"
     id="generated-id"
     role="switch"
@@ -40,7 +41,9 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
   <label
     class="euiSwitch__label"
     for="generated-id"
-  />
+  >
+    Label
+  </label>
 </div>
 `;
 
@@ -49,6 +52,7 @@ exports[`EuiSwitch is rendered 1`] = `
   class="euiSwitch testClass1 testClass2"
 >
   <button
+    aria-checked="false"
     aria-label="aria-label"
     class="euiSwitch__button"
     data-test-subj="test subject string"
@@ -86,6 +90,8 @@ exports[`EuiSwitch is rendered 1`] = `
   <label
     class="euiSwitch__label"
     for="test"
-  />
+  >
+    Label
+  </label>
 </div>
 `;
diff --git a/src/components/form/switch/index.d.ts b/src/components/form/switch/index.d.ts
deleted file mode 100644
index 8bd9f11e8c4..00000000000
--- a/src/components/form/switch/index.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { CommonProps } from '../../common';
-
-import { FunctionComponent, ButtonHTMLAttributes, ReactNode } from 'react';
-
-declare module '@elastic/eui' {
-  /**
-   * @see './switch.js'
-   */
-  export type EuiSwitchProps = CommonProps &
-    ButtonHTMLAttributes<HTMLButtonElement> & {
-      label: ReactNode;
-      checked: boolean;
-      onChange: (
-        event: React.FormEvent<HTMLButtonElement & { checked: boolean }>
-      ) => void;
-      disabled?: boolean;
-      compressed?: boolean;
-    };
-
-  export const EuiSwitch: FunctionComponent<EuiSwitchProps>;
-}
diff --git a/src/components/form/switch/index.js b/src/components/form/switch/index.js
deleted file mode 100644
index 893cd7f7f6c..00000000000
--- a/src/components/form/switch/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiSwitch } from './switch';
diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts
new file mode 100644
index 00000000000..6c4ce9a8635
--- /dev/null
+++ b/src/components/form/switch/index.ts
@@ -0,0 +1 @@
+export { EuiSwitch, EuiSwitchEvent, EuiSwitchProps } from './switch';
diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
deleted file mode 100644
index 3395b8a97be..00000000000
--- a/src/components/form/switch/switch.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { Component } from 'react';
-
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import makeId from '../../form/form_row/make_id';
-import { EuiIcon } from '../../icon';
-
-export class EuiSwitch extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      switchId: props.id || makeId(),
-    };
-  }
-
-  onClick = e => {
-    e.target.checked = !this.props.checked;
-    this.props.onChange(e);
-  };
-
-  render() {
-    const {
-      label,
-      id,
-      name,
-      checked,
-      disabled,
-      compressed,
-      onChange,
-      className,
-      ...rest
-    } = this.props;
-
-    const { switchId } = this.state;
-
-    const classes = classNames(
-      'euiSwitch',
-      {
-        'euiSwitch--compressed': compressed,
-      },
-      className
-    );
-
-    return (
-      <div className={classes}>
-        <button
-          id={switchId}
-          aria-checked={checked}
-          className="euiSwitch__button"
-          role="switch"
-          disabled={disabled}
-          onClick={this.onClick}
-          {...rest}>
-          <span className="euiSwitch__body">
-            <span className="euiSwitch__thumb" />
-            <span className="euiSwitch__track">
-              <EuiIcon type="cross" size="m" className="euiSwitch__icon" />
-
-              <EuiIcon
-                type="check"
-                size="m"
-                className="euiSwitch__icon euiSwitch__icon--checked"
-              />
-            </span>
-          </span>
-        </button>
-
-        <label className="euiSwitch__label" htmlFor={switchId}>
-          {label}
-        </label>
-      </div>
-    );
-  }
-}
-
-EuiSwitch.propTypes = {
-  name: PropTypes.string,
-  id: PropTypes.string,
-  label: PropTypes.node,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  compressed: PropTypes.bool,
-};
diff --git a/src/components/form/switch/switch.test.js b/src/components/form/switch/switch.test.tsx
similarity index 65%
rename from src/components/form/switch/switch.test.js
rename to src/components/form/switch/switch.test.tsx
index 50927c7fa6e..a564df98ca1 100644
--- a/src/components/form/switch/switch.test.js
+++ b/src/components/form/switch/switch.test.tsx
@@ -4,17 +4,25 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiSwitch } from './switch';
 
+const props = {
+  checked: false,
+  label: 'Label',
+  onChange: () => {},
+};
+
 jest.mock('../form_row/make_id', () => () => 'generated-id');
 
 describe('EuiSwitch', () => {
   test('is rendered', () => {
-    const component = render(<EuiSwitch id="test" {...requiredProps} />);
+    const component = render(
+      <EuiSwitch id="test" {...props} {...requiredProps} />
+    );
 
     expect(component).toMatchSnapshot();
   });
 
   test('assigns automatically generated ID to label', () => {
-    const component = render(<EuiSwitch />);
+    const component = render(<EuiSwitch {...props} />);
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
new file mode 100644
index 00000000000..334b7394bb6
--- /dev/null
+++ b/src/components/form/switch/switch.tsx
@@ -0,0 +1,86 @@
+import React, {
+  ButtonHTMLAttributes,
+  FunctionComponent,
+  ReactNode,
+  useState,
+} from 'react';
+import classNames from 'classnames';
+
+import { CommonProps, Omit } from '../../common';
+import makeId from '../../form/form_row/make_id';
+import { EuiIcon } from '../../icon';
+
+export type EuiSwitchEvent = React.BaseSyntheticEvent<
+  React.MouseEvent<HTMLButtonElement>,
+  HTMLButtonElement,
+  EventTarget & {
+    checked: boolean;
+  }
+>;
+
+export type EuiSwitchProps = CommonProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+    label: ReactNode;
+    checked: boolean;
+    onChange: (event: EuiSwitchEvent) => void;
+    disabled?: boolean;
+    compressed?: boolean;
+  };
+
+export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
+  label,
+  id,
+  name,
+  checked,
+  disabled,
+  compressed,
+  onChange,
+  className,
+  ...rest
+}) => {
+  const [switchId] = useState(id || makeId());
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const event = (e as unknown) as EuiSwitchEvent;
+    event.target.checked = !checked;
+    onChange(event);
+  };
+
+  const classes = classNames(
+    'euiSwitch',
+    {
+      'euiSwitch--compressed': compressed,
+    },
+    className
+  );
+
+  return (
+    <div className={classes}>
+      <button
+        id={switchId}
+        aria-checked={checked}
+        className="euiSwitch__button"
+        role="switch"
+        disabled={disabled}
+        onClick={onClick}
+        {...rest}>
+        <span className="euiSwitch__body">
+          <span className="euiSwitch__thumb" />
+          <span className="euiSwitch__track">
+            <EuiIcon type="cross" size="m" className="euiSwitch__icon" />
+
+            <EuiIcon
+              type="check"
+              size="m"
+              className="euiSwitch__icon euiSwitch__icon--checked"
+            />
+          </span>
+        </span>
+      </button>
+
+      <label className="euiSwitch__label" htmlFor={switchId}>
+        {label}
+      </label>
+    </div>
+  );
+};