From 1c051bb30cf56c9e92ff067c4a04a9714870ae82 Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Thu, 24 Aug 2017 16:16:48 +0100
Subject: [PATCH] Fix onChange/state handling for radio groups
---
src/atoms/Radio.js | 5 ++--
src/atoms/Radio.md | 4 +--
src/index.js | 1 +
src/molecules/RadioGroup.js | 50 +++++++++++++++++++++++++++----------
src/molecules/RadioGroup.md | 7 ++----
src/molecules/YesOrNo.js | 6 +++--
src/molecules/YesOrNo.md | 15 ++++++++---
7 files changed, 60 insertions(+), 28 deletions(-)
diff --git a/src/atoms/Radio.js b/src/atoms/Radio.js
index 17cdb80d4..034bb6ee2 100644
--- a/src/atoms/Radio.js
+++ b/src/atoms/Radio.js
@@ -1,7 +1,7 @@
import React from 'react'
import classes from './Radio.local.css'
-const Radio = ({ name, value, label, checked, required }) => (
+const Radio = ({ name, value, label, checked, required, onChange }) => (
<label className={classes.root}>
<input
className={classes.input}
@@ -9,7 +9,8 @@ const Radio = ({ name, value, label, checked, required }) => (
name={name}
value={value}
checked={checked}
- required={required}/>
+ required={required}
+ onChange={onChange}/>
{label}
</label>
)
diff --git a/src/atoms/Radio.md b/src/atoms/Radio.md
index 0304a7435..21bfdb8e3 100644
--- a/src/atoms/Radio.md
+++ b/src/atoms/Radio.md
@@ -10,7 +10,7 @@ A checked radio button.
```js
<Radio
- name="bar"
+ name="radio-bar"
checked
onChange={event => console.log(event.target.value)}/>
```
@@ -19,7 +19,7 @@ A radio button with a label.
```js
<Radio
- name="foo"
+ name="radio-foo"
label="Foo"
onChange={event => console.log(event.target.value)}/>
```
diff --git a/src/index.js b/src/index.js
index 370bfa72d..9df53c438 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
export { default as Menu } from './atoms/Menu'
+export { default as Radio } from './atoms/Radio'
export { default as Tags } from './atoms/Tags'
export { default as AppBar } from './molecules/AppBar'
export { default as YesOrNo } from './molecules/YesOrNo'
diff --git a/src/molecules/RadioGroup.js b/src/molecules/RadioGroup.js
index b5e3fac3d..a3d7a7937 100644
--- a/src/molecules/RadioGroup.js
+++ b/src/molecules/RadioGroup.js
@@ -1,18 +1,42 @@
import React from 'react'
import Radio from '../atoms/Radio'
-const RadioGroup = ({ name, value, options, required }) => (
- <div>
- {options.map(option => (
- <Radio
- key={option.value}
- name={name}
- required={required}
- value={option.value}
- label={option.label}
- checked={option.value === value}/>
- ))}
- </div>
-)
+class RadioGroup extends React.Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ value: props.value
+ }
+ }
+
+ handleChange = event => {
+ this.setState({
+ value: event.target.value
+ })
+
+ this.props.onChange(event)
+ }
+
+ render () {
+ const { name, options, required } = this.props
+ const { value } = this.state
+
+ return (
+ <div>
+ {options.map(option => (
+ <Radio
+ key={option.value}
+ name={name}
+ required={required}
+ value={option.value}
+ label={option.label}
+ checked={option.value === value}
+ onChange={this.handleChange}/>
+ ))}
+ </div>
+ )
+ }
+}
export default RadioGroup
diff --git a/src/molecules/RadioGroup.md b/src/molecules/RadioGroup.md
index eab7df696..67acc7c45 100644
--- a/src/molecules/RadioGroup.md
+++ b/src/molecules/RadioGroup.md
@@ -1,8 +1,6 @@
A group of radio buttons.
```js
-initialState = { foo: undefined };
-
const options = [
{
value: 'one',
@@ -20,7 +18,6 @@ const options = [
<RadioGroup
options={options}
- name="foo"
- value={state.foo}
- handleChange={event => setState({ foo: event.target.value })}/>
+ name="radiogroup-foo"
+ onChange={event => console.log(event.target.value)}/>
```
diff --git a/src/molecules/YesOrNo.js b/src/molecules/YesOrNo.js
index 2ec0274ea..206f20fa0 100644
--- a/src/molecules/YesOrNo.js
+++ b/src/molecules/YesOrNo.js
@@ -13,12 +13,14 @@ const options = [
}
]
-const YesOrNo = ({ name, value }) => (
+const YesOrNo = ({ name, value, required, onChange }) => (
<RadioGroup
className={classes.root}
name={name}
options={options}
- value={value}/>
+ value={value}
+ required={required}
+ onChange={onChange}/>
)
export default YesOrNo
diff --git a/src/molecules/YesOrNo.md b/src/molecules/YesOrNo.md
index 4f6cb070e..1feb069fa 100644
--- a/src/molecules/YesOrNo.md
+++ b/src/molecules/YesOrNo.md
@@ -1,10 +1,17 @@
A group of radio buttons that provides just two options: "Yes" or "No"
```js
-initialState = { foo: undefined };
+<YesOrNo
+ name="yesorno"
+ onChange={event => console.log(event.target.value)}/>
+```
+
+If a value is set, one option is selected.
+```js
<YesOrNo
- name="foo"
- value={state.foo}
- onChange={event => setState({ foo: event.target.value })}/>
+ name="yesorno-value"
+ value="yes"
+ onChange={event => console.log(event.target.value)}/>
```
+
--
GitLab