Rewrite in Typescript: Toggle

src/scripts/Toggle.js → src/scripts/Toggle.tsx

@@ -1,11 +1,24 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
+import { FormElement, FormElementProps } from './FormElement';
 
-import { FormElement } from './FormElement';
+export type ToggleProps = {
+  className?: string;
+  label?: string;
+  required?: boolean;
+  error?: FormElementProps['error'];
+  totalCols?: number;
+  cols?: number;
+  name?: string;
+  value?: string | number;
+  checked?: boolean;
+  defaultChecked?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;
 
-export default class Toggle extends Component {
-  renderToggle({ className, label, ...props }) {
+export class Toggle extends Component<ToggleProps> {
+  node: HTMLDivElement | null = null;
+
+  renderToggle({ className, label, ...props }: ToggleProps) {
     const toggleClassNames = classnames(
       className,
       'slds-checkbox--toggle slds-grid'
@@ -43,23 +56,3 @@ export default class Toggle extends Component {
     );
   }
 }
-
-Toggle.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  required: PropTypes.bool,
-  // FormElement.propTypes.error
-  error: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.string,
-    PropTypes.shape({
-      message: PropTypes.string,
-    }),
-  ]),
-  totalCols: PropTypes.number,
-  cols: PropTypes.number,
-  name: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-};

src/scripts/index.js

@@ -28,7 +28,6 @@ import Table, {
   TableRowColumnActions,
 } from './Table';
 import Popover, { PopoverHeader, PopoverBody } from './Popover';
-import Toggle from './Toggle';
 
 export {
   Notification,
@@ -67,7 +66,6 @@ export {
   TableHeaderColumn,
   TableRowColumn,
   TableRowColumnActions,
-  Toggle,
 };
 
 export { default as util } from './util';
@@ -93,6 +91,7 @@ export * from './Pill';
 export * from './Spinner';
 export * from './Text';
 export * from './Textarea';
+export * from './Toggle';
 export * from './Tree';
 export * from './TreeNode';
 export * from './ComponentSettings';

stories/ToggleStories.js → stories/ToggleStories.tsx

@@ -10,10 +10,10 @@ storiesOf('Toggle', module)
     () => (
       <Toggle
         label={text('label', 'Toggle Label')}
-        required={boolean('required')}
-        error={text('error')}
-        checked={boolean('checked')}
-        disabled={boolean('disabled')}
+        required={boolean('required', false)}
+        error={text('error', '')}
+        checked={boolean('checked', false)}
+        disabled={boolean('disabled', false)}
         onChange={action('change')}
       />
     ),

test/storyshots/__snapshots__/storyshots.test.js.snap

@@ -45147,6 +45147,8 @@ exports[`Storyshots Toggle Controlled with knobs 1`] = `
             </span>
             <input
               aria-describedby="toggle-desc"
+              checked={false}
+              disabled={false}
               name="checkbox"
               onChange={[Function]}
               type="checkbox"