drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1580 from SergioCrisostomo/2.0

Browse source 
Time-Picker new feature: allow steps in lists
This commit is contained in:
Aresn 2017-08-13 15:40:53 +08:00 • committed by GitHub
commit 06b2a84839
6 changed files with 114 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/date-picker/base/time-spinner.vue
View file

@ -1,18 +1,18 @@
<template>
<div :class="classes">
<div :class="[prefixCls+ '-list']" ref="hours">
<ul :class="[prefixCls + '-ul']" @click="handleClickHours">
<li :class="getCellCls(item)" v-for="(item, index) in hoursList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
<ul :class="[prefixCls + '-ul']">
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" @click="handleClick('hours', item)">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" ref="minutes">
<ul :class="[prefixCls + '-ul']" @click="handleClickMinutes">
<li :class="getCellCls(item)" v-for="(item, index) in minutesList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
<ul :class="[prefixCls + '-ul']">
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" @click="handleClick('minutes', item)">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" v-show="showSeconds" ref="seconds">
<ul :class="[prefixCls + '-ul']" @click="handleClickSeconds">
<li :class="getCellCls(item)" v-for="(item, index) in secondsList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
<ul :class="[prefixCls + '-ul']">
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" @click="handleClick('seconds', item)">{{ formatTime(item.text) }}</li>
</ul>
</div>
</div>
@ -41,10 +41,15 @@
showSeconds: {
type: Boolean,
default: true
},
steps: {
type: Array,
default: () => []
}
},
data () {
return {
spinerSteps: [1, 1, 1].map((one, i) => Math.abs(this.steps[i]) || one),
prefixCls: prefixCls,
compiled: false
};
@ -60,6 +65,7 @@
},
hoursList () {
let hours = [];
const step = this.spinerSteps[0];
const hour_tmpl = {
text: 0,
selected: false,
@ -67,7 +73,7 @@
hide: false
};
for (let i = 0; i < 24; i++) {
for (let i = 0; i < 24; i += step) {
const hour = deepCopy(hour_tmpl);
hour.text = i;
@ -83,6 +89,7 @@
},
minutesList () {
let minutes = [];
const step = this.spinerSteps[1];
const minute_tmpl = {
text: 0,
selected: false,
@ -90,7 +97,7 @@
hide: false
};
for (let i = 0; i < 60; i++) {
for (let i = 0; i < 60; i += step) {
const minute = deepCopy(minute_tmpl);
minute.text = i;
@ -101,11 +108,11 @@
if (this.minutes === i) minute.selected = true;
minutes.push(minute);
}
return minutes;
},
secondsList () {
let seconds = [];
const step = this.spinerSteps[2];
const second_tmpl = {
text: 0,
selected: false,
@ -113,7 +120,7 @@
hide: false
};
for (let i = 0; i < 60; i++) {
for (let i = 0; i < 60; i += step) {
const second = deepCopy(second_tmpl);
second.text = i;
@ -138,24 +145,11 @@
}
];
},
handleClickHours (event) {
this.handleClick('hours', event);
},
handleClickMinutes (event) {
this.handleClick('minutes', event);
},
handleClickSeconds (event) {
this.handleClick('seconds', event);
},
handleClick (type, event) {
const target = event.target;
if (target.tagName === 'LI') {
const cell = this[`${type}List`][parseInt(event.target.getAttribute('index'))];
handleClick (type, cell) {
if (cell.disabled) return;
const data = {};
data[type] = cell.text;
this.$emit('on-change', data);
}
this.$emit('on-pick-click');
},
scroll (type, index) {
@ -183,20 +177,24 @@
},
formatTime (text) {
return text < 10 ? '0' + text : text;
},
getItemIndex(type, val){
const item = this[`${type}List`].find(obj => obj.text == val);
return this[`${type}List`].indexOf(item);
}
},
watch: {
hours (val) {
if (!this.compiled) return;
this.scroll('hours', val);
this.scroll('hours', this.getItemIndex('hours', val));
},
minutes (val) {
if (!this.compiled) return;
this.scroll('minutes', val);
this.scroll('minutes', this.getItemIndex('minutes', val));
},
seconds (val) {
if (!this.compiled) return;
this.scroll('seconds', val);
this.scroll('seconds', this.getItemIndex('seconds', val));
}
},
mounted () {

7
src/components/date-picker/panel/time.vue
View file

@ -6,6 +6,7 @@
<time-spinner
ref="timeSpinner"
:show-seconds="showSeconds"
:steps="steps"
:hours="hours"
:minutes="minutes"
:seconds="seconds"
@ -39,6 +40,12 @@
name: 'TimePicker',
mixins: [ Mixin, Locale ],
components: { TimeSpinner, Confirm },
props: {
steps: {
type: Array,
default: () => []
}
},
data () {
return {
prefixCls: prefixCls,

3
src/components/date-picker/picker.vue
View file

@ -32,7 +32,6 @@
</div>
</template>
<script>
import Vue from 'vue';
import iInput from '../../components/input/input.vue';
import Drop from '../../components/select/dropdown.vue';
import clickoutside from '../../directives/clickoutside';
@ -397,7 +396,7 @@
let isConfirm = this.confirm;
const type = this.type;
this.picker = new Vue(this.panel).$mount(this.$refs.picker);
this.picker = this.Panel.$mount(this.$refs.picker);
if (type === 'datetime' || type === 'datetimerange') {
isConfirm = true;
this.picker.showTime = true;

4
src/components/date-picker/picker/date-picker.js
View file

@ -1,3 +1,4 @@
import Vue from 'vue';
import Picker from '../picker.vue';
import DatePanel from '../panel/date.vue';
import DateRangePanel from '../panel/date-range.vue';
@ -31,6 +32,7 @@ export default {
}
}
this.panel = getPanel(this.type);
const panel = getPanel(this.type);
this.Panel = new Vue(panel);
}
};

12
src/components/date-picker/picker/time-picker.js
View file

@ -1,3 +1,4 @@
import Vue from 'vue';
import Picker from '../picker.vue';
import TimePanel from '../panel/time.vue';
import TimeRangePanel from '../panel/time-range.vue';
@ -21,6 +22,10 @@ export default {
},
default: 'time'
},
steps: {
type: Array,
default: () => []
},
value: {}
},
created () {
@ -31,6 +36,11 @@ export default {
this.currentValue = '';
}
}
this.panel = getPanel(this.type);
const Panel = Vue.extend(getPanel(this.type));
this.Panel = new Panel({
propsData: {
steps: this.steps
}
});
}
};

60
test/unit/specs/time-spinner.spec.js Normal file
View file

@ -0,0 +1,60 @@
import { createVue, destroyVM } from '../util';
describe('TimePicker.vue', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('should create a TimePicker component with hours, minutes and seconds', done => {
vm = createVue(`
<Time-Picker></Time-Picker>
`);
const picker = vm.$children[0];
picker.handleIconClick(); // open the picker panels
vm.$nextTick(() => {
const spiners = picker.$el.querySelectorAll('.ivu-time-picker-cells-list');
expect(spiners.length).to.equal(3); // hh:mm:ss
expect(spiners[0].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(24);
expect(spiners[1].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(60);
expect(spiners[2].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(60);
done();
});
});
it('should create a TimePicker component with only hours and minutes', done => {
vm = createVue(`
<Time-Picker format="HH:mm"></Time-Picker>
`);
const picker = vm.$children[0];
picker.handleIconClick(); // open the picker panels
vm.$nextTick(() => {
const spiners = picker.$el.querySelectorAll('.ivu-time-picker-cells-list');
expect([...spiners].filter(el => el.style.display != 'none').length).to.equal(2); // hh:mm
expect(spiners[0].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(24);
expect(spiners[1].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(60);
done();
});
});
it('should create a TimePicker component with steps of 15 minutes', done => {
vm = createVue(`
<Time-Picker :steps="[1, 15]"></Time-Picker>
`);
const picker = vm.$children[0];
picker.handleIconClick(); // open the picker panels
vm.$nextTick(() => {
const spiners = picker.$el.querySelectorAll('.ivu-time-picker-cells-list');
const minutesList = [...spiners[1].querySelectorAll('.ivu-time-picker-cells-cell')];
expect(spiners[0].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(24);
expect(minutesList.map(el => el.textContent).join(',')).to.equal('00,15,30,45');
expect(spiners[1].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(4);
expect(spiners[2].querySelectorAll('.ivu-time-picker-cells-cell').length).to.equal(60);
done();
});
});
});