From 25c46352b4c1bebb8be507d717b32b9c0aa824f3 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 23 Aug 2019 13:56:00 -0500
Subject: [PATCH] Revert "Convert `EuiSwitch` to TS (#2243)"

This reverts commit 39dbcf69adca4b5f6181e97d56b49e5fb04c1e86.
---
 src/components/form/index.d.ts                |  1 +
 ...itch.test.tsx.snap => switch.test.js.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.tsx => switch.test.js}       | 12 +--
 src/components/form/switch/switch.tsx         | 86 -------------------
 8 files changed, 113 insertions(+), 105 deletions(-)
 rename src/components/form/switch/__snapshots__/{switch.test.tsx.snap => switch.test.js.snap} (95%)
 create mode 100644 src/components/form/switch/index.d.ts
 create mode 100644 src/components/form/switch/index.js
 delete mode 100644 src/components/form/switch/index.ts
 create mode 100644 src/components/form/switch/switch.js
 rename src/components/form/switch/{switch.test.tsx => switch.test.js} (65%)
 delete mode 100644 src/components/form/switch/switch.tsx

diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
index a31e554069b..366419d36f9 100644
--- a/src/components/form/index.d.ts
+++ b/src/components/form/index.d.ts
@@ -9,6 +9,7 @@ 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.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.js.snap
similarity index 95%
rename from src/components/form/switch/__snapshots__/switch.test.tsx.snap
rename to src/components/form/switch/__snapshots__/switch.test.js.snap
index b05767ccc4d..642f2dce792 100644
--- a/src/components/form/switch/__snapshots__/switch.test.tsx.snap
+++ b/src/components/form/switch/__snapshots__/switch.test.js.snap
@@ -5,7 +5,6 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
   class="euiSwitch"
 >
   <button
-    aria-checked="false"
     class="euiSwitch__button"
     id="generated-id"
     role="switch"
@@ -41,9 +40,7 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
   <label
     class="euiSwitch__label"
     for="generated-id"
-  >
-    Label
-  </label>
+  />
 </div>
 `;
 
@@ -52,7 +49,6 @@ 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"
@@ -90,8 +86,6 @@ 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
new file mode 100644
index 00000000000..8bd9f11e8c4
--- /dev/null
+++ b/src/components/form/switch/index.d.ts
@@ -0,0 +1,21 @@
+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
new file mode 100644
index 00000000000..893cd7f7f6c
--- /dev/null
+++ b/src/components/form/switch/index.js
@@ -0,0 +1 @@
+export { EuiSwitch } from './switch';
diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts
deleted file mode 100644
index 6c4ce9a8635..00000000000
--- a/src/components/form/switch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiSwitch, EuiSwitchEvent, EuiSwitchProps } from './switch';
diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
new file mode 100644
index 00000000000..3395b8a97be
--- /dev/null
+++ b/src/components/form/switch/switch.js
@@ -0,0 +1,86 @@
+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.tsx b/src/components/form/switch/switch.test.js
similarity index 65%
rename from src/components/form/switch/switch.test.tsx
rename to src/components/form/switch/switch.test.js
index a564df98ca1..50927c7fa6e 100644
--- a/src/components/form/switch/switch.test.tsx
+++ b/src/components/form/switch/switch.test.js
@@ -4,25 +4,17 @@ 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" {...props} {...requiredProps} />
-    );
+    const component = render(<EuiSwitch id="test" {...requiredProps} />);
 
     expect(component).toMatchSnapshot();
   });
 
   test('assigns automatically generated ID to label', () => {
-    const component = render(<EuiSwitch {...props} />);
+    const component = render(<EuiSwitch />);
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
deleted file mode 100644
index 334b7394bb6..00000000000
--- a/src/components/form/switch/switch.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-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>
-  );
-};