Add radio button disabled style, fix #489

components/radio/demo/radiobutton.md

@@ -15,13 +15,22 @@ function onChange(e) {
   console.log('radio checked:' + e.target.value);
 }
 
-ReactDOM.render((
+ReactDOM.render(<div>
-  <RadioGroup onChange={onChange} defaultValue="a">
+  <div>
-    <RadioButton value="a">杭州</RadioButton>
+    <RadioGroup onChange={onChange} defaultValue="a">
-    <RadioButton value="b">上海</RadioButton>
+      <RadioButton value="a">杭州</RadioButton>
-    <RadioButton value="c">北京</RadioButton>
+      <RadioButton value="b">上海</RadioButton>
-    <RadioButton value="d">成都</RadioButton>
+      <RadioButton value="c">北京</RadioButton>
-  </RadioGroup>
+      <RadioButton value="d">成都</RadioButton>
-), document.getElementById('components-radio-demo-radiobutton'));
+    </RadioGroup>
+  </div>
+  <div style={{ marginTop: 16 }}>
+    <RadioGroup disabled onChange={onChange} defaultValue="a">
+      <RadioButton value="a">杭州</RadioButton>
+      <RadioButton value="b">上海</RadioButton>
+      <RadioButton value="c">北京</RadioButton>
+      <RadioButton value="d">成都</RadioButton>
+    </RadioGroup>
+  </div>
+</div>, document.getElementById('components-radio-demo-radiobutton'));
 ````
-

components/radio/group.jsx

@@ -15,6 +15,7 @@ export default React.createClass({
   getDefaultProps: function () {
     return {
       prefixCls: 'ant-radio-group',
+      disabled: false,
       onChange: function () {
       }
     };
@@ -41,6 +42,7 @@ export default React.createClass({
           {...radio.props}
           onChange={this.onRadioChange}
           checked={this.state.value === radio.props.value}
+          disabled={this.props.disabled}
         />;
       }
       return radio;

components/radio/index.jsx

@@ -1,5 +1,7 @@
 import AntRadio from './radio';
 import Group from './group';
+import Button from './radioButton';
 
+AntRadio.Button = Button;
 AntRadio.Group = Group;
 export default AntRadio;

components/radio/radio.jsx

@@ -1,7 +1,7 @@
 import Radio from 'rc-radio';
 import React from 'react';
 
-let AntRadio = React.createClass({
+const AntRadio = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-radio'
@@ -12,6 +12,9 @@ let AntRadio = React.createClass({
     if (classString) {
       classString += this.props.checked ? (' ' + classString + '-checked') : '';
     }
+    if (this.props.disabled) {
+      classString += ' ' + this.props.className + '-disabled';
+    }
     return (
       <label className={classString}>
         <Radio {...this.props} children={null} />
@@ -21,19 +24,4 @@ let AntRadio = React.createClass({
   }
 });
 
-let Button = React.createClass({
-  getDefaultProps() {
-    return {
-      className: 'ant-radio-button'
-    };
-  },
-  render() {
-    return (
-      <AntRadio {...this.props} />
-    );
-  }
-});
-
-AntRadio.Button = Button;
-
 export default AntRadio;

components/radio/radioButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import AntRadio from './radio';
+
+const RadioButton = React.createClass({
+  getDefaultProps() {
+    return {
+      className: 'ant-radio-button'
+    };
+  },
+  render() {
+    return (
+      <AntRadio {...this.props} />
+    );
+  }
+});
+
+export default RadioButton;

style/components/dropdown.less

@@ -46,6 +46,7 @@
     box-shadow: @overlay-shadow;
     background-clip: padding-box;
     border: 1px solid #d9d9d9;
+    overflow: hidden;
 
     > li {
       margin: 0;

style/components/radio.less

@@ -191,5 +191,32 @@
         box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
       }
     }
+
+    &-disabled {
+      border-color: #d9d9d9;
+      background-color: #f3f3f3;
+      cursor: not-allowed;
+      color: #ccc;
+
+      &:first-child,
+      &:hover {
+        border-color: #d9d9d9;
+        background-color: #f3f3f3;
+        &:before {
+          display: none;
+        }
+      }
+      &:first-child {
+        box-shadow: none;
+        border-left-color: #d9d9d9;
+      }
+    }
+
+    &-disabled.@{radio-prefix-cls}-button-checked {
+      color: #fff;
+      background-color: #ccc;
+      box-shadow: -1px 0px 0px 0px #CCC;
+      border-color: #ccc;
+    }
   }
 }