Commit 8c4cc3837989178af8bef549b65888b701ab2e44
Committed by
GitHub
Merge pull request #1858 from SergioCrisostomo/fix-1851
Propagate type changes to panel
Showing
2 changed files
with
55 additions
and
1 deletions
Show diff stats
src/components/date-picker/picker/date-picker.js
@@ -23,6 +23,17 @@ export default { | @@ -23,6 +23,17 @@ export default { | ||
23 | }, | 23 | }, |
24 | value: {} | 24 | value: {} |
25 | }, | 25 | }, |
26 | + watch: { | ||
27 | + type(value){ | ||
28 | + const typeMap = { | ||
29 | + year: 'year', | ||
30 | + month: 'month', | ||
31 | + date: 'day' | ||
32 | + }; | ||
33 | + const validType = oneOf(value, Object.keys(typeMap)); | ||
34 | + if (validType) this.Panel.selectionMode = typeMap[value]; | ||
35 | + } | ||
36 | + }, | ||
26 | created () { | 37 | created () { |
27 | if (!this.currentValue) { | 38 | if (!this.currentValue) { |
28 | if (this.type === 'daterange' || this.type === 'datetimerange') { | 39 | if (this.type === 'daterange' || this.type === 'datetimerange') { |
test/unit/specs/date-picker.spec.js
1 | -import { createVue, destroyVM, stringToDate } from '../util'; | 1 | +import { createVue, destroyVM, stringToDate, promissedTick } from '../util'; |
2 | 2 | ||
3 | describe('DatePicker.vue', () => { | 3 | describe('DatePicker.vue', () => { |
4 | let vm; | 4 | let vm; |
@@ -76,6 +76,49 @@ describe('DatePicker.vue', () => { | @@ -76,6 +76,49 @@ describe('DatePicker.vue', () => { | ||
76 | }); | 76 | }); |
77 | }); | 77 | }); |
78 | 78 | ||
79 | + it('should change type progamatically', done => { | ||
80 | + vm = createVue({ | ||
81 | + template: '<Date-picker :type="dateType"></Date-picker>', | ||
82 | + data() { | ||
83 | + return { | ||
84 | + dateType: 'month' | ||
85 | + }; | ||
86 | + } | ||
87 | + }); | ||
88 | + | ||
89 | + const picker = vm.$children[0]; | ||
90 | + picker.handleIconClick(); | ||
91 | + vm.$nextTick(() => { | ||
92 | + const panel = vm.$el.querySelector('.ivu-picker-panel-content'); | ||
93 | + const dayPanel = panel.querySelector('[class="ivu-date-picker-cells"]'); | ||
94 | + const monthPanel = panel.querySelector('.ivu-date-picker-cells-month'); | ||
95 | + const yearPanel = panel.querySelector('.ivu-date-picker-cells-year'); | ||
96 | + | ||
97 | + expect(dayPanel.style.display).to.equal('none'); | ||
98 | + expect(monthPanel.style.display).to.equal(''); | ||
99 | + expect(yearPanel.style.display).to.equal('none'); | ||
100 | + | ||
101 | + expect(picker.type).to.equal('month'); | ||
102 | + expect(picker.selectionMode).to.equal('month'); | ||
103 | + | ||
104 | + vm.dateType = 'year'; | ||
105 | + promissedTick(picker) | ||
106 | + .then(() => { | ||
107 | + expect(picker.type).to.equal('year'); | ||
108 | + expect(picker.selectionMode).to.equal('year'); | ||
109 | + | ||
110 | + vm.dateType = 'date'; | ||
111 | + return promissedTick(picker); | ||
112 | + }) | ||
113 | + .then(() => { | ||
114 | + expect(picker.type).to.equal('date'); | ||
115 | + expect(picker.selectionMode).to.equal('day'); | ||
116 | + | ||
117 | + done(); | ||
118 | + }); | ||
119 | + }); | ||
120 | + }); | ||
121 | + | ||
79 | it('should have same behavior after a reset as before the reset', done => { | 122 | it('should have same behavior after a reset as before the reset', done => { |
80 | vm = createVue(` | 123 | vm = createVue(` |
81 | <Date-picker type="datetimerange"></Date-picker> | 124 | <Date-picker type="datetimerange"></Date-picker> |