From b81dff92fee05f14bb0cd612be3675989f483190 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 27 Dec 2018 21:53:43 +0800 Subject: [PATCH] [improvement] DatetimePicker: optimize static methods (#2395) --- packages/circle/index.vue | 12 ++-- packages/col/index.vue | 1 + packages/datetime-picker/index.vue | 95 +++++++++++++++--------------- 3 files changed, 56 insertions(+), 52 deletions(-) diff --git a/packages/circle/index.vue b/packages/circle/index.vue index 9b8c2de58..4afe130a0 100644 --- a/packages/circle/index.vue +++ b/packages/circle/index.vue @@ -26,6 +26,10 @@ import create from '../utils/create'; import { raf, cancel } from '../utils/raf'; import { BLUE, WHITE } from '../utils/color'; +function format(rate) { + return Math.min(Math.max(rate, 0), 100); +} + export default create({ name: 'circle', @@ -100,7 +104,7 @@ export default create({ handler() { this.startTime = Date.now(); this.startRate = this.value; - this.endRate = this.format(this.rate); + this.endRate = format(this.rate); this.increase = this.endRate > this.startRate; this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed); if (this.speed) { @@ -119,14 +123,10 @@ export default create({ const now = Date.now(); const progress = Math.min((now - this.startTime) / this.duration, 1); const rate = progress * (this.endRate - this.startRate) + this.startRate; - this.$emit('input', this.format(parseFloat(rate.toFixed(1)))); + this.$emit('input', format(parseFloat(rate.toFixed(1)))); if (this.increase ? rate < this.endRate : rate > this.endRate) { this.rafId = raf(this.animate); } - }, - - format(rate) { - return Math.min(Math.max(rate, 0), 100); } } }); diff --git a/packages/col/index.vue b/packages/col/index.vue index 82ac612e5..54a2cdee0 100644 --- a/packages/col/index.vue +++ b/packages/col/index.vue @@ -27,6 +27,7 @@ export default create({ gutter() { return (this.$parent && Number(this.$parent.gutter)) || 0; }, + style() { const padding = `${this.gutter / 2}px`; return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {}; diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue index b7cbaeec7..6253a5dc0 100644 --- a/packages/datetime-picker/index.vue +++ b/packages/datetime-picker/index.vue @@ -21,7 +21,36 @@ import { range } from '../utils'; import PickerMixin from '../mixins/picker'; const currentYear = new Date().getFullYear(); -const isValidDate = date => Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime()); + +function isValidDate(date) { + return Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime()); +} + +function padZero(val) { + return `00${val}`.slice(-2); +} + +function times(n, iteratee) { + let index = -1; + const result = Array(n); + + while (++index < n) { + result[index] = iteratee(index); + } + return result; +} + +function getTrueValue(formattedValue) { + if (!formattedValue) return; + while (isNaN(parseInt(formattedValue, 10))) { + formattedValue = formattedValue.slice(1); + } + return parseInt(formattedValue, 10); +} + +function getMonthEndDay(year, month) { + return 32 - new Date(year, month - 1, 32).getDate(); +} export default create({ name: 'datetime-picker', @@ -142,7 +171,7 @@ export default create({ columns() { const results = this.ranges.map(({ type, range: rangeArr }) => { - const values = this.times(rangeArr[1] - rangeArr[0] + 1, index => { + const values = times(rangeArr[1] - rangeArr[0] + 1, index => { let value = rangeArr[0] + index; value = value < 10 ? `0${value}` : `${value}`; return this.formatter(type, value); @@ -157,11 +186,11 @@ export default create({ } }, - methods: { - pad(val) { - return `00${val}`.slice(-2); - }, + mounted() { + this.updateColumnValue(this.innerValue); + }, + methods: { correctValue(value) { // validate value const isDateType = this.type !== 'time'; @@ -175,8 +204,8 @@ export default create({ // time type if (!isDateType) { let [hour, minute] = value.split(':'); - hour = this.pad(range(hour, this.minHour, this.maxHour)); - minute = this.pad(range(minute, this.minMinute, this.maxMinute)); + hour = padZero(range(hour, this.minHour, this.maxHour)); + minute = padZero(range(minute, this.minMinute, this.maxMinute)); return `${hour}:${minute}`; } @@ -188,16 +217,6 @@ export default create({ return new Date(value); }, - times(n, iteratee) { - let index = -1; - const result = Array(n); - - while (++index < n) { - result[index] = iteratee(index); - } - return result; - }, - getBoundary(type, value) { const boundary = this[`${type}Date`]; const year = boundary.getFullYear(); @@ -208,7 +227,7 @@ export default create({ if (type === 'max') { month = 12; - date = this.getMonthEndDay(value.getFullYear(), value.getMonth() + 1); + date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1); hour = 23; minute = 59; } @@ -235,18 +254,6 @@ export default create({ }; }, - getTrueValue(formattedValue) { - if (!formattedValue) return; - while (isNaN(parseInt(formattedValue, 10))) { - formattedValue = formattedValue.slice(1); - } - return parseInt(formattedValue, 10); - }, - - getMonthEndDay(year, month) { - return 32 - new Date(year, month - 1, 32).getDate(); - }, - onConfirm() { this.$emit('confirm', this.innerValue); }, @@ -259,10 +266,10 @@ export default create({ value = `${indexes[0] + this.minHour}:${indexes[1] + this.minMinute}`; } else { const values = picker.getValues(); - const year = this.getTrueValue(values[0]); - const month = this.getTrueValue(values[1]); - const maxDate = this.getMonthEndDay(year, month); - let date = this.getTrueValue(values[2]); + const year = getTrueValue(values[0]); + const month = getTrueValue(values[1]); + const maxDate = getMonthEndDay(year, month); + let date = getTrueValue(values[2]); if (this.type === 'year-month') { date = 1; } @@ -270,8 +277,8 @@ export default create({ let hour = 0; let minute = 0; if (this.type === 'datetime') { - hour = this.getTrueValue(values[3]); - minute = this.getTrueValue(values[4]); + hour = getTrueValue(values[3]); + minute = getTrueValue(values[4]); } value = new Date(year, month - 1, date, hour, minute); @@ -288,7 +295,7 @@ export default create({ updateColumnValue(value) { let values = []; - const { formatter, pad } = this; + const { formatter } = this; if (this.type === 'time') { const pair = value.split(':'); @@ -299,13 +306,13 @@ export default create({ } else { values = [ formatter('year', `${value.getFullYear()}`), - formatter('month', pad(value.getMonth() + 1)), - formatter('day', pad(value.getDate())) + formatter('month', padZero(value.getMonth() + 1)), + formatter('day', padZero(value.getDate())) ]; if (this.type === 'datetime') { values.push( - formatter('hour', pad(value.getHours())), - formatter('minute', pad(value.getMinutes())) + formatter('hour', padZero(value.getHours())), + formatter('minute', padZero(value.getMinutes())) ); } if (this.type === 'year-month') { @@ -317,10 +324,6 @@ export default create({ this.$refs.picker.setValues(values); }); } - }, - - mounted() { - this.updateColumnValue(this.innerValue); } });