Rewrite in Typescript: CheckboxGroup

src/scripts/CheckboxGroup.js → src/scripts/CheckboxGroup.tsx

@@ -1,21 +1,39 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FieldsetHTMLAttributes } from 'react';
 import classnames from 'classnames';
-import { FormElement } from './FormElement';
+import { FormElementProps } from './FormElement';
 
-export default class CheckboxGroup extends React.Component {
-  constructor() {
-    super();
+export type CheckboxGroupProps = {
+  className?: string;
+  label?: string;
+  required?: boolean;
+  error?: FormElementProps['error'];
+  name?: string;
+  totalCols?: number;
+  cols?: number;
+  style?: object;
+  onChange?: (
+    e: React.FormEvent<HTMLFieldSetElement>,
+    values: (string | number)[]
+  ) => void;
+} & FieldsetHTMLAttributes<HTMLFieldSetElement>;
+
+export class CheckboxGroup extends React.Component<CheckboxGroupProps> {
+  static isFormElement = true;
+
+  private nodes: { [key: string]: any } = {};
+
+  constructor(props: Readonly<CheckboxGroupProps>) {
+    super(props);
 
     this.onChange = this.onChange.bind(this);
     this.renderControl = this.renderControl.bind(this);
   }
 
-  onChange(e) {
+  onChange(e: React.FormEvent<HTMLFieldSetElement>) {
     if (this.props.onChange) {
-      const values = [];
-      React.Children.forEach(this.props.children, (check, i) => {
-        const el = check.props.ref || this[`check${i + 1}`];
+      const values: (string | number)[] = [];
+      React.Children.forEach(this.props.children, (check: any, i) => {
+        const el = check.props.ref || this.nodes[`check${i + 1}`];
         const checkEl = el && el.querySelector('input[type=checkbox]');
         if (checkEl && checkEl.checked) {
           values.push(check.props.value);
@@ -25,12 +43,12 @@ export default class CheckboxGroup extends React.Component {
     }
   }
 
-  renderControl(checkbox, i) {
-    const props = { grouped: true };
+  renderControl(checkbox: any, i: number) {
+    const props: any = { grouped: true };
     if (checkbox.props.ref) {
       props.ref = checkbox.props.ref;
     } else {
-      props.checkboxRef = (node) => (this[`check${i + 1}`] = node);
+      props.checkboxRef = (node: any) => (this.nodes[`check${i + 1}`] = node);
     }
     if (this.props.name) {
       props.name = this.props.name;
@@ -97,26 +115,3 @@ export default class CheckboxGroup extends React.Component {
     );
   }
 }
-
-CheckboxGroup.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,
-    }),
-  ]),
-  name: PropTypes.string,
-  totalCols: PropTypes.number,
-  cols: PropTypes.number,
-  onChange: PropTypes.func,
-  children: PropTypes.node,
-  /* eslint-disable react/forbid-prop-types */
-  style: PropTypes.object,
-};
-
-CheckboxGroup.isFormElement = true;

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 CheckboxGroup from './CheckboxGroup';
 import Select, { Option } from './Select';
 import DateInput from './DateInput';
 import Grid, { Row, Col } from './Grid';
@@ -40,7 +39,6 @@ export {
   ModalContent,
   ModalFooter,
   SalesPath,
-  CheckboxGroup,
   Select,
   Option,
   DateInput,
@@ -74,6 +72,7 @@ export * from './Button';
 export * from './ButtonGroup';
 export * from './Container';
 export * from './Checkbox';
+export * from './CheckboxGroup';
 export * from './DropdownMenu';
 export * from './DropdownButton';
 export * from './Icon';

stories/CheckboxStories.tsx

@@ -33,7 +33,7 @@ storiesOf('Checkbox', module)
   .add(
     'Default',
     () => (
-      <CheckboxGroup label='Radio Group Label'>
+      <CheckboxGroup label='Checkbox Group Label'>
         <Checkbox label='Checkbox Label One' value='1' checked />
         <Checkbox label='Checkbox Label Two' value='2' checked={false} />
       </CheckboxGroup>

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

@@ -1839,7 +1839,7 @@ exports[`Storyshots Checkbox Default 1`] = `
         <legend
           className="slds-form-element__label slds-form-element__label--top"
         >
-          Radio Group Label
+          Checkbox Group Label
         </legend>
         <div
           className="slds-form-element__control"