[RadioGroup] Rename selectedValue to value (#7832)

mui · Aug 23, 2017 · d975f65 · d975f65
1 parent 4cc74da
commit d975f65
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 45 deletions.
diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
@@ -29,17 +29,17 @@ const options = [
 
 class ConfirmationDialog extends Component {
   state = {
-    selectedValue: undefined,
+    value: undefined,
   };
 
   componentWillMount() {
-    this.setState({ selectedValue: this.props.selectedValue });
+    this.setState({ value: this.props.value });
   }
 
   componentWillUpdate(nextProps) {
-    if (nextProps.selectedValue !== this.props.selectedValue) {
+    if (nextProps.value !== this.props.value) {
       // eslint-disable-next-line react/no-will-update-set-state
-      this.setState({ selectedValue: nextProps.selectedValue });
+      this.setState({ value: nextProps.value });
     }
   }
 
@@ -50,19 +50,19 @@ class ConfirmationDialog extends Component {
   };
 
   handleCancel = () => {
-    this.props.onRequestClose(this.props.selectedValue);
+    this.props.onRequestClose(this.props.value);
   };
 
   handleOk = () => {
-    this.props.onRequestClose(this.state.selectedValue);
+    this.props.onRequestClose(this.state.value);
   };
 
   handleChange = (event, value) => {
-    this.setState({ selectedValue: value });
+    this.setState({ value });
   };
 
   render() {
-    const { selectedValue, ...other } = this.props;
+    const { value, ...other } = this.props;
 
     return (
       <Dialog
@@ -80,7 +80,7 @@ class ConfirmationDialog extends Component {
             }}
             aria-label="ringtone"
             name="ringtone"
-            selectedValue={this.state.selectedValue}
+            value={this.state.value}
             onChange={this.handleChange}
           >
             {options.map(option =>
@@ -103,7 +103,7 @@ class ConfirmationDialog extends Component {
 
 ConfirmationDialog.propTypes = {
   onRequestClose: PropTypes.func,
-  selectedValue: PropTypes.string,
+  value: PropTypes.string,
 };
 
 const styles = theme => ({
@@ -122,7 +122,7 @@ class ConfirmationDialogDemo extends Component {
   state = {
     anchorEl: undefined,
     open: false,
-    selectedValue: 'Dione',
+    value: 'Dione',
   };
 
   button = undefined;
@@ -132,7 +132,7 @@ class ConfirmationDialogDemo extends Component {
   };
 
   handleRequestClose = value => {
-    this.setState({ selectedValue: value, open: false });
+    this.setState({ value, open: false });
   };
 
   render() {
@@ -151,7 +151,7 @@ class ConfirmationDialogDemo extends Component {
             aria-label="Phone ringtone"
             onClick={this.handleClickListItem}
           >
-            <ListItemText primary="Phone ringtone" secondary={this.state.selectedValue} />
+            <ListItemText primary="Phone ringtone" secondary={this.state.value} />
           </ListItem>
           <ListItem button divider disabled>
             <ListItemText primary="Default notification ringtone" secondary="Tethys" />
@@ -162,7 +162,7 @@ class ConfirmationDialogDemo extends Component {
             }}
             open={this.state.open}
             onRequestClose={this.handleRequestClose}
-            selectedValue={this.state.selectedValue}
+            value={this.state.value}
           />
         </List>
       </div>

diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
@@ -14,11 +14,11 @@ const styles = theme => ({
 
 class RadioButtonsGroup extends Component {
   state = {
-    selectedValue: undefined,
+    value: '',
   };
 
   handleChange = (event, value) => {
-    this.setState({ selectedValue: value });
+    this.setState({ value });
   };
 
   render() {
@@ -31,7 +31,7 @@ class RadioButtonsGroup extends Component {
           aria-label="gender"
           name="gender"
           className={classes.group}
-          selectedValue={this.state.selectedValue}
+          value={this.state.value}
           onChange={this.handleChange}
         >
           <FormControlLabel value="male" control={<Radio />} label="Male" />

diff --git a/docs/src/pages/layout/InteractiveGrid.js b/docs/src/pages/layout/InteractiveGrid.js
@@ -71,7 +71,7 @@ class InteractiveGrid extends Component {
                 <RadioGroup
                   name="direction"
                   aria-label="direction"
-                  selectedValue={direction}
+                  value={direction}
                   onChange={this.handleChange('direction')}
                 >
                   <FormControlLabel value="row" control={<Radio />} label="row" />
@@ -89,7 +89,7 @@ class InteractiveGrid extends Component {
                 <RadioGroup
                   name="justify"
                   aria-label="justify"
-                  selectedValue={justify}
+                  value={justify}
                   onChange={this.handleChange('justify')}
                 >
                   <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
@@ -108,7 +108,7 @@ class InteractiveGrid extends Component {
                 <RadioGroup
                   name="align"
                   aria-label="align"
-                  selectedValue={align}
+                  value={align}
                   onChange={this.handleChange('align')}
                 >
                   <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />

diff --git a/docs/src/pages/layout/SpacingGrid.js b/docs/src/pages/layout/SpacingGrid.js
@@ -55,7 +55,7 @@ class GuttersGrid extends Component {
                 <RadioGroup
                   name="spacing"
                   aria-label="spacing"
-                  selectedValue={spacing}
+                  value={spacing}
                   onChange={this.handleChange('spacing')}
                   row
                 >

diff --git a/pages/api/radio-group.md b/pages/api/radio-group.md
@@ -11,7 +11,7 @@
 | classes | Object |  | Useful to extend the style applied to components. |
 | name | string |  | The name used to reference the value of the control. |
 | onChange | Function |  | Callback fired when a radio button is selected.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback<br>*value:* The `value` of the selected radio button |
-| selectedValue | string |  | Value of the selected radio button |
+| <span style="color: #31a148">value *</span> | string |  | Value of the selected radio button. |
 
 Any other properties supplied will be spread to the root element.
 

diff --git a/src/Radio/RadioGroup.js b/src/Radio/RadioGroup.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent, Children, cloneElement } from 'react';
+import React, { Component, Children, cloneElement } from 'react';
 import type { Element } from 'react';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
@@ -52,15 +52,16 @@ export type Props = {
    */
   onKeyDown?: Function,
   /**
-   * Value of the selected radio button
+   * Value of the selected radio button.
    */
-  selectedValue?: string,
+  value: string,
 };
 
 type AllProps = DefaultProps & Props;
 
-class RadioGroup extends PureComponent<void, AllProps, void> {
+class RadioGroup extends Component<void, AllProps, void> {
   props: AllProps;
+
   radios: Array<HTMLInputElement> = [];
 
   focus = () => {
@@ -96,7 +97,7 @@ class RadioGroup extends PureComponent<void, AllProps, void> {
       classes,
       className: classNameProp,
       name,
-      selectedValue,
+      value,
       onChange,
       ...other
     } = this.props;
@@ -111,7 +112,7 @@ class RadioGroup extends PureComponent<void, AllProps, void> {
         {...other}
       >
         {Children.map(children, (child, index) => {
-          const selected = selectedValue === child.props.value;
+          const selected = value === child.props.value;
           return cloneElement(child, {
             key: index,
             name,

diff --git a/src/Radio/RadioGroup.spec.js b/src/Radio/RadioGroup.spec.js
@@ -15,14 +15,14 @@ describe('<RadioGroup />', () => {
   });
 
   it('should render a FormGroup with the radiogroup role', () => {
-    const wrapper = shallow(<RadioGroup />);
+    const wrapper = shallow(<RadioGroup value="" />);
     assert.strictEqual(wrapper.name(), 'withStyles(FormGroup)');
     assert.strictEqual(wrapper.props().role, 'radiogroup');
   });
 
   it('should fire the onBlur callback', () => {
     const handleBlur = spy();
-    const wrapper = shallow(<RadioGroup onBlur={handleBlur} />);
+    const wrapper = shallow(<RadioGroup value="" onBlur={handleBlur} />);
     const event = {};
     wrapper.simulate('blur', event);
     assert.strictEqual(handleBlur.callCount, 1);
@@ -31,7 +31,7 @@ describe('<RadioGroup />', () => {
 
   it('should fire the onKeyDown callback', () => {
     const handleKeyDown = spy();
-    const wrapper = shallow(<RadioGroup onKeyDown={handleKeyDown} />);
+    const wrapper = shallow(<RadioGroup value="" onKeyDown={handleKeyDown} />);
     const event = {};
     wrapper.simulate('keyDown', event);
     assert.strictEqual(handleKeyDown.callCount, 1);
@@ -42,7 +42,7 @@ describe('<RadioGroup />', () => {
     let wrapper;
 
     beforeEach(() => {
-      wrapper = shallow(<RadioGroup />);
+      wrapper = shallow(<RadioGroup value="" />);
     });
 
     it('should focus the first non-disabled radio', () => {
@@ -114,7 +114,7 @@ describe('<RadioGroup />', () => {
 
     beforeEach(() => {
       wrapper = shallow(
-        <RadioGroup>
+        <RadioGroup value="">
           <Radio />
         </RadioGroup>,
       );
@@ -153,15 +153,15 @@ describe('<RadioGroup />', () => {
 
     it('should add a child', () => {
       const wrapper = mount(
-        <RadioGroup.Naked classes={{}}>
+        <RadioGroup.Naked value="" classes={{}}>
           <Radio />
         </RadioGroup.Naked>,
       );
       assert.strictEqual(wrapper.instance().radios.length, 1);
     });
 
     it('should keep radios empty', () => {
-      const wrapper = mount(<RadioGroup.Naked classes={{}} />);
+      const wrapper = mount(<RadioGroup.Naked value="" classes={{}} />);
       assert.strictEqual(wrapper.instance().radios.length, 0);
     });
   });

diff --git a/src/transitions/Collapse.js b/src/transitions/Collapse.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import type { Element } from 'react';
 import withStyles from '../styles/withStyles';
 import Transition from '../internal/Transition';
@@ -76,7 +76,7 @@ export type Props = {
 
 type AllProps = DefaultProps & Props;
 
-class Collapse extends PureComponent<DefaultProps, AllProps, void> {
+class Collapse extends Component<DefaultProps, AllProps, void> {
   props: AllProps;
 
   static defaultProps: DefaultProps = {

diff --git a/src/transitions/Fade.js b/src/transitions/Fade.js
@@ -1,6 +1,6 @@
 // @flow weak
 
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import type { Element } from 'react';
 import Transition from '../internal/Transition';
 import { duration } from '../styles/transitions';
@@ -60,7 +60,7 @@ export type Props = {
 
 type AllProps = DefaultProps & Props;
 
-class Fade extends PureComponent<DefaultProps, AllProps, void> {
+class Fade extends Component<DefaultProps, AllProps, void> {
   props: AllProps;
 
   static defaultProps: DefaultProps = {

diff --git a/src/transitions/Slide.js b/src/transitions/Slide.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import type { Element as ReactElement } from 'react'; // global Element used below.
 import { findDOMNode } from 'react-dom';
 import Transition from '../internal/Transition';
@@ -91,7 +91,7 @@ export type Props = {
 
 type AllProps = DefaultProps & Props;
 
-class Slide extends PureComponent<DefaultProps, AllProps, void> {
+class Slide extends Component<DefaultProps, AllProps, void> {
   props: AllProps;
 
   static defaultProps: DefaultProps = {

diff --git a/test/regressions/tests/RadioGroup/RadioGroupWithLabel.js b/test/regressions/tests/RadioGroup/RadioGroupWithLabel.js
@@ -8,7 +8,7 @@ export default function RadioGroupWithLabel() {
   return (
     <FormControl style={{ width: 100 }}>
       <FormLabel>Location</FormLabel>
-      <RadioGroup selectedValue="home">
+      <RadioGroup value="home">
         <FormControlLabel value="home" control={<Radio />} label="Home" />
         <FormControlLabel value="work" control={<Radio />} label="Work" />
       </RadioGroup>

diff --git a/test/regressions/tests/RadioGroup/RadioGroupWithLabelError.js b/test/regressions/tests/RadioGroup/RadioGroupWithLabelError.js
@@ -8,7 +8,7 @@ export default function RadioGroupWithLabelError() {
   return (
     <FormControl style={{ width: 100 }} required error>
       <FormLabel>Location</FormLabel>
-      <RadioGroup selectedValue="home">
+      <RadioGroup value="home">
         <FormControlLabel value="home" control={<Radio />} label="Home" />
         <FormControlLabel value="work" control={<Radio />} label="Work" />
       </RadioGroup>

diff --git a/test/regressions/tests/RadioGroup/RadioGroupWithLabelRequired.js b/test/regressions/tests/RadioGroup/RadioGroupWithLabelRequired.js
@@ -8,7 +8,7 @@ export default function RadioGroupWithLabelRequired() {
   return (
     <FormControl style={{ width: 100 }} required>
       <FormLabel>Location</FormLabel>
-      <RadioGroup selectedValue="home">
+      <RadioGroup value="home">
         <FormControlLabel value="home" control={<Radio />} label="Home" />
         <FormControlLabel value="work" control={<Radio />} label="Work" />
       </RadioGroup>

diff --git a/test/regressions/tests/RadioGroup/SimpleRadioGroup.js b/test/regressions/tests/RadioGroup/SimpleRadioGroup.js
@@ -7,7 +7,7 @@ import Radio, { RadioGroup } from 'material-ui/Radio';
 export default function SimpleRadioGroup() {
   return (
     <div style={{ width: 100 }}>
-      <RadioGroup selectedValue="home">
+      <RadioGroup value="home">
         <FormControlLabel value="home" control={<Radio />} label="Home" />
         <FormControlLabel value="work" control={<Radio />} label="Work" />
       </RadioGroup>