From e47629528c4e6429216c16b014a8216b997d848a Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 27 Aug 2019 21:32:42 +0900 Subject: [PATCH 1/5] #289 CheckboxGroup: mv .js -> .tsx --- src/scripts/{CheckboxGroup.js => CheckboxGroup.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/scripts/{CheckboxGroup.js => CheckboxGroup.tsx} (100%) diff --git a/src/scripts/CheckboxGroup.js b/src/scripts/CheckboxGroup.tsx similarity index 100% rename from src/scripts/CheckboxGroup.js rename to src/scripts/CheckboxGroup.tsx From 1d1ce36123c6ee5a2bacd3432d5c7b38cf63dd87 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 27 Aug 2019 22:34:07 +0900 Subject: [PATCH 2/5] #289 CheckboxGroup: Convert PropTypes to TypeScript types --- src/scripts/CheckboxGroup.tsx | 66 ++++++++++++++++------------------- 1 file changed, 31 insertions(+), 35 deletions(-) diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx index 40418c8f0..41bd58e95 100644 --- a/src/scripts/CheckboxGroup.tsx +++ b/src/scripts/CheckboxGroup.tsx @@ -1,20 +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 default class CheckboxGroup extends React.Component { + // eslint-disable-next-line react/sort-comp + [key: string]: any; + + static isFormElement = true; + + 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 values: (string | number)[] = []; + React.Children.forEach(this.props.children, (check: any, i) => { const el = check.props.ref || this[`check${i + 1}`]; const checkEl = el && el.querySelector('input[type=checkbox]'); if (checkEl && checkEl.checked) { @@ -25,12 +44,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[`check${i + 1}`] = node); } if (this.props.name) { props.name = this.props.name; @@ -97,26 +116,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; From cb9b8d4f68ef7d3745f55cf189242a28c7edecad Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 27 Aug 2019 22:36:17 +0900 Subject: [PATCH 3/5] #289 CheckboxGroup: Quit default export --- src/scripts/CheckboxGroup.tsx | 2 +- src/scripts/index.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx index 41bd58e95..c617dd47e 100644 --- a/src/scripts/CheckboxGroup.tsx +++ b/src/scripts/CheckboxGroup.tsx @@ -17,7 +17,7 @@ export type CheckboxGroupProps = { ) => void; } & FieldsetHTMLAttributes; -export default class CheckboxGroup extends React.Component { +export class CheckboxGroup extends React.Component { // eslint-disable-next-line react/sort-comp [key: string]: any; 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'; From e87f297fdba9d9d81ac235fabc5ce2e25c66e968 Mon Sep 17 00:00:00 2001 From: Shingo Yamazaki Date: Tue, 27 Aug 2019 22:53:34 +0900 Subject: [PATCH 4/5] #289 CheckboxGroup: Fix typo in story --- stories/CheckboxStories.tsx | 2 +- test/storyshots/__snapshots__/storyshots.test.js.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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
Date: Sat, 14 Sep 2019 14:58:28 +0900 Subject: [PATCH 5/5] #289 CheckboxGroup: Preserve checkbox nodes in nested private field --- src/scripts/CheckboxGroup.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx index c617dd47e..8684dac19 100644 --- a/src/scripts/CheckboxGroup.tsx +++ b/src/scripts/CheckboxGroup.tsx @@ -18,11 +18,10 @@ export type CheckboxGroupProps = { } & FieldsetHTMLAttributes; export class CheckboxGroup extends React.Component { - // eslint-disable-next-line react/sort-comp - [key: string]: any; - static isFormElement = true; + private nodes: { [key: string]: any } = {}; + constructor(props: Readonly) { super(props); @@ -34,7 +33,7 @@ export class CheckboxGroup extends React.Component { if (this.props.onChange) { const values: (string | number)[] = []; React.Children.forEach(this.props.children, (check: any, i) => { - const el = check.props.ref || this[`check${i + 1}`]; + 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); @@ -49,7 +48,7 @@ export class CheckboxGroup extends React.Component { if (checkbox.props.ref) { props.ref = checkbox.props.ref; } else { - props.checkboxRef = (node: any) => (this[`check${i + 1}`] = node); + props.checkboxRef = (node: any) => (this.nodes[`check${i + 1}`] = node); } if (this.props.name) { props.name = this.props.name;