Commit 9ffdd6daea2b199af1875a1fed347dfbcd5238b5
1 parent
ccb6a76d
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 | 23 | }, |
| 24 | 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 | 37 | created () { |
| 27 | 38 | if (!this.currentValue) { |
| 28 | 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 | 3 | describe('DatePicker.vue', () => { |
| 4 | 4 | let vm; |
| ... | ... | @@ -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 | 122 | it('should have same behavior after a reset as before the reset', done => { |
| 80 | 123 | vm = createVue(` |
| 81 | 124 | <Date-picker type="datetimerange"></Date-picker> | ... | ... |