feat(switch): typescript (#530)

Author: Matt Goo

packages/switch/NativeControl.js renamed to packages/switch/NativeControl.tsx

@@ -20,16 +20,14 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
-import PropTypes from 'prop-types';
-
-
-const NativeControl = (props) => {
-  const {
-    rippleActivatorRef,
-    ...otherProps
-  } = props;
+import * as React from 'react';
+export interface NativeControlProps extends React.HTMLProps<HTMLInputElement> {
+  rippleActivatorRef?: React.RefObject<HTMLInputElement>;
+}
 
+const NativeControl: React.FunctionComponent<NativeControlProps> = ({
+  rippleActivatorRef, ...otherProps // eslint-disable-line react/prop-types
+}) => {
   return (
     <input
       type='checkbox'
@@ -41,18 +39,9 @@ const NativeControl = (props) => {
   );
 };
 
-NativeControl.propTypes = {
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  rippleActivatorRef: PropTypes.object,
-};
-
 NativeControl.defaultProps = {
   checked: false,
   disabled: false,
-  id: null,
-  rippleActivatorRef: null,
 };
 
 export default NativeControl;

packages/switch/ThumbUnderlay.js renamed to packages/switch/ThumbUnderlay.tsx

@@ -20,15 +20,28 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import {withRipple} from '@material/react-ripple';
+import * as React from 'react';
+import * as classnames from 'classnames';
+import * as Ripple from '@material/react-ripple';
 
-export class ThumbUnderlay extends React.Component {
-  init = (el) => {
-    this.props.initRipple(el, this.props.rippleActivator.current);
-  }
+export interface ThumbUnderlayProps
+  extends Ripple.InjectedProps<HTMLDivElement, HTMLInputElement>, React.HTMLProps<HTMLDivElement> {
+    rippleActivator: React.RefObject<HTMLInputElement>;
+    initRipple: (surface: HTMLDivElement, activator?: HTMLInputElement) => void;
+}
+
+export class ThumbUnderlay extends React.Component<ThumbUnderlayProps, {}> {
+  static defaultProps: Partial<ThumbUnderlayProps> = {
+    className: '',
+    initRipple: () => {},
+    unbounded: true,
+  };
+
+  init = (el: HTMLDivElement) => {
+    if (this.props.rippleActivator.current) {
+      this.props.initRipple(el, this.props.rippleActivator.current);
+    }
+  };
 
   get classes() {
     return classnames('mdc-switch__thumb-underlay', this.props.className);
@@ -45,34 +58,12 @@ export class ThumbUnderlay extends React.Component {
       /* eslint-enable */
       ...otherProps
     } = this.props;
-
     return (
-      <div
-        className={this.classes}
-        ref={this.init}
-        {...otherProps}
-      >
-        <div className='mdc-switch__thumb'>
-          {children}
-        </div>
+      <div className={this.classes} ref={this.init} {...otherProps}>
+        <div className='mdc-switch__thumb'>{children}</div>
       </div>
     );
   }
 }
 
-ThumbUnderlay.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  initRipple: PropTypes.func,
-  unbounded: PropTypes.bool,
-  rippleActivator: PropTypes.object,
-};
-
-ThumbUnderlay.defaultProps = {
-  className: '',
-  onChange: () => {},
-  initRipple: () => {},
-  unbounded: true,
-};
-
-export default withRipple(ThumbUnderlay);
+export default Ripple.withRipple<ThumbUnderlayProps, HTMLDivElement, HTMLInputElement>(ThumbUnderlay);

packages/switch/index.js renamed to packages/switch/index.tsx

@@ -20,19 +20,35 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import * as classnames from 'classnames';
+// No mdc .d.ts files
+// @ts-ignore
 import {MDCSwitchFoundation} from '@material/switch/dist/mdc.switch';
-
 import ThumbUnderlay from './ThumbUnderlay';
 import NativeControl from './NativeControl';
 
-export default class Switch extends Component {
-  constructor(props) {
+export interface SwitchProps extends React.HTMLProps<HTMLInputElement> {
+  checked: boolean;
+  className: string;
+  disabled: boolean;
+  nativeControlId?: string;
+}
+
+interface SwitchState {
+  nativeControlChecked: boolean;
+  checked: boolean;
+  classList: Set<string>;
+  disabled: boolean;
+  nativeControlDisabled: boolean;
+}
+
+export default class Switch extends React.Component<SwitchProps, SwitchState> {
+  rippleActivator: React.RefObject<HTMLInputElement> = React.createRef();
+  foundation?: MDCSwitchFoundation;
+
+  constructor(props: SwitchProps) {
     super(props);
-    this.rippleActivator = React.createRef();
-    this.foundation_ = null;
     this.state = {
       checked: props.checked,
       classList: new Set(),
@@ -42,24 +58,30 @@ export default class Switch extends Component {
     };
   }
 
+  static defaultProps: Partial<SwitchProps> = {
+    checked: false,
+    className: '',
+    disabled: false,
+  };
+
   componentDidMount() {
-    this.foundation_ = new MDCSwitchFoundation(this.adapter);
-    this.foundation_.init();
-    this.foundation_.setChecked(this.props.checked);
-    this.foundation_.setDisabled(this.props.disabled);
+    this.foundation = new MDCSwitchFoundation(this.adapter);
+    this.foundation.init();
+    this.foundation.setChecked(this.props.checked);
+    this.foundation.setDisabled(this.props.disabled);
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps: SwitchProps) {
     if (this.props.checked !== prevProps.checked) {
-      this.foundation_.setChecked(this.props.checked);
+      this.foundation.setChecked(this.props.checked);
     }
     if (this.props.disabled !== prevProps.disabled) {
-      this.foundation_.setDisabled(this.props.disabled);
+      this.foundation.setDisabled(this.props.disabled);
     }
   }
 
   componentWillUnmount() {
-    this.foundation_.destroy();
+    this.foundation.destroy();
   }
 
   get classes() {
@@ -70,25 +92,30 @@ export default class Switch extends Component {
 
   get adapter() {
     return {
-      addClass: (className) => {
+      addClass: (className: string) => {
         const {classList} = this.state;
         classList.add(className);
         this.setState({classList});
       },
-      removeClass: (className) => {
+      removeClass: (className: string) => {
         const {classList} = this.state;
         classList.delete(className);
         this.setState({classList});
       },
-      setNativeControlChecked: (nativeControlChecked) => {
+      setNativeControlChecked: (nativeControlChecked: boolean) => {
         this.setState({nativeControlChecked});
       },
-      setNativeControlDisabled: (nativeControlDisabled) => {
+      setNativeControlDisabled: (nativeControlDisabled: boolean) => {
         this.setState({nativeControlDisabled});
       },
     };
   }
 
+  onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({nativeControlChecked: evt.target.checked});
+    this.foundation && this.foundation.handleChange(evt);
+  };
+
   render() {
     const {
       /* eslint-disable */
@@ -99,41 +126,19 @@ export default class Switch extends Component {
       nativeControlId,
       ...otherProps
     } = this.props;
-
     return (
-      <div
-        className={this.classes}
-        {...otherProps}
-      >
+      <div className={this.classes} {...otherProps}>
         <div className='mdc-switch__track' />
-        <ThumbUnderlay
-          rippleActivator={this.rippleActivator}>
+        <ThumbUnderlay rippleActivator={this.rippleActivator}>
           <NativeControl
             id={nativeControlId}
             checked={this.state.nativeControlChecked}
             disabled={this.state.nativeControlDisabled}
-            onChange={(evt) => {
-              this.setState({nativeControlChecked: evt.target.checked});
-              this.foundation_ && this.foundation_.handleChange(evt);
-            }}
+            onChange={this.onChange}
             rippleActivatorRef={this.rippleActivator}
           />
         </ThumbUnderlay>
       </div>
     );
   }
 }
-
-Switch.propTypes = {
-  checked: PropTypes.bool,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  nativeControlId: PropTypes.string,
-};
-
-Switch.defaultProps = {
-  checked: false,
-  className: '',
-  disabled: false,
-  nativeControlId: null,
-};

test/screenshot/switch/index.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import './index.scss';
+
+import Switch from '../../../packages/switch';
+
+class SelectTest extends React.Component<{}, {}> {
+  render() {
+    return (
+      <div>
+        <Switch />
+        <Switch checked />
+        <Switch disabled />
+        <div dir='rtl'>
+          <Switch />
+          <Switch checked />
+          <Switch disabled />
+        </div>
+        <Switch
+          className='custom-switch'
+          nativeControlId='custom-switch-input'
+          checked
+        />
+        <label htmlFor='custom-switch-input'>Custom switch with label</label>
+      </div>
+    );
+  }
+}
+export default SelectTest;

test/screenshot/switch/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import * as React from 'react';
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
 import NativeControl from '../../../packages/switch/NativeControl';
 
 suite('Switch Native Control');
 
 test('has mdc-switch__native-control class', () => {
-  const wrapper = shallow(<NativeControl/>);
+  const wrapper = shallow(<NativeControl />);
   assert.isTrue(wrapper.hasClass('mdc-switch__native-control'));
 });

test/unit/switch/NativeControl.test.js renamed to test/unit/switch/NativeControl.test.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {assert} from 'chai';
+import {mount} from 'enzyme';
+import ThumbUnderlay from '../../../packages/switch/ThumbUnderlay';
+import {coerceForTesting} from '../helpers/types';
+
+suite('Switch Thumb Underlay');
+
+test('has mdc-switch__thumb-underlay class', () => {
+  const rippleActivator = coerceForTesting<React.RefObject<HTMLInputElement>>({
+    current: <input />,
+  });
+  const wrapper = mount(<ThumbUnderlay rippleActivator={rippleActivator} />);
+  assert.exists(wrapper.find('.mdc-switch__thumb-underlay'));
+});
+
+test('classNames adds classes', () => {
+  const rippleActivator = coerceForTesting<React.RefObject<HTMLInputElement>>({
+    current: <input />,
+  });
+  const wrapper = mount(
+    <ThumbUnderlay className='test-class-name' rippleActivator={rippleActivator} />
+  );
+  assert.isTrue(wrapper.hasClass('test-class-name'));
+});