fix: update disabled radiogroup's classname

vueComponent · Jun 17, 2018 · 9df74be · 9df74be
1 parent 9f307fd
commit 9df74be
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 29 deletions.
diff --git a/components/radio/Radio.jsx b/components/radio/Radio.jsx
@@ -41,24 +41,6 @@ export default {
       }
     })
   },
-  computed: {
-    classes () {
-      const { prefixCls, disabled, stateChecked } = this
-      return {
-        [`${prefixCls}-wrapper`]: true,
-        [`${prefixCls}-wrapper-checked`]: stateChecked,
-        [`${prefixCls}-wrapper-disabled`]: disabled,
-      }
-    },
-    checkboxClass () {
-      const { prefixCls, disabled, stateChecked } = this
-      return {
-        [`${prefixCls}`]: true,
-        [`${prefixCls}-checked`]: stateChecked,
-        [`${prefixCls}-disabled`]: disabled,
-      }
-    },
-  },
   methods: {
     handleChange (event) {
       const targetChecked = event.target.checked
@@ -114,7 +96,7 @@ export default {
     },
   },
   render () {
-    const { id, classes, checkboxClass, prefixCls,
+    const { id, prefixCls,
       stateChecked, handleChange, $slots,
       onFocus,
       onBlur,
@@ -127,9 +109,20 @@ export default {
       name = radioGroupContext.name
       disabled = disabled || radioGroupContext.disabled
     }
+    const wrapperClassString = {
+      [`${prefixCls}-wrapper`]: true,
+      [`${prefixCls}-wrapper-checked`]: stateChecked,
+      [`${prefixCls}-wrapper-disabled`]: disabled,
+    }
+    const checkboxClass = {
+      [`${prefixCls}`]: true,
+      [`${prefixCls}-checked`]: stateChecked,
+      [`${prefixCls}-disabled`]: disabled,
+    }
+
     return (
       <label
-        class={classes}
+        class={wrapperClassString}
         onMouseenter={onMouseEnter}
         onMouseleave={onMouseLeave}
       >

diff --git a/components/radio/__tests__/__snapshots__/demo.test.js.snap b/components/radio/__tests__/__snapshots__/demo.test.js.snap
@@ -33,10 +33,10 @@ exports[`renders ./components/radio/demo/radioButton.md correctly 1`] = `
   </div>
   <div style="margin-top: 16px;">
     <div class="ant-radio-group ant-radio-group-default">
-      <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
-      <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
-      <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
-      <label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
+      <label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label>
+      <label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label>
+      <label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label>
+      <label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="disabled" class="ant-radio-button-input"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label>
     </div>
   </div>
 </div>
@@ -79,17 +79,17 @@ exports[`renders ./components/radio/demo/radioGroup-options.md correctly 1`] = `
   <div class="ant-radio-group ant-radio-group-default">
     <label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Apple</span></label>
     <label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Pear</span></label>
-    <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Orange</span></label>
+    <label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="disabled" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Orange</span></label>
   </div>
 </div>
 `;
 
 exports[`renders ./components/radio/demo/radioGroup-with-name.md correctly 1`] = `
 <div class="ant-radio-group ant-radio-group-default">
-  <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
-  <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
-  <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
-  <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>D</span></label>
+  <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>D</span></label>
 </div>
 `;