Revert "Convert EuiSwitch to TS (elastic#2243)"

This reverts commit 39dbcf6.

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';

src/components/form/switch/__snapshots__/switch.test.tsx.snap → 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>
 `;

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>;
+}

src/components/form/switch/index.js

@@ -0,0 +1 @@
+export { EuiSwitch } from './switch';

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

src/components/form/switch/switch.test.tsx → 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();
   });