ant-design-vue/components/checkbox/Group.jsx

117 lines
2.6 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
import Checkbox from './Checkbox'
2018-01-12 08:10:41 +00:00
import hasProp from '../_util/props-util'
2017-10-26 07:18:08 +00:00
export default {
name: 'CheckboxGroup',
props: {
prefixCls: {
default: 'ant-checkbox-group',
type: String,
},
2017-11-02 03:48:38 +00:00
defaultValue: {
2017-10-26 07:18:08 +00:00
default: () => [],
type: Array,
},
2017-11-02 03:48:38 +00:00
value: {
default: undefined,
type: Array,
},
2017-10-26 07:18:08 +00:00
options: {
default: () => [],
type: Array,
},
2017-11-03 10:46:18 +00:00
disabled: Boolean,
2017-10-26 07:18:08 +00:00
},
model: {
prop: 'value',
},
2017-11-06 09:46:08 +00:00
provide () {
return {
2017-11-07 03:58:47 +00:00
checkboxGroupContext: this,
2017-11-06 09:46:08 +00:00
}
},
2017-11-02 03:48:38 +00:00
data () {
const { value, defaultValue } = this
return {
2018-01-16 07:41:00 +00:00
sValue: value || defaultValue,
2017-11-02 03:48:38 +00:00
}
},
2017-10-26 07:18:08 +00:00
methods: {
handleChange (event) {
const target = event.target
2017-11-02 03:48:38 +00:00
const { value: targetValue, checked } = target
2018-01-16 07:41:00 +00:00
const { sValue } = this
2017-10-26 07:18:08 +00:00
let newVal = []
if (checked) {
2018-01-16 07:41:00 +00:00
newVal = [...sValue, targetValue]
2017-10-26 07:18:08 +00:00
} else {
2018-01-16 07:41:00 +00:00
newVal = [...sValue]
2017-11-02 03:48:38 +00:00
const index = newVal.indexOf(targetValue)
2017-10-26 07:18:08 +00:00
index >= 0 && newVal.splice(index, 1)
}
2017-11-02 03:48:38 +00:00
newVal = [...new Set(newVal)]
2017-12-27 10:15:11 +00:00
if (!hasProp(this, 'value')) {
2018-01-16 07:41:00 +00:00
this.sValue = newVal
2017-11-02 03:48:38 +00:00
}
this.$emit('input', newVal)
this.$emit('change', newVal)
2017-10-26 07:18:08 +00:00
},
2018-01-16 07:41:00 +00:00
getOptions () {
const { options } = this.$props
return options.map(option => {
if (typeof option === 'string') {
return {
label: option,
value: option,
}
}
return option
})
},
toggleOption (option) {
const optionIndex = this.sValue.indexOf(option.value)
const value = [...this.sValue]
if (optionIndex === -1) {
value.push(option.value)
} else {
value.splice(optionIndex, 1)
}
if (!hasProp(this, 'value')) {
this.sValue = value
}
this.$emit('input', value)
this.$emit('change', value)
},
2017-10-26 07:18:08 +00:00
},
2018-01-16 07:41:00 +00:00
render () {
const { $props: props, $data: state, $slots } = this
const { prefixCls, options } = props
let children = $slots.default
if (options && options.length > 0) {
children = this.getOptions().map(option => (
<Checkbox
key={option.value}
disabled={'disabled' in option ? option.disabled : props.disabled}
value={option.value}
checked={state.sValue.indexOf(option.value) !== -1}
onChange={() => this.toggleOption(option)}
class={`${prefixCls}-item`}
>
{option.label}
</Checkbox>
))
}
return (
<div class={prefixCls}>
{children}
</div>
)
2017-10-26 07:18:08 +00:00
},
watch: {
value (val) {
2018-01-16 07:41:00 +00:00
this.sValue = val
2017-10-26 07:18:08 +00:00
},
},
}
2018-03-19 02:16:27 +00:00