From dbac632fc324db47d17fdc3c67ef82a6130a4a61 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Mon, 27 Jul 2020 16:04:37 +0800 Subject: [PATCH] fix: calendar v-model not work --- antdv-demo | 2 +- breakChange-2.x.md | 6 + .../__snapshots__/index.test.js.snap | 202 +++++++++++++----- components/calendar/__tests__/index.test.js | 102 +++------ components/calendar/index.jsx | 5 +- components/vc-select/SelectTrigger.jsx | 2 +- examples/App.vue | 2 +- examples/index.js | 1 + 8 files changed, 194 insertions(+), 128 deletions(-) diff --git a/antdv-demo b/antdv-demo index 0946782cc..fedb9ecff 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 0946782cced82b75cd9a75a80fa97814381e9d19 +Subproject commit fedb9ecff3abc0ef5d7f57cf5cee1f8352dd9d85 diff --git a/breakChange-2.x.md b/breakChange-2.x.md index 850bc1591..ab1a183da 100644 --- a/breakChange-2.x.md +++ b/breakChange-2.x.md @@ -113,3 +113,9 @@ customRender( text, record, index, column ); => customRender({ text, record, ind expandedRowRender(record, index, indent, expanded) => expandedRowRender({ record, index, indent, expanded }) filterIcon(filtered, column) => filterIcon({ filtered, column }) + +## calendar + +dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender + +function (date, today?) => function({current, today?}) diff --git a/components/calendar/__tests__/__snapshots__/index.test.js.snap b/components/calendar/__tests__/__snapshots__/index.test.js.snap index 2c7ccfa2d..21b00d630 100644 --- a/components/calendar/__tests__/__snapshots__/index.test.js.snap +++ b/components/calendar/__tests__/__snapshots__/index.test.js.snap @@ -3,27 +3,35 @@ exports[`Calendar Calendar should support locale 1`] = `
-
-
+ +
+ +
-
-
+ +
+ +
-
+
+
- +
+ @@ -35,266 +43,356 @@ exports[`Calendar Calendar should support locale 1`] = ` + + + + + + diff --git a/components/calendar/__tests__/index.test.js b/components/calendar/__tests__/index.test.js index b54b88ffc..ec6d798ce 100644 --- a/components/calendar/__tests__/index.test.js +++ b/components/calendar/__tests__/index.test.js @@ -12,7 +12,7 @@ function $$(className) { } describe('Calendar', () => { mountTest(Calendar); - beforeAll(() => { + beforeEach(() => { document.body.innerHTML = ''; }); it('Calendar should be selectable', async () => { @@ -26,10 +26,7 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - wrapper - .findAll('.ant-fullcalendar-cell') - .at(0) - .trigger('click'); + wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click'); }); await asyncExpect(() => { expect(onSelect).toHaveBeenCalledWith(expect.anything()); @@ -56,14 +53,8 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - wrapper - .findAll('[title="February 1, 2018"]') - .at(0) - .trigger('click'); - wrapper - .findAll('[title="February 2, 2018"]') - .at(0) - .trigger('click'); + wrapper.findAll('[title="February 1, 2018"]')[0].trigger('click'); + wrapper.findAll('[title="February 2, 2018"]')[0].trigger('click'); expect(onSelect.mock.calls.length).toBe(1); }); }); @@ -86,10 +77,7 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - wrapper - .findAll('[title="February 20, 2018"]') - .at(0) - .trigger('click'); + wrapper.findAll('[title="February 20, 2018"]')[0].trigger('click'); expect(wrapper.find('[title="February 20, 2018"]').classes()).toContain( 'ant-fullcalendar-disabled-cell', ); @@ -116,32 +104,17 @@ describe('Calendar', () => { { sync: false }, ); await asyncExpect(() => { - expect( - wrapper - .findAll('[title="Jan"]') - .at(0) - .classes(), - ).toContain('ant-fullcalendar-month-panel-cell-disabled'); - expect( - wrapper - .findAll('[title="Feb"]') - .at(0) - .classes(), - ).not.toContain('ant-fullcalendar-month-panel-cell-disabled'); - expect( - wrapper - .findAll('[title="Jun"]') - .at(0) - .classes(), - ).toContain('ant-fullcalendar-month-panel-cell-disabled'); - wrapper - .findAll('[title="Jan"]') - .at(0) - .trigger('click'); - wrapper - .findAll('[title="Mar"]') - .at(0) - .trigger('click'); + expect(wrapper.findAll('[title="Jan"]')[0].classes()).toContain( + 'ant-fullcalendar-month-panel-cell-disabled', + ); + expect(wrapper.findAll('[title="Feb"]')[0].classes()).not.toContain( + 'ant-fullcalendar-month-panel-cell-disabled', + ); + expect(wrapper.findAll('[title="Jun"]')[0].classes()).toContain( + 'ant-fullcalendar-month-panel-cell-disabled', + ); + wrapper.findAll('[title="Jan"]')[0].trigger('click'); + wrapper.findAll('[title="Mar"]')[0].trigger('click'); expect(onSelect.mock.calls.length).toBe(1); }); }); @@ -186,13 +159,11 @@ describe('Calendar', () => { const monthMode = 'month'; const yearMode = 'year'; const wrapper = mount(Calendar, { sync: false }); - await asyncExpect(() => { - expect(wrapper.vm.sMode).toEqual(monthMode); - wrapper.setProps({ mode: 'year' }); - }); - await asyncExpect(() => { - expect(wrapper.vm.sMode).toEqual(yearMode); - }); + await sleep(50); + expect(wrapper.vm.sMode).toEqual(monthMode); + wrapper.setProps({ mode: 'year' }); + await sleep(50); + expect(wrapper.vm.sMode).toEqual(yearMode); }); it('Calendar should switch mode', async () => { @@ -242,10 +213,7 @@ describe('Calendar', () => { }, sync: false, }); - wrapper - .findAll('.ant-fullcalendar-cell') - .at(0) - .trigger('click'); + wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click'); expect(onPanelChange).toHaveBeenCalled(); expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1); @@ -260,12 +228,14 @@ describe('Calendar', () => { onPanelChange, }, sync: false, + attachTo: 'body', }); + await sleep(300); expect(wrapper.vm.sMode).toBe('month'); expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(1); expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(0); - wrapper.findAll('.ant-radio-button-input[value="year"]').trigger('change'); - await sleep(50); + await wrapper.findAll('.ant-radio-button-input[value="year"]')[0].trigger('change'); + await sleep(300); expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(0); expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(1); expect(onPanelChange).toHaveBeenCalled(); @@ -293,10 +263,7 @@ describe('Calendar', () => { }, ); await sleep(50); - wrapper - .findAll('.ant-fullcalendar-year-select') - .at(0) - .trigger('click'); + wrapper.findAll('.ant-fullcalendar-year-select')[0].trigger('click'); await sleep(50); $$('.ant-select-dropdown-menu-item')[0].click(); await sleep(50); @@ -353,15 +320,9 @@ describe('Calendar', () => { }, ); await sleep(50); - wrapper - .findAll('.ant-fullcalendar-month-select') - .at(0) - .trigger('click'); + wrapper.findAll('.ant-fullcalendar-month-select')[0].trigger('click'); await sleep(50); - wrapper - .findAll('.ant-select-dropdown-menu-item') - .at(0) - .trigger('click'); + wrapper.findAll('.ant-select-dropdown-menu-item')[0].trigger('click'); await sleep(50); expect(onValueChange).toHaveBeenCalledWith(value.month(10)); }); @@ -381,10 +342,7 @@ describe('Calendar', () => { ); }, }); - wrapper - .findAll('input') - .at(1) - .trigger('change'); + wrapper.findAll('input')[1].trigger('change'); expect(onTypeChange).toHaveBeenCalledWith('year'); }); }); diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index e67570f3a..5f0d23176 100644 --- a/components/calendar/index.jsx +++ b/components/calendar/index.jsx @@ -111,10 +111,13 @@ const Calendar = { this.setState({ sValue: value }); } if (way === 'select') { + const val = valueFormat ? momentToString(value, valueFormat) : value; if (prevValue && prevValue.month() !== value.month()) { this.triggerPanelChange(value, mode); + } else { + this.$emit('update:value', val); } - this.$emit('select', valueFormat ? momentToString(value, valueFormat) : value); + this.$emit('select', val); } else if (way === 'changePanel') { this.triggerPanelChange(value, mode); } diff --git a/components/vc-select/SelectTrigger.jsx b/components/vc-select/SelectTrigger.jsx index d0ee971d3..45dd6822b 100644 --- a/components/vc-select/SelectTrigger.jsx +++ b/components/vc-select/SelectTrigger.jsx @@ -90,7 +90,7 @@ export default { setDropdownWidth() { this.cancelRafInstance(); this.rafInstance = raf(() => { - const width = findDOMNode(this).offsetWidth; + const width = findDOMNode(this)?.offsetWidth; if (width !== this.dropdownWidth) { this.setState({ dropdownWidth: width }); } diff --git a/examples/App.vue b/examples/App.vue index c620a40e8..891a9d481 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -4,7 +4,7 @@
Su Mo Tu
30
-
+
+ +
01
-
+
+ +
02
-
+
+ +
03
-
+
+ +
04
-
+
+ +
05
-
+
+ +
06
-
+
+ +
07
-
+
+ +
08
-
+
+ +
09
-
+
+ +
10
-
+
+ +
11
-
+
+ +
12
-
+
+ +
13
-
+
+ +
14
-
+
+ +
15
-
+
+ +
16
-
+
+ +
17
-
+
+ +
18
-
+
+ +
19
-
+
+ +
20
-
+
+ +
21
-
+
+ +
22
-
+
+ +
23
-
+
+ +
24
-
+
+ +
25
-
+
+ +
26
-
+
+ +
27
-
+
+ +
28
-
+
+ +
29
-
+
+ +
30
-
+
+ +
31
-
+
+ +
01
-
+
+ +
02
-
+
+ +
03
-
+
+ +
04
-
+
+ +
05
-
+
+ +
06
-
+
+ +
07
-
+
+ +
08
-
+
+ +
09
-
+
+ +
10
-
+
+ +