diff --git a/src/scripts/CheckboxGroup.js b/src/scripts/CheckboxGroup.tsx similarity index 65% rename from src/scripts/CheckboxGroup.js rename to src/scripts/CheckboxGroup.tsx index 40418c8f0..8684dac19 100644 --- a/src/scripts/CheckboxGroup.js +++ b/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, + values: (string | number)[] + ) => void; +} & FieldsetHTMLAttributes; + +export class CheckboxGroup extends React.Component { + static isFormElement = true; + + private nodes: { [key: string]: any } = {}; + + constructor(props: Readonly) { + super(props); this.onChange = this.onChange.bind(this); this.renderControl = this.renderControl.bind(this); } - onChange(e) { + onChange(e: React.FormEvent) { 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; diff --git a/src/scripts/index.js b/src/scripts/index.js index 4eec73a38..fbe1f0e6b 100644 --- a/src/scripts/index.js +++ b/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'; diff --git a/stories/CheckboxStories.tsx b/stories/CheckboxStories.tsx index e90aff0da..081926bc0 100644 --- a/stories/CheckboxStories.tsx +++ b/stories/CheckboxStories.tsx @@ -33,7 +33,7 @@ storiesOf('Checkbox', module) .add( 'Default', () => ( - + diff --git a/test/storyshots/__snapshots__/storyshots.test.js.snap b/test/storyshots/__snapshots__/storyshots.test.js.snap index c79cc6073..2a765430b 100644 --- a/test/storyshots/__snapshots__/storyshots.test.js.snap +++ b/test/storyshots/__snapshots__/storyshots.test.js.snap @@ -1839,7 +1839,7 @@ exports[`Storyshots Checkbox Default 1`] = ` - Radio Group Label + Checkbox Group Label