ant-design-vue/components/radio/Radio.jsx

146 lines
3.6 KiB
React
Raw Normal View History

import PropTypes from '../_util/vue-types'
2018-01-12 08:10:41 +00:00
import hasProp from '../_util/props-util'
2017-10-27 06:04:48 +00:00
export default {
2018-04-08 13:17:20 +00:00
name: 'ARadio',
2017-10-27 06:04:48 +00:00
props: {
prefixCls: {
default: 'ant-radio',
type: String,
},
2017-11-02 04:07:20 +00:00
defaultChecked: Boolean,
checked: { type: Boolean, default: undefined },
2017-10-27 06:04:48 +00:00
disabled: Boolean,
isGroup: Boolean,
value: PropTypes.any,
2017-10-27 06:04:48 +00:00
name: String,
2018-06-01 13:25:16 +00:00
id: String,
autoFocus: Boolean,
2017-10-27 06:04:48 +00:00
},
model: {
prop: 'checked',
},
2017-11-07 03:58:47 +00:00
inject: {
radioGroupContext: { default: undefined },
},
2017-11-02 04:07:20 +00:00
data () {
2017-11-07 03:58:47 +00:00
const { radioGroupContext, checked, defaultChecked, value } = this
let stateChecked
if (radioGroupContext && radioGroupContext.stateValue !== undefined) {
2017-11-07 03:58:47 +00:00
stateChecked = radioGroupContext.stateValue === value
}
2017-11-02 04:07:20 +00:00
return {
2017-11-07 03:58:47 +00:00
stateChecked: stateChecked === undefined
2017-12-27 10:15:11 +00:00
? !hasProp(this, 'checked') ? defaultChecked : checked
2017-11-07 03:58:47 +00:00
: stateChecked,
2017-11-02 04:07:20 +00:00
}
},
mounted () {
this.$nextTick(() => {
if (this.autoFocus) {
this.$refs.input.focus()
}
})
},
2017-10-27 06:04:48 +00:00
methods: {
handleChange (event) {
2017-11-02 04:07:20 +00:00
const targetChecked = event.target.checked
2017-11-07 03:58:47 +00:00
this.$emit('input', targetChecked)
2018-05-05 09:46:04 +00:00
const { name, value, radioGroupContext } = this
2017-12-27 10:15:11 +00:00
if ((!hasProp(this, 'checked') && !radioGroupContext) || (radioGroupContext && radioGroupContext.value === undefined)) {
2017-11-02 04:07:20 +00:00
this.stateChecked = targetChecked
}
2017-10-27 06:04:48 +00:00
const target = {
name,
value,
2018-05-05 09:46:04 +00:00
checked: targetChecked,
2017-10-27 06:04:48 +00:00
}
2017-11-07 03:58:47 +00:00
if (this.radioGroupContext) {
this.radioGroupContext.handleChange({ target })
} else {
this.$emit('change', {
target,
stopPropagation () {
event.stopPropagation()
},
preventDefault () {
event.preventDefault()
},
})
2017-10-27 06:04:48 +00:00
}
},
focus () {
this.$refs.input.focus()
},
blur () {
this.$refs.input.blur()
},
onFocus (e) {
this.$emit('focus', e)
},
onBlur (e) {
this.$emit('blur', e)
},
onMouseEnter (e) {
this.$emit('mouseenter', e)
},
onMouseLeave (e) {
this.$emit('mouseleave', e)
},
2017-10-27 06:04:48 +00:00
},
2017-11-02 04:07:20 +00:00
watch: {
checked (val) {
this.stateChecked = val
},
2017-11-07 03:58:47 +00:00
'radioGroupContext.stateValue': function (stateValue) {
this.stateChecked = stateValue === this.value
},
2017-11-02 04:07:20 +00:00
},
2018-03-19 01:43:31 +00:00
render () {
const { id, prefixCls,
stateChecked, handleChange, $slots,
onFocus,
onBlur,
onMouseEnter,
onMouseLeave,
radioGroupContext,
} = this
let { name, disabled } = this
if (radioGroupContext) {
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,
}
2018-03-19 01:43:31 +00:00
return (
<label
class={wrapperClassString}
onMouseenter={onMouseEnter}
onMouseleave={onMouseLeave}
>
2018-03-19 01:43:31 +00:00
<span class={checkboxClass}>
<input name={name} type='radio' disabled={disabled}
class={`${prefixCls}-input`} checked={stateChecked}
onChange={handleChange} id={id} ref='input'
onFocus={onFocus}
onBlur={onBlur}
2018-03-19 01:43:31 +00:00
/>
<span class={`${prefixCls}-inner`} />
</span>
{$slots.default ? <span>
{$slots.default}
</span> : null}
</label>
)
},
2017-10-27 06:04:48 +00:00
}
2018-03-19 02:16:27 +00:00