From c0b92c6c500f0e7665b03a19b43ffa30ae39e67c Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 11 Feb 2020 15:21:29 +0800 Subject: [PATCH] feat: update checkbox --- build/config.js | 2 +- components/checkbox/Checkbox.jsx | 36 +++++++++++++- components/checkbox/Group.jsx | 22 ++++++++- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- .../checkbox/__tests__/checkbox.test.js | 17 +++++++ components/checkbox/__tests__/group.test.js | 14 +++--- components/checkbox/demo/group.md | 2 +- components/checkbox/index.en-US.md | 47 ++++++++++--------- components/checkbox/index.zh-CN.md | 47 ++++++++++--------- components/descriptions/index.jsx | 2 +- types/checkbox/checkbox-group.d.ts | 1 + 11 files changed, 132 insertions(+), 60 deletions(-) diff --git a/build/config.js b/build/config.js index a4b3920b7..7672cf990 100644 --- a/build/config.js +++ b/build/config.js @@ -1,5 +1,5 @@ module.exports = { dev: { - componentName: 'carousel', // dev components + componentName: 'checkbox', // dev components }, }; diff --git a/components/checkbox/Checkbox.jsx b/components/checkbox/Checkbox.jsx index 8fd331725..6929e08c2 100644 --- a/components/checkbox/Checkbox.jsx +++ b/components/checkbox/Checkbox.jsx @@ -1,13 +1,15 @@ import PropTypes from '../_util/vue-types'; import classNames from 'classnames'; import VcCheckbox from '../vc-checkbox'; -import { getOptionProps, getAttrs, getListeners } from '../_util/props-util'; +import hasProp, { getOptionProps, getAttrs, getListeners } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; +import warning from '../_util/warning'; function noop() {} export default { name: 'ACheckbox', inheritAttrs: false, + __ANT_CHECKBOX: true, model: { prop: 'checked', }, @@ -26,7 +28,36 @@ export default { }, inject: { configProvider: { default: () => ConfigConsumerProps }, - checkboxGroupContext: { default: () => null }, + checkboxGroupContext: { default: () => undefined }, + }, + watch: { + value(value, prevValue) { + this.$nextTick(() => { + const { checkboxGroupContext: checkboxGroup = {} } = this; + if (checkboxGroup.registerValue && checkboxGroup.cancelValue) { + checkboxGroup.cancelValue(prevValue); + checkboxGroup.registerValue(value); + } + }); + }, + }, + mounted() { + const { value, checkboxGroupContext: checkboxGroup = {} } = this; + if (checkboxGroup.registerValue) { + checkboxGroup.registerValue(value); + } + + warning( + hasProp(this, 'checked') || this.checkboxGroupContext || !hasProp(this, 'value'), + 'Checkbox', + '`value` is not validate prop, do you mean `checked`?', + ); + }, + beforeDestroy() { + const { value, checkboxGroupContext: checkboxGroup = {} } = this; + if (checkboxGroup.cancelValue) { + checkboxGroup.cancelValue(value); + } }, methods: { handleChange(event) { @@ -61,6 +92,7 @@ export default { this.$emit('change', ...args); checkboxGroup.toggleOption({ label: children, value: props.value }); }; + checkboxProps.props.name = checkboxGroup.name; checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1; checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled; } else { diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index 6b4ece17f..626f79deb 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -10,6 +10,7 @@ export default { prop: 'value', }, props: { + name: PropTypes.string, prefixCls: PropTypes.string, defaultValue: PropTypes.array, value: PropTypes.array, @@ -28,6 +29,7 @@ export default { const { value, defaultValue } = this; return { sValue: value || defaultValue || [], + registeredValues: [], }; }, watch: { @@ -52,7 +54,15 @@ export default { return { ...option, label }; }); }, + cancelValue(value) { + this.registeredValues = this.registeredValues.filter(val => val !== value); + }, + + registerValue(value) { + this.registeredValues = [...this.registeredValues, value]; + }, toggleOption(option) { + const { registeredValues } = this; const optionIndex = this.sValue.indexOf(option.value); const value = [...this.sValue]; if (optionIndex === -1) { @@ -63,8 +73,16 @@ export default { if (!hasProp(this, 'value')) { this.sValue = value; } - this.$emit('input', value); - this.$emit('change', value); + const options = this.getOptions(); + const val = value + .filter(val => registeredValues.indexOf(val) !== -1) + .sort((a, b) => { + const indexA = options.findIndex(opt => opt.value === a); + const indexB = options.findIndex(opt => opt.value === b); + return indexA - indexB; + }); + this.$emit('input', val); + this.$emit('change', val); }, }, render() { diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap index 72d6526c2..92f77f115 100644 --- a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap +++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap @@ -24,7 +24,7 @@ exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
-

+



diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.js index eabc078b6..ecf63c288 100644 --- a/components/checkbox/__tests__/checkbox.test.js +++ b/components/checkbox/__tests__/checkbox.test.js @@ -1,9 +1,12 @@ import { mount } from '@vue/test-utils'; import Checkbox from '..'; import focusTest from '../../../tests/shared/focusTest'; +import { resetWarned } from '../../_util/warning'; +import mountTest from '../../../tests/shared/mountTest'; describe('Checkbox', () => { focusTest(Checkbox); + mountTest(Checkbox); it('responses hover events', () => { const onMouseEnter = jest.fn(); const onMouseLeave = jest.fn(); @@ -21,4 +24,18 @@ describe('Checkbox', () => { wrapper.trigger('mouseleave'); expect(onMouseLeave).toHaveBeenCalled(); }); + it('warning if set `value`', () => { + resetWarned(); + + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + mount(Checkbox, { + propsData: { + value: 'xxx', + }, + }); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antdv: Checkbox] `value` is not validate prop, do you mean `checked`?', + ); + errorSpy.mockRestore(); + }); }); diff --git a/components/checkbox/__tests__/group.test.js b/components/checkbox/__tests__/group.test.js index 7760f7914..f54176cbe 100644 --- a/components/checkbox/__tests__/group.test.js +++ b/components/checkbox/__tests__/group.test.js @@ -1,8 +1,10 @@ import { mount } from '@vue/test-utils'; import { asyncExpect } from '@/tests/utils'; import Checkbox from '../index'; +import mountTest from '../../../tests/shared/mountTest'; describe('CheckboxGroup', () => { + mountTest(Checkbox.Group); it('should work basically', () => { const onChange = jest.fn(); const wrapper = mount( @@ -19,22 +21,22 @@ describe('CheckboxGroup', () => { .findAll('.ant-checkbox-input') .at(0) .trigger('change'); - expect(onChange).toBeCalledWith(['Apple']); + expect(onChange).toHaveBeenCalledWith(['Apple']); wrapper .findAll('.ant-checkbox-input') .at(1) .trigger('change'); - expect(onChange).toBeCalledWith(['Apple', 'Pear']); + expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear']); wrapper .findAll('.ant-checkbox-input') .at(2) .trigger('change'); - expect(onChange).toBeCalledWith(['Apple', 'Pear', 'Orange']); + expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear', 'Orange']); wrapper .findAll('.ant-checkbox-input') .at(1) .trigger('change'); - expect(onChange).toBeCalledWith(['Apple', 'Orange']); + expect(onChange).toHaveBeenCalledWith(['Apple', 'Orange']); }); it('does not trigger onChange callback of both Checkbox and CheckboxGroup when CheckboxGroup is disabled', () => { @@ -89,12 +91,12 @@ describe('CheckboxGroup', () => { .findAll('.ant-checkbox-input') .at(0) .trigger('change'); - expect(onChangeGroup).toBeCalledWith(['Apple']); + expect(onChangeGroup).toHaveBeenCalledWith(['Apple']); groupWrapper .findAll('.ant-checkbox-input') .at(1) .trigger('change'); - expect(onChangeGroup).toBeCalledWith(['Apple']); + expect(onChangeGroup).toHaveBeenCalledWith(['Apple']); }); it('passes prefixCls down to checkbox', () => { diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md index 215c9a761..d22f3d4b7 100644 --- a/components/checkbox/demo/group.md +++ b/components/checkbox/demo/group.md @@ -11,7 +11,7 @@ Generate a group of checkboxes from an array ```tpl