chore(Switch): convert Switch to TypeScript

#2019

packages/patternfly-4/react-core/src/components/Switch/Switch.md

@@ -2,6 +2,7 @@
 title: 'Switch'
 cssPrefix: 'pf-c-switch'
 propComponents: ['Switch']
+typescript: true
 ---
 
 import { Switch } from '@patternfly/react-core';

packages/patternfly-4/react-core/src/components/Switch/Switch.js → packages/patternfly-4/react-core/src/components/Switch/Switch.tsx

@@ -1,49 +1,52 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import { HTMLProps, FormEvent } from 'react';
 import styles from '@patternfly/react-styles/css/components/Switch/switch';
 import { css } from '@patternfly/react-styles';
 import { CheckIcon } from '@patternfly/react-icons';
 import { getUniqueId } from '../../helpers/util';
+import { Omit } from '../../helpers/typeUtils';
 
-const propTypes = {
+export interface SwitchProps extends Omit<HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'> {
   /** id for the label. */
-  id: PropTypes.string,
+  id?: string,
   /** Additional classes added to the Switch */
-  className: PropTypes.string,
+  className?: string,
   /** Text value for the label */
-  label: PropTypes.string,
+  label?: string,
   /** Flag to show if the Switch is checked. */
-  isChecked: PropTypes.bool,
+  isChecked?: boolean,
   /** Flag to show if the Switch is disabled. */
-  isDisabled: PropTypes.bool,
+  isDisabled?: boolean,
   /** A callback for when the Switch selection changes. (isChecked, event) => {} */
-  onChange: PropTypes.func,
+  onChange?(checked: boolean, event: FormEvent<HTMLInputElement>): void;
   /** Adds accessible text to the Switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
-  'aria-label': props => {
-    if (!props.id && !props['aria-label']) {
-      return new Error('Switch requires either an id or aria-label to be specified');
-    }
-    return null;
-  },
-  /** Additional props are spread to the container <input> */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
+  'aria-label'?: string
 };
 
-const defaultProps = {
-  id: '',
-  className: '',
-  label: '',
-  isChecked: true,
-  isDisabled: false,
-  onChange: () => undefined,
-  'aria-label': ''
-};
+export class Switch extends React.Component<SwitchProps> {
+  id = '';
+
+  static defaultProps = {
+    id: '',
+    className: '',
+    label: '',
+    isChecked: true,
+    isDisabled: false,
+    'aria-label': '',
+    onChange: () => undefined as any
+  };
 
-class Switch extends React.Component {
-  id = this.props.id || getUniqueId();
+  constructor(props: SwitchProps) {
+    super(props);
+    if (!props.id && !props['aria-label']) {
+      // tslint:disable-next-line:no-console
+      console.error('Switch: Switch requires either an id or aria-label to be specified');
+    }
+    this.id =props.id || getUniqueId();
+  }
 
   render() {
-    const { id, className, label, isChecked, isDisabled, onChange, ...props } = this.props;
+    const { className, label, isChecked, isDisabled, onChange, ...props } = this.props;
     return (
       <label className={css(styles.switch, className)} htmlFor={this.id}>
         <input
@@ -77,7 +80,4 @@ class Switch extends React.Component {
   }
 }
 
-Switch.propTypes = propTypes;
-Switch.defaultProps = defaultProps;
-
 export default Switch;

packages/patternfly-4/react-core/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export * from './Switch';

packages/patternfly-4/react-integration/cypress/integration/switch.spec.ts

@@ -0,0 +1,29 @@
+describe('Switch Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#switch-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/switch-demo-nav-link')
+  });
+
+  it('Verify Switches exist and initial state', () => {
+    cy.get('#simple-switch').should('exist');
+    cy.get('#simple-switch').should('be.checked');
+    cy.get('#disabled-switch-off').should('exist');
+    cy.get('#disabled-switch-off').should('not.be.checked');
+  });
+
+  it('Verify switch can be toggled', () => {
+    cy.get('#simple-switch').click({ force: true });
+    cy.get('#simple-switch').should('not.be.checked');
+    cy.get('#simple-switch').click({ force: true });
+    cy.get('#simple-switch').should('be.checked');
+  });
+
+
+  it('Verify disabled switch can not be toggled', () => {
+    cy.get('#disabled-switch-off').should('be.disabled');
+    cy.get('#disabled-switch-off').should('not.be.checked');
+    cy.get('#disabled-switch-off').click({ force: true });
+    cy.get('#disabled-switch-off').should('not.be.checked');
+  });
+});

packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts

@@ -145,6 +145,11 @@ export const Demos: DemoInterface[] = [
     name: 'Radio Demo',
     componentType: Examples.RadioDemo
   },
+  {
+    id: 'switch-demo',
+    name: 'Switch Demo',
+    componentType: Examples.SwitchDemo
+  },
   {
     id: 'tab-demo',
     name: 'Tab Demo',

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Switch } from '@patternfly/react-core';
+
+interface SwitchState {
+  isChecked: boolean
+};
+export class SwitchDemo extends React.Component<{}, SwitchState> {
+  state = {
+    isChecked: true
+  };
+
+  handleChange = isChecked => {
+    this.setState({ isChecked });
+  };
+
+
+  render() {
+    const { isChecked } = this.state;
+    return (
+      <React.Fragment>
+        <Switch
+          id="simple-switch"
+          label={isChecked ? 'Message when on' : 'Message when off'}
+          onChange={this.handleChange}
+          aria-label="Switch"
+          isChecked={isChecked}
+        /> 
+        <br />
+        <Switch id="disabled-switch-off" aria-label="disabled switch" label="Message when on" isChecked={false} isDisabled />
+      </React.Fragment>
+    );
+  }
+}

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts

@@ -25,6 +25,7 @@ export * from './OptionsMenuDemo/OptionsMenuDemo';
 export * from './PopoverDemo/PopoverDemo';
 export * from './PageDemo/PageDemo';
 export * from './RadioDemo/RadioDemo';
+export * from './SwitchDemo/SwitchDemo';
 export * from './TabsDemo/TabsDemo';
 export * from './TextAreaDemo/TextAreaDemo';
 export * from './TextDemo/TextDemo';