feat: update checkbox divider dropdown

pull/309/head
tangjinzhou 2018-11-30 22:58:46 +08:00
parent 6b5c0a404b
commit 380331df80
8 changed files with 28 additions and 5 deletions

View File

@ -55,7 +55,10 @@ export default {
} = props
const checkboxProps = { props: { ...restProps, prefixCls }, on: restListeners, attrs: getAttrs(this) }
if (checkboxGroup) {
checkboxProps.on.change = () => checkboxGroup.toggleOption({ label: children, value: props.value })
checkboxProps.on.change = (...args) => {
this.$emit('change', ...args)
checkboxGroup.toggleOption({ label: children, value: props.value })
}
checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1
checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled
} else {

View File

@ -1,6 +1,7 @@
import Checkbox from './Checkbox'
import hasProp from '../_util/props-util'
function noop () {}
export default {
name: 'ACheckboxGroup',
props: {
@ -82,7 +83,7 @@ export default {
disabled={'disabled' in option ? option.disabled : props.disabled}
value={option.value}
checked={state.sValue.indexOf(option.value) !== -1}
onChange={() => this.toggleOption(option)}
onChange={option.onChange || noop}
class={`${groupPrefixCls}-item`}
>
{option.label}

View File

@ -103,4 +103,21 @@ describe('CheckboxGroup', () => {
expect(wrapper.vm.sValue).toEqual(['Apple'])
})
})
// https://github.com/ant-design/ant-design/issues/12642
it('should trigger onChange in sub Checkbox', () => {
const onChange = jest.fn()
const wrapper = mount({
render () {
return (
<Checkbox.Group>
<Checkbox value='my' onChange={onChange} />
</Checkbox.Group>
)
},
})
wrapper.findAll('.ant-checkbox-input').at(0).trigger('change')
expect(onChange).toBeCalled()
expect(onChange.mock.calls[0][0].target.value).toEqual('my')
})
})

View File

@ -29,6 +29,7 @@
category: 'Components',
subtitle: '多选框',
type: 'Data Entry',
zhType: '数据录入',
title: 'Checkbox',
render () {
return (

View File

@ -23,7 +23,7 @@
| -------- | ----------- | ---- | ------- |
| defaultValue | Default selected value | string\[] | \[] |
| disabled | Disable all checkboxes | boolean | false |
| options | Specifies options | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | \[] |
| options | Specifies options | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
| value | Used for setting the currently selected value. | string\[] | \[] |
#### events

View File

@ -25,9 +25,8 @@
| --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] |
| disabled | 整组失效 | boolean | false |
| options | 指定可选项 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | \[] |
| options | 指定可选项 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
| value | 指定选中的选项 | string\[] | \[] |
| onChange | 变化时回调函数 | Function(checkedValue) | - |
#### 事件
| 事件名称 | 说明 | 回调参数 |

View File

@ -23,6 +23,7 @@ const md = {
export default {
category: 'Components',
type: 'Other',
zhType: '其他',
title: 'Divider',
subtitle: '分割线',
render () {

View File

@ -27,6 +27,7 @@ export default {
category: 'Components',
subtitle: '下拉菜单',
type: 'Navigation',
zhType: '导航',
title: 'Dropdown',
render () {
return (