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>
 `;