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

refactor Datepicker

Browse source 
refactor Datepicker  to render subcomponents in template instead of
creating new Vue instances
This commit is contained in:
Sergio Crisostomo 2018-01-16 22:26:00 +01:00
parent 0b51803bce
commit 95eae081bc
7 changed files with 332 additions and 439 deletions
Download patch file Download diff file Expand all files Collapse all files

176
src/components/date-picker/base/date-table.vue
View file

@ -1,88 +1,40 @@
<template>
<div
:class="classes"
@mousemove="handleMouseMove">
<div :class="classes">
<div :class="[prefixCls + '-header']">
<span v-for="day in headerDays" :key="day">
{{day}}
</span>
</div>
<span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index" @click="handleClick(cell)">{{ cell.text }}</em></span>
<span
:class="getCellCls(cell)"
v-for="cell in readCells"
@click="handleClick(cell)"
@mouseenter="handleMouseMove(cell)"
>
<em>{{ cell.text }}</em>
</span>
</div>
</template>
<script>
import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
import { getFirstDayOfMonth, getDayCountOfMonth, clearHours, isInRange } from '../util';
import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale';
const prefixCls = 'ivu-date-picker-cells';
import mixin from './mixin';
import prefixCls from './prefixCls';
const clearHours = function (time) {
const cloneDate = new Date(time);
cloneDate.setHours(0, 0, 0, 0);
return cloneDate.getTime();
};
export default {
mixins: [ Locale ],
mixins: [ Locale, mixin ],
props: {
date: {},
year: {},
month: {},
selectionMode: {
default: 'day'
},
disabledDate: {},
minDate: {},
maxDate: {},
rangeState: {
default () {
return {
endDate: null,
selecting: false
};
}
},
value: ''
/* more props in mixin */
},
data () {
return {
prefixCls: prefixCls,
readCells: []
};
},
watch: {
'rangeState.endDate' (newVal) {
this.markRange(newVal);
},
minDate(newVal, oldVal) {
if (newVal && !oldVal) {
this.rangeState.selecting = true;
this.markRange(newVal);
} else if (!newVal) {
this.rangeState.selecting = false;
this.markRange(newVal);
} else {
this.markRange();
}
},
maxDate(newVal, oldVal) {
if (newVal && !oldVal) {
this.rangeState.selecting = false;
this.markRange(newVal);
// this.$emit('on-pick', {
// minDate: this.minDate,
// maxDate: this.maxDate
// });
}
},
cells: {
handler (cells) {
this.readCells = cells;
},
immediate: true
}
},
computed: {
classes () {
return [
@ -97,14 +49,17 @@
const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
return weekDays;
},
cells () {
const date = new Date(this.year, this.month, 1);
readCells () {
const tableYear = this.tableDate.getFullYear();
const tableMonth = this.tableDate.getMonth();
const date = new Date(tableYear, tableMonth, 1);
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
const day = (getFirstDayOfMonth(date) || 7) - weekStartDay; // day of first day
const today = clearHours(new Date()); // timestamp of today
const selectDay = clearHours(new Date(this.value)); // timestamp of selected day
const minDay = clearHours(new Date(this.minDate));
const maxDay = clearHours(new Date(this.maxDate));
const selectedDays = this.dates.filter(Boolean).map(clearHours); // timestamp of selected days
const [minDay, maxDay] = this.dates.map(clearHours);
const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
@ -127,7 +82,7 @@
const cell = deepCopy(cell_tmpl);
cell.type = 'prev-month';
cell.text = dateCountOfLastMonth - (day - 1) + i;
cell.date = new Date(this.year, this.month - 1, cell.text);
cell.date = new Date(tableYear, tableMonth - 1, cell.text);
const time = clearHours(cell.date);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
@ -137,15 +92,16 @@
for (let i = 1; i <= dateCountOfMonth; i++) {
const cell = deepCopy(cell_tmpl);
cell.text = i;
cell.date = new Date(this.year, this.month, cell.text);
cell.date = new Date(tableYear, tableMonth, cell.text);
const time = clearHours(cell.date);
cell.type = time === today ? 'today' : 'normal';
cell.selected = time === selectDay;
cell.selected = selectedDays.includes(time);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cell.range = time >= minDay && time <= maxDay;
cell.start = this.minDate && time === minDay;
cell.end = this.maxDate && time === maxDay;
if (this.selectionMode === 'range'){
cell.range = isInRange(time, rangeStart, rangeEnd);
cell.start = time === minDay;
cell.end = time === maxDay;
}
cells.push(cell);
}
@ -154,7 +110,7 @@
const cell = deepCopy(cell_tmpl);
cell.type = 'next-month';
cell.text = i;
cell.date = new Date(this.year, this.month + 1, cell.text);
cell.date = new Date(tableYear, tableMonth + 1, cell.text);
const time = clearHours(cell.date);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
@ -164,74 +120,6 @@
}
},
methods: {
handleClick (cell) {
if (cell.disabled) return;
const newDate = cell.date;
if (this.selectionMode === 'range') {
if (this.minDate && this.maxDate) {
const minDate = new Date(newDate.getTime());
const maxDate = null;
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate}, false);
} else if (this.minDate && !this.maxDate) {
if (newDate >= this.minDate) {
const maxDate = new Date(newDate.getTime());
this.rangeState.selecting = false;
this.$emit('on-pick', {minDate: this.minDate, maxDate});
} else {
const minDate = new Date(newDate.getTime());
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
}
} else if (!this.minDate) {
const minDate = new Date(newDate.getTime());
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
}
} else {
this.$emit('on-pick', newDate);
}
this.$emit('on-pick-click');
},
handleMouseMove (event) {
if (!this.rangeState.selecting) return;
this.$emit('on-changerange', {
minDate: this.minDate,
maxDate: this.maxDate,
rangeState: this.rangeState
});
const target = event.target;
if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
// if (cell.disabled) return; // todo 待确定
this.rangeState.endDate = cell.date;
}
},
markRange (maxDate) {
const minDate = this.minDate;
if (!maxDate) maxDate = this.maxDate;
const minDay = clearHours(new Date(minDate));
const maxDay = clearHours(new Date(maxDate));
this.cells.forEach(cell => {
if (cell.type === 'today' || cell.type === 'normal') {
const time = clearHours(new Date(this.year, this.month, cell.text));
cell.range = time >= minDay && time <= maxDay;
cell.start = minDate && time === minDay;
cell.end = maxDate && time === maxDay;
}
});
},
getCellCls (cell) {
return [
`${prefixCls}-cell`,

51
src/components/date-picker/base/mixin.js Normal file
View file

@ -0,0 +1,51 @@
export default {
props: {
tableDate: {
type: Date,
required: true
},
disabledDate: {
type: Function
},
selectionMode: {
type: String,
required: true
},
value: {
type: Array,
required: true
},
rangeState: {
type: Object,
default: () => ({
from: null,
to: null,
selecting: false
})
},
},
computed: {
dates(){
const {selectionMode, value, rangeState} = this;
const rangeSelecting = selectionMode === 'range' && rangeState.selecting;
return rangeSelecting ? [rangeState.from] : value;
},
},
methods: {
handleClick (cell) {
if (cell.disabled) return;
const newDate = cell.date;
this.$emit('on-pick', newDate);
this.$emit('on-pick-click');
},
handleMouseMove (cell) {
if (!this.rangeState.selecting) return;
if (cell.disabled) return;
const newDate = cell.date;
this.$emit('on-change-range', newDate);
},
}
};

74
src/components/date-picker/base/month-table.vue Normal file
View file

@ -0,0 +1,74 @@
<template>
<div :class="classes">
<span
:class="getCellCls(cell)"
v-for="cell in cells"
@click="handleClick(cell)"
@mouseenter="handleMouseMove(cell)"
>
<em>{{ cell.text }}</em>
</span>
</div>
</template>
<script>
import { clearHours, isInRange } from '../util';
import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale';
import mixin from './mixin';
import prefixCls from './prefixCls';
export default {
mixins: [ Locale, mixin ],
props: {/* in mixin */},
computed: {
classes() {
return [
`${prefixCls}`,
`${prefixCls}-month`
];
},
cells () {
let cells = [];
const cell_tmpl = {
text: '',
selected: false,
disabled: false
};
const tableYear = this.tableDate.getFullYear();
const rangeStart = this.rangeState.from && clearHours(new Date(this.rangeState.from.getFullYear(), this.rangeState.from.getMonth(), 1));
const rangeEnd = this.rangeState.to && clearHours(new Date(this.rangeState.to.getFullYear(), this.rangeState.to.getMonth(), 1));
const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), date.getMonth(), 1)));
for (let i = 0; i < 12; i++) {
const cell = deepCopy(cell_tmpl);
cell.date = new Date(tableYear, i, 1);
cell.text = this.tCell(i + 1);
const time = clearHours(cell.date);
cell.range = isInRange(time, rangeStart, rangeEnd);
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'month';
cell.selected = selectedDays.includes(time);
cells.push(cell);
}
return cells;
}
},
methods: {
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
[`${prefixCls}-cell-selected`]: cell.selected,
[`${prefixCls}-cell-disabled`]: cell.disabled,
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
}
];
},
tCell (nr) {
return this.t(`i.datepicker.months.m${nr}`);
}
}
};
</script>

2
src/components/date-picker/base/prefixCls.js Normal file
View file

@ -0,0 +1,2 @@
export default 'ivu-date-picker-cells';