Rewrite in Typescript: Checkbox

src/scripts/Checkbox.tsx

@@ -0,0 +1,66 @@
+import React, { Component, InputHTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { FormElement, FormElementProps } from './FormElement';
+
+export type CheckboxProps = {
+  className?: string;
+  label?: string;
+  required?: boolean;
+  error?: FormElementProps['error'];
+  totalCols?: number;
+  cols?: number;
+  grouped?: boolean;
+  name?: string;
+  value?: string | number;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  checkboxRef?: (node: HTMLLabelElement | null) => void;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+export class Checkbox extends Component<CheckboxProps> {
+  node: HTMLDivElement | HTMLLabelElement | null = null;
+
+  componentWillReceiveProps(nextProps: Readonly<CheckboxProps>) {
+    if (this.node) {
+      const input = this.node.getElementsByTagName('input')[0];
+      if (
+        nextProps.defaultChecked !== undefined &&
+        nextProps.defaultChecked !== input.checked
+      ) {
+        input.checked = nextProps.defaultChecked;
+      }
+    }
+  }
+
+  renderCheckbox({ className, label, checkboxRef, ...props }: CheckboxProps) {
+    const checkClassNames = classnames(className, 'slds-checkbox');
+    return (
+      <label
+        ref={(node) => {
+          this.node = node;
+          if (checkboxRef) checkboxRef(node);
+        }}
+        className={checkClassNames}
+      >
+        <input type='checkbox' {...props} />
+        <span className='slds-checkbox--faux' />
+        <span className='slds-form-element__label'>{label}</span>
+      </label>
+    );
+  }
+
+  render() {
+    const { grouped, required, error, totalCols, cols, ...props } = this.props;
+    const formElemProps = { required, error, totalCols, cols };
+    return grouped ? (
+      this.renderCheckbox(props)
+    ) : (
+      <FormElement
+        formElementRef={(node) => (this.node = node)}
+        {...formElemProps}
+      >
+        {this.renderCheckbox(props)}
+      </FormElement>
+    );
+  }
+}

src/scripts/index.js

@@ -5,7 +5,6 @@ import Datepicker from './Datepicker';
 import Tabs, { Tab } from './Tabs';
 import SalesPath from './SalesPath';
 import Modal, { ModalHeader, ModalContent, ModalFooter } from './Modal';
-import Checkbox from './Checkbox';
 import CheckboxGroup from './CheckboxGroup';
 import Select, { Option } from './Select';
 import DateInput from './DateInput';
@@ -41,7 +40,6 @@ export {
   ModalContent,
   ModalFooter,
   SalesPath,
-  Checkbox,
   CheckboxGroup,
   Select,
   Option,
@@ -75,6 +73,7 @@ export * from './BreadCrumbs';
 export * from './Button';
 export * from './ButtonGroup';
 export * from './Container';
+export * from './Checkbox';
 export * from './DropdownMenu';
 export * from './DropdownButton';
 export * from './Icon';

stories/CheckboxStories.js → stories/CheckboxStories.tsx

@@ -10,8 +10,8 @@ storiesOf('Checkbox', module)
     () => (
       <CheckboxGroup
         label={text('label', 'Checkbox Group Label')}
-        error={text('error')}
-        required={boolean('required')}
+        error={text('error', '')}
+        required={boolean('required', false)}
         onChange={action('change')}
       >
         <Checkbox