Convert EuiSwitch to TS

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))

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

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

src/components/form/switch/index.ts

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

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

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